Skip to content

feat(storybook): expand form input stories#18123

Open
myelinated-wackerow wants to merge 6 commits intodevfrom
feat/storybook-form-input-stories
Open

feat(storybook): expand form input stories#18123
myelinated-wackerow wants to merge 6 commits intodevfrom
feat/storybook-form-input-stories

Conversation

@myelinated-wackerow
Copy link
Copy Markdown
Collaborator

@myelinated-wackerow myelinated-wackerow commented May 5, 2026

Summary

Adds and expands Storybook stories for the form input primitives in src/components/ui/. This is PR 2 of 5 for #18121, scoped to form inputs. One commit per checkbox in the issue.

  • Textarea (new) -- Default, Sizes, HasError, WithoutPlaceholder, WithHelperText, Disabled. Title UI / Primitives / Textarea.
  • Input (expanded) -- adds HasError, Disabled (with and without value), AutoFocus, WithHelperText. Retitled to UI / Primitives / Input.
  • Checkbox (expanded) -- split kitchen-sink story into focused stories per state, adds Indeterminate. Retitled to UI / Primitives / Checkbox.
  • Switch (expanded) -- split into Off, On, Disabled, Invalid, WithLabel, and a SettingsList composition. Retitled to UI / Primitives / Switch.

The four stories live under UI / Primitives / [Name] to match the hierarchy established in #18122 (PR 1). Title alignment is intentionally consistent within this cleanup; the team can decide on a final hierarchy in a future pass.

Removed

  • RadioGroup -- expansion was added (8cccb5b) and then removed (2021192), along with the original story file that lived on dev. Component is being removed in a separate cleanup; the story would be orphaned, so it shouldn't ship.

Notes for review

  • Textarea and Input share the same cva variant shape (size, hasError); the two stories are deliberately structurally similar so designers see the parity at a glance.
  • Checkbox indeterminate state addresses the gap called out in feat(design-system): Add Storybook stories for canonical UI primitives #18121.
  • Switch WithLabel story uses nested-label association (no htmlFor needed); SettingsList models a realistic settings-panel use.

Test plan

  • Eyeball each new/expanded story in Storybook (light + dark, locale toggle)
  • a11y addon passes for each story

Refs: #18121

myelinated-wackerow and others added 5 commits May 4, 2026 20:13
Cover Default, Sizes (`md|sm`), HasError (`true|false`), WithoutPlaceholder, WithHelperText, and Disabled. Title hierarchy `UI / Primitives / Textarea` per #18121.

Helper text is rendered as a sibling element with neutral or error tone since `Textarea` does not bundle it natively.

Refs: #18121

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Co-Authored-By: wackerow <54227730+wackerow@users.noreply.github.com>
Retitle to `UI / Primitives / Input`. Add HasError, Disabled (with and without value), AutoFocus, and WithHelperText stories. Keep Sizes story focused on the size axis only.

Refs: #18121

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Co-Authored-By: wackerow <54227730+wackerow@users.noreply.github.com>
Retitle to `UI / Primitives / Checkbox`. Split the existing kitchen-sink story into focused stories per state: Default, Checked, Indeterminate (new), Disabled, Invalid, and AsGroup composition. Indeterminate addresses the gap called out in #18121.

Refs: #18121

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Co-Authored-By: wackerow <54227730+wackerow@users.noreply.github.com>
Retitle to `UI / Primitives / Switch`. Split into focused stories: Off, On, Disabled (off and on), Invalid, WithLabel, and a SettingsList composition. WithLabel and on/off coverage address the gaps called out in #18121.

Refs: #18121

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Co-Authored-By: wackerow <54227730+wackerow@users.noreply.github.com>
Retitle to `UI / Primitives / RadioGroup`. Split into focused stories: Default, Disabled (group-wide and per-item), Invalid, TwoItems, FiveItems, and WithDescriptions composition. Item-count variants address the gap called out in #18121.

Refs: #18121

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Co-Authored-By: wackerow <54227730+wackerow@users.noreply.github.com>
@netlify
Copy link
Copy Markdown

netlify Bot commented May 5, 2026

Deploy Preview for ethereumorg ready!

Name Link
🔨 Latest commit 2021192
🔍 Latest deploy log https://app.netlify.com/projects/ethereumorg/deploys/69fa8f15950c490008862449
😎 Deploy Preview https://deploy-preview-18123.ethereum.it
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
Lighthouse
Lighthouse
7 paths audited
Performance: 66 (🟢 up 1 from production)
Accessibility: 96 (no change from production)
Best Practices: 100 (no change from production)
SEO: 98 (🔴 down 1 from production)
PWA: 59 (no change from production)
View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify project configuration.

Component is being removed in a separate cleanup; story shouldn't ship. Replaces the expansion in 8cccb5b and the original story file that lived on dev.

Refs: #18121

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Co-Authored-By: wackerow <54227730+wackerow@users.noreply.github.com>
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.

1 participant