feat(atomic): improve atomic-tab overflow behaviour (#4725)

This PR improves the way overflow is handled on atomic tabs. Instead of
a dropdown on small screen widths, tabs overflow in a dropdown.
Additionally, when not enough space is available to display tabs, they
will get truncated as needed.

https://coveord.atlassian.net/browse/KIT-3732

packages/atomic/src/components.d.ts

@@ -3786,6 +3786,22 @@ export namespace Components {
     }
     interface TabBar {
     }
+    interface TabButton {
+        /**
+          * Whether the tab button is active.
+         */
+        "active": boolean;
+        /**
+          * The label to display on the tab button.
+         */
+        "label": string;
+        /**
+          * Click handler for the tab button.
+         */
+        "select": () => void;
+    }
+    interface TabManagerBar {
+    }
     interface TabPopover {
         "setButtonVisibility": (isVisible: boolean) => Promise<void>;
         "togglePopover": () => Promise<void>;
@@ -6040,6 +6056,18 @@ declare global {
         prototype: HTMLTabBarElement;
         new (): HTMLTabBarElement;
     };
+    interface HTMLTabButtonElement extends Components.TabButton, HTMLStencilElement {
+    }
+    var HTMLTabButtonElement: {
+        prototype: HTMLTabButtonElement;
+        new (): HTMLTabButtonElement;
+    };
+    interface HTMLTabManagerBarElement extends Components.TabManagerBar, HTMLStencilElement {
+    }
+    var HTMLTabManagerBarElement: {
+        prototype: HTMLTabManagerBarElement;
+        new (): HTMLTabManagerBarElement;
+    };
     interface HTMLTabPopoverElement extends Components.TabPopover, HTMLStencilElement {
     }
     var HTMLTabPopoverElement: {
@@ -6244,6 +6272,8 @@ declare global {
         "atomic-timeframe": HTMLAtomicTimeframeElement;
         "atomic-timeframe-facet": HTMLAtomicTimeframeFacetElement;
         "tab-bar": HTMLTabBarElement;
+        "tab-button": HTMLTabButtonElement;
+        "tab-manager-bar": HTMLTabManagerBarElement;
         "tab-popover": HTMLTabPopoverElement;
     }
 }
@@ -9833,6 +9863,22 @@ declare namespace LocalJSX {
     }
     interface TabBar {
     }
+    interface TabButton {
+        /**
+          * Whether the tab button is active.
+         */
+        "active"?: boolean;
+        /**
+          * The label to display on the tab button.
+         */
+        "label": string;
+        /**
+          * Click handler for the tab button.
+         */
+        "select": () => void;
+    }
+    interface TabManagerBar {
+    }
     interface TabPopover {
     }
     interface IntrinsicElements {
@@ -10033,6 +10079,8 @@ declare namespace LocalJSX {
         "atomic-timeframe": AtomicTimeframe;
         "atomic-timeframe-facet": AtomicTimeframeFacet;
         "tab-bar": TabBar;
+        "tab-button": TabButton;
+        "tab-manager-bar": TabManagerBar;
         "tab-popover": TabPopover;
     }
 }
@@ -10917,6 +10965,8 @@ declare module "@stencil/core" {
              */
             "atomic-timeframe-facet": LocalJSX.AtomicTimeframeFacet & JSXBase.HTMLAttributes<HTMLAtomicTimeframeFacetElement>;
             "tab-bar": LocalJSX.TabBar & JSXBase.HTMLAttributes<HTMLTabBarElement>;
+            "tab-button": LocalJSX.TabButton & JSXBase.HTMLAttributes<HTMLTabButtonElement>;
+            "tab-manager-bar": LocalJSX.TabManagerBar & JSXBase.HTMLAttributes<HTMLTabManagerBarElement>;
             "tab-popover": LocalJSX.TabPopover & JSXBase.HTMLAttributes<HTMLTabPopoverElement>;
         }
     }

packages/atomic/src/components/common/tab-manager/tab-button.tsx

@@ -1,31 +1,54 @@
-import {FunctionalComponent, h} from '@stencil/core';
-import {Button} from '../button';
+import {Component, Host, Prop, h} from '@stencil/core';
 
-export interface TabButtonProps {
-  label: string | undefined;
-  handleClick: () => void;
-  isActive: boolean;
-}
+/**
+ * @internal
+ */
+@Component({
+  tag: 'tab-button',
+})
+export class TabButton {
+  /**
+   * The label to display on the tab button.
+   */
+  @Prop() label!: string;
+
+  /**
+   * Whether the tab button is active.
+   */
+  @Prop() active: boolean = false;
+
+  /**
+   * Click handler for the tab button.
+   */
+  @Prop() select!: () => void;
 
-export const TabButton: FunctionalComponent<TabButtonProps> = (props) => {
-  const activeTabClass = props.isActive
-    ? "relative after:content-[''] after:block after:w-full after:h-1 after:absolute after:-bottom-0.5 after:bg-primary after:rounded"
-    : '';
-  const activeTabTextClass = props.isActive ? '' : 'text-neutral-dark';
-  return (
-    <li
-      aria-current={props.isActive ? 'true' : 'false'}
-      aria-label={'tab for ' + props.label}
-      part="button-container"
-      class={activeTabClass}
-    >
-      <Button
-        style="text-transparent"
-        class={`w-full px-6 pb-1 text-xl ${activeTabTextClass}`}
-        text={props.label}
-        part="tab-button"
-        onClick={props.handleClick}
-      ></Button>
-    </li>
-  );
-};
+  private get activeTabClass() {
+    return this.active
+      ? 'relative after:block after:w-full after:h-1 after:absolute after:-bottom-0.5 after:bg-primary after:rounded'
+      : '';
+  }
+
+  private get activeTabTextClass() {
+    return this.active ? '' : 'text-neutral-dark';
+  }
+
+  render() {
+    return (
+      <Host
+        role="listitem"
+        class={`${this.activeTabClass}`}
+        aria-current={this.active ? 'true' : 'false'}
+        aria-label={'tab for ' + this.label}
+        part="button-container"
+      >
+        <button
+          class={`w-full truncate px-2 pb-1 text-xl sm:px-6 ${this.activeTabTextClass}`}
+          part="tab-button"
+          onClick={this.select}
+        >
+          {this.label}
+        </button>
+      </Host>
+    );
+  }
+}

packages/atomic/src/components/common/tab-manager/tab-manager-bar.pcss

@@ -0,0 +1,23 @@
+@import '../../../global/global.pcss';
+
+:host {
+  white-space: nowrap;
+  width: 100%;
+  overflow-x: visible;
+  display: flex;
+  position: relative;
+
+  button {
+    @apply text-left;
+  }
+
+  tab-popover::part(popover-button) {
+    @apply text-xl;
+    @apply sm:px-6;
+    @apply px-2;
+    @apply pb-1;
+    @apply font-normal;
+    @apply m-0;
+    @apply text-black;
+  }
+}