Merge pull request #771 from HelixDesignSystem/surf-2071-implement-dynamic-tabs

feat(tabset): implement better support for dynamic tabs

Author: 100stacks

src/elements/hx-tab/index.js

@@ -1,4 +1,5 @@
 import { HXElement } from '../../interfaces/HXElement/index.js';
+import { generateId } from '../../utils';
 
 /**
  * Fires when non-current tab is clicked.
@@ -22,6 +23,7 @@ export class HXTabElement extends HXElement {
     }
 
     $onConnect () {
+        this.$defaultAttribute('id', `tab-${generateId()}`);
         this.$upgradeProperty('current');
         this.$defaultAttribute('role', 'tab');
         this.setAttribute('aria-selected', this.current);

src/elements/hx-tabpanel/index.js

@@ -1,5 +1,5 @@
 import { HXElement } from '../../interfaces/HXElement/index.js';
-import { onScroll } from '../../utils';
+import { onScroll, generateId } from '../../utils';
 
 /**
  * Fires when the element's contents are concealed.
@@ -32,6 +32,7 @@ export class HXTabpanelElement extends HXElement {
     }
 
     $onConnect () {
+        this.$defaultAttribute('id', `tabpanel-${generateId()}`);
         this.$defaultAttribute('role', 'tabpanel');
         this.$upgradeProperty('open');
         this.setAttribute('aria-expanded', this.open);

src/elements/hx-tabset/index.js

@@ -84,6 +84,7 @@ export class HXTabsetElement extends HXElement {
             }
         }
 
+        this._setupIds(); // account for dynamic tabs
         this.setAttribute('current-tab', idx);
     }
 
@@ -155,6 +156,7 @@ export class HXTabsetElement extends HXElement {
      * elements changes after tabset connects to the DOM.
      */
     update () {
+        this._setupIds();
         this._activateTab(this.currentTab);
     }
 

src/elements/hx-tabset/index.spec.js

@@ -294,7 +294,7 @@ describe('<hx-tabset> component tests', () => {
             expect(len).to.equal(0);
         });
 
-        it.skip(`[FEATURE] should add a dynamic tab with id to empty ${template}`, async () => {
+        it(`[FEATURE] should add a dynamic tab with id to empty ${template}`, async () => {
             const mockup = `
                 <hx-tabset>
                     <hx-tablist>
@@ -308,26 +308,60 @@ describe('<hx-tabset> component tests', () => {
             const tabs = fragment.tabs;
             let firstTabCount = tabs.length;
 
-
-            // add a tab
+            // add a dyanmic tab
             const tab = document.createElement('hx-tab');
             tab.innerHTML = "dynamic tab";
             fragment.querySelector('hx-tablist').appendChild(tab);
 
             const tabHasId = fragment.querySelector(elSelector).hasAttribute('id');
-            //fragment.update(); // manually add tab
 
             // add panel
             const tabpanel = document.createElement('hx-tabpanel');
             tabpanel.innerHTML = "dynamic tab panel";
             fragment.querySelector('hx-tabcontent').appendChild(tabpanel);
             const secoundTabCount = fragment.tabs.length;
 
-            //fragment.update(); // manually add tabpanel
+            fragment.update();
 
             expect(tabHasId).to.be.true;
             expect(firstTabCount).to.equal(0);
             expect(secoundTabCount).to.equal(1);
         });
+
+        it(`[FEATURE] should add a dynamic tab with id to a populated ${template}`, async () => {
+            const mockup = `
+                <hx-tabset>
+                    <hx-tablist>
+                        <hx-tab id="dynamicTestTab"></hx-tab>
+                    </hx-tablist>
+                    <hx-tabcontent>
+                        <hx-tabpanel id="dynamicTestTabpanel"></hx-tabpanel>
+                    </hx-tabcontent>
+                </hx-tabset>`;
+
+            const elSelector = 'hx-tablist > hx-tab';
+            const fragment = /** @type {HXTabsetElement} */ await fixture(mockup);
+            const tabs = fragment.tabs;
+            let firstTabCount = tabs.length;
+
+            // add a dyanmic tab
+            const tab = document.createElement('hx-tab');
+            tab.innerHTML = "dynamic tab";
+            fragment.querySelector('hx-tablist').appendChild(tab);
+
+            const tabHasId = fragment.querySelector(elSelector).hasAttribute('id');
+
+            // add panel
+            const tabpanel = document.createElement('hx-tabpanel');
+            tabpanel.innerHTML = "dynamic tab panel";
+            fragment.querySelector('hx-tabcontent').appendChild(tabpanel);
+            const secoundTabCount = fragment.tabs.length;
+
+            fragment.update(); // update tab
+
+            expect(tabHasId).to.be.true;
+            expect(firstTabCount).to.equal(1);
+            expect(secoundTabCount).to.equal(2);
+        });
     });
 });