feat(styles,react): add input text, label, helper text and field#14
Merged
Conversation
e02ff66 to
104e257
Compare
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01ELAyEHAB3ZCu8DRRhrUYMd Claude-Session: https://claude.ai/code/session_01CNSEqEg9hFvCrTBXsPRmJJ
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.
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 (
styles0.0.8)input-textatom: native text field carrying the visual container (border, 4px radius, background), full width by default, focus anddisabledstates,-error(setsaria-invalid="true") and-successalternatives. Colors and proportions matched against the Figma design.labelatom: names a form control throughfor/id.helper-textatom: contextual help or feedback message linked througharia-describedby, with-error/-successalternatives.fieldmolecule: pure vertical composition (label, any form control, helper text); the caller wiresfor/id,aria-describedbyand the variant. Ready to host textarea/select later.button.mdstructure (Alternatives/States/Accessibility) and render zones are spaced with the render-wrapper pattern used by buttons.React (
react0.0.7)IpponInputTextforwarding nativeinputprops, derivingaria-invalidfrom theerrorvariant (overridable).IpponLabel,IpponHelperText,IpponField— behavior-free, wiring shown in Storybook stories.Housekeeping
peerDependenciesaligned, CHANGELOG entry added..playwright-mcp/added to.gitignore.🤖 Generated with Claude Code
https://claude.ai/code/session_01ELAyEHAB3ZCu8DRRhrUYMd