chore: make tabs scroll horizontally instead of truncate

.changeset/curly-dots-brush.md

@@ -0,0 +1,6 @@
+---
+"@twilio-paste/tabs": patch
+"@twilio-paste/core": patch
+---
+
+[Tabs] make horizontal tabs responsive. When horizontal tabs overflow the width of the container, instead of truncating like they did previously, they now scroll horizontally.

packages/paste-core/components/code-block/type-docs.json

@@ -5260,6 +5260,20 @@
       "required": false,
       "externalProp": true
     },
+    "i18nScrollLeftLabel": {
+      "type": "string",
+      "defaultValue": "scroll tab list to the left",
+      "required": false,
+      "externalProp": false,
+      "description": "Accessible text for the scroll left button when horizontal tabs overflow the container."
+    },
+    "i18nScrollRightLabel": {
+      "type": "string",
+      "defaultValue": "scroll tab list to the right",
+      "required": false,
+      "externalProp": false,
+      "description": "Accessible text for the scroll right button when horizontal tabs overflow the container."
+    },
     "id": {
       "type": "string",
       "defaultValue": null,

packages/paste-core/components/tabs/package.json

@@ -25,36 +25,48 @@
     "tsc": "tsc"
   },
   "peerDependencies": {
+    "@twilio-paste/anchor": "^12.1.0",
     "@twilio-paste/animation-library": "^2.0.0",
     "@twilio-paste/box": "^10.0.0",
+    "@twilio-paste/button": "^14.1.0",
     "@twilio-paste/color-contrast-utils": "^5.0.0",
     "@twilio-paste/customization": "^8.0.0",
     "@twilio-paste/design-tokens": "^10.0.0",
     "@twilio-paste/flex": "^8.0.0",
+    "@twilio-paste/icons": "^12.4.0",
     "@twilio-paste/reakit-library": "^2.0.0",
+    "@twilio-paste/spinner": "^14.1.1",
+    "@twilio-paste/stack": "^8.1.0",
     "@twilio-paste/style-props": "^9.0.0",
     "@twilio-paste/styling-library": "^3.0.0",
     "@twilio-paste/tabs-primitive": "^2.0.0",
     "@twilio-paste/theme": "^11.0.0",
     "@twilio-paste/types": "^6.0.0",
+    "@twilio-paste/uid-library": "^2.0.0",
     "@types/react": "^16.8.6 || ^17.0.2 || ^18.0.27",
     "@types/react-dom": "^16.8.6 || ^17.0.2 || ^18.0.10",
     "react": "^16.8.6 || ^17.0.2 || ^18.0.0",
     "react-dom": "^16.8.6 || ^17.0.2 || ^18.0.0"
   },
   "devDependencies": {
+    "@twilio-paste/anchor": "^12.1.0",
     "@twilio-paste/animation-library": "^2.0.0",
     "@twilio-paste/box": "^10.3.0",
+    "@twilio-paste/button": "^14.1.0",
     "@twilio-paste/color-contrast-utils": "^5.0.0",
     "@twilio-paste/customization": "^8.1.1",
     "@twilio-paste/design-tokens": "^10.4.0",
     "@twilio-paste/flex": "^8.1.0",
+    "@twilio-paste/icons": "^12.4.0",
     "@twilio-paste/reakit-library": "^2.1.0",
+    "@twilio-paste/spinner": "^14.1.1",
+    "@twilio-paste/stack": "^8.1.0",
     "@twilio-paste/style-props": "^9.1.1",
     "@twilio-paste/styling-library": "^3.0.0",
     "@twilio-paste/tabs-primitive": "^2.0.1",
     "@twilio-paste/theme": "^11.0.0",
     "@twilio-paste/types": "^6.0.0",
+    "@twilio-paste/uid-library": "^2.0.0",
     "@types/react": "^18.0.27",
     "@types/react-dom": "^18.0.10",
     "react": "^18.0.0",

packages/paste-core/components/tabs/src/Tab.tsx

@@ -114,7 +114,7 @@ const getTabBoxStyles = (orientation: Orientation, variant: Variants): BoxStyleP
         flexBasis: isFitted ? "50%" : undefined,
         flexGrow: isFitted ? 1 : undefined,
         flexShrink: isFitted ? 1 : undefined,
-        minWidth: "sizeSquare130",
+        minWidth: "max-content",
         paddingY: "space30",
         paddingX: "space50",
         textAlign: "center",

packages/paste-core/components/tabs/src/TabList.tsx

@@ -1,12 +1,15 @@
 import { Box } from "@twilio-paste/box";
 import type { BoxProps } from "@twilio-paste/box";
+import { css, styled } from "@twilio-paste/styling-library";
 import { TabPrimitiveList } from "@twilio-paste/tabs-primitive";
 import type { HTMLPasteProps } from "@twilio-paste/types";
+import { useUID } from "@twilio-paste/uid-library";
 import * as React from "react";
 
 import { TabsContext } from "./TabsContext";
 import type { Variants } from "./types";
 import { getElementName } from "./utils";
+import {TabListScrollButton} from "./TabListScrollButton"
 
 export interface TabListProps extends HTMLPasteProps<"div"> {
   /**
@@ -32,25 +35,72 @@ export interface TabListProps extends HTMLPasteProps<"div"> {
    * @memberof TabListProps
    */
   variant?: Variants;
+  /**
+   * Accessible text for the scroll left button when horizontal tabs overflow the container.
+   *
+   * @type {string}
+   * @memberof TabListProps
+   * @default "scroll tab list to the left"
+   */
+  i18nScrollLeftLabel?: string;
+  /**
+   * Accessible text for the scroll right button when horizontal tabs overflow the container.
+   *
+   * @type {string}
+   * @memberof TabListProps
+   * @default "scroll tab list to the right"
+   */
+  i18nScrollRightLabel?: string;
 }
 
-const HorizontalTabList: React.FC<React.PropsWithChildren<{ variant?: Variants; element?: BoxProps["element"] }>> = ({
+const HorizontalTabListStyle = styled.div(() => {
+  return css({
+    "::-webkit-scrollbar": {
+      display: "none",
+    },
+    "ms-overflow-style": "none",
+    "scrollbar-width": "none",
+  });
+});
+
+const HorizontalTabList: React.FC<React.PropsWithChildren<{ variant?: Variants; element?: BoxProps["element"]; scrollLeftLabel: string; scrollRightLabel: string }>> = ({
   children,
   variant,
   element,
+  scrollLeftLabel,
+  scrollRightLabel
 }) => {
   const isInverse = variant === "inverse" || variant === "inverse_fitted";
-
+  const [showLeftScrollButton, setShowLeftScrollButton] = React.useState(false);
+  const [showRightScrollButton, setShowRightScrollButton] = React.useState(true);
+  const tabListId = useUID();
+
   return (
     <Box
+      as={HorizontalTabListStyle as any}
+      position="relative"
       display="flex"
       borderBottomStyle="solid"
       borderBottomWidth="borderWidth10"
       borderBottomColor={isInverse ? "colorBorderInverseWeaker" : "colorBorderWeak"}
       columnGap="space20"
+      overflowX="scroll"
       element={element}
+      id={tabListId}
+      onScroll={() => {
+        // eslint-disable-next-line unicorn/prefer-query-selector
+        const tabList = document.getElementById(tabListId);
+        const scrollPosition = tabList?.scrollLeft
+        const containerWidth = tabList?.scrollWidth && tabList?.scrollWidth - tabList?.clientWidth
+        if (scrollPosition && scrollPosition > 0) setShowLeftScrollButton(true);
+        else if (scrollPosition === 0) setShowLeftScrollButton(false);
+        if (scrollPosition && containerWidth && scrollPosition < containerWidth) setShowRightScrollButton(true)
+        else if (scrollPosition && containerWidth && scrollPosition === containerWidth) setShowRightScrollButton(false);
+      }}
     >
+      {showLeftScrollButton && <TabListScrollButton direction="left" label={scrollLeftLabel} />}
       {children}
+      {showRightScrollButton && <TabListScrollButton direction="right" label={scrollRightLabel} />}
     </Box>
   );
 };
@@ -80,15 +130,15 @@ const VerticalTabList: React.FC<React.PropsWithChildren<{ variant?: Variants; el
 
 VerticalTabList.displayName = "VerticalTabList";
 
-const TabList = React.forwardRef<HTMLDivElement, TabListProps>(({ children, element, variant, ...props }, ref) => {
+const TabList = React.forwardRef<HTMLDivElement, TabListProps>(({ children, element, variant, i18nScrollLeftLabel = "scroll tab list to the left", i18nScrollRightLabel = "scroll tab list to the right", ...props }, ref) => {
   const tab = React.useContext(TabsContext);
   const { orientation } = tab;
   const elementName = getElementName(orientation, "TAB_LIST", element);
   const TabListWrapper = orientation === "vertical" ? VerticalTabList : HorizontalTabList;
 
   return (
     <TabPrimitiveList {...(tab as any)} as={Box} {...props} element={elementName} ref={ref}>
-      <TabListWrapper variant={variant || tab.variant} element={`${elementName}_CHILD`}>
+      <TabListWrapper variant={variant || tab.variant} element={`${elementName}_CHILD`} scrollLeftLabel={i18nScrollLeftLabel} scrollRightLabel={i18nScrollRightLabel}>
         {children}
       </TabListWrapper>
     </TabPrimitiveList>

packages/paste-core/components/tabs/src/TabListScrollButton.tsx

@@ -0,0 +1,53 @@
+import * as React from "react";
+import { Box } from "@twilio-paste/box";
+import { Button } from "@twilio-paste/button";
+import { ChevronLeftIcon } from "@twilio-paste/icons/esm/ChevronLeftIcon";
+import { ChevronRightIcon } from "@twilio-paste/icons/esm/ChevronRightIcon";
+
+export const TabListScrollButton: React.FC<{ direction: "left" | "right"; label: string }> = ({ direction, label }) => {
+  return (
+    <Box
+      position="fixed"
+      height="38px"
+      zIndex="zIndex10"
+      backgroundColor="colorBackgroundBody"
+      display="flex"
+      alignItems="center"
+      right={direction === "right" ? "0" : "auto"} // currently 0 of the page, make 0 of the tab list
+    >
+      <Button
+        display="grid"
+        alignItems="center"
+        justifyContent="center"
+        variant="reset"
+        width="28px"
+        height="28px"
+        borderStyle="solid"
+        borderColor="colorBorderWeaker"
+        borderWidth="borderWidth10"
+        borderRadius="borderRadius20"
+        backgroundColor="colorBackgroundBody"
+        boxShadow="shadowLow"
+      >
+        {direction === "left" && (
+          <ChevronLeftIcon
+            decorative={false}
+            title={label}
+            size="sizeIcon20"
+            color="colorTextWeak"
+          />
+        )}
+        {direction === "right" && (
+          <ChevronRightIcon
+            decorative={false}
+            title={label}
+            size="sizeIcon20"
+            color="colorTextWeak"
+          />
+        )}
+      </Button>
+    </Box>
+  );
+};
+
+TabListScrollButton.displayName = "TabListScrollButton";

packages/paste-core/components/tabs/type-docs.json

@@ -526,6 +526,20 @@
       "required": false,
       "externalProp": true
     },
+    "i18nScrollLeftLabel": {
+      "type": "string",
+      "defaultValue": "scroll tab list to the left",
+      "required": false,
+      "externalProp": false,
+      "description": "Accessible text for the scroll left button when horizontal tabs overflow the container."
+    },
+    "i18nScrollRightLabel": {
+      "type": "string",
+      "defaultValue": "scroll tab list to the right",
+      "required": false,
+      "externalProp": false,
+      "description": "Accessible text for the scroll right button when horizontal tabs overflow the container."
+    },
     "id": {
       "type": "string",
       "defaultValue": null,

yarn.lock

@@ -15094,37 +15094,49 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@twilio-paste/tabs@workspace:packages/paste-core/components/tabs"
   dependencies:
+    "@twilio-paste/anchor": ^12.1.0
     "@twilio-paste/animation-library": ^2.0.0
     "@twilio-paste/box": ^10.3.0
+    "@twilio-paste/button": ^14.1.0
     "@twilio-paste/color-contrast-utils": ^5.0.0
     "@twilio-paste/customization": ^8.1.1
     "@twilio-paste/design-tokens": ^10.4.0
     "@twilio-paste/flex": ^8.1.0
+    "@twilio-paste/icons": ^12.4.0
     "@twilio-paste/reakit-library": ^2.1.0
+    "@twilio-paste/spinner": ^14.1.1
+    "@twilio-paste/stack": ^8.1.0
     "@twilio-paste/style-props": ^9.1.1
     "@twilio-paste/styling-library": ^3.0.0
     "@twilio-paste/tabs-primitive": ^2.0.1
     "@twilio-paste/theme": ^11.0.0
     "@twilio-paste/types": ^6.0.0
+    "@twilio-paste/uid-library": ^2.0.0
     "@types/react": ^18.0.27
     "@types/react-dom": ^18.0.10
     react: ^18.0.0
     react-dom: ^18.0.0
     tsx: ^4.0.0
     typescript: ^4.9.4
   peerDependencies:
+    "@twilio-paste/anchor": ^12.1.0
     "@twilio-paste/animation-library": ^2.0.0
     "@twilio-paste/box": ^10.0.0
+    "@twilio-paste/button": ^14.1.0
     "@twilio-paste/color-contrast-utils": ^5.0.0
     "@twilio-paste/customization": ^8.0.0
     "@twilio-paste/design-tokens": ^10.0.0
     "@twilio-paste/flex": ^8.0.0
+    "@twilio-paste/icons": ^12.4.0
     "@twilio-paste/reakit-library": ^2.0.0
+    "@twilio-paste/spinner": ^14.1.1
+    "@twilio-paste/stack": ^8.1.0
     "@twilio-paste/style-props": ^9.0.0
     "@twilio-paste/styling-library": ^3.0.0
     "@twilio-paste/tabs-primitive": ^2.0.0
     "@twilio-paste/theme": ^11.0.0
     "@twilio-paste/types": ^6.0.0
+    "@twilio-paste/uid-library": ^2.0.0
     "@types/react": ^16.8.6 || ^17.0.2 || ^18.0.27
     "@types/react-dom": ^16.8.6 || ^17.0.2 || ^18.0.10
     react: ^16.8.6 || ^17.0.2 || ^18.0.0