Disabled tab styling (#258)

Tabs now have a proper disabled state.
elastic · Jan 3, 2018 · 7e95424 · 7e95424
1 parent e869da8
commit 7e95424
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 1 deletion.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 **Bug fixes**
 
+- Disabled tab styling. [(#258)[https://github.com/elastic/eui/pull/258]]
 - Proper classname for flexGroup alignItems prop. [(#257)[https://github.com/elastic/eui/pull/257]]
 - Clicking the downArrow icon in `EuiSelect` now triggers selection. [(#255)[https://github.com/elastic/eui/pull/255]]
 - Fixed `euiFormRow` id's from being the same as the containing input and label. [(#251)[https://github.com/elastic/eui/pull/251]]

diff --git a/src-docs/src/views/tabs/tabs.js b/src-docs/src/views/tabs/tabs.js
@@ -13,15 +13,19 @@ class EuiTabsExample extends React.Component {
     this.tabs = [{
       id: 'cobalt',
       name: 'Cobalt',
+      disabled: false,
     }, {
       id: 'dextrose',
       name: 'Dextrose',
+      disabled: false,
     }, {
       id: 'hydrogen',
       name: 'Hydrogen',
+      disabled: true,
     }, {
       id: 'monosodium_glutammate',
       name: 'Monosodium Glutamate',
+      disabled: false,
     }];
 
     this.state = {
@@ -40,6 +44,7 @@ class EuiTabsExample extends React.Component {
       <EuiTab
         onClick={() => this.onSelectedTabChanged(tab.id)}
         isSelected={tab.id === this.state.selectedTabId}
+        disabled={tab.disabled}
         key={index}
       >
         {tab.name}

diff --git a/src/components/tabs/_tabs.scss b/src/components/tabs/_tabs.scss
@@ -30,6 +30,16 @@
     text-decoration: underline;
   }
 
+  &.euiTab-isDisabled {
+    color: $euiColorMediumShade;
+
+    &:hover {
+      cursor: not-allowed;
+      text-decoration: none;
+      color: $euiColorMediumShade;
+    }
+  }
+
   &.euiTab-isSelected {
     cursor: default;
     color: $euiColorPrimary;

diff --git a/src/components/tabs/tab.js b/src/components/tabs/tab.js
@@ -7,10 +7,12 @@ export const EuiTab = ({
   onClick,
   children,
   className,
+  disabled,
   ...rest
 }) => {
   const classes = classNames('euiTab', className, {
-    'euiTab-isSelected': isSelected
+    'euiTab-isSelected': isSelected,
+    'euiTab-isDisabled': disabled,
   });
 
   return (
@@ -20,6 +22,7 @@ export const EuiTab = ({
       type="button"
       className={classes}
       onClick={onClick}
+      disabled={disabled}
       {...rest}
     >
       <span className="euiTab__content">
@@ -31,11 +34,13 @@ export const EuiTab = ({
 
 EuiTab.defaultProps = {
   isSelected: false,
+  disabled: false,
 };
 
 EuiTab.propTypes = {
   isSelected: PropTypes.bool,
   onClick: PropTypes.func.isRequired,
   children: PropTypes.node,
   className: PropTypes.string,
+  disabled: PropTypes.bool,
 };