diff --git a/packages/css/src/components/ordered-list/ordered-list.scss b/packages/css/src/components/ordered-list/ordered-list.scss index be63025b9a..8e8b8d91b9 100644 --- a/packages/css/src/components/ordered-list/ordered-list.scss +++ b/packages/css/src/components/ordered-list/ordered-list.scss @@ -42,6 +42,11 @@ color: var(--ams-ordered-list-inverse-color); } +.ams-ordered-list--small:not(.ams-ordered-list--no-markers) { + font-size: var(--ams-ordered-list-small-font-size); + line-height: var(--ams-ordered-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-ordered-list { list-style-type: var(--ams-ordered-list-ordered-list-list-style-type); diff --git a/packages/react/src/OrderedList/OrderedList.test.tsx b/packages/react/src/OrderedList/OrderedList.test.tsx index 521aae0eaf..13ae0dc781 100644 --- a/packages/react/src/OrderedList/OrderedList.test.tsx +++ b/packages/react/src/OrderedList/OrderedList.test.tsx @@ -61,6 +61,14 @@ describe('Ordered list', () => { expect(items.length).toBe(3) }) + it('renders the small size class', () => { + render() + + const component = screen.getByRole('list') + + expect(component).toHaveClass('ams-ordered-list--small') + }) + it('supports ForwardRef in React', () => { const ref = createRef() diff --git a/packages/react/src/OrderedList/OrderedList.tsx b/packages/react/src/OrderedList/OrderedList.tsx index ba36e3b4f3..09ef27f909 100644 --- a/packages/react/src/OrderedList/OrderedList.tsx +++ b/packages/react/src/OrderedList/OrderedList.tsx @@ -9,14 +9,17 @@ import type { ForwardedRef, OlHTMLAttributes, PropsWithChildren } from 'react' import { OrderedListItem } from './OrderedListItem' export type OrderedListProps = { - markers?: boolean /** Changes the text color for readability on a dark background. */ inverseColor?: boolean + /** Whether the list items show a marker. */ + markers?: boolean + /** The size of the ordered list */ + size?: 'small' } & PropsWithChildren> const OrderedListRoot = forwardRef( ( - { children, className, inverseColor, markers = true, ...restProps }: OrderedListProps, + { children, className, inverseColor, markers = true, size, ...restProps }: OrderedListProps, ref: ForwardedRef, ) => (
    +## Small + +Use a list with a smaller font size in form descriptions and captions and the like. + + + ### Two Levels A list may have one nested level. diff --git a/storybook/src/components/OrderedList/OrderedList.stories.tsx b/storybook/src/components/OrderedList/OrderedList.stories.tsx index 96b02cbf87..7a9aff286e 100644 --- a/storybook/src/components/OrderedList/OrderedList.stories.tsx +++ b/storybook/src/components/OrderedList/OrderedList.stories.tsx @@ -25,6 +25,13 @@ const meta = { argTypes: { reversed: { control: 'boolean' }, start: { control: 'number' }, + size: { + control: { + type: 'radio', + labels: { small: 'small', undefined: 'medium' }, + }, + options: ['small', undefined, 'large'], + }, }, decorators: [inverseColorDecorator], } satisfies Meta @@ -35,6 +42,12 @@ type Story = StoryObj export const Default: Story = {} +export const Small: Story = { + args: { + size: 'small', + }, +} + export const TwoLevels: Story = { render: (args) => (