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

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.jsx

@@ -2,6 +2,7 @@ import { fireEvent, render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { TabPanel } from "../TabPanel";
 import { Tabs } from "../Tabs";
+import TabsStatic from "../Tabs.static";
 
 const arr = [1, 2, 3, 4];
 
@@ -98,6 +99,116 @@ describe("rendering Tabs", () => {
         }
       }
     });
+
+    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("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", () => {
     it("click in disabled tab button doesnt cause change", () => {

package/src/styles/base/globals.scss

@@ -106,6 +106,8 @@ button:not(:disabled) {
 
 a {
   text-decoration: none;
+  text-underline-offset: 2px;
+  text-decoration-thickness: auto;
 }
 
 // stylelint-disable-next-line no-descending-specificity

package/src/styles/utilities/horizontal-scroll.scss

@@ -15,14 +15,16 @@
 
     @supports selector(::-webkit-scrollbar) {
       &::-webkit-scrollbar {
-        height: convert.to-rem(6px);
+        height: convert.to-rem(8px);
         appearance: none;
-        background-color: var(--color-surface-moderate);
+        background-color: transparent;
         border-radius: 99px;
       }
 
       &::-webkit-scrollbar-track {
+        border: convert.to-rem(1px) solid transparent;
         background-color: var(--color-surface-moderate);
+        background-clip: content-box;
         border-radius: 99px;
       }
 
@@ -30,12 +32,15 @@
         opacity: 1;
         background-color: var(--color-fill-contrast);
         border-radius: 99px;
+        border: convert.to-rem(1px) solid transparent;
+        background-clip: content-box;
       }
 
       &:hover::-webkit-scrollbar-thumb,
       &:active::-webkit-scrollbar-thumb,
       &::-webkit-scrollbar-thumb:hover,
       &::-webkit-scrollbar-thumb:active {
+        border-width: 0;
         background-color: var(--color-fill-secondary) !important;
       }
     }

package/src/styles/utilities/text.scss

@@ -29,7 +29,6 @@
 
   .underline {
     text-decoration: underline !important;
-    text-underline-offset: 0.1em !important;
   }
 
   .no-underline {