Merge pull request #2324 from kevinparkerson/tabs-disabled-fix

Fixed issue with being able to select "disabled" tabs

Author: interactivellama

components/component-docs.json

@@ -10115,7 +10115,7 @@
                     }
                 },
                 "required": true,
-                "description": "**Array of locations objects for the Map component.**\n Each location object can contain:\n * `id` : A unique identifier string for the location\n * `name` : Name of the location\n * `address` : Address of the location"
+                "description": "Array of locations objects for the Map component.**\nEach location object can contain:\n * `id` : A unique identifier string for the location\n * `name` : Name of the location\n * `address` : Address of the location"
             },
             "onClickLocation": {
                 "type": {
@@ -15339,22 +15339,17 @@
                 "returns": null
             },
             {
-                "name": "getMasterViewId",
+                "name": "getIsOpen",
                 "docblock": null,
                 "modifiers": [],
                 "params": [],
                 "returns": null
             },
             {
-                "name": "setIsOpen",
+                "name": "getMasterViewId",
                 "docblock": null,
                 "modifiers": [],
-                "params": [
-                    {
-                        "name": "{ isOpen }",
-                        "type": null
-                    }
-                ],
+                "params": [],
                 "returns": null
             },
             {
@@ -15368,13 +15363,6 @@
                     }
                 ],
                 "returns": null
-            },
-            {
-                "name": "masterContent",
-                "docblock": null,
-                "modifiers": [],
-                "params": [],
-                "returns": null
             }
         ],
         "props": {
@@ -15806,7 +15794,7 @@
                                 }
                             },
                             "required": false,
-                            "description": "Event Callbacks\n* `onSelect`: Called when a list item is selected.\n   * event {object} List item click event\n   * Meta {object}\n      * selectedItems {array} List of selected items.\n      * item {object} Last selected item.\n* `onSort`: Called when the list is sorted.\n   * event {object} Sort click event",
+                            "description": "Event Callbacks\n* `onSelect`: Called when a list item is selected. Previously, this event was called when an item was focused. The UX pattern has changed and this event is now called on pressing enter or mouse click.\n   * event {object} List item click event\n   * Meta {object}\n      * selectedItems {array} List of selected items.\n      * item {object} Last selected item.\n* `onSort`: Called when the list is sorted.\n   * event {object} Sort click event",
                             "defaultValue": {
                                 "value": "{}",
                                 "computed": false

components/tabs/index.jsx

@@ -45,7 +45,9 @@ function isTabNode(node) {
 
 // Determine if a tab node is disabled
 function isTabDisabled(node) {
-	if (node.getAttribute) {
+	if (node.classList && node.classList.contains('slds-disabled')) {
+		return true;
+	} else if (node.getAttribute) {
 		return node.getAttribute('aria-disabled') === 'true';
 	}
 

styles/tabs/tab.css

@@ -1,24 +1,33 @@
-.slds-tabs--default .slds-tabs--default__item.slds-disabled,
-.slds-tabs--scoped .slds-tabs--scoped__item.slds-disabled {
+.slds-tabs_default .slds-tabs_default__item.slds-disabled,
+.slds-tabs_scoped .slds-tabs_scoped__item.slds-disabled {
   opacity: 0.5;
 }
-.slds-tabs--default .slds-tabs--default__item.slds-disabled > a:hover,
-.slds-tabs--scoped .slds-tabs--scoped__item.slds-disabled > a:hover,
-.slds-tabs--default .slds-tabs--default__item.slds-disabled > a.slds-tabs--default__link:focus,
-.slds-tabs--scoped .slds-tabs--scoped__item.slds-disabled > a.slds-tabs--scoped__link:focus {
+.slds-tabs_default .slds-tabs_default__item.slds-disabled > a:hover,
+.slds-tabs_scoped .slds-tabs_scoped__item.slds-disabled > a:hover,
+.slds-tabs_default .slds-tabs_default__item.slds-disabled > a.slds-tabs_default__link:focus,
+.slds-tabs_scoped .slds-tabs_scoped__item.slds-disabled > a.slds-tabs_scoped__link:focus {
   cursor: not-allowed;
   text-decoration: none;
   border-color: transparent;
   color: inherit;
 }
-.slds-tabs--default .slds-tabs--default__item.slds-disabled.slds-active a.slds-tabs--default__link,
-.slds-tabs--scoped .slds-tabs--scoped__item.slds-disabled.slds-active a.slds-tabs--scoped__link {
+.slds-tabs_default .slds-tabs_default__item.slds-disabled.slds-active a.slds-tabs_default__link,
+.slds-tabs_scoped .slds-tabs_scoped__item.slds-disabled.slds-active a.slds-tabs_scoped__link {
   cursor: not-allowed;
   border-color: transparent;
   color: inherit;
 }
-.slds-tabs--default .slds-tabs--default__item.slds-disabled.slds-active a.slds-tabs--default__link:focus,
-.slds-tabs--scoped .slds-tabs--scoped__item.slds-disabled.slds-active a.slds-tabs--scoped__link:focus {
+.slds-tabs_default .slds-tabs_default__item.slds-disabled.slds-active a.slds-tabs_default__link:focus,
+.slds-tabs_scoped .slds-tabs_scoped__item.slds-disabled.slds-active a.slds-tabs_scoped__link:focus {
   cursor: not-allowed;
   color: inherit;
 }
+
+.slds-tabs_default__item.slds-disabled:focus:after,
+.slds-tabs_default__item.slds-disabled.slds-has-focus:after,
+.slds-tabs_scoped__item.slds-disabled:focus:after,
+.slds-tabs_scoped__item.slds-disabled.slds-has-focus:after {
+	height: 0.125rem;
+	background-color: #007add;
+	transition: height 300ms;
+}