Altinn / Altinn/altinn-components
data-size='xs' doesn't type-check on re-exported Ds* components
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 0
- Forks
- 1
- Avg merge
- 10h 22m
- Merged PRs (30d)
- 32
Description
### Description
We ran into this in altinn-access-management-frontend: `` doesn't type-check, even though it renders exactly the way we want it to.
As far as I can tell, this package adds `xs` to the size scale in its own generated theme — `--ds-size--xs` is in `dist/tokens/design-tokens-build/theme.css` and isn't in `@digdir/designsystemet-theme` 1.11.0 — and since `dist/global.css` imports that after the upstream theme, `xs` wins and works fine at runtime. But the re-exported `Ds*` components still carry Designsystemet's `data-size?: Size`, which is only `'sm' | 'md' | 'lg'`, so TypeScript rejects a size the package itself styles.
Your own `Button` already handles this, with `ButtonSize = 'xs' | 'mini' | DsButtonProps['data-size']`. The ones we've hit are `DsAlert`, `DsPopover.Trigger`, `DsPagination` and `DsDialog.Trigger`.
Could the re-exported components' `data-size` be widened to match the scale the theme actually ships?
### Additional Information
Seen on 0.72.5, with `@digdir/designsystemet-{css,react,types}` 1.15.0 and `-theme` 1.11.0.
### Tasks
_No response_
### Acceptance Criterias
_No response_
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by comparing the existing ButtonSize typing with the re-exported DsAlert, DsPopover.Trigger, DsPagination, and DsDialog.Trigger props. Reproduce the type-check failure and inspect the generated theme files to confirm the shipped size scale. Done means the named re-exports accept the supported xs size while their existing sizes remain valid.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 72/100