From 2b166008397ee008016315b184b91d4549c53745 Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Mon, 18 Sep 2023 17:22:00 -0700
Subject: [PATCH] fix(tab-nav): update indicator position when tab icon
 changes. #6821

---
 .../src/components/tab-nav/tab-nav.tsx        |  1 +
 .../src/components/tabs/tabs.stories.ts       | 19 +++++++++++++++++++
 2 files changed, 20 insertions(+)

diff --git a/packages/calcite-components/src/components/tab-nav/tab-nav.tsx b/packages/calcite-components/src/components/tab-nav/tab-nav.tsx
index 831bc3ee7cc..9f2199d5dd1 100644
--- 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
index 120c423dc71..3e9fe473739 100644
--- 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 },
+};