From b51833bab6697e404dbc909045b6468f1bf179ba Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Fri, 24 Mar 2017 10:39:15 -0700
Subject: [PATCH] Add kuiLocalTab-isDisabled state. (#10830)

* Add kuiLocalTab-isDisabled state.

* Update Management header to use kuiLocalTab-isDisabled class.
---
 src/core_plugins/kibana/public/management/app.html |  2 +-
 ui_framework/components/local_nav/_local_tabs.scss | 13 +++++++++++--
 ui_framework/dist/ui_framework.css                 | 14 +++++++++++---
 .../src/views/local_nav/local_nav_tabs.html        |  2 +-
 4 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/src/core_plugins/kibana/public/management/app.html b/src/core_plugins/kibana/public/management/app.html
index 0393bb27ea137..377d4dc2319ed 100644
--- a/src/core_plugins/kibana/public/management/app.html
+++ b/src/core_plugins/kibana/public/management/app.html
@@ -20,7 +20,7 @@
           ng-if="sectionName"
           ng-repeat="item in section.visibleItems"
           class="kuiLocalTab"
-          ng-class="{ 'kuiLocalTab-isSelected': item.active, 'kuiLocalTab-disabled': item.disabled || !item.url }"
+          ng-class="{ 'kuiLocalTab-isSelected': item.active, 'kuiLocalTab-isDisabled': !item.active && (item.disabled || !item.url) }"
           kbn-href="{{::item.disabled ? '' : item.url}}"
           data-test-subj="{{::item.name}}"
           tooltip="{{::item.tooltip}}"
diff --git a/ui_framework/components/local_nav/_local_tabs.scss b/ui_framework/components/local_nav/_local_tabs.scss
index 7a5df8e0eb693..c711afcc00911 100644
--- a/ui_framework/components/local_nav/_local_tabs.scss
+++ b/ui_framework/components/local_nav/_local_tabs.scss
@@ -19,8 +19,8 @@
     text-decoration: none;
     cursor: pointer;
 
-    &:hover,
-    &:active {
+    &:hover:not(.kuiLocalTab-isDisabled),
+    &:active:not(.kuiLocalTab-isDisabled) {
       color: $localTabTextColor-isHover;
 
       @include darkTheme {
@@ -39,6 +39,15 @@
       }
     }
 
+    /**
+     * 1. We may want to show a tooltip to explain why the tab is disabled, so we will just show
+     *    a regular cursor instead of setting pointer-events: none.
+     */
+    &.kuiLocalTab-isDisabled {
+      opacity: 0.5;
+      cursor: default; /* 1 */
+    }
+
     & + & {
       margin-left: 15px;
     }
diff --git a/ui_framework/dist/ui_framework.css b/ui_framework/dist/ui_framework.css
index 83b97d057f7be..673a921e1801b 100644
--- a/ui_framework/dist/ui_framework.css
+++ b/ui_framework/dist/ui_framework.css
@@ -1258,10 +1258,14 @@ body {
   color: #5a5a5a;
   border-bottom: 2px solid transparent;
   text-decoration: none;
-  cursor: pointer; }
-  .kuiLocalTab:hover, .kuiLocalTab:active {
+  cursor: pointer;
+  /**
+     * 1. We may want to show a tooltip to explain why the tab is disabled, so we will just show
+     *    a regular cursor instead of setting pointer-events: none.
+     */ }
+  .kuiLocalTab:hover:not(.kuiLocalTab-isDisabled), .kuiLocalTab:active:not(.kuiLocalTab-isDisabled) {
     color: #000000; }
-    .theme-dark .kuiLocalTab:hover, .theme-dark .kuiLocalTab:active {
+    .theme-dark .kuiLocalTab:hover:not(.kuiLocalTab-isDisabled), .theme-dark .kuiLocalTab:active:not(.kuiLocalTab-isDisabled) {
       color: #ffffff; }
   .kuiLocalTab.kuiLocalTab-isSelected {
     color: #000000;
@@ -1270,6 +1274,10 @@ body {
     .theme-dark .kuiLocalTab.kuiLocalTab-isSelected {
       color: #ffffff;
       border-bottom-color: #ffffff; }
+  .kuiLocalTab.kuiLocalTab-isDisabled {
+    opacity: 0.5;
+    cursor: default;
+    /* 1 */ }
   .kuiLocalTab + .kuiLocalTab {
     margin-left: 15px; }
   .theme-dark .kuiLocalTab {
diff --git a/ui_framework/doc_site/src/views/local_nav/local_nav_tabs.html b/ui_framework/doc_site/src/views/local_nav/local_nav_tabs.html
index f01076d3f95b5..21dc1637e5ef8 100644
--- a/ui_framework/doc_site/src/views/local_nav/local_nav_tabs.html
+++ b/ui_framework/doc_site/src/views/local_nav/local_nav_tabs.html
@@ -48,7 +48,7 @@
         Your Documents
       </a>
 
-      <a class="kuiLocalTab" href="#">
+      <a class="kuiLocalTab kuiLocalTab-isDisabled" href="#">
         Another Tab
       </a>
     </div>