@orangesk/orange-design-system 2.0.0-beta.46 → 2.0.0-beta.48

package/src/components/Tabs/Tabs.static.ts

@@ -13,12 +13,19 @@ export const configDocs = {
 };
 
 export default class Tabs {
+  private static readonly SCROLL_ALIGNMENT_TOLERANCE = 1;
+  private static readonly SCROLL_EDGE_TOLERANCE = 1;
+
   private element: HTMLElement;
   private config: TabsConfig;
   private tabs: HTMLElement[];
   private tabPanels: (HTMLElement | null)[];
   private activeTabIndex: number | null;
   private rovingTabindex: RovingTabindex | null;
+  private resizeObserver: ResizeObserver | null;
+  private horizontalScrollHandler: () => void;
+  private resizeHandler: () => void;
+  private viewportElement: HTMLElement | null;
 
   constructor(element: HTMLElement, config?: Partial<TabsConfig>) {
     this.element = element;
@@ -29,9 +36,14 @@ export default class Tabs {
     this.activeTabIndex = null;
 
     this.rovingTabindex = null;
+    this.resizeObserver = null;
+    this.viewportElement = null;
 
     this.handleClick = this.handleClick.bind(this);
     this.handleTabFocus = this.handleTabFocus.bind(this);
+    this.horizontalScrollHandler =
+      this.updateHorizontalOverflowState.bind(this);
+    this.resizeHandler = this.updateHorizontalOverflowState.bind(this);
 
     (this.element as any).ODS_Tabs = this;
 
@@ -73,13 +85,17 @@ export default class Tabs {
     }
 
     if (this.activeTabIndex !== null) {
-      this.toggleTabPanel(this.tabPanels[this.activeTabIndex], "on");
+      this.setActiveTab(this.activeTabIndex);
     } else if (this.tabs.length > 0) {
       this.activateNthTab(0);
     }
+
+    this.setupOverflowObserver();
   }
 
   destroy(): void {
+    this.teardownOverflowObserver();
+
     this.tabs.map((tab) => {
       tab.removeEventListener("click", this.handleClick);
       tab.removeEventListener("focus", this.handleTabFocus);
@@ -94,6 +110,66 @@ export default class Tabs {
     (this.element as any).ODS_Tabs = null;
   }
 
+  private setupOverflowObserver(): void {
+    this.teardownOverflowObserver();
+
+    this.viewportElement = this.element.parentElement?.classList.contains(
+      "tab-list__viewport",
+    )
+      ? this.element.parentElement
+      : null;
+
+    this.element.addEventListener("scroll", this.horizontalScrollHandler, {
+      passive: true,
+    });
+    window.addEventListener("resize", this.resizeHandler);
+
+    if (typeof ResizeObserver !== "undefined") {
+      this.resizeObserver = new ResizeObserver(this.resizeHandler);
+      this.resizeObserver.observe(this.element);
+      this.tabs.forEach((tab) => this.resizeObserver?.observe(tab));
+    }
+
+    this.updateHorizontalOverflowState();
+  }
+
+  private teardownOverflowObserver(): void {
+    this.element.removeEventListener("scroll", this.horizontalScrollHandler);
+    window.removeEventListener("resize", this.resizeHandler);
+
+    if (this.viewportElement) {
+      this.viewportElement.classList.remove(
+        "has-left-overflow",
+        "has-right-overflow",
+      );
+      this.viewportElement = null;
+    }
+
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+      this.resizeObserver = null;
+    }
+  }
+
+  private updateHorizontalOverflowState(): void {
+    if (!this.viewportElement) return;
+
+    const maxScrollLeft = this.element.scrollWidth - this.element.clientWidth;
+    const hasOverflow = maxScrollLeft > Tabs.SCROLL_EDGE_TOLERANCE;
+    const atStart = this.element.scrollLeft <= Tabs.SCROLL_EDGE_TOLERANCE;
+    const atEnd =
+      this.element.scrollLeft >= maxScrollLeft - Tabs.SCROLL_EDGE_TOLERANCE;
+
+    this.viewportElement.classList.toggle(
+      "has-left-overflow",
+      hasOverflow && !atStart,
+    );
+    this.viewportElement.classList.toggle(
+      "has-right-overflow",
+      hasOverflow && !atEnd,
+    );
+  }
+
   update(): void {
     this.destroy();
     this.init();
@@ -105,31 +181,80 @@ export default class Tabs {
   private isSelected = (el: HTMLElement): boolean =>
     el.getAttribute("aria-selected") === "true";
 
-  private handleClick(e: MouseEvent): void {
-    const clickedTab = e.currentTarget as HTMLElement;
-
-    if (clickedTab.hasAttribute("aria-disabled")) {
-      e.preventDefault();
-      return;
-    }
-
+  private setActiveTab(index: number, forceCenter: boolean = false): void {
     this.tabs.map((tab, i) => {
-      if (tab === clickedTab) {
+      if (i === index) {
         this.activeTabIndex = i;
         return this.toggleTab(tab, "on");
       }
       return this.toggleTab(tab, "off");
     });
 
-    this.tabPanels.map((tabPanel) => {
-      if (
-        tabPanel &&
-        tabPanel.getAttribute("id") === clickedTab.getAttribute("aria-controls")
-      ) {
+    this.tabPanels.map((tabPanel, i) => {
+      if (i === index) {
         return this.toggleTabPanel(tabPanel, "on");
       }
       return this.toggleTabPanel(tabPanel, "off");
     });
+
+    const activeTab = this.tabs[index];
+    if (activeTab) {
+      this.scrollTabIntoView(activeTab, forceCenter);
+    }
+  }
+
+  private scrollTabIntoView(
+    activeTab: HTMLElement,
+    forceCenter: boolean = false,
+  ): void {
+    const maxScrollLeft = Math.max(
+      0,
+      this.element.scrollWidth - this.element.clientWidth,
+    );
+    const contentRect = this.element.getBoundingClientRect();
+    const itemRect = activeTab.getBoundingClientRect();
+    const itemCenterWithinContent =
+      itemRect.left -
+      contentRect.left +
+      this.element.scrollLeft +
+      itemRect.width / 2;
+    const targetScrollLeft =
+      itemCenterWithinContent - this.element.clientWidth / 2;
+    const behavior = window.innerWidth < 768 ? "auto" : "smooth";
+    const nextScrollLeft = Math.min(
+      maxScrollLeft,
+      Math.max(0, targetScrollLeft),
+    );
+
+    const isAlreadyAligned =
+      Math.abs(this.element.scrollLeft - nextScrollLeft) <=
+      Tabs.SCROLL_ALIGNMENT_TOLERANCE;
+    if (!forceCenter && isAlreadyAligned) return;
+
+    if (typeof this.element.scrollTo === "function") {
+      this.element.scrollTo({
+        left: nextScrollLeft,
+        behavior,
+      });
+      return;
+    }
+
+    this.element.scrollLeft = nextScrollLeft;
+    this.updateHorizontalOverflowState();
+  }
+
+  private handleClick(e: MouseEvent): void {
+    const clickedTab = e.currentTarget as HTMLElement;
+
+    if (clickedTab.hasAttribute("aria-disabled")) {
+      e.preventDefault();
+      return;
+    }
+
+    const clickedIndex = this.tabs.findIndex((tab) => tab === clickedTab);
+    if (clickedIndex >= 0) {
+      this.setActiveTab(clickedIndex, true);
+    }
   }
 
   private toggleTab(el: HTMLElement, state: "on" | "off"): void {
@@ -161,25 +286,27 @@ export default class Tabs {
   }
 
   activateNthTab(index: number): void {
-    this.tabs.map((tab, i) => {
-      if (i === index) {
-        this.activeTabIndex = i;
-        return this.toggleTab(tab, "on");
-      }
-      return this.toggleTab(tab, "off");
-    });
-
-    this.tabPanels.map((tabPanel, i) => {
-      if (i === index) {
-        return this.toggleTabPanel(tabPanel, "on");
-      }
-      return this.toggleTabPanel(tabPanel, "off");
-    });
+    this.setActiveTab(index, true);
   }
 
-  private handleTabFocus(): void {
+  private handleTabFocus(event: FocusEvent): void {
     if (this.rovingTabindex && !this.rovingTabindex.isActive) {
       this.rovingTabindex.init();
     }
+
+    const focusedTab = event.currentTarget as HTMLElement | null;
+    if (focusedTab && this.shouldCenterFocusedTab(focusedTab)) {
+      this.scrollTabIntoView(focusedTab);
+    }
+  }
+
+  private shouldCenterFocusedTab(focusedTab: HTMLElement): boolean {
+    if (typeof focusedTab.matches !== "function") return true;
+
+    try {
+      return focusedTab.matches(":focus-visible");
+    } catch {
+      return true;
+    }
   }
 }

package/src/components/Tabs/Tabs.tsx

@@ -8,10 +8,6 @@ import { Tab } from "./Tab";
 import type { TabPanelProps } from "./TabPanel";
 import TabsStatic from "./Tabs.static";
 
-export const variants = ["standard", "light"] as const;
-
-export type TabsVariant = (typeof variants)[number];
-
 interface TabsProps extends React.HTMLAttributes<HTMLUListElement> {
   /** Active Tab index */
   activeTabIndex?: number;
@@ -23,8 +19,6 @@ interface TabsProps extends React.HTMLAttributes<HTMLUListElement> {
   isFullWidth?: boolean;
   /** Tabs behave as links rather than tabs */
   isLink?: boolean;
-  /** Visual variant of the tabs */
-  variant?: TabsVariant;
   /** Tab panels as children */
   children: React.ReactElement<TabPanelProps>[];
 }
@@ -36,7 +30,6 @@ const Tabs: React.FC<TabsProps> = ({
   isFullWidth,
   isLink,
   hasEqualTabWidth,
-  variant = "standard",
   children,
   ...other
 }) => {
@@ -46,80 +39,82 @@ const Tabs: React.FC<TabsProps> = ({
     CLASS_TABNAV,
     { [`${CLASS_TABNAV}--equal`]: hasEqualTabWidth },
     { [`${CLASS_TABNAV}--fullwidth`]: isFullWidth },
-    { [`${CLASS_TABNAV}--light`]: variant === "light" },
     classesTabNav,
     className,
   );
 
   const [tabListRef] = useStatic(TabsStatic);
 
-  function getTabs() {
-    return children
-      .filter((tabPanel) => tabPanel && React.isValidElement(tabPanel))
-      .map((tabPanel, i) => {
-        const isActive = i === activeTabIndex;
-        const props = tabPanel.props || {};
-        const {
-          renderTab = undefined,
-          id,
-          isDisabled,
-          tab,
-          href,
-        } = props as TabPanelProps;
-
-        // Generate ID if not provided
-        const tabId = id || `tab-${i}`;
-
-        if (!renderTab) {
-          return (
-            <Tab
-              key={tabId}
-              controls={!href ? tabId : ""}
-              href={href}
-              isDisabled={isDisabled}
-              isActive={isActive}
-            >
-              {tab}
-            </Tab>
-          );
-        }
+  const tabPanels = React.Children.toArray(children).filter(
+    (tabPanel): tabPanel is React.ReactElement<TabPanelProps> =>
+      React.isValidElement(tabPanel),
+  );
 
-        const renderedTab = renderTab(props as TabPanelProps);
-        return React.cloneElement(renderedTab, {
-          key: tabId,
-          isActive,
-        } as React.HTMLAttributes<HTMLElement>);
-      });
+  function getTabs() {
+    return tabPanels.map((tabPanel, i) => {
+      const isActive = i === activeTabIndex;
+      const props = tabPanel.props || {};
+      const {
+        renderTab = undefined,
+        id,
+        isDisabled,
+        tab,
+        href,
+      } = props as TabPanelProps;
+
+      // Generate ID if not provided
+      const tabId = id || `tab-${i}`;
+
+      if (!renderTab) {
+        return (
+          <Tab
+            key={tabId}
+            controls={!href ? tabId : ""}
+            href={href}
+            isDisabled={isDisabled}
+            isActive={isActive}
+          >
+            {tab}
+          </Tab>
+        );
+      }
+
+      const renderedTab = renderTab(props as TabPanelProps);
+      return React.cloneElement(renderedTab, {
+        key: tabId,
+        isActive,
+      } as React.HTMLAttributes<HTMLElement>);
+    });
   }
 
   function getPanels() {
-    return children
-      .filter((tabPanel) => tabPanel && React.isValidElement(tabPanel))
-      .map((tabPanel, i) => {
-        const isActive = i === activeTabIndex;
-        const props = tabPanel.props || {};
-        const { id } = props;
-        const tabId = id || `tab-${i}`;
-        return React.cloneElement(tabPanel, {
-          key: tabId,
-          isActive,
-          tab: undefined,
-        } as Partial<TabPanelProps>);
-      });
+    return tabPanels.map((tabPanel, i) => {
+      const isActive = i === activeTabIndex;
+      const props = tabPanel.props || {};
+      const { id } = props;
+      const tabId = id || `tab-${i}`;
+      return React.cloneElement(tabPanel, {
+        key: tabId,
+        isActive,
+        tab: undefined,
+      } as Partial<TabPanelProps>);
+    });
   }
 
   return (
     <>
-      <ul
-        className={tabNavClasses}
-        role={isLink ? "navigation" : "tablist"}
-        ref={tabListRef}
-        data-tabs={isLink ? undefined : "true"}
-        {...other}
-      >
-        {getTabs()}
-        {isFullWidth && <li role="presentation" className="tab-list__hr" />}
-      </ul>
+      <div className="tab-list__viewport">
+        <ul
+          className={tabNavClasses}
+          role={isLink ? "navigation" : "tablist"}
+          ref={tabListRef}
+          data-tabs={isLink ? undefined : "true"}
+          {...other}
+        >
+          {getTabs()}
+          {isFullWidth && <li role="presentation" className="tab-list__hr" />}
+        </ul>
+      </div>
       {!isLink ? getPanels() : null}
     </>
   );

package/src/components/Tabs/styles/config.scss

@@ -1,8 +1,12 @@
+@use "../../../styles/tokens/base";
 @use "../../../styles/tokens/space";
 @use "../../../styles/tools/convert";
 
 $outline-width: convert.to-rem(2px);
-$negative-outline-width: $outline-width * -1;
+$focusring-space: convert.to-rem(
+  base.$focusring-width + base.$focusring-offset
+);
+$negative-outline-width: $focusring-space * -1;
 
 $tablist-spacing: (
   margin: $negative-outline-width $negative-outline-width
@@ -10,50 +14,39 @@ $tablist-spacing: (
       space.get() + $negative-outline-width,
     )
     $negative-outline-width,
-  padding: $outline-width,
+  padding: $focusring-space,
 );
 
 $tab: (
   default: (
     color: var(--color-text-default),
-    box-shadow: inset 0 -2px 0 0 var(--color-border-contrast),
+    background-color: transparent,
+    box-shadow: inset 0 -1px 0 0 var(--color-surface-moderate),
   ),
   active: (
-    color: var(--color-text-accent),
+    color: var(--color-text-default),
+    background-color: var(--color-fill-moderate),
     box-shadow: (
-      inset -2px 0 0 0 var(--color-border-contrast),
-      inset 0 2px 0 0 var(--color-border-contrast),
-      inset 2px 0 0 0 var(--color-border-contrast),
+      inset 0 4px 0 0 var(--color-border-accent),
+      inset 0 -1px 0 0 var(--color-fill-moderate),
     ),
   ),
   hover: (
     color: var(--color-text-accent),
+    background-color: transparent,
+    box-shadow: inset 0 -1px 0 0 var(--color-surface-moderate),
   ),
   disabled: (
-    color: var(--color-surface-moderate),
-  ),
-);
-
-$tab-light: (
-  default: (
-    box-shadow: none "!important",
-  ),
-  active: (
-    box-shadow: inset 0 -4px 0 0 var(--color-border-accent) "!important",
-  ),
-  hover: (
-    box-shadow: none "!important",
-  ),
-  disabled: (
-    box-shadow: none "!important",
+    color: var(--color-text-disabled),
+    background-color: transparent,
   ),
 );
 
 $tab-sizes: (
   default: (
-    padding: space.get("small") space.get(),
+    padding: convert.to-rem(15px) convert.to-rem(20px),
   ),
   large: (
-    padding: space.get("small") space.get(),
+    padding: convert.to-rem(20px),
   ),
 );

package/src/components/Tabs/styles/mixins.scss

@@ -1,10 +1,61 @@
 @use "./config";
 @use "../../../styles/tokens/base";
 @use "../../../styles/tokens/space";
+@use "../../../styles/tools/convert";
 @use "../../../styles/tools/generate";
 
-@mixin list-base($spacing: config.$tablist-spacing) {
+$tab-focus-radius: convert.to-rem(5px);
+$tab-focusring-space: convert.to-rem(
+  base.$focusring-width + base.$focusring-offset
+);
+$tab-overflow-fade-width: convert.to-rem(72px);
+
+@mixin list-viewport {
   position: relative;
+  overflow: hidden;
+  padding: $tab-focusring-space $tab-focusring-space 0;
+
+  &::before,
+  &::after {
+    z-index: 2;
+    width: $tab-overflow-fade-width;
+    content: "";
+    position: absolute;
+    top: 0;
+    height: 100%;
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 0.2s ease;
+  }
+
+  &::before {
+    left: 0;
+    background: linear-gradient(
+      to left,
+      transparent 0%,
+      var(--color-background-primary) 100%
+    );
+  }
+
+  &::after {
+    right: 0;
+    background: linear-gradient(
+      to right,
+      transparent 0%,
+      var(--color-background-primary) 100%
+    );
+  }
+
+  &.has-left-overflow::before {
+    opacity: 1;
+  }
+
+  &.has-right-overflow::after {
+    opacity: 1;
+  }
+}
+
+@mixin list-base($spacing: config.$tablist-spacing) {
   display: flex;
   overflow-x: auto;
   overflow-y: visible;
@@ -16,6 +67,10 @@
 
 @mixin list-equal {
   flex-grow: 1;
+
+  .tab-list__tab {
+    text-align: center;
+  }
 }
 
 @mixin list-item {
@@ -28,54 +83,68 @@
   flex: 1 1 auto;
   display: flex;
   flex-flow: column;
+  justify-content: center;
   height: initial;
   position: relative;
-  font-weight: 600;
+  font-weight: 700;
   background: transparent;
   border-width: 0;
   text-align: left;
+  white-space: nowrap;
+  cursor: pointer;
+
+  &::after {
+    content: "";
+    position: absolute;
+    inset: $tab-focusring-space * -1;
+    border: base.$focus-outline;
+    border-radius: calc(#{$tab-focus-radius} + #{$tab-focusring-space});
+    opacity: 0;
+    pointer-events: none;
+  }
 
   &:focus {
     z-index: 1;
+    outline-width: 0;
+    outline-color: transparent;
   }
 
-  @include base.focusring-flush;
-}
+  &:focus::after {
+    opacity: 1;
+  }
 
-@mixin color-variant($config: config.$tab) {
-  @include generate.css-map($config, "default");
+  &:focus-visible {
+    outline-width: 0;
+    outline-color: transparent;
+  }
 
-  &[aria-selected="true"] {
-    @include generate.css-map($config, "active");
+  &:focus-visible::after {
+    opacity: 1;
   }
 
-  &:hover {
-    @include generate.css-map(config.$tab, "hover");
+  &:focus:not(:focus-visible)::after {
+    opacity: 0;
   }
 
-  &[aria-disabled="true"] {
-    @include generate.css-map(config.$tab, "disabled");
+  &[aria-selected="true"] {
+    z-index: 1;
   }
 }
 
-@mixin tab-light {
-  @include generate.css-map(config.$tab-light, "default");
-
-  &:hover {
-    @include generate.css-map(config.$tab-light, "hover");
-  }
+@mixin color-variant($config: config.$tab) {
+  @include generate.css-map($config, "default");
 
   &[aria-selected="true"] {
-    @include generate.css-map(config.$tab-light, "active");
+    @include generate.css-map($config, "active");
   }
 
-  &[aria-disabled="true"] {
-    @include generate.css-map(config.$tab-light, "disabled");
+  &:hover:not([aria-selected="true"]):not([aria-disabled="true"]) {
+    @include generate.css-map(config.$tab, "hover");
   }
-}
 
-@mixin tab-centered {
-  align-items: center;
+  &[aria-disabled="true"]:not([aria-selected="true"]) {
+    @include generate.css-map(config.$tab, "disabled");
+  }
 }
 
 @mixin tab-size($size, $config: config.$tab-sizes) {
@@ -85,10 +154,6 @@
 @mixin underline {
   flex: 1 1 auto;
   max-width: none;
-  box-shadow: inset 0 -2px 0 0 var(--color-border-contrast);
-}
-
-@mixin underline-light {
   box-shadow: inset 0 -1px 0 0 var(--color-surface-moderate);
 }