Allow overwritting of classnames

Allow arrays and objects of classnames

Author: danez

src/components/Tab.js

@@ -5,6 +5,7 @@ import cx from 'classnames';
 export default class Tab extends Component {
 
   static defaultProps = {
+    className: 'ReactTabs__Tab',
     focus: false,
     id: null,
     panelId: null,
@@ -19,7 +20,7 @@ export default class Tab extends Component {
       PropTypes.object,
       PropTypes.string,
     ]),
-    className: PropTypes.string,
+    className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
     disabled: PropTypes.bool,
     focus: PropTypes.bool, // private
     id: PropTypes.string, // private
@@ -60,7 +61,6 @@ export default class Tab extends Component {
       <li
         {...attributes}
         className={cx(
-          'ReactTabs__Tab',
           className,
           {
             [activeClassName]: selected,

src/components/TabList.js

@@ -4,12 +4,16 @@ import cx from 'classnames';
 
 export default class TabList extends Component {
 
+  static defaultProps = {
+    className: 'ReactTabs__TabList',
+  };
+
   static propTypes = {
     children: PropTypes.oneOfType([
       PropTypes.object,
       PropTypes.array,
     ]),
-    className: PropTypes.string,
+    className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
   };
 
   render() {
@@ -21,10 +25,7 @@ export default class TabList extends Component {
     return (
       <ul
         {...attributes}
-        className={cx(
-          'ReactTabs__TabList',
-          className,
-        )}
+        className={cx(className)}
         role="tablist"
       >
         {children}

src/components/TabPanel.js

@@ -5,13 +5,14 @@ import cx from 'classnames';
 export default class TabPanel extends Component {
 
   static defaultProps = {
+    className: 'ReactTabs__TabPanel',
     style: {},
   };
 
   static propTypes = {
     activeClassName: PropTypes.string, // private
     children: PropTypes.node,
-    className: PropTypes.string,
+    className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
     forceRenderTabPanel: PropTypes.bool, // private
     id: PropTypes.string, // private
     selected: PropTypes.bool, // private
@@ -35,7 +36,6 @@ export default class TabPanel extends Component {
       <div
         {...attributes}
         className={cx(
-          'ReactTabs__TabPanel',
           className,
           {
             [activeClassName]: selected,
@@ -44,7 +44,6 @@ export default class TabPanel extends Component {
         role="tabpanel"
         id={id}
         aria-labelledby={tabId}
-        style={{ ...style, display: selected ? null : 'none' }}
       >
         {(forceRenderTabPanel || selected) ? children : null}
       </div>

src/components/Tabs.js

@@ -17,7 +17,7 @@ export default class Tabs extends Component {
     activeTabClassName: PropTypes.string,
     activeTabPanelClassName: PropTypes.string,
     children: childrenPropType,
-    className: PropTypes.string,
+    className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
     defaultFocus: PropTypes.bool,
     defaultIndex: PropTypes.number,
     disabledTabClassName: PropTypes.string,

src/components/UncontrolledTabs.js

@@ -23,7 +23,7 @@ export default class UncontrolledTabs extends Component {
   static defaultProps = {
     activeTabClassName: 'ReactTabs__Tab--selected',
     activeTabPanelClassName: 'ReactTabs__TabPanel--selected',
-    className: '',
+    className: 'ReactTabs',
     disabledTabClassName: 'ReactTabs__Tab--disabled',
     focus: false,
     forceRenderTabPanel: false,
@@ -33,7 +33,7 @@ export default class UncontrolledTabs extends Component {
     activeTabClassName: PropTypes.string,
     activeTabPanelClassName: PropTypes.string,
     children: childrenPropType,
-    className: PropTypes.string,
+    className: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
     disabledTabClassName: PropTypes.string,
     focus: PropTypes.bool,
     forceRenderTabPanel: PropTypes.bool,
@@ -270,10 +270,7 @@ export default class UncontrolledTabs extends Component {
     return (
       <div
         {...attributes}
-        className={cx(
-          'ReactTabs',
-          className,
-        )}
+        className={cx(className)}
         onClick={this.handleClick}
         onKeyDown={this.handleKeyDown}
         ref={(node) => { this.node = node; }}

style/react-tabs.css

@@ -1,10 +1,10 @@
-.react-tabs [role=tablist] {
+.ReactTabs__TabList {
   border-bottom: 1px solid #aaa;
   margin: 0 0 10px;
   padding: 0;
 }
 
-.react-tabs [role=tab] {
+.ReactTabs__Tab {
   display: inline-block;
   border: 1px solid transparent;
   border-bottom: none;
@@ -15,7 +15,7 @@
   cursor: pointer;
 }
 
-.react-tabs [role=tab][aria-selected=true] {
+.ReactTabs__Tab--selected {
   background: #fff;
   border-color: #aaa;
   color: black;
@@ -24,18 +24,26 @@
   -webkit-border-radius: 5px 5px 0 0;
 }
 
-.react-tabs [role=tab][aria-disabled=true] {
+.ReactTabs__TabPanel {
+  display: none;
+}
+
+.ReactTabs__TabPanel--selected {
+  display: block;
+}
+
+.ReactTabs__Tab--disabled {
   color: GrayText;
   cursor: default;
 }
 
-.react-tabs [role=tab]:focus {
+.ReactTabs__Tab:focus {
   box-shadow: 0 0 5px hsl(208, 99%, 50%);
   border-color: hsl(208, 99%, 50%);
   outline: none;
 }
 
-.react-tabs [role=tab]:focus:after {
+.ReactTabs__Tab:focus:after {
   content: "";
   position: absolute;
   height: 5px;
@@ -44,4 +52,3 @@
   bottom: -5px;
   background: #fff;
 }
-