Conversation
Signed-off-by: James Brooks <jamesbrooks@spotify.com>
Contributor
Changed Packages
|
Contributor
There was a problem hiding this comment.
Pull request overview
Adds a new NumberField component to @backstage/ui, mirroring the existing TextField pattern but built on react-aria-components' NumberField for numeric input with min/max/step support, label, optional icon, and inline validation. The component is also wired into the docs site and the public API surface.
Changes:
- New
NumberFieldcomponent (component, definition, types, CSS module, stories, barrel export) underpackages/ui/src/components/NumberField. - Registers the component in
packages/ui/src/index.ts,definitions.ts, andreport.api.md. - Adds documentation page, prop definitions, and code snippets to
docs-uiplus a changeset entry.
Reviewed changes
Copilot reviewed 15 out of 15 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/ui/src/index.ts | Exports the new NumberField module from the package barrel. |
| packages/ui/src/definitions.ts | Re-exports NumberFieldDefinition for theming consumers. |
| packages/ui/src/components/NumberField/types.ts | Defines NumberFieldOwnProps and NumberFieldProps. |
| packages/ui/src/components/NumberField/NumberField.tsx | Implements the component using react-aria's NumberField. |
| packages/ui/src/components/NumberField/NumberField.stories.tsx | Storybook stories covering sizes, validation, icons, etc. |
| packages/ui/src/components/NumberField/NumberField.module.css | CSS module styling for sizes, icon, focus, invalid, disabled states. |
| packages/ui/src/components/NumberField/index.ts | Barrel re-exports for the component. |
| packages/ui/src/components/NumberField/definition.ts | Component definition wiring CSS classes, propDefs, and bg consumer. |
| packages/ui/report.api.md | Updates the public API report with new exports. |
| docs-ui/src/utils/data.ts | Adds NumberField to the docs navigation list. |
| docs-ui/src/app/components/number-field/snippets.ts | Code snippets for docs examples. |
| docs-ui/src/app/components/number-field/props-definition.tsx | Prop table definitions for the docs. |
| docs-ui/src/app/components/number-field/page.mdx | MDX docs page for NumberField. |
| docs-ui/src/app/components/number-field/components.tsx | React example components used by the docs page. |
| .changeset/tall-spies-invite.md | Changeset describing the new component (patch bump). |
Contributor
🎨 Visual Testing with Chromatic
|
Signed-off-by: James Brooks <jamesbrooks@spotify.com>
Signed-off-by: James Brooks <jamesbrooks@spotify.com>
Signed-off-by: James Brooks <jamesbrooks@spotify.com>
cdedreuille
reviewed
May 26, 2026
cdedreuille
left a comment
Collaborator
There was a problem hiding this comment.
Thanks a lot @jabrks for pushing for this. On my side this this first version is ready to go.
cdedreuille
approved these changes
May 26, 2026
Signed-off-by: James Brooks <jamesbrooks@spotify.com>
Copilot stopped reviewing on behalf of
jabrks due to an error
May 26, 2026 18:22
Naycon
approved these changes
May 27, 2026
Contributor
|
Thank you for contributing to Backstage! The changes in this pull request will be part of the |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Hey, I just made a Pull Request!
Introduces a designated
NumberFieldto sit alongside the existingTextFieldcomponent in Backstage UI✔️ Checklist
Signed-off-byline in the message. (more info)