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

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/components/Tag/styles/config.scss

@@ -38,7 +38,7 @@ $icon-sizes: (
     padding: convert.to-rem(7px),
   ),
   large: (
-    padding: convert.to-rem(9.5px),
+    padding: convert.to-rem(8px),
   ),
 );
 

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

@@ -51,11 +51,6 @@
           }
         }
       }
-
-      // TODO: This is a temporary solution to make transparent tags work on gray backgrounds, we need to find a better way to handle this in the future.
-      &--transparent {
-        background-color: var(--color-surface-primary);
-      }
     }
 
     // Transparent class is a special variant of color, it's not possible to make transparent variant for each color at the moment.
@@ -121,6 +116,28 @@
       border-radius: 9999px;
       z-index: 2;
 
+      .background-secondary & {
+        background-color: var(--color-border-strong);
+
+        &:not([disabled]):not([aria-disabled="true"]) {
+          &:focus-visible,
+          &:hover {
+            background-color: color.$gray-600;
+          }
+
+          &:active,
+          &.is-active {
+            color: var(--color-text-inverse);
+            background-color: var(--color-background-contrast);
+          }
+        }
+
+        &[aria-disabled="true"],
+        &[disabled] {
+          background-color: var(--color-border-strong);
+        }
+      }
+
       @each $name, $props in config.$icon-sizes {
         &#{generate.variant-name($name)} {
           $padding: sass-map.get($props, padding);

package/src/components/Tile/Tile.tsx

@@ -2,30 +2,18 @@ import cx from "classnames";
 import React, { ReactNode } from "react";
 import { Icon } from "../Icon";
 import { IconProps } from "../Icon/Icon";
-import { Image } from "../Image";
 
-export const tileColors = [
-  "surface-primary",
-  "surface-subtle",
-  "surface-contrast",
-] as const;
-export type TileColor = (typeof tileColors)[number];
 export type TileHAlign = "center";
 export type TileVAlign = "center" | "end" | "space-between";
+export type TileVariant = "compact" | "action";
 
 export interface TileProps extends React.HTMLAttributes<HTMLDivElement> {
-  /** Tile color. */
-  color?: TileColor;
   /** Horizontal alignment of the tile content. */
   hAlign?: TileHAlign;
   /** Vertical alignment of the tile content. */
   vAlign?: TileVAlign;
-  /** variant can be "image" or "action" */
-  variant?: "image" | "action";
-  /** Alt and src attributes are required */
-  backgroundImage?: React.ComponentProps<typeof Image>;
-  /** Use small spacing */
-  space?: "small";
+  /** Tile variant. */
+  variant?: TileVariant;
   children?: ReactNode;
   className?: string;
 }
@@ -36,54 +24,42 @@ const Tile: React.FC<TileProps> = ({
   className,
   children,
   variant,
-  backgroundImage,
   vAlign,
   hAlign,
-  color,
-  space,
   ...other
 }) => {
+  const isCompact = variant === "compact";
+  const isAction = variant === "action";
+
   const classesWrapper = cx(
     CLASS_ROOT,
     {
-      [`${CLASS_ROOT}--${variant}`]: variant,
-      ...(color && color !== "surface-contrast" ? { [color]: true } : {}),
-      ...(color === "surface-contrast"
-        ? { [`${color} text-inverse`]: true }
-        : {}),
+      [`${CLASS_ROOT}--compact`]: isCompact,
+      [`${CLASS_ROOT}--action`]: isAction,
     },
     className,
   );
 
   const classesBody = cx(
     `${CLASS_ROOT}__body`,
-    vAlign && `justify-content-${vAlign}`,
-    hAlign && `align-items-${hAlign}`,
-    space && `${CLASS_ROOT}__body--space-${space}`,
+    !isAction && vAlign && `justify-content-${vAlign}`,
+    !isAction && hAlign && `align-items-${hAlign}`,
   );
 
-  const iconProps =
-    variant === "action"
-      ? ({
-          name: "chevron-right",
-          size: "medium",
-          color: "orange",
-        } as IconProps)
-      : null;
+  const iconProps = isAction
+    ? ({
+        name: "chevron-right",
+        size: "medium",
+        color: "orange",
+      } as IconProps)
+    : null;
 
   return (
     <div className={classesWrapper} {...other}>
       <div className={classesBody}>
-        {iconProps && <Icon {...iconProps} />}
         {children}
+        {iconProps && <Icon {...iconProps} />}
       </div>
-      {backgroundImage && (
-        // eslint-disable-next-line jsx-a11y/alt-text
-        <Image
-          {...backgroundImage}
-          className={cx(`${CLASS_ROOT}__bg`, backgroundImage.className)}
-        />
-      )}
     </div>
   );
 };

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

@@ -1,81 +1,79 @@
 @use "../../../styles/tokens/space";
 @use "../../../styles/tokens/breakpoint";
 @use "../../../styles/tools/convert";
-@use "./config";
 
 @mixin tile-base {
   display: flex;
   position: relative;
   overflow: hidden;
   width: 100%;
-  border-radius: convert.to-rem(10px);
-  border: 1px solid var(--color-border-strong);
+  border-radius: convert.to-rem(5px);
+  border: 1px solid var(--color-border-subtle);
+  background-color: var(--color-fill-primary);
+  color: var(--color-text-default);
   word-break: break-word;
 }
 
-@mixin tile-image-aspect {
-  aspect-ratio: 310 / 466 !important;
-}
-
 @mixin tile-body {
   flex: 1;
   display: flex;
   flex-direction: column;
+  align-items: flex-start;
+  gap: space.get("medium");
+  padding: space.get("medium");
   z-index: 1;
+
   *:last-child {
     margin-bottom: 0;
   }
-  @each $breakpoint, $space in config.$spacing {
-    @include breakpoint.get($breakpoint) {
-      padding: $space;
-    }
-  }
-}
 
-@mixin tile-body-space-small {
-  padding: space.get("medium");
-}
-
-@mixin tile-bg {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  object-fit: cover;
-  object-position: center center;
-  height: 100%;
-  margin-bottom: 0 !important;
+  @include breakpoint.get("md") {
+    flex-direction: column;
+    padding: space.get("large");
+  }
 }
 
-@mixin tile-image-gradient {
-  background: linear-gradient(
-    180deg,
-    rgba(0, 0, 0, 1) 0%,
-    rgba(0, 0, 0, 0.75) 40%,
-    rgba(0, 0, 0, 0) 70%
-  );
-  color: #fff;
-}
+@mixin tile-body-compact {
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  gap: space.get("xsmall");
+  padding: convert.to-rem(15px);
+  flex-shrink: 0;
+  text-wrap: nowrap;
 
-@mixin tile-image-gradient-end {
-  background: linear-gradient(
-    0deg,
-    rgba(0, 0, 0, 1) 0%,
-    rgba(0, 0, 0, 0.75) 40%,
-    rgba(0, 0, 0, 0) 70%
-  );
+  @include breakpoint.get("md") {
+    flex-direction: column;
+    padding: space.get("medium");
+  }
 }
 
 @mixin tile-action {
   flex-direction: row;
-  justify-content: space-between;
   align-items: center;
-  order: 1;
+  justify-content: space-between;
+  gap: convert.to-rem(15px);
+  padding: space.get("large") space.get("medium");
+
+  @include breakpoint.get("sm") {
+    gap: space.get("medium");
+    padding: space.get("large");
+  }
+}
+
+@mixin tile-action-shell {
+  background-color: transparent;
+  color: var(--color-text-inverse);
+  border-color: var(--color-border-strong);
 }
 
 @mixin tile-action-icon {
-  order: 2;
-  margin-left: space.get("small");
   flex-shrink: 0;
+  width: convert.to-rem(24px);
+  height: convert.to-rem(24px);
+
+  @include breakpoint.get("sm") {
+    width: convert.to-rem(32px);
+    height: convert.to-rem(32px);
+  }
 }

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

@@ -4,33 +4,21 @@
   .tile {
     @include mixins.tile-base;
 
-    &--image {
-      @include mixins.tile-image-aspect;
-    }
-
     &__body {
       @include mixins.tile-body;
     }
 
-    &__body--space-small {
-      @include mixins.tile-body-space-small;
-    }
-
-    &__bg {
-      @include mixins.tile-bg;
-    }
-
-    &--image .tile__body {
-      @include mixins.tile-image-gradient;
-      &.justify-content-end {
-        @include mixins.tile-image-gradient-end;
-      }
+    &--compact .tile__body {
+      @include mixins.tile-body-compact;
     }
 
     &--action {
+      @include mixins.tile-action-shell;
+
       .tile__body {
         @include mixins.tile-action;
       }
+
       .icon {
         @include mixins.tile-action-icon;
       }

package/src/components/Tile/tests/Tile.unit.test.jsx

@@ -8,6 +8,7 @@ describe("rendering Tile", () => {
       const { getByTestId } = render(<Tile data-testid="test-id" />);
       expect(getByTestId("test-id").tagName).toBe("DIV");
       expect(getByTestId("test-id")).toHaveClass("tile");
+      expect(getByTestId("test-id")).not.toHaveClass("surface-primary");
     });
     it("renders child div with class tile__body", () => {
       const { getByTestId } = render(<Tile data-testid="test-id" />);
@@ -28,78 +29,6 @@ describe("rendering Tile", () => {
       expect(getByTestId("test-id")).toHaveClass("tile");
       expect(getByTestId("test-id")).toHaveClass("test-class");
     });
-    it("renders Image when backgroundImage is object of Image props and src is string", () => {
-      const { container } = render(
-        <Tile
-          data-testid="test-id"
-          backgroundImage={{ src: "./test.png", alt: "test" }}
-        />,
-      );
-      expect(container.querySelector("img")).toBeInTheDocument();
-      // The Image component may add the 'img' class, but always has 'tile__bg'
-      expect(container.querySelector("img")).toHaveClass("tile__bg");
-    });
-    it("renders image inside picture when backgroundImage is object of Image props and src is object", () => {
-      const { container } = render(
-        <Tile
-          data-testid="test-id"
-          backgroundImage={{ src: { default: "./test.png" }, alt: "test" }}
-        />,
-      );
-      expect(container.querySelector("picture")).toBeInTheDocument();
-      const img = container.querySelector("picture").querySelector("img");
-      expect(img).toBeInTheDocument();
-      // Update: Only check for class if it exists, otherwise check for no class
-      // If the implementation no longer adds 'tile__bg', this should pass
-      expect(img.className === "" || img.className === undefined).toBe(true);
-    });
-    it("background image has src set to backgroundImage.src", () => {
-      const { container } = render(
-        <Tile
-          data-testid="test-id"
-          backgroundImage={{ src: "./test.png", alt: "test" }}
-        />,
-      );
-      expect(new URL(container.querySelector("img").src).pathname).toBe(
-        "/test.png",
-      );
-    });
-    it("background image has alt set to backgroundImage.alt", () => {
-      const { container } = render(
-        <Tile
-          data-testid="test-id"
-          backgroundImage={{ src: "./test.png", alt: "test" }}
-        />,
-      );
-      expect(container.querySelector("img").alt).toBe("test");
-    });
-    it("background image has additional class when backgroundImage.className is set", () => {
-      const { container } = render(
-        <Tile
-          data-testid="test-id"
-          backgroundImage={{
-            src: "./test.png",
-            alt: "test",
-            className: "test-class",
-          }}
-        />,
-      );
-      expect(container.querySelector("img")).toHaveClass("tile__bg");
-      expect(container.querySelector("img")).toHaveClass("test-class");
-    });
-    it("has surface class when color prop is set", () => {
-      const { getByTestId } = render(
-        <Tile data-testid="test-id" color="surface-secondary" />,
-      );
-      expect(getByTestId("test-id")).toHaveClass("surface-secondary");
-    });
-    it("applies surface-contrast and text-inverse classes when color is surface-contrast", () => {
-      const { getByTestId } = render(
-        <Tile data-testid="test-id" color="surface-contrast" />,
-      );
-      expect(getByTestId("test-id")).toHaveClass("surface-contrast");
-      expect(getByTestId("test-id")).toHaveClass("text-inverse");
-    });
     it("applies hAlign and vAlign classes to body", () => {
       const { getByTestId } = render(
         <Tile data-testid="test-id" hAlign="center" vAlign="space-between" />,
@@ -108,26 +37,28 @@ describe("rendering Tile", () => {
       expect(body).toHaveClass("align-items-center");
       expect(body).toHaveClass("justify-content-space-between");
     });
-    it("applies space class to body when space prop is set", () => {
+    it("applies compact wrapper class when variant is compact", () => {
       const { getByTestId } = render(
-        <Tile data-testid="test-id" space="small" />,
+        <Tile data-testid="test-id" variant="compact" />,
       );
+      expect(getByTestId("test-id")).toHaveClass("tile--compact");
       const body = getByTestId("test-id").querySelector(".tile__body");
-      expect(body).toHaveClass("tile__body--space-small");
+      expect(body).not.toHaveClass("tile__body--compact");
     });
     it("applies variant class to wrapper when variant is set", () => {
       const { getByTestId } = render(
-        <Tile data-testid="test-id" variant="image" />,
+        <Tile data-testid="test-id" variant="action" />,
       );
-      expect(getByTestId("test-id")).toHaveClass("tile--image");
+      expect(getByTestId("test-id")).toHaveClass("tile--action");
     });
     it("renders Icon when variant is 'action'", () => {
       const { getByTestId } = render(
         <Tile data-testid="test-id" variant="action" />,
       );
-      // The Icon should be rendered as the first child of .tile__body
       const body = getByTestId("test-id").querySelector(".tile__body");
       expect(body.querySelector("svg")).toBeInTheDocument();
+      expect(body.lastElementChild.tagName).toBe("svg");
+      expect(body).not.toHaveClass("tile__body--action");
     });
   });
 });

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/tokens/color-vars.scss

@@ -7,7 +7,6 @@
 :host,
 :host(.is-light),
 .is-light,
-.bg-white,
 #root.is-light,
 #root-modals.is-light,
 #root-tooltips.is-light,
@@ -24,7 +23,6 @@
 // Dark theme CSS variables
 :host(.is-dark),
 .is-dark,
-.bg-black,
 #root.is-dark,
 #root-modals.is-dark,
 #root-tooltips.is-dark,