Altinn / Altinn/altinn-components

data-size='xs' doesn't type-check on re-exported Ds* components

Open
#1,371 5 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

status/draft
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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.