@orangesk/orange-design-system 2.0.0-beta.9 → 2.0.0

package/src/components/Tabs/Tabs.tsx

@@ -1,32 +1,24 @@
 "use client";
 
-import React from "react";
 import cx from "classnames";
+import React from "react";
 
 import { useStatic } from "../../utils/hooks";
 import { Tab } from "./Tab";
-import TabsStatic from "./Tabs.static";
 import type { TabPanelProps } from "./TabPanel";
-
-export const variants = ["standard", "light"] as const;
-
-export type TabsVariant = (typeof variants)[number];
+import TabsStatic from "./Tabs.static";
 
 interface TabsProps extends React.HTMLAttributes<HTMLUListElement> {
   /** Active Tab index */
   activeTabIndex?: number;
   /** Additional classes for tabs header. */
   classesTabNav?: string;
-  /** Color theme for the tabs */
-  colorScheme?: "dark" | "light";
   /** All tabs have equal width inside a full-width container */
   hasEqualTabWidth?: boolean;
   /** Fullwidth container */
   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>[];
 }
@@ -38,9 +30,7 @@ const Tabs: React.FC<TabsProps> = ({
   isFullWidth,
   isLink,
   hasEqualTabWidth,
-  variant = "standard",
   children,
-  colorScheme,
   ...other
 }) => {
   const CLASS_TABNAV = "tab-list";
@@ -49,82 +39,82 @@ const Tabs: React.FC<TabsProps> = ({
     CLASS_TABNAV,
     { [`${CLASS_TABNAV}--equal`]: hasEqualTabWidth },
     { [`${CLASS_TABNAV}--fullwidth`]: isFullWidth },
-    { [`${CLASS_TABNAV}--light`]: variant === "light" },
-    { "is-dark": colorScheme === "dark" },
-    { "is-light": colorScheme === "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/index.ts

@@ -1,3 +1,3 @@
-export { Tabs } from "./Tabs";
-export { TabPanel } from "./TabPanel";
 export { Tab } from "./Tab";
+export { TabPanel } from "./TabPanel";
+export { Tabs } from "./Tabs";

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,14 +1,65 @@
 @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;
-  margin-bottom: space.get();
+  margin-bottom: space.get("large");
   align-items: stretch;
 
   @include generate.css-map($spacing);
@@ -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);
 }
 

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

@@ -5,6 +5,10 @@
 @use "../../../styles/typography/mixins" as typography;
 
 @layer components {
+  .tab-list__viewport {
+    @include mixins.list-viewport;
+  }
+
   .tab-list {
     $this: &;
 
@@ -21,10 +25,6 @@
       #{$this}--equal & {
         @include mixins.list-equal-item;
       }
-
-      #{$this}--light & {
-        @include mixins.underline-light;
-      }
     }
 
     &__tab {
@@ -36,21 +36,10 @@
           @include mixins.tab-size($size);
         }
       }
-      #{$this}--light & {
-        @include mixins.tab-light;
-      }
-
-      #{$this}--light#{$this}--equal & {
-        @include mixins.tab-centered;
-      }
     }
 
     &__hr {
       @include mixins.underline;
-
-      #{$this}--light & {
-        @include mixins.underline-light;
-      }
     }
   }
 }

package/src/components/Tabs/tests/{Tabs.unit.test.js → Tabs.unit.test.jsx}

@@ -1,8 +1,8 @@
-import { render, fireEvent, screen } from "@testing-library/react";
+import { fireEvent, render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-
-import { Tabs } from "../Tabs";
 import { TabPanel } from "../TabPanel";
+import { Tabs } from "../Tabs";
+import TabsStatic from "../Tabs.static";
 
 const arr = [1, 2, 3, 4];
 
@@ -99,13 +99,115 @@ describe("rendering Tabs", () => {
         }
       }
     });
-    it("has class is-dark when colorScheme is set to dark", () => {
-      const { getByTestId } = render(<TabsExample colorScheme="dark" />);
-      expect(getByTestId("test-id")).toHaveClass("is-dark");
+
+    it("toggles left and right overflow classes based on scroll position", () => {
+      const { getByTestId } = render(<TabsExample />);
+      const tabList = getByTestId("test-id");
+      const viewport = tabList.parentElement;
+      const tabsStatic = TabsStatic.getInstance(tabList);
+
+      let scrollLeft = 0;
+      Object.defineProperty(tabList, "clientWidth", {
+        configurable: true,
+        value: 200,
+      });
+      Object.defineProperty(tabList, "scrollWidth", {
+        configurable: true,
+        value: 500,
+      });
+      Object.defineProperty(tabList, "scrollLeft", {
+        configurable: true,
+        get: () => scrollLeft,
+        set: (value) => {
+          scrollLeft = value;
+        },
+      });
+
+      tabsStatic?.update();
+
+      expect(viewport).not.toHaveClass("has-left-overflow");
+      expect(viewport).toHaveClass("has-right-overflow");
+
+      scrollLeft = 300;
+      fireEvent.scroll(tabList);
+
+      expect(viewport).toHaveClass("has-left-overflow");
+      expect(viewport).not.toHaveClass("has-right-overflow");
+    });
+
+    it("centers clicked active tab inside the scroll container", () => {
+      const { getByTestId, container } = render(<TabsExample />);
+      const tabList = getByTestId("test-id");
+      const secondTab = container.querySelector(
+        'button[aria-controls="tabpanel-2"]',
+      );
+      const scrollToSpy = vi.fn();
+
+      Object.defineProperty(tabList, "clientWidth", {
+        configurable: true,
+        value: 200,
+      });
+      Object.defineProperty(tabList, "scrollWidth", {
+        configurable: true,
+        value: 600,
+      });
+      Object.defineProperty(tabList, "scrollLeft", {
+        configurable: true,
+        value: 180,
+        writable: true,
+      });
+      Object.defineProperty(tabList, "getBoundingClientRect", {
+        configurable: true,
+        value: () => ({
+          top: 0,
+          bottom: 0,
+          left: 0,
+          right: 200,
+          width: 200,
+          height: 0,
+          x: 0,
+          y: 0,
+          toJSON: () => ({}),
+        }),
+      });
+      Object.defineProperty(secondTab, "getBoundingClientRect", {
+        configurable: true,
+        value: () => ({
+          top: 0,
+          bottom: 0,
+          left: 40,
+          right: 120,
+          width: 80,
+          height: 0,
+          x: 40,
+          y: 0,
+          toJSON: () => ({}),
+        }),
+      });
+      tabList.scrollTo = scrollToSpy;
+
+      fireEvent.click(secondTab);
+
+      expect(scrollToSpy).toHaveBeenCalledWith({
+        left: 160,
+        behavior: "smooth",
+      });
     });
-    it("has class is-light when colorScheme is set to light", () => {
-      const { getByTestId } = render(<TabsExample colorScheme="light" />);
-      expect(getByTestId("test-id")).toHaveClass("is-light");
+
+    it("does not center on pointer-style focus before click activation", () => {
+      const { getByTestId, container } = render(<TabsExample />);
+      const tabList = getByTestId("test-id");
+      const secondTab = container.querySelector(
+        'button[aria-controls="tabpanel-2"]',
+      );
+      const scrollToSpy = vi.fn();
+
+      secondTab.matches = vi.fn((selector) => selector !== ":focus-visible");
+      tabList.scrollTo = scrollToSpy;
+
+      fireEvent.focus(secondTab);
+
+      expect(scrollToSpy).not.toHaveBeenCalled();
     });
   });
   describe("checking fireEvents", () => {
@@ -189,7 +291,7 @@ describe("rendering Tabs", () => {
       tabs = screen.getAllByRole("tab");
     });
     beforeAll(() => {
-      window.document.getSelection = jest.fn();
+      window.document.getSelection = vi.fn();
     });
     it('"ArrowLeft" moves focus left and loops from first to last item', async () => {
       expect.assertions(3);

package/src/components/Tag/Tag.tsx

@@ -1,5 +1,5 @@
-import React from "react";
 import cx from "classnames";
+import React from "react";
 import { TagButtonProps } from "./TagButton";
 
 export const colors = [
@@ -21,8 +21,6 @@ export type TagSize = "small" | "large";
 interface CommonProps {
   color?: TagColor;
   size?: TagSize;
-  /** @deprecated */
-  isInverse?: boolean;
   isDisabled?: boolean;
   className?: string;
   children?: React.ReactNode;
@@ -55,7 +53,6 @@ const Tag = React.forwardRef<HTMLElement, TagProps>((props, ref) => {
   const {
     color,
     size,
-    isInverse,
     isDisabled,
     className,
     children,
@@ -64,7 +61,6 @@ const Tag = React.forwardRef<HTMLElement, TagProps>((props, ref) => {
   } = props;
 
   const classes = cx(CLASS_ROOT, className, {
-    "tag--inverse": isInverse,
     [`tag--${color}`]: color,
     [`tag--${size}`]: size,
   });

package/src/components/Tag/TagButton.tsx

@@ -1,5 +1,5 @@
-import React from "react";
 import cx from "classnames";
+import React from "react";
 
 import { Icon } from "@/components/Icon";
 import { CLASS_ROOT } from "./Tag";

package/src/components/Tag/index.ts

@@ -1,3 +1,3 @@
+export type { TagColor, TagSize } from "./Tag";
 export { Tag } from "./Tag";
 export { TagButton } from "./TagButton";
-export type { TagColor, TagSize } from "./Tag";