Merge pull request #6112 from irfanhudda/disabled-tab-next

[Tabs] Add a disabled property

docs/api/Tabs/Tab.md

@@ -11,5 +11,6 @@ Props
 | className | string |  | The CSS class name of the root element. |
 | icon | node |  | The icon element. If a string is passed, it will be used as a material icon font ligature. |
 | label | node |  | The label element. |
+| disabled | bool | false | If `true`, the tab will be disabled. |
 
 Any other properties supplied will be spread to the root element.

docs/site/src/demos/tabs/DisabledTabs.js

@@ -0,0 +1,35 @@
+// @flow weak
+/* eslint-disable react/no-multi-comp */
+
+import React, { Component } from 'react';
+import customPropTypes from 'material-ui/utils/customPropTypes';
+import Paper from 'material-ui/Paper';
+import Tabs from 'material-ui/Tabs';
+import Tab from 'material-ui/Tabs/Tab';
+
+export default class DisabledTabs extends Component {
+  static contextTypes = {
+    styleManager: customPropTypes.muiRequired,
+  };
+
+  state = {
+    index: 1,
+  };
+
+  handleChange = (event, index) => {
+    this.setState({ index });
+  };
+
+  render() {
+    return (
+      <Paper>
+        <Tabs index={this.state.index} onChange={this.handleChange}>
+          <Tab label="Disabled" disabled />
+          <Tab label="Active" />
+          <Tab label="Disabled" disabled />
+          <Tab label="Active" />
+        </Tabs>
+      </Paper>
+    );
+  }
+}

docs/site/src/demos/tabs/tabs.md

@@ -31,3 +31,9 @@ Tab labels may be either all icons or all text.
 
 {{demo='demos/tabs/IconTabs.js'}}
 {{demo='demos/tabs/IconLabelTabs.js'}}
+
+## Disabled Tab
+
+Tab may be disabled by setting `disabled` property.
+
+{{demo='demos/tabs/DisabledTabs.js'}}

src/Tabs/Tab.js

@@ -29,13 +29,19 @@ export const styleSheet = createStyleSheet('Tab', (theme) => {
     rootAccentSelected: {
       color: theme.palette.accent[500],
     },
+    rootAccentDisabled: {
+      color: theme.palette.text.disabled,
+    },
     rootInherit: {
       color: 'inherit',
       opacity: 0.7,
     },
     rootInheritSelected: {
       opacity: 1,
     },
+    rootInheritDisabled: {
+      opacity: 0.4,
+    },
     label: {
       fontSize: theme.typography.fontSize,
       fontWeight: theme.typography.fontWeightMedium,
@@ -61,6 +67,10 @@ export default class Tab extends Component {
      * The CSS class name of the root element.
      */
     className: PropTypes.string,
+    /**
+     * If `true`, the tab will be disabled.
+     */
+    disabled: PropTypes.bool,
     /**
      * @ignore
      */
@@ -105,6 +115,10 @@ export default class Tab extends Component {
     ]),
   };
 
+  static defaultProps = {
+    disabled: false,
+  };
+
   static contextTypes = {
     styleManager: customPropTypes.muiRequired,
   };
@@ -130,6 +144,7 @@ export default class Tab extends Component {
       selected,
       style: styleProp,
       textColor,
+      disabled,
       ...other
     } = this.props;
 
@@ -155,8 +170,10 @@ export default class Tab extends Component {
 
     const className = classNames(classes.root, {
       [classes.rootAccent]: textColor === 'accent',
+      [classes.rootAccentDisabled]: disabled && textColor === 'accent',
       [classes.rootAccentSelected]: selected && textColor === 'accent',
       [classes.rootInherit]: textColor === 'inherit',
+      [classes.rootInheritDisabled]: disabled && textColor === 'inherit',
       [classes.rootInheritSelected]: selected && textColor === 'inherit',
       [classes.rootLabelIcon]: icon && label,
     }, classNameProp);
@@ -183,6 +200,7 @@ export default class Tab extends Component {
         style={style}
         role="tab"
         aria-selected={selected}
+        disabled={disabled}
         {...other}
         onClick={this.handleChange}
       >