Skip to content

Commit cddfffd

Browse files
krisantrobuskodiakhq[bot]
krisantrobus
and
kodiakhq[bot]
authored
feat(list): allow primitive custom types and default CSS inherit (#4320)
* feat(list): allow primitive custom types and default CSS inherit * chore(list): changeset * chore(list): changeset --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
1 parent 6040893 commit cddfffd

File tree

4 files changed

+137
-3
lines changed

4 files changed

+137
-3
lines changed

‎.changeset/sixty-pets-drum.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
"@twilio-paste/list": patch
3+
"@twilio-paste/core": patch
4+
---
5+
6+
[List] removed the default listStyleType on the primitive List component to inherit CSS nesting styling

‎packages/paste-core/components/list/src/List.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import * as React from "react";
44
import type { BaseListProps } from "./types";
55

66
const List = React.forwardRef<HTMLOListElement | HTMLUListElement, BaseListProps>(
7-
({ as, children, element = "LIST", listStyleType = "disc", ...props }, ref) => {
7+
({ as, children, element = "LIST", listStyleType, ...props }, ref) => {
88
return (
99
<Text
1010
{...props}

‎packages/paste-core/components/list/src/types.ts‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import type { HeadingProps, HeadingVariants } from "@twilio-paste/heading";
2-
import type { Space } from "@twilio-paste/style-props";
2+
import type { ListStyleType, Space } from "@twilio-paste/style-props";
33
import type { TextProps } from "@twilio-paste/text";
44
import type { HTMLPasteProps } from "@twilio-paste/types";
55

@@ -32,6 +32,14 @@ export interface BaseListProps extends HTMLPasteProps<"ol">, Pick<TextProps, "li
3232
* @memberof BaseListProps
3333
*/
3434
element?: TextProps["element"];
35+
/**
36+
* Sets the list-style-type of the list. This is a shorthand for the CSS property: https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type
37+
*
38+
* @default null
39+
* @type {ListStyleType}
40+
* @memberof BaseListProps
41+
*/
42+
listStyleType?: ListStyleType;
3543
}
3644

3745
export type ListItemProps = HTMLPasteProps<"li"> & {

‎packages/paste-core/components/list/stories/index.stories.tsx‎

Lines changed: 121 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { Stack } from "@twilio-paste/stack";
55
import { useTheme } from "@twilio-paste/theme";
66
import * as React from "react";
77

8-
import { ListItem, OrderedList, UnorderedList } from "../src";
8+
import { List, ListItem, OrderedList, UnorderedList } from "../src";
99

1010
// eslint-disable-next-line import/no-default-export
1111
export default {
@@ -273,3 +273,123 @@ CustomUnorderedList.parameters = {
273273
disable: true,
274274
},
275275
};
276+
277+
export const PrimitiveNestedUnorderedList = (): React.ReactNode => {
278+
return (
279+
<>
280+
<List as="ul">
281+
<ListItem>
282+
Deliver critical time-sensitive messages to employees and customers at scale with the Programmable Messaging
283+
API.
284+
</ListItem>
285+
<ListItem>
286+
Proactively inform customers about account activity, purchase confirmations, and shipping notifications with
287+
the
288+
<i>Programmable Messaging API</i>.
289+
<List as="ul">
290+
<ListItem>
291+
Deliver critical time-sensitive messages to employees and customers at scale with the Programmable
292+
Messaging API.
293+
</ListItem>
294+
<ListItem>
295+
Proactively inform customers about account activity, purchase confirmations, and shipping notifications
296+
with the
297+
<i>Programmable Messaging API</i>.
298+
<List as="ul">
299+
<ListItem>
300+
Deliver critical time-sensitive messages to employees and customers at scale with the Programmable
301+
Messaging API.
302+
</ListItem>
303+
<ListItem>
304+
Proactively inform customers about account activity, purchase confirmations, and shipping
305+
notifications with the
306+
<i>Programmable Messaging API</i>.
307+
</ListItem>
308+
</List>
309+
</ListItem>
310+
</List>
311+
</ListItem>
312+
</List>
313+
</>
314+
);
315+
};
316+
317+
export const PrimitiveNestedOrderedList = (): React.ReactNode => {
318+
return (
319+
<>
320+
<List as="ol">
321+
<ListItem>
322+
Deliver critical time-sensitive messages to employees and customers at scale with the Programmable Messaging
323+
API.
324+
</ListItem>
325+
<ListItem>
326+
Proactively inform customers about account activity, purchase confirmations, and shipping notifications with
327+
the
328+
<i>Programmable Messaging API</i>.
329+
<List as="ol">
330+
<ListItem>
331+
Deliver critical time-sensitive messages to employees and customers at scale with the Programmable
332+
Messaging API.
333+
</ListItem>
334+
<ListItem>
335+
Proactively inform customers about account activity, purchase confirmations, and shipping notifications
336+
with the
337+
<i>Programmable Messaging API</i>.
338+
<List as="ol">
339+
<ListItem>
340+
Deliver critical time-sensitive messages to employees and customers at scale with the Programmable
341+
Messaging API.
342+
</ListItem>
343+
<ListItem>
344+
Proactively inform customers about account activity, purchase confirmations, and shipping
345+
notifications with the
346+
<i>Programmable Messaging API</i>.
347+
</ListItem>
348+
</List>
349+
</ListItem>
350+
</List>
351+
</ListItem>
352+
</List>
353+
</>
354+
);
355+
};
356+
357+
export const PrimitiveNestedUnorderedDefinedSymbolsList = (): React.ReactNode => {
358+
return (
359+
<>
360+
<List as="ul" listStyleType="circle">
361+
<ListItem>
362+
Deliver critical time-sensitive messages to employees and customers at scale with the Programmable Messaging
363+
API.
364+
</ListItem>
365+
<ListItem>
366+
Proactively inform customers about account activity, purchase confirmations, and shipping notifications with
367+
the
368+
<i>Programmable Messaging API</i>.
369+
<List as="ul" listStyleType="decimal">
370+
<ListItem>
371+
Deliver critical time-sensitive messages to employees and customers at scale with the Programmable
372+
Messaging API.
373+
</ListItem>
374+
<ListItem>
375+
Proactively inform customers about account activity, purchase confirmations, and shipping notifications
376+
with the
377+
<i>Programmable Messaging API</i>.
378+
<List as="ul" listStyleType="upper-roman">
379+
<ListItem>
380+
Deliver critical time-sensitive messages to employees and customers at scale with the Programmable
381+
Messaging API.
382+
</ListItem>
383+
<ListItem>
384+
Proactively inform customers about account activity, purchase confirmations, and shipping
385+
notifications with the
386+
<i>Programmable Messaging API</i>.
387+
</ListItem>
388+
</List>
389+
</ListItem>
390+
</List>
391+
</ListItem>
392+
</List>
393+
</>
394+
);
395+
};

0 commit comments

Comments
 (0)