Skip to content

feat(styles,react): add input text, label, helper text and field#14

Merged
Gnuk merged 1 commit into
mainfrom
add-input-text
Jul 8, 2026
Merged

feat(styles,react): add input text, label, helper text and field#14
Gnuk merged 1 commit into
mainfrom
add-input-text

Conversation

@Gnuk

@Gnuk Gnuk commented Jul 6, 2026

Copy link
Copy Markdown
Collaborator

What

First iteration of the input field from the Figma anatomy, reduced to the pure text field (leading/trailing icons, vertical separator and the counter/clear tag are deferred to later MRs).

Pattern Library (styles 0.0.8)

  • input-text atom: native text field carrying the visual container (border, 4px radius, background), full width by default, focus and disabled states, -error (sets aria-invalid="true") and -success alternatives. Colors and proportions matched against the Figma design.
  • label atom: names a form control through for/id.
  • helper-text atom: contextual help or feedback message linked through aria-describedby, with -error/-success alternatives.
  • field molecule: pure vertical composition (label, any form control, helper text); the caller wires for/id, aria-describedby and the variant. Ready to host textarea/select later.
  • Docs follow the button.md structure (Alternatives/States/Accessibility) and render zones are spaced with the render-wrapper pattern used by buttons.

React (react 0.0.7)

  • IpponInputText forwarding native input props, deriving aria-invalid from the error variant (overridable).
  • IpponLabel, IpponHelperText, IpponField — behavior-free, wiring shown in Storybook stories.
  • Unit tests cover CAP classes, prop forwarding and the accessible name/description chain.

Housekeeping

  • Versions bumped, peerDependencies aligned, CHANGELOG entry added.
  • .playwright-mcp/ added to .gitignore.

🤖 Generated with Claude Code

https://claude.ai/code/session_01ELAyEHAB3ZCu8DRRhrUYMd

@Gnuk Gnuk force-pushed the add-input-text branch 3 times, most recently from e02ff66 to 104e257 Compare July 8, 2026 09:29
@Gnuk Gnuk force-pushed the add-input-text branch from 104e257 to 0d5e5be Compare July 8, 2026 09:32
@Gnuk Gnuk merged commit 15e1d7f into main Jul 8, 2026
3 checks passed
@Gnuk Gnuk deleted the add-input-text branch July 8, 2026 09:38
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