Updates to the tab group

Author: djthorpe

src/index.html

@@ -50,9 +50,9 @@
 
       <div class="container">
         <h1>Tab Group</h1>
-        <div style="background-color: var(--grey-10-color); padding: 5px;">
+        <div style="background-color: #fcfcfc; padding: 5px;">
         <wc-tab-group backgroundColor="light">
-          <wc-tab name="tab-tables" selected>Tables</wc-tab>
+          <wc-tab name="tab-tables" selected><wc-icon name="table" size="medium"></wc-icon> Tables</wc-tab>
           <wc-tab name="tab-buttons">Buttons</wc-tab>
           <wc-tab name="tab-badges">Badges</wc-tab>
           <wc-tab name="tab-icons">Icons</wc-tab>

src/nav/TabElement.js

@@ -54,9 +54,6 @@ export class TabElement extends LitElement {
       li {
         vertical-align: middle;
       }
-      li.selected {
-        border-bottom: 2px solid var(--error-color);
-      }
     `;
   }
 

src/nav/TabGroupElement.js

@@ -1,6 +1,7 @@
 import {
   LitElement, html, css, nothing,
 } from 'lit';
+import { TabElement } from './TabElement';
 
 /**
  * TabGroupElement
@@ -29,7 +30,6 @@ export class TabGroupElement extends LitElement {
 
   static get properties() {
     return {
-
       /**
        * Background color of the tab group, one of primary, secondary, light, white, dark, black
        *
@@ -104,15 +104,19 @@ export class TabGroupElement extends LitElement {
         border-bottom: none;
         border-color: var(--grey-40-color);
       }
-      .bg-color-light ::slotted(wc-tab:hover) {
+      .bg-color-light ::slotted(wc-tab:hover),::slotted(wc-tab:active),::slotted(wc-tab[selected]) {
         background-color: var(--primary-color);
         color: var(--white-color);
       }
       .bg-color-light ::slotted(wc-tab:active) {
-        background-color: var(--primary-color);
-        color: var(--white-color);
         font-weight: var(--font-weight-bold);
-      }      
+      }
+      .bg-color-light ::slotted(wc-tab[disabled]) {
+        background-color: inherit;
+        font-weight: inherit;
+        color: var(--grey-40-color);
+        cursor: inherit;
+      }
     `;
   }
 
@@ -137,23 +141,35 @@ export class TabGroupElement extends LitElement {
     this.addEventListener(Event.EVENT_CLICK, (evt) => this.onClick(evt));
   }
 
+  /**
+   * Select a tab by name, and deselect all other tabs
+   * @param {String} name: The name of the tab to select
+   * @returns The node that was selected, or null
+   */
   select(name) {
     const tabs = this.querySelectorAll('wc-tab');
+    let selectedNode = null;
     tabs.forEach((tab) => {
-      if (tab.name === name && !tab.disabled) {
-        if (!tab.selected) {
-          tab.setAttribute('selected', true);
-        }
-      } else if (tab.selected) {
-        tab.selected = false;
+      if (tab.name === name && !tab.selected) {
+        tab.setAttribute('selected', 'selected');
+        selectedNode = tab;
+      } else if (tab.name !== name && tab.selected) {
+        tab.removeAttribute('selected');
       }
     });
+    return selectedNode;
   }
 
-  // eslint-disable-next-line class-methods-use-this
   onClick(event) {
-    if (event.target && event.target.name && !event.target.disabled) {
-      this.select(event.target.name);
+    if (event.target && event.target.name) {
+      const selected = this.select(event.target.name);
+      if (selected) {
+        this.dispatchEvent(new CustomEvent(Event.EVENT_CLICK, {
+          bubbles: true,
+          composed: true,
+          detail: selected.name || selected.textContent,
+        }));
+      }
     }
   }
 }