diff --git a/src/Tabs/Tab.js b/src/Tabs/Tab.js index 543a79862cc663..24bf48f4c5f3ef 100644 --- a/src/Tabs/Tab.js +++ b/src/Tabs/Tab.js @@ -29,6 +29,9 @@ export const styleSheet = createStyleSheet('Tab', (theme) => { rootAccentSelected: { color: theme.palette.accent[500], }, + rootAccentDisabled: { + color: theme.palette.text.disabled, + }, rootInherit: { color: 'inherit', opacity: 0.7, @@ -36,6 +39,9 @@ export const styleSheet = createStyleSheet('Tab', (theme) => { rootInheritSelected: { opacity: 1, }, + rootInheritDisabled: { + opacity: 0.4, + }, label: { fontSize: theme.typography.fontSize, fontWeight: theme.typography.fontWeightMedium, @@ -138,6 +144,7 @@ export default class Tab extends Component { selected, style: styleProp, textColor, + disabled, ...other } = this.props; @@ -163,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); @@ -191,6 +200,7 @@ export default class Tab extends Component { style={style} role="tab" aria-selected={selected} + disabled={disabled} {...other} onClick={this.handleChange} >