diff --git a/packages/css/src/components/unordered-list/unordered-list.scss b/packages/css/src/components/unordered-list/unordered-list.scss index 2552de1577..57fbaf4fda 100644 --- a/packages/css/src/components/unordered-list/unordered-list.scss +++ b/packages/css/src/components/unordered-list/unordered-list.scss @@ -42,6 +42,11 @@ color: var(--ams-unordered-list-inverse-color); } +.ams-unordered-list--small:not(.ams-unordered-list--no-markers) { + font-size: var(--ams-unordered-list-small-font-size); + line-height: var(--ams-unordered-list-small-line-height); +} + /** A nested list has a different marker and less indentation for correct alignment. */ :is(.ams-ordered-list, .ams-unordered-list) .ams-unordered-list { list-style-type: var(--ams-unordered-list-unordered-list-list-style-type); diff --git a/packages/react/src/UnorderedList/UnorderedList.tsx b/packages/react/src/UnorderedList/UnorderedList.tsx index e818a52e61..0fbfdb312c 100644 --- a/packages/react/src/UnorderedList/UnorderedList.tsx +++ b/packages/react/src/UnorderedList/UnorderedList.tsx @@ -12,11 +12,13 @@ export type UnorderedListProps = { /** Changes the text color for readability on a dark background. */ inverseColor?: boolean markers?: boolean + /** The size of the unordered list. */ + size?: 'small' } & PropsWithChildren> const UnorderedListRoot = forwardRef( ( - { children, className, inverseColor, markers = true, ...restProps }: UnorderedListProps, + { children, className, inverseColor, markers = true, size, ...restProps }: UnorderedListProps, ref: ForwardedRef, ) => { return ( @@ -26,6 +28,7 @@ const UnorderedListRoot = forwardRef( 'ams-unordered-list', inverseColor && 'ams-unordered-list--inverse-color', !markers && 'ams-unordered-list--no-markers', + size && `ams-unordered-list--${size}`, className, )} {...restProps} diff --git a/proprietary/tokens/src/components/ams/unordered-list.tokens.json b/proprietary/tokens/src/components/ams/unordered-list.tokens.json index 5a57f16a29..2a93e6813a 100644 --- a/proprietary/tokens/src/components/ams/unordered-list.tokens.json +++ b/proprietary/tokens/src/components/ams/unordered-list.tokens.json @@ -31,6 +31,10 @@ "comment": "The total level >=2 indentation for Amsterdam is 28 pixels, or 1.75rem." } } + }, + "small": { + "font-size": { "value": "{ams.text.level.6.font-size}" }, + "line-height": { "value": "{ams.text.level.6.line-height}" } } } } diff --git a/storybook/src/components/UnorderedList/UnorderedList.docs.mdx b/storybook/src/components/UnorderedList/UnorderedList.docs.mdx index 4f52536c74..2709266afa 100644 --- a/storybook/src/components/UnorderedList/UnorderedList.docs.mdx +++ b/storybook/src/components/UnorderedList/UnorderedList.docs.mdx @@ -46,3 +46,9 @@ This ensures the colour of the text provides enough contrast. When nesting lists, set the prop on all lists. + +### Small + +Use a list with a smaller font size in form descriptions and captions and the like. + + diff --git a/storybook/src/components/UnorderedList/UnorderedList.stories.tsx b/storybook/src/components/UnorderedList/UnorderedList.stories.tsx index baabbbbb0f..cede15a8f5 100644 --- a/storybook/src/components/UnorderedList/UnorderedList.stories.tsx +++ b/storybook/src/components/UnorderedList/UnorderedList.stories.tsx @@ -136,3 +136,9 @@ export const InverseColor: Story = { ), } + +export const Small: Story = { + args: { + size: 'small', + }, +}