refactor: create standardized form element components#371
Open
allison-truhlar wants to merge 38 commits into
Open
refactor: create standardized form element components#371allison-truhlar wants to merge 38 commits into
allison-truhlar wants to merge 38 commits into
Conversation
Extract and enhance file name validation into a reusable utility and hook, adding percent sign validation.
Replaces cloneElement-based prop injection in FgFormField with a React context. Fixes inputs losing aria-describedby/aria-invalid/error styling when wrapped in a layout element (e.g. ConvertFile's flex row). Also adds aria-live="polite" on the error region.
Makes id optional everywhere with a useId() fallback and switches FgCheckbox to the sibling-label-with-htmlFor pattern used by FgRadio and FgSwitch. Tightens FgSwitch's prop type to match what's actually forwarded (drops the unsafe ComponentPropsWithoutRef<'div'> extension and restProps filter). Extracts a shared focus-ring constant.
Adds a shared validateFilePath utility (allows slashes, rejects empty or consecutive dots) and adopts it in useConvertFileDialog in place of inline regex. useFileNameValidation now returns isValid:true for empty input so callers can own the "required" UX separately from character-content validation.
Replaces the raw execute checkboxes (x_3 / x_6 / x_9) with FgCheckbox carrying labels like "Owner can execute", and removes the misleading aria-label="s_6" / "t_9" on the setgid and sticky-bit inputs so their wrapping <label> text becomes the accessible name. Updates the component test to query by the new labels.
allison-truhlar
force-pushed
the
refactor-design-system-batch-b-form-inputs
branch
from
1ec011f to
ce1bc78
Compare
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
1 participant
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.
Clickup id: 86ahb3ngw
This PR creates standardized form components as part of the design system initiated in PR #369 - FgCheckbox, FgInput, FgRadio, FgSelect, FgSwitch, FgTextarea. This PR also adds several larger components related to forms - FgFieldSet for grouped options and FgFormField for a standardized way of adding a label, text indicating whether a form element is optional, helper text, and error messages to a form a element. The UI is refactored to replace ad hoc instances of these elements with the standardized components.