Merge branch 'main' into modal/padding-fix

packages/paste-codemods/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Change Log
 
+## 0.8.0
+
+### Minor Changes
+
+- [`33800d2f9`](https://github.com/twilio-labs/paste/commit/33800d2f9a07114793ab9daa0e52baa4ca2df686) [#3835](https://github.com/twilio-labs/paste/pull/3835) Thanks [@TheSisb](https://github.com/TheSisb)! - [List] add `OrderedDisplayList`, `OrderedDisplayListItem`, and `OrderedDisplayListHeading` components.
+
+  These new components provide a visually enhanced numbered list to improve the scannability of sequential steps.
+
 ## 0.7.0
 
 ### Minor Changes

packages/paste-codemods/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twilio-paste/codemods",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "status": "production",
   "description": "A collection of codemods for maintaining projects built with Paste.",
   "author": "Twilio Inc.",
@@ -25,7 +25,7 @@
     "@babel/core": "^7.21.4",
     "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
     "@babel/preset-env": "^7.21.4",
-    "@twilio-paste/core": "^20.8.0",
+    "@twilio-paste/core": "^20.12.0",
     "tsx": "^4.0.0"
   }
 }

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

@@ -133,6 +133,9 @@
   "RequiredDot": "@twilio-paste/core/label",
   "List": "@twilio-paste/core/list",
   "ListItem": "@twilio-paste/core/list",
+  "OrderedDisplayList": "@twilio-paste/core/list",
+  "OrderedDisplayListHeading": "@twilio-paste/core/list",
+  "OrderedDisplayListItem": "@twilio-paste/core/list",
   "OrderedList": "@twilio-paste/core/list",
   "UnorderedList": "@twilio-paste/core/list",
   "Menu": "@twilio-paste/core/menu",

packages/paste-core/components/code-block/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @twilio-paste/code-block
 
+## 4.1.1
+
+### Patch Changes
+
+- [`9d096e572`](https://github.com/twilio-labs/paste/commit/9d096e5722c236df9cde766efb9c00318c79dba5) [#3841](https://github.com/twilio-labs/paste/pull/3841) Thanks [@TheSisb](https://github.com/TheSisb)! - [Codeblock] fix an error when triggering the copy button while using React v18.
+
 ## 4.1.0
 
 ### Minor Changes

packages/paste-core/components/code-block/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twilio-paste/code-block",
-  "version": "4.1.0",
+  "version": "4.1.1",
   "category": "data display",
   "status": "production",
   "description": "A Code Block is a component used to display readable blocks of code.",
@@ -68,9 +68,9 @@
     "@twilio-paste/flex": "^8.1.0",
     "@twilio-paste/heading": "^11.1.0",
     "@twilio-paste/icons": "^12.2.0",
-    "@twilio-paste/reakit-library": "^2.1.0",
+    "@twilio-paste/reakit-library": "^2.1.1",
     "@twilio-paste/screen-reader-only": "^13.1.0",
-    "@twilio-paste/spinner": "^14.1.0",
+    "@twilio-paste/spinner": "^14.1.2",
     "@twilio-paste/stack": "^8.1.0",
     "@twilio-paste/style-props": "^9.1.0",
     "@twilio-paste/styling-library": "^3.0.0",

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

@@ -17,7 +17,7 @@ interface CopyButtonProps extends Omit<HTMLPasteProps<"button">, "tabIndex"> {
 }
 
 export const getCopyButtonText = (labelBefore: string, labelAfter: string) => {
-  return (copied: boolean) => {
+  return (copied: boolean): string => {
     return copied ? labelAfter : labelBefore;
   };
 };
@@ -43,11 +43,11 @@ export const CopyButton: React.FC<React.PropsWithChildren<CopyButtonProps>> = ({
   const handleCopy = React.useCallback(() => {
     const formattedText = copyTextFormatter ? copyTextFormatter(text) : text;
     clipboard.copy(formattedText);
-  }, [text]);
+  }, [text, copyTextFormatter, clipboard]);
 
   React.useEffect(() => {
     setTooltipText(getText(clipboard.copied));
-  }, [clipboard.copied]);
+  }, [clipboard.copied, getText]);
 
   /*
    * NOTE: Reakit has a bug where the tooltip doesn't recalc position on content changes
@@ -60,8 +60,11 @@ export const CopyButton: React.FC<React.PropsWithChildren<CopyButtonProps>> = ({
       isFirstRender.current = false;
       return;
     }
-    tooltipState.unstable_update();
-  }, [tooltipText]);
+    // FIX: setTimeout for "flushSync was called from inside a lifecycle method." error
+    setTimeout(() => {
+      tooltipState.unstable_update();
+    }, 0);
+  }, [tooltipState]);
 
   return (
     <Tooltip text={tooltipText} state={tooltipState} element={`${element}_TOOLTIP`}>

packages/paste-core/components/list/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Change Log
 
+## 8.2.0
+
+### Minor Changes
+
+- [`33800d2f9`](https://github.com/twilio-labs/paste/commit/33800d2f9a07114793ab9daa0e52baa4ca2df686) [#3835](https://github.com/twilio-labs/paste/pull/3835) Thanks [@TheSisb](https://github.com/TheSisb)! - [List] add `OrderedDisplayList`, `OrderedDisplayListItem`, and `OrderedDisplayListHeading` components.
+
+  These new components provide a visually enhanced numbered list to improve the scannability of sequential steps.
+
 ## 8.1.2
 
 ### Patch Changes

packages/paste-core/components/list/__tests__/index.spec.tsx

@@ -2,20 +2,17 @@ import { render, screen } from "@testing-library/react";
 import { CustomizationProvider } from "@twilio-paste/customization";
 import * as React from "react";
 
-import { ListItem, OrderedList, UnorderedList } from "../src";
+import {
+  ListItem,
+  OrderedDisplayList,
+  OrderedDisplayListHeading,
+  OrderedDisplayListItem,
+  OrderedList,
+  UnorderedList,
+} from "../src";
 
 describe("Ordered List", () => {
   describe("Render", () => {
-    it("should render a plain ordered list wrapper", () => {
-      render(
-        <CustomizationProvider baseTheme="default" theme={TestTheme}>
-          <OrderedList>Children</OrderedList>
-        </CustomizationProvider>,
-      );
-      const renderedList = screen.getByRole("list");
-      expect(renderedList).not.toBeNull();
-    });
-
     it("should allow marginTop and marginBottom styling props", () => {
       render(
         <CustomizationProvider baseTheme="default" theme={TestTheme}>
@@ -71,52 +68,10 @@ describe("Ordered List", () => {
       expect(screen.getByRole("list").getAttribute("data-paste-element")).toEqual("foo");
     });
   });
-
-  describe("Customization", () => {
-    it("should add custom styles to OrderedList", (): void => {
-      render(
-        <CustomizationProvider
-          baseTheme="default"
-          theme={TestTheme}
-          elements={{ ORDERED_LIST: { color: "colorTextWeak", backgroundColor: "colorBackground" } }}
-        >
-          <OrderedList>Custom ordered list</OrderedList>
-        </CustomizationProvider>,
-      );
-      const renderedList = screen.getByRole("list");
-      expect(renderedList).toHaveStyleRule("background-color", "rgb(244, 244, 246)");
-      expect(renderedList).toHaveStyleRule("color", "rgb(96, 107, 133)");
-    });
-
-    it("should add custom styles to OrderedList with a custom element data attribute", (): void => {
-      render(
-        <CustomizationProvider
-          baseTheme="default"
-          theme={TestTheme}
-          elements={{ foo: { color: "colorTextWeak", backgroundColor: "colorBackground" } }}
-        >
-          <OrderedList element="foo">Custom ordered list</OrderedList>
-        </CustomizationProvider>,
-      );
-      const renderedList = screen.getByRole("list");
-      expect(renderedList).toHaveStyleRule("background-color", "rgb(244, 244, 246)");
-      expect(renderedList).toHaveStyleRule("color", "rgb(96, 107, 133)");
-    });
-  });
 });
 
 describe("Unordered List", () => {
   describe("Render", () => {
-    it("should render a plain unordered list wrapper", () => {
-      render(
-        <CustomizationProvider baseTheme="default" theme={TestTheme}>
-          <UnorderedList>Children</UnorderedList>
-        </CustomizationProvider>,
-      );
-      const renderedList = screen.getByRole("list");
-      expect(renderedList).not.toBeNull();
-    });
-
     it("should allow marginTop and marginBottom styling props", () => {
       render(
         <CustomizationProvider baseTheme="default" theme={TestTheme}>
@@ -159,67 +114,19 @@ describe("Unordered List", () => {
       expect(screen.getByRole("list").getAttribute("data-paste-element")).toEqual("foo");
     });
   });
-
-  describe("Customization", () => {
-    it("should add custom styles to UnorderedList", (): void => {
-      render(
-        <CustomizationProvider
-          baseTheme="default"
-          theme={TestTheme}
-          elements={{ UNORDERED_LIST: { color: "colorTextWeak", backgroundColor: "colorBackground" } }}
-        >
-          <UnorderedList>Custom unordered list</UnorderedList>
-        </CustomizationProvider>,
-      );
-      const renderedList = screen.getByRole("list");
-      expect(renderedList).toHaveStyleRule("background-color", "rgb(244, 244, 246)");
-      expect(renderedList).toHaveStyleRule("color", "rgb(96, 107, 133)");
-    });
-
-    it("should add custom styles to UnorderedList with a custom element data attribute", (): void => {
-      render(
-        <CustomizationProvider
-          baseTheme="default"
-          theme={TestTheme}
-          elements={{ foo: { color: "colorTextWeak", backgroundColor: "colorBackground" } }}
-        >
-          <UnorderedList element="foo">Custom unordered list</UnorderedList>
-        </CustomizationProvider>,
-      );
-      const renderedList = screen.getByRole("list");
-      expect(renderedList).toHaveStyleRule("background-color", "rgb(244, 244, 246)");
-      expect(renderedList).toHaveStyleRule("color", "rgb(96, 107, 133)");
-    });
-  });
 });
 
 describe("ListItem", () => {
   describe("Render", () => {
-    it("should render a plain list item", () => {
+    it("should allow aria, html, and data attributes", () => {
       render(
-        <CustomizationProvider baseTheme="default" theme={TestTheme}>
-          <ListItem>Children</ListItem>
-        </CustomizationProvider>,
+        <ListItem aria-pressed="true" data-rando="test-hook" title="random title">
+          Children
+        </ListItem>,
       );
       const renderedListItem = screen.getByRole("listitem");
-      expect(renderedListItem).not.toBeNull();
-    });
-
-    it("should allow aria attributes", () => {
-      render(<ListItem aria-pressed="true">Children</ListItem>);
-      const renderedListItem = screen.getByRole("listitem");
       expect(renderedListItem).toHaveAttribute("aria-pressed", "true");
-    });
-
-    it("should allow data attributes", () => {
-      render(<ListItem data-rando="test-hook">Children</ListItem>);
-      const renderedListItem = screen.getByRole("listitem");
       expect(renderedListItem).toHaveAttribute("data-rando", "test-hook");
-    });
-
-    it("should allow HTML attributes", () => {
-      render(<ListItem title="random title">Children</ListItem>);
-      const renderedListItem = screen.getByRole("listitem");
       expect(renderedListItem).toHaveAttribute("title", "random title");
     });
   });
@@ -234,36 +141,75 @@ describe("ListItem", () => {
       expect(screen.getByRole("listitem").getAttribute("data-paste-element")).toEqual("foo");
     });
   });
+});
 
-  describe("Customization", () => {
-    it("should add custom styles to ListItem", (): void => {
+describe("Ordered Display List", () => {
+  describe("Render", () => {
+    it("should allow marginTop and marginBottom styling props", () => {
       render(
-        <CustomizationProvider
-          baseTheme="default"
-          theme={TestTheme}
-          elements={{ LIST_ITEM: { color: "colorTextWeak", backgroundColor: "colorBackground" } }}
-        >
-          <ListItem>Custom list item</ListItem>
+        <CustomizationProvider baseTheme="default" theme={TestTheme}>
+          <OrderedDisplayList marginTop="space40" marginBottom="space40">
+            Children
+          </OrderedDisplayList>
         </CustomizationProvider>,
       );
-      const renderedListItem = screen.getByRole("listitem");
-      expect(renderedListItem).toHaveStyleRule("background-color", "rgb(244, 244, 246)");
-      expect(renderedListItem).toHaveStyleRule("color", "rgb(96, 107, 133)");
+      const renderedList = screen.getByRole("list");
+      expect(renderedList).toHaveStyleRule("margin-top", "0.75rem");
+      expect(renderedList).toHaveStyleRule("margin-bottom", "0.75rem");
     });
 
-    it("should add custom styles to ListItem with a custom element data attribute", (): void => {
+    it("should allow aria, data, and html attributes", () => {
       render(
-        <CustomizationProvider
-          baseTheme="default"
-          theme={TestTheme}
-          elements={{ foo: { color: "colorTextWeak", backgroundColor: "colorBackground" } }}
-        >
-          <ListItem element="foo">Custom list item</ListItem>
-        </CustomizationProvider>,
+        <OrderedDisplayList aria-expanded="true" data-test="test-hook" title="random title">
+          <OrderedDisplayListItem aria-expanded="true" data-test="test-hook">
+            <OrderedDisplayListHeading aria-expanded="true" data-test="test-hook" as="h2">
+              Heading20
+            </OrderedDisplayListHeading>
+            Text beneath heading
+          </OrderedDisplayListItem>
+        </OrderedDisplayList>,
       );
+      const renderedList = screen.getByRole("list");
+      expect(renderedList).toHaveAttribute("aria-expanded", "true");
+      expect(renderedList).toHaveAttribute("data-test", "test-hook");
+      expect(renderedList).toHaveAttribute("title", "random title");
       const renderedListItem = screen.getByRole("listitem");
-      expect(renderedListItem).toHaveStyleRule("background-color", "rgb(244, 244, 246)");
-      expect(renderedListItem).toHaveStyleRule("color", "rgb(96, 107, 133)");
+      expect(renderedListItem).toHaveAttribute("aria-expanded", "true");
+      expect(renderedListItem).toHaveAttribute("data-test", "test-hook");
+      const renderedHeading = screen.getByRole("heading");
+      expect(renderedHeading).toHaveAttribute("aria-expanded", "true");
+      expect(renderedHeading).toHaveAttribute("data-test", "test-hook");
+    });
+  });
+
+  describe("Customization", () => {
+    it("should set a element data attribute for OrderedDisplayList", () => {
+      render(
+        <OrderedDisplayList>
+          <OrderedDisplayListItem>
+            <OrderedDisplayListHeading as="h2">Heading</OrderedDisplayListHeading>
+            Text
+          </OrderedDisplayListItem>
+        </OrderedDisplayList>,
+      );
+      expect(screen.getByRole("list").getAttribute("data-paste-element")).toEqual("ORDERED_DISPLAY_LIST");
+      expect(screen.getByRole("listitem").getAttribute("data-paste-element")).toEqual("ORDERED_DISPLAY_LIST_ITEM");
+      expect(screen.getByRole("heading").getAttribute("data-paste-element")).toEqual("ORDERED_DISPLAY_LIST_HEADING");
+    });
+    it("should set a custom element data attribute for OrderedDisplayList", () => {
+      render(
+        <OrderedDisplayList element="foo">
+          <OrderedDisplayListItem element="fooitem">
+            <OrderedDisplayListHeading element="foohead" as="h2">
+              Heading
+            </OrderedDisplayListHeading>
+            Text
+          </OrderedDisplayListItem>
+        </OrderedDisplayList>,
+      );
+      expect(screen.getByRole("list").getAttribute("data-paste-element")).toEqual("foo");
+      expect(screen.getByRole("listitem").getAttribute("data-paste-element")).toEqual("fooitem");
+      expect(screen.getByRole("heading").getAttribute("data-paste-element")).toEqual("foohead");
     });
   });
 });