Skip to content

feat(Table): Add whitespace below Caption #2515

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
VincentSmedinga merged 10 commits into from
Apr 18, 2026
Merged

feat(Table): Add whitespace below Caption #2515

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
426ff01
feat(Table): Add side prop to Caption and fix compound component types
VincentSmedinga Apr 1, 2026
1c58abf
Add unit test for new prop
VincentSmedinga Apr 1, 2026
f02498a
Revert caption below table feature again
VincentSmedinga Apr 1, 2026
f249d83
Revert type updates
VincentSmedinga Apr 1, 2026
252df5f
Revert extra typing on Table
VincentSmedinga Apr 1, 2026
9d6b3c0
Update docs and add example of caption with description
VincentSmedinga Apr 1, 2026
83ff323
Add extra text to caption in test story
VincentSmedinga Apr 11, 2026
263ee86
Merge branch 'develop' into feat/DES-1722-table-caption-side
VincentSmedinga Apr 11, 2026
ddace3b
Merge branch 'develop' into feat/DES-1722-table-caption-side
VincentSmedinga Apr 18, 2026
942c196
Decrease margin size
VincentSmedinga Apr 18, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion packages-proprietary/tokens/src/components/ams/table.tokens.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,8 +35,13 @@
"caption": {
"font-weight": {
"$value": "{ams.typography.body-text.bold.font-weight}",
"$type": "fontWeight"
},
"margin-block-end": {
"$value": "{ams.space.s}",
"$type": "dimension",
"$extensions": {
"nl.amsterdam.type": "fontWeight"
"nl.amsterdam.subtype": "space"
}
}
},
Expand Down
6 changes: 3 additions & 3 deletions packages/css/src/components/table/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,6 @@ Structures data in rows and columns to help users work with large amounts of inf

## Guidelines

- Add a caption to help users find, navigate and understand the table.
- Include a [Heading](https://designsystem.amsterdam/?path=/docs/components-text-heading--docs) in the Table Caption,
unless the table is in a [Figure](https://designsystem.amsterdam/?path=/docs/components-media-figure--docs) which has a Figure Caption.
- Add a caption so users can find and understand the table without reading its data.
- Use a [Heading](https://designsystem.amsterdam/?path=/docs/components-text-heading--docs) in the caption, at the level that fits the document outline.
It becomes the table’s accessible name, announced by screen readers on every encounter.
1 change: 1 addition & 0 deletions packages/css/src/components/table/table.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@

.ams-table__caption {
font-weight: var(--ams-table-caption-font-weight);
margin-block-end: var(--ams-table-caption-margin-block-end);
text-align: start;
}

Expand Down
8 changes: 8 additions & 0 deletions storybook/src/components/Table/Table.docs.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,14 @@ Use `Table.Footer` for a summary row.

<Canvas of={TableStories.WithFooterAndRowHeaders} />

### With description in caption

Add a description to the caption to provide context like a source, date, or reading instructions.
Use a small [Paragraph](/docs/components-text-paragraph--docs).
Set `aria-labelledby` to keep only the heading as the table’s accessible name, or screen readers will read out the entire text.

<Canvas of={TableStories.WithDescriptionInCaption} />

## Design tokens

<DesignTokensTable tokens={tokens} />
43 changes: 42 additions & 1 deletion storybook/src/components/Table/Table.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@

import type { Meta, StoryObj } from '@storybook/react-vite'

import { Heading } from '@amsterdam/design-system-react'
import { Heading, Paragraph } from '@amsterdam/design-system-react'
import { Table } from '@amsterdam/design-system-react/src'

const meta = {
Expand Down Expand Up @@ -83,3 +83,44 @@ export const WithFooterAndRowHeaders: Story = {
],
},
}

export const WithDescriptionInCaption: Story = {
args: {
'aria-labelledby': 'caption-heading',
children: [
<Table.Caption key="caption">
<Heading id="caption-heading" level={3}>
Kosten voor de aanvraag
</Heading>
<Paragraph size="small">
Prijzen zijn geldig vanaf 1 januari 2025. Bron: Rijksdienst voor Identiteitsgegevens.
</Paragraph>
</Table.Caption>,
<Table.Header key="header">
<Table.Row>
<Table.HeaderCell>Type</Table.HeaderCell>
<Table.HeaderCell>
Normale levertijd
<br />1 week
</Table.HeaderCell>
<Table.HeaderCell>
Spoed
<br />2 werkdagen
</Table.HeaderCell>
</Table.Row>
</Table.Header>,
<Table.Body key="body">
<Table.Row>
<Table.Cell>Paspoort</Table.Cell>
<Table.Cell>€ 77,85</Table.Cell>
<Table.Cell>€ 130,80</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>ID-kaart</Table.Cell>
<Table.Cell>€ 70,35</Table.Cell>
<Table.Cell>€ 123,30</Table.Cell>
</Table.Row>
</Table.Body>,
],
},
}
16 changes: 11 additions & 5 deletions storybook/src/components/Table/Table.test.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@

import type { Meta, StoryObj } from '@storybook/react-vite'

import { Table } from '@amsterdam/design-system-react/src'
import { Heading, Paragraph, Table } from '@amsterdam/design-system-react/src'

import { renderComponentVariants } from '../../_common/renderComponentVariants'
import { default as tableMeta } from './Table.stories'
Expand All @@ -21,11 +21,17 @@ type Story = StoryObj<typeof meta>

export const Test: Story = {
args: {
'aria-labelledby': 'caption-heading',
children: [
<Table.Caption key={1}>
<h3>Kosten voor de aanvraag</h3>
<Table.Caption key="caption">
<Heading id="caption-heading" level={3}>
Kosten voor de aanvraag
</Heading>
<Paragraph size="small">
Prijzen zijn geldig vanaf 1 januari 2025. Bron: Rijksdienst voor Identiteitsgegevens.
</Paragraph>
</Table.Caption>,
<Table.Header key={2}>
<Table.Header key="header">
<Table.Row>
<Table.HeaderCell>Type</Table.HeaderCell>
<Table.HeaderCell>
Expand All @@ -38,7 +44,7 @@ export const Test: Story = {
</Table.HeaderCell>
</Table.Row>
</Table.Header>,
<Table.Body key={3}>
<Table.Body key="body">
<Table.Row>
<Table.Cell>Paspoort</Table.Cell>
<Table.Cell>€ 77,85</Table.Cell>
Expand Down
Loading