Adding BEM style class names, and supporting custom className

mzabriskie · mzabriskie · commit 2742248b58a1 · 2015-10-21T22:54:50.000-06:00
closes #42
diff --git a/lib/components/Tab.js b/lib/components/Tab.js
@@ -1,5 +1,6 @@
 import React, {PropTypes} from 'react';
 import { findDOMNode } from 'react-dom';
+import cx from 'classnames';
 
 function syncNodeAttributes(node, props) {
   if (props.selected) {
@@ -18,6 +19,7 @@ module.exports = React.createClass({
   displayName: 'Tab',
 
   propTypes: {
+    className: PropTypes.string,
     id: PropTypes.string,
     selected: PropTypes.bool,
     disabled: PropTypes.bool,
@@ -49,6 +51,14 @@ module.exports = React.createClass({
   render() {
     return (
       <li
+        className={cx(
+          'ReactTabs__Tab',
+          this.props.className,
+          {
+            'ReactTabs__Tab--selected': this.props.selected,
+            'ReactTabs__Tab--disabled': this.props.disabled
+          }
+        )}
         role="tab"
         id={this.props.id}
         aria-selected={this.props.selected ? 'true' : 'false'}
diff --git a/lib/components/TabList.js b/lib/components/TabList.js
@@ -1,9 +1,11 @@
 import React, {PropTypes} from 'react';
+import cx from 'classnames';
 
 module.exports = React.createClass({
   displayName: 'TabList',
 
   propTypes: {
+    className: PropTypes.string,
     children: PropTypes.oneOfType([
       PropTypes.object,
       PropTypes.array
@@ -12,7 +14,13 @@ module.exports = React.createClass({
 
   render() {
     return (
-      <ul role="tablist">
+      <ul
+        className={cx(
+          'ReactTabs__TabList',
+          this.props.className
+        )}
+        role="tablist"
+      >
         {this.props.children}
       </ul>
     );
diff --git a/lib/components/TabPanel.js b/lib/components/TabPanel.js
@@ -1,9 +1,11 @@
 import React, {PropTypes} from 'react';
+import cx from 'classnames';
 
 module.exports = React.createClass({
   displayName: 'TabPanel',
 
   propTypes: {
+    className: PropTypes.string,
     selected: PropTypes.bool,
     id: PropTypes.string,
     tabId: PropTypes.string,
@@ -33,6 +35,13 @@ module.exports = React.createClass({
 
     return (
       <div
+        className={cx(
+          'ReactTabs__TabPanel',
+          this.props.className,
+          {
+            'ReactTabs__TabPanel--selected': this.props.selected
+          }
+        )}
         role="tabpanel"
         id={this.props.id}
         aria-labeledby={this.props.tabId}
diff --git a/lib/components/Tabs.js b/lib/components/Tabs.js
@@ -1,5 +1,6 @@
 import React, {PropTypes, cloneElement} from 'react';
 import { findDOMNode } from 'react-dom';
+import cx from 'classnames';
 import jss from 'js-stylesheet';
 import uuid from '../helpers/uuid';
 import childrenPropType from '../helpers/childrenPropType';
@@ -20,6 +21,7 @@ module.exports = React.createClass({
   displayName: 'Tabs',
 
   propTypes: {
+    className: PropTypes.string,
     selectedIndex: PropTypes.number,
     onSelect: PropTypes.func,
     focus: PropTypes.bool,
@@ -284,7 +286,11 @@ module.exports = React.createClass({
 
     return (
       <div
-        className="react-tabs"
+        className={cx(
+          'ReactTabs',
+          'react-tabs',
+          this.props.className
+        )}
         onClick={this.handleClick}
         onKeyDown={this.handleKeyDown}
       >
diff --git a/lib/components/__tests__/Tab-test.js b/lib/components/__tests__/Tab-test.js
@@ -0,0 +1,48 @@
+import React from 'react';
+import { findDOMNode } from 'react-dom';
+import TestUtils from 'react-addons-test-utils';
+import { Tab } from '../../main';
+import { equal } from 'assert';
+
+/* eslint func-names:0 */
+describe('Tab', function() {
+  it('should have sane defaults', function() {
+    const tab = TestUtils.renderIntoDocument(<Tab/>);
+    const node = findDOMNode(tab);
+
+    equal(node.className, 'ReactTabs__Tab');
+    equal(node.getAttribute('role'), 'tab');
+    equal(node.getAttribute('aria-selected'), 'false');
+    equal(node.getAttribute('aria-expanded'), 'false');
+    equal(node.getAttribute('aria-disabled'), 'false');
+    equal(node.getAttribute('aria-controls'), null);
+    equal(node.getAttribute('id'), null);
+    equal(node.innerHTML, '');
+  });
+
+  it('should accept className', function() {
+    const tab = TestUtils.renderIntoDocument(<Tab className="foobar"/>);
+    const node = findDOMNode(tab);
+
+    equal(node.className, 'ReactTabs__Tab foobar');
+  });
+
+  it('should support being selected', function() {
+    const tab = TestUtils.renderIntoDocument(<Tab selected={true} id="abcd" panelId="1234">Hello</Tab>);
+    const node = findDOMNode(tab);
+
+    equal(node.className, 'ReactTabs__Tab ReactTabs__Tab--selected');
+    equal(node.getAttribute('aria-selected'), 'true');
+    equal(node.getAttribute('aria-expanded'), 'true');
+    equal(node.getAttribute('aria-controls'), '1234');
+    equal(node.getAttribute('id'), 'abcd');
+    equal(node.innerHTML, 'Hello');
+  });
+
+  it('should support being disabled', function() {
+    const tab = TestUtils.renderIntoDocument(<Tab disabled={true}/>);
+    const node = findDOMNode(tab);
+
+    equal(node.className, 'ReactTabs__Tab ReactTabs__Tab--disabled');
+  });
+});
diff --git a/lib/components/__tests__/TabList-test.js b/lib/components/__tests__/TabList-test.js
@@ -0,0 +1,23 @@
+import React from 'react';
+import { findDOMNode } from 'react-dom';
+import TestUtils from 'react-addons-test-utils';
+import { TabList } from '../../main';
+import { equal } from 'assert';
+
+/* eslint func-names:0 */
+describe('Tab', function() {
+  it('should have sane defaults', function() {
+    const tabList = TestUtils.renderIntoDocument(<TabList/>);
+    const node = findDOMNode(tabList);
+
+    equal(node.className, 'ReactTabs__TabList');
+    equal(node.getAttribute('role'), 'tablist');
+  });
+
+  it('should accept className', function() {
+    const tabList = TestUtils.renderIntoDocument(<TabList className="foobar"/>);
+    const node = findDOMNode(tabList);
+
+    equal(node.className, 'ReactTabs__TabList foobar');
+  });
+});
diff --git a/lib/components/__tests__/TabPanel-test.js b/lib/components/__tests__/TabPanel-test.js
@@ -0,0 +1,39 @@
+import React from 'react';
+import { findDOMNode } from 'react-dom';
+import TestUtils from 'react-addons-test-utils';
+import { TabPanel } from '../../main';
+import { equal } from 'assert';
+
+/* eslint func-names:0 */
+describe('Tab', function() {
+  it('should have sane defaults', function() {
+    const tabPanel = TestUtils.renderIntoDocument(<TabPanel>Hola</TabPanel>);
+    const node = findDOMNode(tabPanel);
+
+    equal(node.className, 'ReactTabs__TabPanel');
+    equal(node.getAttribute('role'), 'tabpanel');
+    equal(node.getAttribute('aria-labeledby'), null);
+    equal(node.getAttribute('id'), null);
+    equal(node.innerHTML, '');
+    equal(node.style.display, 'none');
+  });
+
+  it('should accept className', function() {
+    const tabPanel = TestUtils.renderIntoDocument(<TabPanel className="foobar"/>);
+    const node = findDOMNode(tabPanel);
+
+    equal(node.className, 'ReactTabs__TabPanel foobar');
+  });
+
+  it('should support being selected', function() {
+    const tabPanel = TestUtils.renderIntoDocument(<TabPanel selected={true} id="abcd" tabId="1234">Hola</TabPanel>);
+    const node = findDOMNode(tabPanel);
+
+    equal(node.className, 'ReactTabs__TabPanel ReactTabs__TabPanel--selected');
+    equal(node.getAttribute('aria-labeledby'), '1234');
+    equal(node.getAttribute('id'), 'abcd');
+    equal(node.innerHTML, 'Hola');
+    equal(node.style.display, '');
+  });
+});
+
diff --git a/lib/components/__tests__/Tabs-test.js b/lib/components/__tests__/Tabs-test.js
@@ -4,11 +4,15 @@ import TestUtils from 'react-addons-test-utils';
 import { Tabs, Tab, TabPanel, TabList } from '../../main';
 import { ok, equal } from 'assert';
 
-function createTabs(props = {}) {
-  const {selectedIndex=0, focus=false, onSelect=null, forceRenderTabPanel=false} = props;
-
+function createTabs(props = {
+  selectedIndex: 0,
+  focus: false,
+  onSelect: null,
+  forceRenderTabPanel: false,
+  className: null
+}) {
   return (
-    <Tabs focus={focus} selectedIndex={selectedIndex} onSelect={onSelect} forceRenderTabPanel={forceRenderTabPanel}>
+    <Tabs {...props}>
       <TabList>
         <Tab>Foo</Tab>
         <Tab>Bar</Tab>
@@ -48,15 +52,31 @@ describe('react-tabs', function() {
 
     it('should call onSelect when selection changes', function() {
       const called = {index: -1, last: -1};
-      const tabs = TestUtils.renderIntoDocument(createTabs({onSelect: function(index, last) {
-        called.index = index;
-        called.last = last;
-      }}));
+      const tabs = TestUtils.renderIntoDocument(createTabs({
+        onSelect: function(index, last) {
+          called.index = index;
+          called.last = last;
+        }
+      }));
 
       tabs.setSelected(2);
       equal(called.index, 2);
       equal(called.last, 0);
     });
+
+    it('should have a default className', function() {
+      const tabs = TestUtils.renderIntoDocument(createTabs());
+      const node = findDOMNode(tabs);
+
+      equal(node.className, 'ReactTabs react-tabs');
+    });
+
+    it('should accept className', function() {
+      const tabs = TestUtils.renderIntoDocument(createTabs({className: 'foobar'}));
+      const node = findDOMNode(tabs);
+
+      equal(node.className, 'ReactTabs react-tabs foobar');
+    });
   });
 
   describe('a11y', function() {
diff --git a/package.json b/package.json
@@ -35,6 +35,7 @@
     "react-addons-test-utils": "^0.14.0"
   },
   "dependencies": {
+    "classnames": "2.2.0",
     "js-stylesheet": "0.0.1"
   }
 }

Original file line number	Diff line number	Diff line change
`@@ -35,6 +35,7 @@`
`35`	`35`	`"react-addons-test-utils": "^0.14.0"`
`36`	`36`	`},`
`37`	`37`	`"dependencies": {`
	`38`	`+ "classnames": "2.2.0",`
`38`	`39`	`"js-stylesheet": "0.0.1"`
`39`	`40`	`}`
`40`	`41`	`}`