Make classnames lowercase

Author: danez

src/components/Tab.js

@@ -2,15 +2,17 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import cx from 'classnames';
 
+const DEFAULT_CLASS = 'react-tabs__tab';
+
 export default class Tab extends Component {
   static defaultProps = {
-    className: 'ReactTabs__Tab',
-    disabledClassName: 'ReactTabs__Tab--disabled',
+    className: DEFAULT_CLASS,
+    disabledClassName: `${DEFAULT_CLASS}--disabled`,
     focus: false,
     id: null,
     panelId: null,
     selected: false,
-    selectedClassName: 'ReactTabs__Tab--selected',
+    selectedClassName: `${DEFAULT_CLASS}--selected`,
   };
 
   static propTypes = {
@@ -46,7 +48,7 @@ export default class Tab extends Component {
       className,
       disabled,
       disabledClassName,
-      focus, // eslint-disable-line no-unused-vars
+      focus, // unused
       id,
       panelId,
       selected,

src/components/TabList.js

@@ -4,7 +4,7 @@ import cx from 'classnames';
 
 export default class TabList extends Component {
   static defaultProps = {
-    className: 'ReactTabs__TabList',
+    className: 'react-tabs__tab-list',
   };
 
   static propTypes = {

src/components/TabPanel.js

@@ -2,11 +2,13 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import cx from 'classnames';
 
+const DEFAULT_CLASS = 'react-tabs__tab-panel';
+
 export default class TabPanel extends Component {
   static defaultProps = {
-    className: 'ReactTabs__TabPanel',
+    className: DEFAULT_CLASS,
     forceRender: false,
-    selectedClassName: 'ReactTabs__TabPanel--selected',
+    selectedClassName: `${DEFAULT_CLASS}--selected`,
     style: {},
   };
 
@@ -17,7 +19,6 @@ export default class TabPanel extends Component {
     forceRender: PropTypes.bool,
     id: PropTypes.string, // private
     selected: PropTypes.bool, // private
-    style: PropTypes.object,
     tabId: PropTypes.string, // private
   };
 
@@ -29,7 +30,6 @@ export default class TabPanel extends Component {
       id,
       selected,
       selectedClassName,
-      style,
       tabId,
       ...attributes
     } = this.props;

src/components/UncontrolledTabs.js

@@ -24,7 +24,7 @@ const canUseActiveElement = !!(typeof window !== 'undefined' &&
 
 export default class UncontrolledTabs extends Component {
   static defaultProps = {
-    className: 'ReactTabs',
+    className: 'react-tabs',
     focus: false,
   };
 
@@ -274,15 +274,15 @@ export default class UncontrolledTabs extends Component {
   render() {
     // Delete all known props, so they don't get added to DOM
     const {
-      children,
+      children, // unused
       className,
-      disabledTabClassName,
-      focus,
-      forceRenderTabPanel,
-      onSelect,
-      selectedIndex,
-      selectedTabClassName,
-      selectedTabPanelClassName,
+      disabledTabClassName, // unused
+      focus, // unused
+      forceRenderTabPanel, // unused
+      onSelect, // unused
+      selectedIndex, // unused
+      selectedTabClassName, // unused
+      selectedTabPanelClassName, // unused
       ...attributes
     } = this.props;
 

style/react-tabs.css

@@ -1,10 +1,10 @@
-.ReactTabs__TabList {
+.react-tabs__tab-list {
   border-bottom: 1px solid #aaa;
   margin: 0 0 10px;
   padding: 0;
 }
 
-.ReactTabs__Tab {
+.react-tabs__tab {
   display: inline-block;
   border: 1px solid transparent;
   border-bottom: none;
@@ -15,33 +15,33 @@
   cursor: pointer;
 }
 
-.ReactTabs__Tab--selected {
+.react-tabs__tab--selected {
   background: #fff;
   border-color: #aaa;
   color: black;
   border-radius: 5px 5px 0 0;
 }
 
-.ReactTabs__TabPanel {
+.react-tabs__tab-panel {
   display: none;
 }
 
-.ReactTabs__TabPanel--selected {
+.react-tabs__tab-panel--selected {
   display: block;
 }
 
-.ReactTabs__Tab--disabled {
+.react-tabs__tab--disabled {
   color: GrayText;
   cursor: default;
 }
 
-.ReactTabs__Tab:focus {
+.react-tabs__tab:focus {
   box-shadow: 0 0 5px hsl(208, 99%, 50%);
   border-color: hsl(208, 99%, 50%);
   outline: none;
 }
 
-.ReactTabs__Tab:focus:after {
+.react-tabs__tab:focus:after {
   content: "";
   position: absolute;
   height: 5px;

style/react-tabs.less

@@ -1,11 +1,11 @@
-.ReactTabs {
-  &__TabList {
+.react-tabs {
+  &__tab-list {
     border-bottom: 1px solid #aaa;
     margin: 0 0 10px;
     padding: 0;
   }
 
-  &__Tab {
+  &__tab {
     display: inline-block;
     border: 1px solid transparent;
     border-bottom: none;
@@ -38,7 +38,7 @@
     }
   }
 
-  &__TabPanel {
+  &__tab-panel {
     display: none;
 
     &--selected {

style/react-tabs.scss

@@ -1,11 +1,11 @@
-.ReactTabs {
-  &__TabList {
+.react-tabs {
+  &__tab-list {
     border-bottom: 1px solid #aaa;
     margin: 0 0 10px;
     padding: 0;
   }
 
-  &__Tab {
+  &__tab {
     display: inline-block;
     border: 1px solid transparent;
     border-bottom: none;
@@ -38,7 +38,7 @@
     }
   }
 
-  &__TabPanel {
+  &__tab-panel {
     display: none;
 
     &--selected {