feat(tab): add icon-only prop

getgoui · Feb 26, 2024 · 0bd1cce · 0bd1cce
1 parent 4a96a1c
commit 0bd1cce
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 16 deletions.
diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts
@@ -1140,6 +1140,13 @@ export namespace Components {
           * If this tab is currently active if multiple `go-tab` are active in the same `go-tabs`, first one is active.
          */
         "active": boolean;
+        /**
+          * Only show `icon` and `icon-active` slot content "Label" prop is still required for screen reader announcement, but will not be shown visually
+         */
+        "iconOnly"?: boolean;
+        /**
+          * Position of the icon, either 'before' or 'after'
+         */
         "iconPosition"?: TabIconPosition;
         /**
           * Label displayed on the tab
@@ -3060,6 +3067,13 @@ declare namespace LocalJSX {
           * If this tab is currently active if multiple `go-tab` are active in the same `go-tabs`, first one is active.
          */
         "active"?: boolean;
+        /**
+          * Only show `icon` and `icon-active` slot content "Label" prop is still required for screen reader announcement, but will not be shown visually
+         */
+        "iconOnly"?: boolean;
+        /**
+          * Position of the icon, either 'before' or 'after'
+         */
         "iconPosition"?: TabIconPosition;
         /**
           * Label displayed on the tab

diff --git a/packages/core/src/components/go-tabs/go-tab.tsx b/packages/core/src/components/go-tabs/go-tab.tsx
@@ -35,8 +35,17 @@ export class GoTab {
    */
   @Prop({ mutable: true }) panelId?: string;
 
+  /**
+   * Position of the icon, either 'before' or 'after'
+   */
   @Prop() iconPosition?: TabIconPosition = 'before';
 
+  /**
+   * Only show `icon` and `icon-active` slot content
+   * "Label" prop is still required for screen reader announcement, but will not be shown visually
+   */
+  @Prop() iconOnly?: boolean = false;
+
   @Method()
   async setActive(active: boolean) {
     this.active = active;

diff --git a/packages/core/src/components/go-tabs/go-tablist.tsx b/packages/core/src/components/go-tabs/go-tablist.tsx
@@ -247,7 +247,6 @@ export class GoTablist {
       // target index out of range
       if (pressed === 'ArrowLeft' || pressed === 'ArrowUp') {
         if (!this.auto) {
-          console.log('yo!!');
           this.focusLastTab();
           return;
         }
@@ -313,7 +312,7 @@ export class GoTablist {
                       'has-active-icon': !!tab.iconActiveSlot,
                     }}
                     ref={(el) => this.tabEls.push(el)}>
-                    <span>{tab.label}</span>
+                    <span class={{ 'visually-hidden': tab.iconOnly }}>{tab.label}</span>
                   </button>
                 );
               })

diff --git a/packages/core/src/components/go-tabs/go-tabs.tsx b/packages/core/src/components/go-tabs/go-tabs.tsx
@@ -81,20 +81,27 @@ export class GoTabs {
     }
 
     this.tabChildren = children.map((goTab) => {
-      const tabId = uniqueId('tab-');
-      const panelId = tabId + '-panel';
-      goTab.tabId = tabId;
-      goTab.panelId = panelId;
+      if (!goTab.tabId) {
+        const tId = uniqueId('tab-');
+        goTab.tabId = tId;
+      }
+      if (!goTab.panelId) {
+        const pId = goTab.tabId + '-panel';
+        goTab.panelId = pId;
+      }
       const iconSlot = this.initIconSlot(goTab, 'icon');
       const iconActiveSlot = this.initIconSlot(goTab, 'icon-active');
+
+      const { tabId, panelId, label, active, iconPosition, iconOnly } = goTab;
       return {
-        tabId: goTab.tabId || tabId,
-        panelId: goTab.panelId || panelId,
-        label: goTab.label,
-        active: goTab.active,
+        tabId,
+        panelId,
+        label,
+        active,
+        iconPosition,
+        iconOnly,
         iconSlot,
         iconActiveSlot,
-        iconPosition: goTab.iconPosition,
       };
     });
     this.panels = children;

diff --git a/packages/core/src/components/go-tabs/tabs.type.ts b/packages/core/src/components/go-tabs/tabs.type.ts
@@ -6,6 +6,7 @@ export interface TabItem {
   iconSlot?: Element;
   iconActiveSlot?: Element;
   iconPosition?: TabIconPosition;
+  iconOnly?: boolean;
 }
 
 export interface ActiveTab {

diff --git a/packages/core/src/index.html b/packages/core/src/index.html
@@ -29,22 +29,22 @@
 
     <!-- keep this sandbox empty before pushing changes -->
     <div class="container">
-      <go-tabs fill vertical>
-        <go-tab label="Icon tab" icon-position="before">
+      <go-tabs fill>
+        <go-tab label="Icon tab" icon-position="before" icon-only>
           <go-icon name="home" slot="icon"></go-icon>
           <p>
             You can use <code>slot="icon"</code> to add an icon to tab (by default, icon is placed before the label
             text)
           </p>
         </go-tab>
-        <go-tab label="Icon tab" icon-position="after">
-          <go-icon name="star" slot="icon-active"></go-icon>
+        <go-tab label="Icon tab" icon-position="after" icon-only>
+          <go-icon name="star" slot="icon"></go-icon>
           <p>
             <code>icon-position="after"</code> puts icon after the label, you can use <code>slot="icon-active"</code> to
             specify the icon that will be shown when the tab is active
           </p>
         </go-tab>
-        <go-tab label="Third tab">
+        <go-tab label="Third tab" icon-only>
           <svg fill="currentColor" width="2rem" height="2rem" slot="icon" viewBox="0 0 500 500">
             <path
               d="M302.5 131.9c-29.3-28.1-69.1-45.3-112.9-45.3-90.3 0-163.4 73.1-163.4 163.4s73.2 163.4 163.4 163.4c43.8 0 83.6-17.2 112.9-45.3L184.1 250l118.4-118.1zm-171.2 24.6c0-20.8 16.9-37.7 37.7-37.7s37.7 16.9 37.7 37.7c0 20.8-16.9 37.7-37.7 37.7s-37.7-16.8-37.7-37.7z" />