Merge branch 'main' into chore/plop-create-docs

.changeset/fresh-points-breathe.md

@@ -0,0 +1,6 @@
+---
+"@twilio-paste/design-tokens": minor
+"@twilio-paste/core": minor
+---
+
+[Design Token] added new box shadows to support scrollable styling on inverse colored components

.changeset/grumpy-dryers-remain.md

@@ -0,0 +1,6 @@
+---
+"@twilio-paste/code-block": patch
+"@twilio-paste/core": patch
+---
+
+[CodeBlock] make tabs responsive

.changeset/loud-items-rhyme.md

@@ -0,0 +1,6 @@
+---
+"@twilio-paste/in-page-navigation": patch
+"@twilio-paste/core": patch
+---
+
+[In Page Navigation] make items scrollable

.changeset/strong-eagles-complain.md

@@ -0,0 +1,7 @@
+---
+"@twilio-paste/tabs": minor
+"@twilio-paste/core": minor
+"@twilio-paste/codemods": minor
+---
+
+[Tabs] make the non-fitted variant Tabs responsive. Export the context provider `TabsContext`.

.github/labeler.yml

@@ -2,42 +2,49 @@
 
 # Add 'repo' label to any root file changes
 "Area: Repo":
-  - "*"
+  - changed-files:
+      - any-glob-to-any-file: "*/**"
 
 "Area: Primitives":
-  - packages/paste-core/primitives/**/*
+  - changed-files:
+      - any-glob-to-any-file: packages/paste-core/primitives/**/*
 
 "Area: Layout":
-  - packages/paste-core/layout/**/*
+  - changed-files:
+      - any-glob-to-any-file: packages/paste-core/layout/**/*
 
 "Area: Components":
-  - packages/paste-core/components/**/*
+  - changed-files:
+      - any-glob-to-any-file: packages/paste-core/components/**/*
 
 "Area: Core bundle":
-  - packages/paste-core/core-bundle/**/*
+  - changed-files:
+      - any-glob-to-any-file: packages/paste-core/core-bundle/**/*
 
 "Area: Doc Site":
-  - packages/paste-website/**/*
+  - changed-files:
+      - any-glob-to-any-file: packages/paste-website/**/*
 
 "Area: Theme":
-  - packages/paste-theme/**/*
+  - changed-files:
+      - any-glob-to-any-file: packages/paste-theme/**/*
 
 "Area: Tokens":
-  - packages/paste-design-tokens/**/*
+  - changed-files:
+      - any-glob-to-any-file: packages/paste-design-tokens/**/*
 
 "Area: Storybook":
-  - .storybook/**/*
+  - changed-files:
+      - any-glob-to-any-file: .storybook/**/*
 
 "Area: Infrastructure":
-  - .eslint/**/*
-  - .github/**/*
-  - .jest/**/*
-  - .vscode/**/*
-  - tools/**/*
+  - changed-files:
+      - any-glob-to-any-file: [".github/**/*", ".jest/**/*", ".storybook/**/*", ".vscode/**/*", "tools/**/*"]
 
 "Type: Documentation":
-  - packages/paste-website/src/pages/**/*
+  - changed-files:
+      - any-glob-to-any-file: packages/paste-website/src/pages/**/*
 
 "Type: Tests":
-  - "**/__tests__/**/*"
-  - cypress/**/*
+  - changed-files:
+      - any-glob-to-any-file: ["**/__tests__/**/*", "cypress/**/*"]

.github/opened-pr-contribution-labeler.yml

@@ -0,0 +1,6 @@
+# https://github.com/actions/labeler
+
+# Add 'Contribution' label to any opened PR when author external to team
+"Contribution":
+  - changed-files:
+      - any-glob-to-any-file: "*/**"

.github/workflows/on_pull_request.yml

@@ -382,7 +382,8 @@ jobs:
 
   storybook_tests:
     name: Storybook test runner
-    runs-on: ubuntu-latest
+    # Causes playwrite issues in latest versions. Upgrading deps causes violations in the storybook tests.
+    runs-on: ubuntu-22.04
     timeout-minutes: 20
     needs: chromatic
     strategy:
@@ -450,7 +451,7 @@ jobs:
       - name: Checkout Repo
         uses: actions/checkout@v4
 
-      - uses: actions/labeler@v4
+      - uses: actions/labeler@v5
         with:
           repo-token: "${{ secrets.GITHUB_TOKEN }}"
           sync-labels: true

.github/workflows/on_pull_request_open.yml

@@ -5,13 +5,30 @@ on:
     types: [opened]
 
 jobs:
-  pr-triage:
+  pr-context-labeler:
     runs-on: ubuntu-latest
     steps:
-      - name: Auto labeller
-        uses: actions/labeler@v4
+      - name: Checkout Repo
+        uses: actions/checkout@v4
+
+      - name: Check user for team affiliation
+        uses: tspascoal/get-user-teams-membership@v2
+        id: teamAffiliation
+        with:
+          GITHUB_TOKEN: "${{ secrets.PAT_GH_READ_ORG }}"
+          username: "${{ github.actor }}"
+          # List of all teams for dsys
+          team: "[Design Systems PD,design-systems,Design Systems Eng,Design Systems Eng Leads]"
+
+      - name: Debug in group
+        run: echo "${{ github.actor }} is team member ${{ steps.teamAffiliation.outputs.isTeamMember }}"
+
+      - name: Auto contribution labeler
+        if: ${{ steps.teamAffiliation.outputs.isTeamMember == 'false' }}
+        uses: actions/labeler@v5
         with:
           repo-token: "${{ secrets.GITHUB_TOKEN }}"
-          configuration-path: .github/opened-pr-labeler.yml
+          configuration-path: .github/opened-pr-contribution-labeler.yml
+
       - name: Assign Author
         uses: technote-space/assign-author@v1

packages/paste-codemods/tools/.cache/mappings.json

@@ -306,6 +306,7 @@
   "TabPanel": "@twilio-paste/core/tabs",
   "TabPanels": "@twilio-paste/core/tabs",
   "Tabs": "@twilio-paste/core/tabs",
+  "TabsContext": "@twilio-paste/core/tabs",
   "useTabState": "@twilio-paste/core/tabs",
   "TextArea": "@twilio-paste/core/textarea",
   "TimePicker": "@twilio-paste/core/time-picker",

packages/paste-core/components/code-block/__tests__/customization.spec.tsx

@@ -27,6 +27,8 @@ const CustomizationWrapper: React.FC<React.PropsWithChildren> = ({ children }) =
       CODE_BLOCK_TAB: { borderRadius: "borderRadius0" },
       CODE_BLOCK_WRAPPER: { width: "size50" },
       CODE_BLOCK: { width: "size50" },
+      CODE_BLOCK_TAB_LIST_CHILD: { backgroundColor: "colorBackgroundError" },
+      CODE_BLOCK_TAB_LIST_CHILD_SCROLL_WRAPPER: { backgroundColor: "colorBackgroundAvailable" },
     }}
   >
     {children}
@@ -47,6 +49,8 @@ const CustomizationMyWrapper: React.FC<React.PropsWithChildren> = ({ children })
       MY_CODE_BLOCK_TAB: { borderRadius: "borderRadius0" },
       MY_CODE_BLOCK_WRAPPER: { width: "size50" },
       MY_CODE_BLOCK: { width: "size50" },
+      MY_CODE_BLOCK_TAB_LIST_CHILD: { backgroundColor: "colorBackgroundError" },
+      MY_CODE_BLOCK_TAB_LIST_CHILD_SCROLL_WRAPPER: { backgroundColor: "colorBackgroundAvailable" },
     }}
   >
     {children}
@@ -85,6 +89,10 @@ describe("Customization", () => {
       expect(content?.getAttribute("data-paste-element")).toBe("CODE_BLOCK_CONTENT");
       expect(tabList.getAttribute("data-paste-element")).toBe("CODE_BLOCK_TAB_LIST");
       expect(tab.getAttribute("data-paste-element")).toBe("CODE_BLOCK_TAB");
+      expect(tab.parentElement?.getAttribute("data-paste-element")).toBe("CODE_BLOCK_TAB_LIST_CHILD");
+      expect(tab.parentElement?.parentElement?.getAttribute("data-paste-element")).toBe(
+        "CODE_BLOCK_TAB_LIST_CHILD_SCROLL_WRAPPER",
+      );
       expect(tabPanel?.getAttribute("data-paste-element")).toBe("CODE_BLOCK_TAB_PANEL");
       expect(codeBlock.getAttribute("data-paste-element")).toBe("CODE_BLOCK");
       expect(heading.getAttribute("data-paste-element")).toBe("CODE_BLOCK_HEADER");
@@ -128,6 +136,10 @@ describe("Customization", () => {
       expect(content?.getAttribute("data-paste-element")).toBe("MY_CODE_BLOCK_CONTENT");
       expect(tabList.getAttribute("data-paste-element")).toBe("MY_CODE_BLOCK_TAB_LIST");
       expect(tab.getAttribute("data-paste-element")).toBe("MY_CODE_BLOCK_TAB");
+      expect(tab.parentElement?.getAttribute("data-paste-element")).toBe("MY_CODE_BLOCK_TAB_LIST_CHILD");
+      expect(tab.parentElement?.parentElement?.getAttribute("data-paste-element")).toBe(
+        "MY_CODE_BLOCK_TAB_LIST_CHILD_SCROLL_WRAPPER",
+      );
       expect(tabPanel?.getAttribute("data-paste-element")).toBe("MY_CODE_BLOCK_TAB_PANEL");
       expect(codeBlock.getAttribute("data-paste-element")).toBe("MY_CODE_BLOCK");
       expect(heading.getAttribute("data-paste-element")).toBe("MY_CODE_BLOCK_HEADER");
@@ -167,6 +179,8 @@ describe("Customization", () => {
       expect(heading).toHaveStyleRule("border-top-right-radius", "8px");
       expect(tabList).toHaveStyleRule("column-gap", "0");
       expect(tab).toHaveStyleRule("border-radius", "0");
+      expect(tab.parentElement).toHaveStyleRule("background-color", "rgb(214, 31, 31)");
+      expect(tab.parentElement?.parentElement).toHaveStyleRule("background-color", "rgb(20, 176, 83)");
       expect(tabPanel).toHaveStyleRule("border-bottom-right-radius", "8px");
       expect(copyButton).toHaveStyleRule("background-color", "rgb(254, 236, 236)");
       expect(externalLink).toHaveStyleRule("background-color", "rgb(254, 236, 236)");
@@ -210,6 +224,8 @@ describe("Customization", () => {
       expect(heading).toHaveStyleRule("border-top-right-radius", "8px");
       expect(tabList).toHaveStyleRule("column-gap", "0");
       expect(tab).toHaveStyleRule("border-radius", "0");
+      expect(tab.parentElement).toHaveStyleRule("background-color", "rgb(214, 31, 31)");
+      expect(tab.parentElement?.parentElement).toHaveStyleRule("background-color", "rgb(20, 176, 83)");
       expect(tabPanel).toHaveStyleRule("border-bottom-right-radius", "8px");
       expect(copyButton).toHaveStyleRule("background-color", "rgb(254, 236, 236)");
       expect(externalLink).toHaveStyleRule("background-color", "rgb(254, 236, 236)");

packages/paste-core/components/code-block/src/CodeBlockTabList.tsx

@@ -1,9 +1,36 @@
-import { Box } from "@twilio-paste/box";
+import { Box, safelySpreadBoxProps } from "@twilio-paste/box";
 import type { BoxProps } from "@twilio-paste/box";
-import { TabList } from "@twilio-paste/tabs";
-import type { TabListProps } from "@twilio-paste/tabs";
+import { css, styled } from "@twilio-paste/styling-library";
+import { type TabListProps, TabsContext } from "@twilio-paste/tabs";
+import { TabPrimitiveList } from "@twilio-paste/tabs-primitive";
 import * as React from "react";
 
+import { OverflowButton } from "./OverflowButton";
+import { handleScrollDirection, useElementsOutOfBounds, useShowShadow } from "./utlis";
+
+/**
+ * This wrapper applies styles that customize the scrollbar and its track.
+ */
+const StyledTabList = styled.div(() => {
+  return css({
+    overflowX: "auto",
+    overflowY: "hidden",
+    overflowScrolling: "touch",
+    /* Firefox scrollbar */
+    "@supports (-moz-appearance:none)": {
+      paddingBottom: "0px",
+      scrollbarWidth: "none",
+    },
+    /* Chrome + Safari scrollbar */
+    "::-webkit-scrollbar": {
+      height: 0,
+    },
+    "::-webkit-scrollbar-track": {
+      background: "transparent",
+    },
+  });
+});
+
 export interface CodeBlockTabListProps extends Omit<TabListProps, "aria-label"> {
   /**
    * Overrides the default element name to apply unique styles with the Customization Provider
@@ -17,12 +44,86 @@ export interface CodeBlockTabListProps extends Omit<TabListProps, "aria-label">
 
 export const CodeBlockTabList = React.forwardRef<HTMLDivElement, CodeBlockTabListProps>(
   ({ children, element = "CODE_BLOCK_TAB_LIST", ...props }, ref) => {
+    const tabContext = React.useContext(TabsContext);
+    //  ref to the scrollable element
+    const scrollableRef = React.useRef<HTMLDivElement>(null);
+    const listRef = React.useRef<HTMLDivElement>(null);
+
+    const { determineElementsOutOfBounds, elementOutOBoundsLeft, elementOutOBoundsRight } = useElementsOutOfBounds();
+    const { handleShadow, showShadow } = useShowShadow();
+
+    const handleScrollEvent = (): void => {
+      handleShadow();
+      determineElementsOutOfBounds(scrollableRef.current, listRef.current);
+    };
+
+    React.useEffect(() => {
+      if (scrollableRef.current && listRef.current) {
+        scrollableRef.current.addEventListener("scroll", handleScrollEvent);
+        window.addEventListener("resize", handleScrollEvent);
+        determineElementsOutOfBounds(scrollableRef.current, listRef.current);
+      }
+    }, [scrollableRef.current, listRef.current]);
+
+    // Cleanup event listeners on destroy
+    React.useEffect(() => {
+      return () => {
+        if (scrollableRef.current) {
+          scrollableRef.current.removeEventListener("scroll", handleScrollEvent);
+          window.removeEventListener("resize", handleScrollEvent);
+        }
+      };
+    }, []);
+
     return (
-      <Box paddingX="space70">
-        <TabList {...props} aria-label="label" ref={ref} element={element}>
-          {children}
-        </TabList>
-      </Box>
+      <TabPrimitiveList {...(tabContext as any)} as={Box} {...props} element={element} ref={ref}>
+        <Box element={`${element}_CHILD_WRAPPER`} display="flex">
+          <OverflowButton
+            position="left"
+            onClick={() =>
+              handleScrollDirection("left", elementOutOBoundsLeft, elementOutOBoundsRight, listRef.current)
+            }
+            visible={Boolean(elementOutOBoundsLeft)}
+            element={element}
+            showShadow={showShadow}
+          />
+          <Box
+            {...safelySpreadBoxProps(props)}
+            as={StyledTabList as any}
+            ref={scrollableRef}
+            display="flex"
+            flexWrap="nowrap"
+            element={`${element}_CHILD_SCROLL_WRAPPER`}
+            overflowX="auto"
+            overflowY="hidden"
+            flexGrow={1}
+            width="calc(100% - 60px)"
+          >
+            <Box
+              whiteSpace="nowrap"
+              element={`${element}_CHILD`}
+              display="flex"
+              borderBottomStyle="solid"
+              borderBottomWidth="borderWidth10"
+              borderBottomColor="colorBorderInverseWeaker"
+              ref={listRef}
+              flexGrow={1}
+              columnGap="space20"
+            >
+              {children}
+            </Box>
+          </Box>
+          <OverflowButton
+            position="right"
+            onClick={() =>
+              handleScrollDirection("right", elementOutOBoundsLeft, elementOutOBoundsRight, listRef.current)
+            }
+            visible={Boolean(elementOutOBoundsRight)}
+            element={element}
+            showShadow={showShadow}
+          />
+        </Box>
+      </TabPrimitiveList>
     );
   },
 );