Add kuiLocalTab-isDisabled state. (elastic#10830)

* Add kuiLocalTab-isDisabled state. * Update Management header to use kuiLocalTab-isDisabled class.
simianhacker · Mar 27, 2017 · c1910bf · c1910bf
1 parent 72aecf5
commit c1910bf
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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
@@ -48,7 +48,7 @@
         Your Documents
       </a>
 
-      <a class="kuiLocalTab" href="#">
+      <a class="kuiLocalTab kuiLocalTab-isDisabled" href="#">
         Another Tab
       </a>
     </div>