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 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..ffde170f1e 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,123 @@ 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. + + + + + + + + ); +}; + +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. + + + + + + + + ); +}; + +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. + + + + + + + + ); +};