Support nested Tab Groups (#721)

Author: clintcs

.changeset/quiet-moose-tickle.md

@@ -0,0 +1,5 @@
+---
+'@crowdstrike/glide-core': patch
+---
+
+Tab Groups can now be nested.

custom-elements.json

@@ -9423,15 +9423,6 @@
               "name": "selectedTab",
               "privacy": "private"
             },
-            {
-              "kind": "field",
-              "name": "isAfterFirstUpdated",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "default": "false"
-            },
             {
               "kind": "field",
               "name": "isDisableOverflowEndButton",
@@ -9535,7 +9526,7 @@
             },
             {
               "kind": "method",
-              "name": "#onClick",
+              "name": "#onComponentClick",
               "privacy": "private",
               "parameters": [
                 {
@@ -9548,35 +9539,35 @@
             },
             {
               "kind": "method",
-              "name": "#onClickOverflowEndButton",
-              "privacy": "private"
+              "name": "#onComponentKeydown",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
-              "name": "#onClickOverflowStartButton",
+              "name": "#onNavSlotChange",
               "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "#onFocusout",
+              "name": "#onOverflowEndButtonClick",
               "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "#onKeydown",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  }
-                }
-              ]
+              "name": "#onOverflowStartButtonClick",
+              "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "#onNavSlotChange",
+              "name": "#onTabListFocusout",
               "privacy": "private"
             },
             {
@@ -9619,7 +9610,7 @@
             },
             {
               "kind": "method",
-              "name": "#setupTabs",
+              "name": "#setUpTabs",
               "privacy": "private"
             },
             {

src/library/final.ts

@@ -2,7 +2,7 @@
 export default function <Type extends new (...arguments_: any[]) => object>(
   constructor: Type,
 ) {
-  return class Final extends constructor {
+  class Final extends constructor {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     constructor(...arguments_: any[]) {
       if (new.target !== Final) {
@@ -12,5 +12,12 @@ export default function <Type extends new (...arguments_: any[]) => object>(
       // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
       super(...arguments_);
     }
-  };
+  }
+
+  // Particularly helpful when dealing with `event.target`. Consumers
+  // expect that property's name to be that of the original constructor
+  // and not "Final".
+  Object.defineProperty(Final, 'name', { value: constructor.name });
+
+  return Final;
 }

src/tab.group.stories.ts

@@ -65,23 +65,18 @@ const meta: Meta = {
     '<glide-core-tab-panel>[--padding-inline-start]': '',
   },
   play(context) {
-    const tabs = context.canvasElement.querySelectorAll('glide-core-tab');
-
-    for (const tab of tabs) {
-      tab.addEventListener('click', (event: Event) => {
+    context.canvasElement
+      .querySelector('glide-core-tab-group')
+      ?.addEventListener('selected', (event: Event) => {
         if (event.target instanceof GlideCoreTab) {
-          for (const tab of tabs) {
-            addons.getChannel().emit(UPDATE_STORY_ARGS, {
-              storyId: context.id,
-              updatedArgs: {
-                [`<glide-core-tab>.${tab.panel}.selected`]:
-                  tab === event.target,
-              },
-            });
-          }
+          addons.getChannel().emit(UPDATE_STORY_ARGS, {
+            storyId: context.id,
+            updatedArgs: {
+              [`<glide-core-tab>.${event.target.panel}.selected`]: true,
+            },
+          });
         }
       });
-    }
   },
   render(arguments_) {
     /* eslint-disable @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-unsafe-assignment */
@@ -132,6 +127,24 @@ const meta: Meta = {
           })}
         >
           ${unsafeHTML(arguments_['<glide-core-tab-panel>[slot="default"]'])}
+
+          <glide-core-tab-group>
+            <glide-core-tab slot="nav" panel="1"> test </glide-core-tab>
+
+            <glide-core-tab slot="nav" panel="2">
+              With Icon test
+
+              <glide-core-example-icon
+                slot="icon"
+                name="checkmark"
+              ></glide-core-example-icon>
+            </glide-core-tab>
+
+            <glide-core-tab-panel name="1"> </glide-core-tab-panel>
+            <glide-core-tab-panel name="2">
+              With Icon test
+            </glide-core-tab-panel>
+          </glide-core-tab-group>
         </glide-core-tab-panel>
         <glide-core-tab-panel name="2"> With Icon </glide-core-tab-panel>
       </glide-core-tab-group>

src/tab.group.test.interactions.ts

@@ -355,3 +355,53 @@ it('sets the selected tab as tabbable on tab blur', async () => {
   expect(tabs[1]?.selected).to.be.false;
   expect(tabs[1]?.tabIndex).to.equal(-1);
 });
+
+it('can be nested', async () => {
+  const host = await fixture<GlideCoreTabGroup>(html`
+    <glide-core-tab-group>
+      <glide-core-tab panel="1" slot="nav">One</glide-core-tab>
+      <glide-core-tab panel="2" slot="nav">Two</glide-core-tab>
+
+      <glide-core-tab-panel name="1">One</glide-core-tab-panel>
+
+      <glide-core-tab-panel name="2">
+        <glide-core-tab-group>
+          <glide-core-tab panel="1" slot="nav">One</glide-core-tab>
+          <glide-core-tab panel="2" slot="nav">Two</glide-core-tab>
+
+          <glide-core-tab-panel name="1">One</glide-core-tab-panel>
+          <glide-core-tab-panel name="2">Two</glide-core-tab-panel>
+        </glide-core-tab-group>
+      </glide-core-tab-panel>
+    </glide-core-tab-group>
+  `);
+
+  const tabs = host.querySelectorAll('glide-core-tab');
+  const panels = host.querySelectorAll('glide-core-tab-panel');
+
+  tabs[1]?.click();
+  await host.updateComplete;
+
+  expect(tabs[0]?.selected).to.be.false;
+  expect(tabs[1]?.selected).to.be.true;
+  expect(tabs[2]?.selected).to.be.true;
+  expect(tabs[3]?.selected).to.be.false;
+
+  expect(panels[0]?.ariaHidden).to.equal('true');
+  expect(panels[1]?.ariaHidden).to.equal('false');
+  expect(panels[2]?.ariaHidden).to.equal('false');
+  expect(panels[3]?.ariaHidden).to.equal('true');
+
+  tabs[0]?.click();
+  await host.updateComplete;
+
+  expect(tabs[0]?.selected).to.be.true;
+  expect(tabs[1]?.selected).to.be.false;
+  expect(tabs[2]?.selected).to.be.true;
+  expect(tabs[3]?.selected).to.be.false;
+
+  expect(panels[0]?.ariaHidden).to.equal('false');
+  expect(panels[1]?.ariaHidden).to.equal('true');
+  expect(panels[2]?.ariaHidden).to.equal('false');
+  expect(panels[3]?.ariaHidden).to.equal('true');
+});