From 88aeeca5d7d4b9f47e9751d47f5c6984485fee3d Mon Sep 17 00:00:00 2001
From: Dave Snider <dave.snider@gmail.com>
Date: Wed, 3 Jan 2018 11:03:13 -0800
Subject: [PATCH 1/2] disabled tab styling

---
 src-docs/src/views/tabs/tabs.js |  5 +++++
 src/components/tabs/_tabs.scss  | 10 ++++++++++
 src/components/tabs/tab.js      |  7 ++++++-
 3 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/src-docs/src/views/tabs/tabs.js b/src-docs/src/views/tabs/tabs.js
index 453db867c71..b975867c1b7 100644
--- 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
index 2312e415e69..6c96bc838ef 100644
--- 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
index 804e0d56fae..f3cd91d55f5 100644
--- 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,6 +34,7 @@ export const EuiTab = ({
 
 EuiTab.defaultProps = {
   isSelected: false,
+  disabled: false,
 };
 
 EuiTab.propTypes = {
@@ -38,4 +42,5 @@ EuiTab.propTypes = {
   onClick: PropTypes.func.isRequired,
   children: PropTypes.node,
   className: PropTypes.string,
+  disabled: PropTypes.bool,
 };

From ae452467c9cc949f428da5f2a6228dd313c1f290 Mon Sep 17 00:00:00 2001
From: Dave Snider <dave.snider@gmail.com>
Date: Wed, 3 Jan 2018 11:07:21 -0800
Subject: [PATCH 2/2] changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 772a0eaf838..0ac7968dbe2 100644
--- 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]]