Skip to content

[FEATURE] UI Customization. Add control-size design tokens - #366

Merged
jgbernalp merged 3 commits into
ui-customizationfrom
zhuje/ui-customization-control-size-tokens
Oct 15, 2026
Merged

jgbernalp merged 3 commits into
ui-customizationfrom
zhuje/ui-customization-control-size-tokens

Conversation

@zhuje

@zhuje zhuje commented Oct 14, 2026 •

Copy link
Copy Markdown
Contributor

Description

Follow-up to the sizing question on #312. Adds a control-size scale to @perses-dev/design-tokens so controls of the same size share a height.

--perses-size-control-xs: 1.5rem; /* 24px */
--perses-size-control-sm: 2rem;   /* 32px */
--perses-size-control-md: 2.5rem; /* 40px */
--perses-size-control-lg: 3rem;   /* 48px */
  • Tokens added to tokens.css, tokens.ts and types.ts, with tests.
  • IconButton uses them for width and height (xs grows from 1rem to 1.5rem, which meets the WCAG 2.5.8 24px minimum target).
  • Button uses them as min-height, so it grows with larger text instead of clipping. Box sizing is border-box via the reset, so the token is the outer height including the 1px border.
  • Out of scope: Chip ([FEATURE] UI Customization. Add Chip primitive component #320, to rename its sizes to xs/sm), TextField ([FEATURE] UI Customization. Textfield Component #354), and an indicator scale for Checkbox/Switch/icons. These follow once this merges.

Visual changes to merged components: Button xs and sm grow by about 0.25rem, md and lg change by about 0.1rem, IconButton xs grows by 0.5rem.

Screenshots

Not included yet.

Checklist

  • Pull request has a descriptive title and context useful to a reviewer.
  • Pull request title follows the [<catalog_entry>] <commit message> naming convention using one of the
    following catalog_entry values: FEATURE, ENHANCEMENT, BUGFIX, BREAKINGCHANGE, DOC,IGNORE.
  • All commits have DCO signoffs.

UI Changes

  • Changes that impact the UI include screenshots and/or screencasts of the relevant changes.
  • Code follows the UI guidelines.
  • E2E tests are stable and unlikely to be flaky.
    See e2e docs for more details.

Add --perses-size-control-{xs,sm,md,lg} (1.5/2/2.5/3rem) to the design
tokens, with TypeScript tokens, types and tests. IconButton uses them for
width/height and Button uses them as min-height so controls of the same size
share a height.

Signed-off-by: Jenny Zhu <jenny.a.zhu@gmail.com>
@zhuje
zhuje requested a review from a team as a code owner October 14, 2026 21:12
@github-actions

github-actions Bot commented Oct 14, 2026 •

Copy link
Copy Markdown

React Doctor found no new issues. 🎉

Reviewed by React Doctor for commit 41aaf1b.

Signed-off-by: Gabriel Bernal <gbernal@redhat.com>
Signed-off-by: Gabriel Bernal <gbernal@redhat.com>
@jgbernalp
jgbernalp force-pushed the zhuje/ui-customization-control-size-tokens branch from a29b19e to 41aaf1b Compare October 15, 2026 10:20
@jgbernalp
jgbernalp merged commit 1abb0d4 into ui-customization Oct 15, 2026
14 checks passed
@jgbernalp
jgbernalp deleted the zhuje/ui-customization-control-size-tokens branch October 15, 2026 10:24
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants