fix(tabs): Update tab title indicator display (#9666)

**Related Issue:** #8800, #8772 

## Summary

Removes the previous selection indicator behavior and moves the styling
to the Tab Title component itself. Removes associated stale code and
tests. Small visual tweaks to resolve alignment and spacing issues.

Author: macandcheese

packages/calcite-components/src/components.d.ts

@@ -4873,8 +4873,6 @@ export namespace Components {
     }
     interface CalciteTabNav {
         "bordered": boolean;
-        "indicatorOffset": number;
-        "indicatorWidth": number;
         "layout": TabLayout;
         /**
           * Use this property to override individual strings used by the component.
@@ -12878,8 +12876,6 @@ declare namespace LocalJSX {
     }
     interface CalciteTabNav {
         "bordered"?: boolean;
-        "indicatorOffset"?: number;
-        "indicatorWidth"?: number;
         "layout"?: TabLayout;
         /**
           * Use this property to override individual strings used by the component.

packages/calcite-components/src/components/tab-nav/resources.ts

@@ -4,7 +4,6 @@ export const ICON = {
 } as const;
 
 export const CSS = {
-  activeIndicatorContainer: "tab-nav-active-indicator-container",
   container: "tab-nav",
   containerHasEndTabTitleOverflow: "tab-nav--end-overflow",
   containerHasStartTabTitleOverflow: "tab-nav--start-overflow",

packages/calcite-components/src/components/tab-nav/tab-nav.e2e.ts

@@ -48,48 +48,6 @@ describe("calcite-tab-nav", () => {
     expect(activeEventSpy).toHaveReceivedEventTimes(2);
   });
 
-  describe("selected indicator", () => {
-    const tabTitles = html`
-      <calcite-tab-title selected>Tab 1 Title</calcite-tab-title>
-      <calcite-tab-title>Tab 2 Title</calcite-tab-title>
-      <calcite-tab-title>Tab 3 Title</calcite-tab-title>
-      <calcite-tab-title>Tab 4 Title</calcite-tab-title>
-    `;
-
-    it("has its active indicator positioned from left if LTR", async () => {
-      const page = await newE2EPage();
-      await page.setContent(`<calcite-tab-nav>${tabTitles}</calcite-tab-nav>`);
-      const element = await page.find("calcite-tab-nav >>> .tab-nav-active-indicator");
-      const style = await element.getComputedStyle();
-      expect(style["left"]).toBe("0px");
-      expect(style["right"]).not.toBe("0px");
-      expect(style["width"]).not.toBe("0px");
-    });
-
-    it("has its active indicator positioned from right if RTL", async () => {
-      const page = await newE2EPage();
-      await page.setContent(`<calcite-tab-nav dir='rtl'>${tabTitles}</calcite-tab-nav>`);
-      const element = await page.find("calcite-tab-nav >>> .tab-nav-active-indicator");
-      const style = await element.getComputedStyle();
-      expect(style["right"]).toBe("0px");
-      expect(style["left"]).not.toBe("0px");
-      expect(style["width"]).not.toBe("0px");
-    });
-
-    it("updates position when made visible", async () => {
-      const page = await newE2EPage();
-      await page.setContent(`<calcite-tab-nav hidden>${tabTitles}</calcite-tab-nav>`);
-      const tabNav = await page.find("calcite-tab-nav");
-      const indicator = await page.find("calcite-tab-nav >>> .tab-nav-active-indicator");
-
-      tabNav.setProperty("hidden", false);
-      await page.waitForChanges();
-
-      const style = await indicator.getComputedStyle();
-      expect(style["width"]).not.toBe("0px");
-    });
-  });
-
   it("focuses on keyboard interaction", async () => {
     const page = await newE2EPage();
     await page.setContent(

packages/calcite-components/src/components/tab-nav/tab-nav.scss

@@ -28,7 +28,6 @@
 $last-mask-color-stop-position: 51%; // we go beyond the half point to ensure the mask color stops overlap when both start and end are overflowing
 
 .tab-nav--start-overflow {
-  .tab-nav-active-indicator-container,
   .tab-titles-slot-wrapper {
     mask-image: linear-gradient(
       to var(--calcite-internal-tab-nav-gradient-end-side),
@@ -41,7 +40,6 @@ $last-mask-color-stop-position: 51%; // we go beyond the half point to ensure th
 }
 
 .tab-nav--end-overflow {
-  .tab-nav-active-indicator-container,
   .tab-titles-slot-wrapper {
     mask-image: linear-gradient(
       to var(--calcite-internal-tab-nav-gradient-start-side),
@@ -54,7 +52,6 @@ $last-mask-color-stop-position: 51%; // we go beyond the half point to ensure th
 }
 
 .tab-nav--start-overflow.tab-nav--end-overflow {
-  .tab-nav-active-indicator-container,
   .tab-titles-slot-wrapper {
     mask-image: linear-gradient(
         to var(--calcite-internal-tab-nav-gradient-end-side),
@@ -126,26 +123,6 @@ $last-mask-color-stop-position: 51%; // we go beyond the half point to ensure th
     overflow-hidden;
 }
 
-// prevent indicator overflow in horizontal scrolling situations
-.tab-nav-active-indicator-container {
-  @apply absolute
-    bottom-0
-    h-0.5
-    inset-x-0
-    overflow-hidden
-    w-full;
-}
-
-.tab-nav-active-indicator {
-  @apply absolute
-    bg-brand
-    bottom-0
-    block
-    h-0.5
-    ease-out
-    transition-all;
-}
-
 .scroll-button-container {
   @apply absolute bottom-0 top-0;
 
@@ -195,29 +172,4 @@ $last-mask-color-stop-position: 51%; // we go beyond the half point to ensure th
   }
 }
 
-:host .position-bottom .tab-nav-active-indicator {
-  inset-block-end: unset;
-  @apply top-0;
-}
-
-:host .position-bottom .tab-nav-active-indicator-container {
-  inset-block-end: unset;
-  @apply top-0;
-}
-
-:host([bordered]) .tab-nav-active-indicator-container {
-  inset-block-end: unset; // display active blue line above instead of below
-}
-
-:host([bordered]) .position-bottom .tab-nav-active-indicator-container {
-  inset-block-end: 0; // display active blue line below instead of above
-  inset-block-start: unset;
-}
-
-@media (forced-colors: active) {
-  .tab-nav-active-indicator {
-    background-color: highlight;
-  }
-}
-
 @include base-component();

packages/calcite-components/src/components/tab-nav/tab-nav.tsx

@@ -79,7 +79,6 @@ export class TabNav implements LocalizedComponent, T9nComponent {
     this.calciteInternalTabChange.emit({
       tab: this.selectedTabId,
     });
-    this.updateActiveIndicator();
   }
 
   /**
@@ -106,16 +105,6 @@ export class TabNav implements LocalizedComponent, T9nComponent {
    */
   @Prop({ reflect: true, mutable: true }) bordered = false;
 
-  /**
-   * @internal
-   */
-  @Prop({ mutable: true }) indicatorOffset: number;
-
-  /**
-   * @internal
-   */
-  @Prop({ mutable: true }) indicatorWidth: number;
-
   /**
    * Made into a prop for testing purposes only.
    *
@@ -167,10 +156,6 @@ export class TabNav implements LocalizedComponent, T9nComponent {
     this.layout = parentTabsEl?.layout;
     this.bordered = parentTabsEl?.bordered;
     this.effectiveDir = getElementDir(this.el);
-
-    if (this.selectedTitle) {
-      this.updateActiveIndicator();
-    }
   }
 
   componentDidRender(): void {
@@ -201,11 +186,6 @@ export class TabNav implements LocalizedComponent, T9nComponent {
   //--------------------------------------------------------------------------
 
   render(): VNode {
-    const width = `${this.indicatorWidth}px`;
-    const offset = `${this.indicatorOffset}px`;
-    const indicatorStyle =
-      this.effectiveDir !== "rtl" ? { width, left: offset } : { width, right: offset };
-
     return (
       <Host role="tablist">
         <div
@@ -217,7 +197,6 @@ export class TabNav implements LocalizedComponent, T9nComponent {
             [`position-${this.position}`]: true,
             [CSS_UTILITY.rtl]: this.effectiveDir === "rtl",
           }}
-          ref={this.storeContainerRef}
         >
           {this.renderScrollButton("start")}
           <div
@@ -230,18 +209,6 @@ export class TabNav implements LocalizedComponent, T9nComponent {
           >
             <slot onSlotchange={this.onSlotChange} />
           </div>
-          <div
-            class={{
-              [CSS.activeIndicatorContainer]: true,
-            }}
-            ref={(el) => (this.activeIndicatorContainerEl = el)}
-          >
-            <div
-              class="tab-nav-active-indicator"
-              ref={(el) => (this.activeIndicatorEl = el as HTMLElement)}
-              style={indicatorStyle}
-            />
-          </div>
           {this.renderScrollButton("end")}
         </div>
       </Host>
@@ -367,11 +334,6 @@ export class TabNav implements LocalizedComponent, T9nComponent {
     event.stopPropagation();
   }
 
-  @Listen("calciteInternalTabIconChanged")
-  iconStartChangeHandler(): void {
-    this.updateActiveIndicator();
-  }
-
   //--------------------------------------------------------------------------
   //
   //  Events
@@ -432,12 +394,6 @@ export class TabNav implements LocalizedComponent, T9nComponent {
     });
   }
 
-  private activeIndicatorEl: HTMLElement;
-
-  private activeIndicatorContainerEl: HTMLDivElement;
-
-  private containerEl: HTMLDivElement;
-
   private effectiveDir: Direction = "ltr";
 
   private lastScrollWheelAxis: "x" | "y" = "x";
@@ -450,12 +406,6 @@ export class TabNav implements LocalizedComponent, T9nComponent {
 
   private resizeObserver = createObserver("resize", () => {
     this.updateScrollingState();
-
-    if (!this.activeIndicatorEl) {
-      return;
-    }
-
-    this.updateActiveIndicator();
   });
 
   private get scrollerButtonWidth(): number {
@@ -469,20 +419,6 @@ export class TabNav implements LocalizedComponent, T9nComponent {
   //
   //--------------------------------------------------------------------------
 
-  private updateActiveIndicator(): void {
-    const tabTitleScrollLeft = this.tabTitleContainerEl?.scrollLeft;
-    const containerScrollLeft = this.containerEl?.scrollLeft;
-    const navWidth = this.activeIndicatorContainerEl?.offsetWidth;
-    const tabLeft = this.selectedTitle?.offsetLeft;
-    const tabWidth = this.selectedTitle?.offsetWidth;
-    const offsetRight = navWidth - tabLeft - tabWidth;
-    const offsetBase = this.effectiveDir === "ltr" ? tabLeft : offsetRight;
-    const multiplier = this.effectiveDir === "ltr" ? -1 : 1;
-
-    this.indicatorOffset = offsetBase + multiplier * (containerScrollLeft + tabTitleScrollLeft);
-    this.indicatorWidth = this.selectedTitle?.offsetWidth;
-  }
-
   private onTabTitleWheel = (event: WheelEvent): void => {
     event.preventDefault();
 
@@ -504,7 +440,6 @@ export class TabNav implements LocalizedComponent, T9nComponent {
 
     const scrollByX = (this.effectiveDir === "rtl" ? -1 : 1) * scrollBy;
     (event.currentTarget as HTMLDivElement).scrollBy(scrollByX, 0);
-    requestAnimationFrame(() => this.updateActiveIndicator());
   };
 
   private onSlotChange = (event: Event): void => {
@@ -517,8 +452,6 @@ export class TabNav implements LocalizedComponent, T9nComponent {
     this.calciteInternalTabNavSlotChange.emit(slottedElements);
   };
 
-  private storeContainerRef = (el: HTMLDivElement) => (this.containerEl = el);
-
   private storeTabTitleWrapperRef = (el: HTMLDivElement) => {
     this.tabTitleContainerEl = el;
     this.intersectionObserver = createObserver("intersection", () => this.updateScrollingState(), {
@@ -646,7 +579,6 @@ export class TabNav implements LocalizedComponent, T9nComponent {
   }
 
   private onTabTitleScroll = (): void => {
-    this.updateActiveIndicator();
     this.updateScrollingState();
   };
 
@@ -699,7 +631,6 @@ export class TabNav implements LocalizedComponent, T9nComponent {
     }
 
     requestAnimationFrame(() => {
-      this.updateActiveIndicator();
       tabTitles[this.selectedTabId].focus();
     });
   }

packages/calcite-components/src/components/tab-title/resources.ts

@@ -1,12 +1,17 @@
+import { Scale } from "../interfaces";
+
 export const CSS = {
   closeButton: "close-button",
   container: "container",
+  containerBottom: "container--bottom",
   content: "content",
   contentHasText: "content--has-text",
   iconEnd: "icon-end",
   iconPresent: "icon-present",
   iconStart: "icon-start",
   titleIcon: "calcite-tab-title--icon",
+  scale: (scale: Scale) => `scale-${scale}` as const,
+  selectedIndicator: "selected-indicator",
 };
 
 export const ICONS = {

packages/calcite-components/src/components/tab-title/tab-title.e2e.ts

@@ -343,54 +343,4 @@ describe("calcite-tab-title", () => {
     await page.keyboard.press("Enter");
     expect(activeEventSpy).toHaveReceivedEventTimes(2);
   });
-
-  describe("when the active tab-title changes", () => {
-    it("should move the active tab nav indicator", async () => {
-      const page = await newE2EPage({
-        html: `
-        <calcite-tabs>
-          <calcite-tab-nav slot="title-group">
-            <calcite-tab-title class="title-1">Tab 1 Title</calcite-tab-title>
-            <calcite-tab-title class="title-2" selected>Tab 2 Title</calcite-tab-title>
-            <calcite-tab-title>Tab 3 Title</calcite-tab-title>
-            <calcite-tab-title>Tab 4 Title</calcite-tab-title>
-          </calcite-tab-nav>
-          <calcite-tab>Tab 1 Content</calcite-tab>
-          <calcite-tab selected>Tab 2 Content</calcite-tab>
-          <calcite-tab>Tab 3 Content</calcite-tab>
-          <calcite-tab>Tab 4 Content</calcite-tab>
-        </calcite-tabs>
-        `,
-      });
-      const tabTitle1 = await page.find(".title-1");
-      const tabTitle2 = await page.find(".title-2");
-
-      expect(await (await page.find("calcite-tab-title[selected]")).innerText).toEqual("Tab 2 Title");
-      expect(
-        await page.evaluate(() => {
-          return (
-            document
-              .querySelector("calcite-tab-nav")
-              .shadowRoot.querySelector(".tab-nav-active-indicator") as HTMLDivElement
-          ).style.left;
-        }),
-      ).not.toEqual("0px");
-
-      // toggle new selected tab-title
-      await tabTitle2.removeAttribute("selected");
-      await tabTitle1.setAttribute("selected", true);
-      await page.waitForChanges();
-
-      expect(await (await page.find("calcite-tab-title[selected]")).innerText).toEqual("Tab 1 Title");
-      expect(
-        await page.evaluate(() => {
-          return (
-            document
-              .querySelector("calcite-tab-nav")
-              .shadowRoot.querySelector(".tab-nav-active-indicator") as HTMLDivElement
-          ).style.left;
-        }),
-      ).toEqual("0px");
-    });
-  });
 });