fix: Add focus treatment comparison section to input documentation#3593
Draft
fix: Add focus treatment comparison section to input documentation#3593
Conversation
Spark450
force-pushed
the
claude/add-input-components-docs-JXAuH
branch
from
7893a1d to
f255c79
Compare
Adds tabbing comparison section at the bottom of input.mdx with goa-text-area, goa-dropdown, goa-checkbox, goa-radio-group, goa-date-picker, goa-button (all variants), goa-icon-button, goa-link-button, goa-filter-chip, and goa-chip. https://claude.ai/code/session_01NE6uw7FcqDj87sxuwJNCHX
Spark450
force-pushed
the
claude/add-input-components-docs-JXAuH
branch
from
f255c79 to
38a42c1
Compare
✅ Deploy Preview for goa-design-2 ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Adds /focus-test page with all interactive components for tabbing through and comparing focus styles: text-area, dropdown, checkbox, radio-group, date-picker, button (primary/secondary/tertiary), icon-button, link-button, filter-chip, and chip. Reverts the focus comparison content from input.mdx (was rendering in a hidden tab rather than as a visible page). https://claude.ai/code/session_01NE6uw7FcqDj87sxuwJNCHX
Switch from box-shadow focus rings to outline + outline-offset in V2 mode, matching the offset blue ring already used by Button V2 and Checkbox V2. RadioItem and DatePicker already used outline-based focus or inherit from Input. https://claude.ai/code/session_01NE6uw7FcqDj87sxuwJNCHX
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
2 participants
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.
Before (the change)
The input component documentation ended with a description of input states (error, disabled, read-only) without any visual reference for comparing focus styles across different form components.
After (the change)
Added a new "Focus Treatment Comparison" section to the input documentation that includes interactive examples of multiple components (text area, dropdown, checkbox, radio group, date picker, buttons, chips, etc.) to allow developers to tab through and inspect focus styles consistently across the component library.
Make sure that you've checked the boxes below before you submit the PR
Steps needed to test
version="2"attributehttps://claude.ai/code/session_01NE6uw7FcqDj87sxuwJNCHX