feat(components): add size prop to Input by zakk-verrilli-ld · Pull Request #1953 · launchdarkly/launchpad-ui

zakk-verrilli-ld · 2026-07-21T14:06:40Z

The purpose is to support the latest designs for list page filtering.

Summary

Adds a size prop to Input with small and medium variants, mirroring Button's size scale so inputs and buttons align when placed side by side.

small → 24px tall (text-small-1-regular, 11px text, 3px block padding) — matches Button small.
medium → 32px tall (text-body-2-regular, 5px block padding) — the default, unchanged from prior behavior; matches Button medium.
The size-specific font + vertical padding moved from .base into .small/.medium classes in Input.module.css; horizontal padding and everything else stay in .base.
size is Omitted from the underlying React Aria props (the native numeric size HTML attribute) and redefined as the design-system scale. size/variant are also no longer forwarded to the DOM <input> (RAC's Input spreads unknown props unfiltered), which additionally fixes a pre-existing leak of variant to the DOM.
New dedicated Input.stories.tsx (Default / Sizes / Variants) modeled on Label's primitive story — the size prop is documented there, while TextField's stories keep covering Input in a composed field. No overlap with TextField's existing state matrix.

Points for reviewer judgment

small uses 11px text. That's the only way to hit Button's 24px small height with regular weight (there's no 13px/16px-line-height token). Flagging in case design expected 13px.
Changeset marked minor. By the letter of the repo's bump rules, dropping the native numeric size attribute is a "breaking type" (major). In spirit it's additive (repurposing a near-unused attribute). Bump to major if you disagree — the changeset summary calls this out explicitly.

Screenshots (if appropriate)

Visual diffs will come through Chromatic (new Input story + unchanged TextField stories).

Testing approaches

TextField.spec.tsx passes (3/3).
Canonical typecheck (tsc --skipLibCheck --moduleResolution bundler) clean; Biome clean.
Story play/a11y run in CI (Chromatic + Storybook test runner); standalone inputs carry aria-label so axe passes.

Note

Medium Risk
Public API change on Input (size meaning) and shared field CSS affect all inputs, groups, and picker buttons; medium default height should stay the same but typings and any native size usage need a quick check.

Overview
Adds a size prop to Input (small / medium, default unchanged) so field height and typography align with Button (24px vs 32px). Shared field styling moves from Input.module.css to field.module.css, with small using 11px text and token-based min-heights.

size and variant are stripped before rendering the DOM <input> (replacing the native numeric size attribute on the public API via Omit). Group and TextArea no longer accept size on their variant types. Button picker + small composes fieldStyles.small for consistent picker height; Group nested inputs get min-height: 0 so groups size correctly.

Storybook adds Input.stories.tsx and a Select sizes example.

^{Reviewed by Cursor Bugbot for commit b5dbec3. Bugbot is set up for automated code reviews on this repo. Configure here.}

Add small (24px) and medium (32px, default) sizes to Input, matching the corresponding Button sizes so inputs and buttons align side by side. `size` now refers to the design-system scale, replacing the rarely-used native numeric HTML `size` attribute. Adds a dedicated Input story (Default/Sizes/Variants) modeled on Label's primitive story. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

changeset-bot · 2026-07-21T14:06:45Z

🦋 Changeset detected

Latest commit: b5dbec3

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@launchpad-ui/components	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

pkg-pr-new · 2026-07-21T14:07:31Z

yarn add https://pkg.pr.new/@launchpad-ui/components@1953.tgz

yarn add https://pkg.pr.new/@launchpad-ui/icons@1953.tgz

yarn add https://pkg.pr.new/@launchpad-ui/tokens@1953.tgz

commit: b5dbec3

No gonfalon consumers set a numeric `size` on Input, so the size-scale change has no real-world migration impact. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Picker triggers (DatePicker, DateRangePicker, Select) set `size: null` and rely on the `picker` variant composing Input's `.base` for their font and vertical padding. Moving those into Input's size classes collapsed the triggers to ~20px. Compose Input's `medium` size into `.picker` so it renders as a medium-height input again. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

nhironaka · 2026-07-21T19:24:16Z

should we run a gonfalon meticulous test just to make sure?

zakk-verrilli-ld · 2026-07-22T19:07:55Z

should we run a gonfalon meticulous test just to make sure?

thanks for the suggestion @nhironaka! Meticulous reports no diff in Gonfalon PR

The Input size refactor moved font + vertical padding out of `.base` into per-size classes, collapsing picker triggers (which compose only `.base`) to ~20px. Instead of patching the `.picker` class in Button.module.css, apply the default (medium) sizing on Input's `.base` and let `.small` override it. Picker triggers keep their medium height with no Button-file change, and the redundant `.medium` class is removed. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

apucacao · 2026-07-23T15:09:42Z

 	font: var(--lp-text-body-2-regular);
 	color: var(--lp-color-text-ui-primary-base);
-	padding: 5px var(--lp-spacing-300);
+	padding-block: 5px;


Any reason not to use tokens here and the 3px below?

okay somewhat fixed (there is no 5px token). Fixed height would probably work better / not require odd padding

yeah, agreed about fixed height -- less math to do when we come back to this...

The size scale has no size.5 token (it jumps from 4 to 6), so var(--lp-size-5) never resolved and medium inputs lost their block padding. Restore the 5px literal. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Switch Input's shared .base from a fixed height to min-height so the 32px/24px sizes act as a floor rather than a cap. TextArea reuses .base, so a fixed height was capping multiline fields at 32px; a min-height lets them grow with content while keeping the medium-input-height floor. Restore the textarea's block padding that base no longer sets. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

InputVariants now includes `size`, and TextArea/Group extend it but only style `variant` while spreading the rest of their props to the DOM — so a `size` value was neither styled nor stripped and could reach the element. Omit `size` from their prop types (neither has size variants) and pull `variant` out of the DOM spread, matching Input's pattern. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Input's min-height (32px) lives on the shared .base, which applies both to the Group container and to the field nested inside it. Group strips the nested field's padding/border but not its min-height, so the inner field was pinned to 32px, pushing button-Groups to 40px (32 + 6px padding + 2px border). Reset min-height on nested fields so the Group's own height governs, restoring 32px. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

cursor

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

There are 2 total unresolved issues (including 1 from previous review).

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, have a team admin enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit 6f2ff99. Configure here.}

apucacao · 2026-07-24T16:38:26Z

 .area {
 	flex: unset;
+	/* +1 to align with input elements who are granted a 1px useragent buffer  */
+	padding-block: calc(var(--lp-size-4) + var(--lp-size-1));


What is this about?

This replaces the 5px that Input used to apply - it was composed into TextArea. min-height on Input now replaces the math which included the padding.

The comment is about my amusement that browsers bless input with 1px padding

context: this Multi Line story regressed due to the Input composition. I'm still testing with meticulous to not regress any of the composed fields (Group, Button, TextArea). Added some storybook examples for better coverage

…ker from Input The picker Button variant composed Input's `.base` directly, so Input's internal styles were an implicit contract for Button — every Input sizing change rippled into the picker and each size had to be re-bridged by hand. Move the shared field-shell styling into a neutral field.module.css that Input, TextArea, Group, and the picker all compose. Button no longer depends on Input's styles. The small-picker height bridge moves from a `.picker.small` CSS patch into Button.tsx (`variant === 'picker' && size === 'small'`), which also avoids the `size: null` (Select-injected) collapse a size-keyed lookup would hit. Add a Sizes story to Select showing small (24px) and medium (32px) triggers, covering the small-picker path that previously had no snapshot. Verified in Storybook: Input 24/32, Select trigger 32 (default) and 24 (small), Group 32, multiline TextArea still grows. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

zakk-verrilli-ld and others added 2 commits July 21, 2026 10:38

docs(components): drop breaking-change note from Input size changeset

fc211fa

No gonfalon consumers set a numeric `size` on Input, so the size-scale change has no real-world migration impact. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

zakk-verrilli-ld marked this pull request as ready for review July 21, 2026 19:15

zakk-verrilli-ld requested a review from a team as a code owner July 21, 2026 19:15

zakk-verrilli-ld requested a review from a team July 23, 2026 15:00

apucacao reviewed Jul 23, 2026

View reviewed changes

resolve to size vars

4fa3732

cursor Bot reviewed Jul 23, 2026

View reviewed changes

Comment thread packages/components/src/styles/Input.module.css Outdated

zakk-verrilli-ld and others added 2 commits July 23, 2026 11:36

fix(components): fixed Input heights

a0662ff

cursor Bot reviewed Jul 23, 2026

View reviewed changes

Comment thread packages/components/src/styles/field.module.css

cursor Bot reviewed Jul 24, 2026

View reviewed changes

Comment thread packages/components/src/Input.tsx

cursor Bot reviewed Jul 24, 2026

View reviewed changes

Comment thread packages/components/src/Group.tsx

cursor Bot reviewed Jul 24, 2026

View reviewed changes

Comment thread packages/components/src/styles/Group.module.css

nhironaka requested a review from a team July 24, 2026 16:31

apucacao reviewed Jul 24, 2026

View reviewed changes

Uh oh!

Conversation

zakk-verrilli-ld commented Jul 21, 2026 • edited by cursor Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Points for reviewer judgment

Screenshots (if appropriate)

Testing approaches

Uh oh!

changeset-bot Bot commented Jul 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

pkg-pr-new Bot commented Jul 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

nhironaka commented Jul 21, 2026

Uh oh!

zakk-verrilli-ld commented Jul 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

cursor Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

zakk-verrilli-ld commented Jul 21, 2026 •

edited by cursor Bot

Loading

changeset-bot Bot commented Jul 21, 2026 •

edited

Loading

pkg-pr-new Bot commented Jul 21, 2026 •

edited

Loading

zakk-verrilli-ld commented Jul 22, 2026 •

edited

Loading