From 77284f3e23d69282cc97c33dffb29860a78877b3 Mon Sep 17 00:00:00 2001 From: Kristian Antrobus Date: Thu, 1 May 2025 16:17:00 -0500 Subject: [PATCH 1/3] feat(list): allow primitive custom types and default CSS inherit --- .../paste-core/components/list/src/List.tsx | 2 +- .../paste-core/components/list/src/types.ts | 10 +- .../components/list/stories/index.stories.tsx | 144 +++++++++++++++++- 3 files changed, 153 insertions(+), 3 deletions(-) diff --git a/packages/paste-core/components/list/src/List.tsx b/packages/paste-core/components/list/src/List.tsx index 8d89784a25..71293b8bf1 100644 --- a/packages/paste-core/components/list/src/List.tsx +++ b/packages/paste-core/components/list/src/List.tsx @@ -4,7 +4,7 @@ import * as React from "react"; import type { BaseListProps } from "./types"; const List = React.forwardRef( - ({ as, children, element = "LIST", listStyleType = "disc", ...props }, ref) => { + ({ as, children, element = "LIST", listStyleType, ...props }, ref) => { return ( , Pick & { diff --git a/packages/paste-core/components/list/stories/index.stories.tsx b/packages/paste-core/components/list/stories/index.stories.tsx index d48d50dc83..85c28d5fb7 100644 --- a/packages/paste-core/components/list/stories/index.stories.tsx +++ b/packages/paste-core/components/list/stories/index.stories.tsx @@ -5,7 +5,7 @@ import { Stack } from "@twilio-paste/stack"; import { useTheme } from "@twilio-paste/theme"; import * as React from "react"; -import { ListItem, OrderedList, UnorderedList } from "../src"; +import { List, ListItem, OrderedList, UnorderedList } from "../src"; // eslint-disable-next-line import/no-default-export export default { @@ -273,3 +273,145 @@ CustomUnorderedList.parameters = { disable: true, }, }; + +export const PrimitiveNestedUnorderedList = (): React.ReactNode => { + return ( + <> + + + Deliver critical time-sensitive messages to employees and customers at scale with the Programmable Messaging + API. + + + Proactively inform customers about account activity, purchase confirmations, and shipping notifications with + the + Programmable Messaging API. + + + Deliver critical time-sensitive messages to employees and customers at scale with the Programmable + Messaging API. + + + Proactively inform customers about account activity, purchase confirmations, and shipping notifications + with the + Programmable Messaging API. + + + Deliver critical time-sensitive messages to employees and customers at scale with the Programmable + Messaging API. + + + Proactively inform customers about account activity, purchase confirmations, and shipping + notifications with the + Programmable Messaging API. + + + Deliver critical time-sensitive messages to employees and customers at scale with the Programmable + Messaging API. + + + Proactively inform customers about account activity, purchase confirmations, and shipping + notifications with the + Programmable Messaging API. + + + + + + + + + + ); +}; + +export const PrimitiveNestedOrderedList = (): React.ReactNode => { + return ( + <> + + + Deliver critical time-sensitive messages to employees and customers at scale with the Programmable Messaging + API. + + + Proactively inform customers about account activity, purchase confirmations, and shipping notifications with + the + Programmable Messaging API. + + + Deliver critical time-sensitive messages to employees and customers at scale with the Programmable + Messaging API. + + + Proactively inform customers about account activity, purchase confirmations, and shipping notifications + with the + Programmable Messaging API. + + + Deliver critical time-sensitive messages to employees and customers at scale with the Programmable + Messaging API. + + + Proactively inform customers about account activity, purchase confirmations, and shipping + notifications with the + Programmable Messaging API. + + + Deliver critical time-sensitive messages to employees and customers at scale with the Programmable + Messaging API. + + + Proactively inform customers about account activity, purchase confirmations, and shipping + notifications with the + Programmable Messaging API. + + + + + + + + + + ); +}; + +export const PrimitiveNestedUnorderedDefinedSymbolsList = (): React.ReactNode => { + return ( + <> + + + Deliver critical time-sensitive messages to employees and customers at scale with the Programmable Messaging + API. + + + Proactively inform customers about account activity, purchase confirmations, and shipping notifications with + the + Programmable Messaging API. + + + Deliver critical time-sensitive messages to employees and customers at scale with the Programmable + Messaging API. + + + Proactively inform customers about account activity, purchase confirmations, and shipping notifications + with the + Programmable Messaging API. + + + Deliver critical time-sensitive messages to employees and customers at scale with the Programmable + Messaging API. + + + Proactively inform customers about account activity, purchase confirmations, and shipping + notifications with the + Programmable Messaging API. + + + + + + + + ); +}; From 2be54ed48aa21de3e0dfc7759d594d1e612baeaa Mon Sep 17 00:00:00 2001 From: Kristian Antrobus Date: Thu, 1 May 2025 16:23:03 -0500 Subject: [PATCH 2/3] chore(list): changeset --- .changeset/sixty-pets-drum.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/sixty-pets-drum.md diff --git a/.changeset/sixty-pets-drum.md b/.changeset/sixty-pets-drum.md new file mode 100644 index 0000000000..1d75f137c7 --- /dev/null +++ b/.changeset/sixty-pets-drum.md @@ -0,0 +1,6 @@ +--- +"@twilio-paste/list": patch +"@twilio-paste/core": patch +--- + +[List] removed the default listStyleType on the primitive List component to inherit CSS nesting styling From 09a686dae718ab66407cf74bdc96048a346c49ba Mon Sep 17 00:00:00 2001 From: Kristian Antrobus Date: Thu, 1 May 2025 16:33:14 -0500 Subject: [PATCH 3/3] chore(list): changeset --- .../components/list/stories/index.stories.tsx | 22 ------------------- 1 file changed, 22 deletions(-) diff --git a/packages/paste-core/components/list/stories/index.stories.tsx b/packages/paste-core/components/list/stories/index.stories.tsx index 85c28d5fb7..ffde170f1e 100644 --- a/packages/paste-core/components/list/stories/index.stories.tsx +++ b/packages/paste-core/components/list/stories/index.stories.tsx @@ -304,17 +304,6 @@ export const PrimitiveNestedUnorderedList = (): React.ReactNode => { Proactively inform customers about account activity, purchase confirmations, and shipping notifications with the Programmable Messaging API. - - - Deliver critical time-sensitive messages to employees and customers at scale with the Programmable - Messaging API. - - - Proactively inform customers about account activity, purchase confirmations, and shipping - notifications with the - Programmable Messaging API. - - @@ -355,17 +344,6 @@ export const PrimitiveNestedOrderedList = (): React.ReactNode => { Proactively inform customers about account activity, purchase confirmations, and shipping notifications with the Programmable Messaging API. - - - Deliver critical time-sensitive messages to employees and customers at scale with the Programmable - Messaging API. - - - Proactively inform customers about account activity, purchase confirmations, and shipping - notifications with the - Programmable Messaging API. - -