fix(tab-nav): update indicator position when tab icon changes. #6821

Esri · Sep 19, 2023 · 2b16600 · 2b16600
1 parent f4fb2f6
commit 2b16600
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 0 deletions.
diff --git a/packages/calcite-components/src/components/tab-nav/tab-nav.tsx b/packages/calcite-components/src/components/tab-nav/tab-nav.tsx
@@ -267,6 +267,7 @@ export class TabNav {
   @Listen("calciteInternalTabIconChanged")
   iconStartChangeHandler(): void {
     this.updateActiveWidth();
+    this.updateOffsetPosition();
   }
 
   //--------------------------------------------------------------------------

diff --git a/packages/calcite-components/src/components/tabs/tabs.stories.ts b/packages/calcite-components/src/components/tabs/tabs.stories.ts
@@ -276,3 +276,22 @@ export const TabChildrenWithPercentageHeights = (): string => html`
 TabChildrenWithPercentageHeights.parameters = {
   chromatic: { delay: 1000 },
 };
+
+export const updateIndicatorOffset_TestOnly = (): string => html`<calcite-tabs>
+    <calcite-tab-nav slot="title-group">
+      <calcite-tab-title id="tab-title">Boats</calcite-tab-title>
+      <calcite-tab-title selected>Ships</calcite-tab-title>
+      <calcite-tab-title>Yachts</calcite-tab-title>
+    </calcite-tab-nav>
+    <calcite-tab>Tab 1 content</calcite-tab>
+    <calcite-tab>Tab 2 content</calcite-tab>
+    <calcite-tab>Tab 3 content</calcite-tab>
+  </calcite-tabs>
+  <script>
+    const tabTitle = document.getElementById("tab-title");
+    setTimeout(() => (tabTitle.iconStart = "bullet-point"), 300);
+  </script>`;
+
+updateIndicatorOffset_TestOnly.parameters = {
+  chromatic: { delay: 1000 },
+};