Skip to content

feat(NumberField): support custom units - #3367

Merged
Lisa18289 merged 1 commit into
nextfrom
claude/issue-2579-implementation-1bed35
Oct 12, 2026
Merged

Lisa18289 merged 1 commit into
nextfrom
claude/issue-2579-implementation-1bed35

Conversation

@Lisa18289

@Lisa18289 Lisa18289 commented Oct 2, 2026 •

Copy link
Copy Markdown
Member

Adds a unit prop to NumberField for units Intl.NumberFormat does not know, like MiB or GiB. It renders 512 MiB exactly where formatOptions units appear.

Until now the fallback was writing the unit into the label ("Storage (MiB)"). The prop is better for sighted users and equal for screen reader users:

  • The unit sits next to the number it belongs to, not in the label above the field.
  • Custom and Intl units look the same, so a form mixing GB and MiB fields stays consistent.
  • The label stays the plain field name.
  • Screen readers get the same result as before: the unit is part of the field's name ("Storage MiB").

React-aria's number parser rejects unknown text in the input on every keystroke, which is why #1041 was dropped. So the unit is not part of the input value: an overlay mirrors the input box and an invisible copy of the input text places the unit right behind the number. The value stays a plain number (stepper, validation, form submit unchanged).

For screen readers the unit is attached via aria-labelledby. As with the label fallback, react-aria's step announcement says only the number ("513"). Unlike the fallback, the stepper buttons keep the label-only name, because react-aria labels them by the label id alone.

Closes #2579

🤖 Generated with Claude Code

@Lisa18289 Lisa18289 self-assigned this Oct 2, 2026
@Lisa18289 Lisa18289 added the update-screenshots Label a PR to update the screenshots used for visual regression testing label Oct 2, 2026
@github-actions github-actions Bot removed the update-screenshots Label a PR to update the screenshots used for visual regression testing label Oct 2, 2026
@github-actions

github-actions Bot commented Oct 2, 2026

Copy link
Copy Markdown
Contributor

🚀 Preview Deployment

Preview environments are ready:

Type URL
docs pr-3367.docs.review.flow-components.de
storybook pr-3367.storybook.review.flow-components.de

Images:

  • docs: ghcr.io/mittwald/flow/docs:pr-3367
  • storybook: ghcr.io/mittwald/flow/storybook:pr-3367

@Lisa18289 Lisa18289 added the update-screenshots Label a PR to update the screenshots used for visual regression testing label Oct 2, 2026
@github-actions github-actions Bot removed the update-screenshots Label a PR to update the screenshots used for visual regression testing label Oct 2, 2026
@Lisa18289
Lisa18289 force-pushed the claude/issue-2579-implementation-1bed35 branch from dc318d5 to 24b3347 Compare October 2, 2026 06:35
@Lisa18289 Lisa18289 added the update-screenshots Label a PR to update the screenshots used for visual regression testing label Oct 2, 2026
@github-actions github-actions Bot removed the update-screenshots Label a PR to update the screenshots used for visual regression testing label Oct 2, 2026
@Lisa18289
Lisa18289 force-pushed the claude/issue-2579-implementation-1bed35 branch 2 times, most recently from addd71f to d88d010 Compare October 2, 2026 07:03
@Lisa18289
Lisa18289 marked this pull request as ready for review October 2, 2026 08:58
@Lisa18289
Lisa18289 requested a review from a team October 2, 2026 08:58
@Lisa18289
Lisa18289 force-pushed the claude/issue-2579-implementation-1bed35 branch from d88d010 to b7b4091 Compare October 6, 2026 05:20
@Lisa18289 Lisa18289 added the update-screenshots Label a PR to update the screenshots used for visual regression testing label Oct 8, 2026
@github-actions github-actions Bot removed the update-screenshots Label a PR to update the screenshots used for visual regression testing label Oct 8, 2026
Add a `unit` prop for units Intl.NumberFormat does not support (e.g. MiB,
GiB). React-aria's number parser rejects unknown text in the input value, so
the unit is drawn as an overlay right behind the number and the value stays a
plain number. The input's name references the unit ("Storage MiB"), matching
the current convention of writing such units into the label.

Closes #2579

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@Lisa18289
Lisa18289 force-pushed the claude/issue-2579-implementation-1bed35 branch from d0e2ab5 to 3a3949e Compare October 8, 2026 12:30
@Lisa18289
Lisa18289 enabled auto-merge October 8, 2026 12:31
@Lisa18289
Lisa18289 merged commit eef4972 into next Oct 12, 2026
32 of 34 checks passed
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