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) => (