Skip to content

FE-679: add number input to ds#8727

Open
alex-e-leon wants to merge 28 commits into
mainfrom
FE-679-add-number-input-to-ds
Open

FE-679: add number input to ds#8727
alex-e-leon wants to merge 28 commits into
mainfrom
FE-679-add-number-input-to-ds

Conversation

@alex-e-leon
Copy link
Copy Markdown
Contributor

🌟 What is the purpose of this PR?

Adds a number input to the design system

Pre-Merge Checklist 🚀

🚢 Has this modified a publishable library?

This PR:

  • does not modify any publishable blocks or libraries, or modifications do not need publishing

📜 Does this require a change to the docs?

The changes in this PR:

  • are internal and do not require a docs change

@vercel
Copy link
Copy Markdown

vercel Bot commented May 18, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
hash Error Error May 19, 2026 0:38am
hashdotdesign-tokens Ready Ready Preview, Comment May 19, 2026 0:38am
petrinaut Ready Ready Preview, Comment May 19, 2026 0:38am

@cursor
Copy link
Copy Markdown

cursor Bot commented May 18, 2026

PR Summary

Medium Risk
Introduces a new NumberInput plus non-trivial BaseInput styling/behavior changes (fit-content sizing, clear/edit icon layout, number spin-button handling) that can affect all inputs using BaseInput across variants and browsers.

Overview
Adds a new NumberInput component (integer/float) built on BaseInput, including parsing to number | null, integer key filtering, and wheel-scroll prevention while focused.

Updates BaseInput/baseInputRecipe to better support number inputs and icon/clear/edit layout: removes the fit-content sizer span in favor of CSS sizing, adds rules to hide/neutralize browser number spin controls, and refines clear/edit visibility/spacing (including a hideClear slot and new variant flags).

Exports NumberInput, adds comprehensive NumberInput Ladle stories, and includes a changeset bump; minor story styling tweak to TextInput.

Reviewed by Cursor Bugbot for commit f910e3f. Bugbot is set up for automated code reviews on this repo. Configure here.

@github-actions github-actions Bot added area/libs Relates to first-party libraries/crates/packages (area) type/eng > frontend Owned by the @frontend team area/apps > hash.design Affects the `hash.design` design site (app) labels May 18, 2026
@github-actions github-actions Bot added the area/infra Relates to version control, CI, CD or IaC (area) label May 18, 2026
@augmentcode
Copy link
Copy Markdown

augmentcode Bot commented May 18, 2026

🤖 Augment PR Summary

Summary: Adds a new NumberInput component to the design system, built on top of the existing BaseInput.

Changes:

  • Introduces NumberInput that adapts numeric value/onChange to BaseInput’s string-based API
  • Adds a comprehensive Ladle story file showcasing variants, states (disabled/invalid/loading/placeholder), alignment, styled values, sizing, widths, and prefix/suffix configurations
  • Extends baseInputRecipe with additional slots/variants to support “hidden clear” behavior and number-input browser controls
  • Updates BaseInput to compute and pass hasBrowserControls and willClear styling flags and to hide the clear affordance without layout shift

Technical Notes: Includes CSS to suppress native number spin controls in some states and disables scroll-wheel value changes while the number input is focused.

🤖 Was this summary useful? React with 👍 or 👎

Copy link
Copy Markdown

@augmentcode augmentcode Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Review completed. 2 suggestions posted.

Fix All in Augment

Comment augment review to trigger a new review at any time.

Comment thread libs/@hashintel/ds-components/src/components/NumberInput/number-input.tsx Outdated
Comment thread libs/@hashintel/ds-components/src/components/NumberInput/number-input.tsx Outdated
Comment thread libs/@hashintel/ds-components/src/components/NumberInput/number-input.tsx Outdated
Comment thread libs/@hashintel/ds-components/src/components/NumberInput/number-input.tsx Outdated
Comment thread libs/@hashintel/ds-components/src/components/NumberInput/number-input.tsx Outdated
Comment thread libs/@hashintel/ds-components/src/components/NumberInput/number-input.tsx Outdated
Comment thread libs/@hashintel/ds-components/src/components/NumberInput/number-input.stories.tsx Outdated
Comment thread libs/@hashintel/ds-components/src/components/NumberInput/number-input.tsx Outdated
@alex-e-leon alex-e-leon changed the title Fe 679 add number input to ds FE-679: add number input to ds May 18, 2026
Copy link
Copy Markdown

@cursor cursor Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cursor Bugbot has reviewed your changes and found 1 potential issue.

Fix All in Cursor

❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.

Reviewed by Cursor Bugbot for commit 93f6694. Configure here.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area/apps > hash.design Affects the `hash.design` design site (app) area/infra Relates to version control, CI, CD or IaC (area) area/libs Relates to first-party libraries/crates/packages (area) type/eng > frontend Owned by the @frontend team

Development

Successfully merging this pull request may close these issues.

1 participant