Skip to content

[WNMGDS-3350] Remove form components table #3566

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
May 8, 2025
Merged

[WNMGDS-3350] Remove form components table #3566

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
cd7b320
remove form attributes added to ComponentThemeOptions and render noti…
jack-ryan-nava-pbc May 6, 2025
5f0bd0c
Editing missing variable text
jack-ryan-nava-pbc May 6, 2025
eea7005
Merge branch 'main' into jryan/wnmgds-3350-form-components-table
jack-ryan-nava-pbc May 7, 2025
daf39e1
Add console.warn and return early
jack-ryan-nava-pbc May 7, 2025
52f8157
Merge branch 'main' into jryan/wnmgds-3350-form-components-table
jack-ryan-nava-pbc May 7, 2025
b49ea35
Make sure we're not on prod
jack-ryan-nava-pbc May 8, 2025
2f1b936
Remove unecessary null check
jack-ryan-nava-pbc May 8, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 6 additions & 9 deletions packages/docs/content/components/checkbox.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,23 +49,20 @@ Checkboxes can have optional checked or unchecked children that are conditionall
### Web Component

<StorybookDocLinks tech="wc">
<StorybookDocLink tech="wc" storyId="web-components-ds-choice--docs">Choice</StorybookDocLink>
<StorybookDocLink tech="wc" storyId="web-components-ds-choice-list--docs">Choice List</StorybookDocLink>
<StorybookDocLink tech="wc" storyId="web-components-ds-choice--docs">
Choice
</StorybookDocLink>
<StorybookDocLink tech="wc" storyId="web-components-ds-choice-list--docs">
Choice List
</StorybookDocLink>
</StorybookDocLinks>


### Style customization

The following CSS variables can be overridden to customize choice fields:

<ComponentThemeOptions componentname="choice" />

#### Form components

This component also makes use of form field styles, which can be customized by the following variables:

<ComponentThemeOptions componentname="form" />

## Guidance

### When to use
Expand Down
6 changes: 0 additions & 6 deletions packages/docs/content/components/date-field/date-picker.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,12 +35,6 @@ The following CSS variables can be overridden to customize Input/Form components

<ComponentThemeOptions componentname="text-input" />

#### Form components

This component also makes use of form field styles, which can be customized by the following variables:

<ComponentThemeOptions componentname="form" />

## Guidance

### When to use
Expand Down
6 changes: 0 additions & 6 deletions packages/docs/content/components/date-field/multi-input-date-field.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,12 +34,6 @@ The following CSS variables can be overridden to customize Input/Form components

<ComponentThemeOptions componentname="text-input" />

#### Form components

This component also makes use of form field styles, which can be customized by the following variables:

<ComponentThemeOptions componentname="form" />

## Guidance

### When to use
Expand Down
6 changes: 0 additions & 6 deletions packages/docs/content/components/date-field/single-input-date-field.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,12 +38,6 @@ The following CSS variables can be overridden to customize Input/Form components

<ComponentThemeOptions componentname="text-input" />

#### Form components

This component also makes use of form field styles, which can be customized by the following variables:

<ComponentThemeOptions componentname="form" />

## Guidance

### When to use
Expand Down
6 changes: 0 additions & 6 deletions packages/docs/content/components/hint.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,12 +26,6 @@ core:

<SeeStorybookForGuidance tech="wc" storyId={'web-components-hint--docs'} />

### Style customization

The following CSS variables can be overridden to customize Form components:

<ComponentThemeOptions componentname="form" />

## Guidance

- Hints are built in to all design-system form fields but can be used on their own to create custom fields.
Expand Down
6 changes: 0 additions & 6 deletions packages/docs/content/components/inline-error.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,12 +26,6 @@ core:

<SeeStorybookForGuidance tech="wc" storyId={'web-components-inlineerror--docs'} />

### Style customization

The following CSS variables can be overridden to customize Form components:

<ComponentThemeOptions componentname="form" />

## Guidance

- Inline errors are built in to all design-system form fields but can be used on their own to create custom fields.
Expand Down
7 changes: 1 addition & 6 deletions packages/docs/content/components/label.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,11 +26,6 @@ core:

<SeeStorybookForGuidance tech="wc" storyId={'web-components-label--docs'} />

### Style customization

The following CSS variables can be overridden to customize Form components:

<ComponentThemeOptions componentname="form" />

## Guidance

Expand All @@ -57,7 +52,7 @@ The following CSS variables can be overridden to customize Form components:
- Form fields can use traditional labels for many items. (Examples: "First name," "Last name," "Address," etc.) Traditional labels don’t need punctuation.
- Form labels and decision helpers can use completes sentences (imperatives or questions) for user understanding or conversational feel. (Examples: "Tell us why you need a faster decision." "Select a reason for your request." "Do you want to see costs when you compare X?" "Do you have another mailing address?") Include punctuation.
- For imperative labels, start with an action verb and pair it with a noun to help it be clearer. Example: "Enter your age."
- Use the fewest words possible. Don't use "please" or add unnecessary explanation/context in your label. Instead, use hint text or hint text with a help drawer link to provide information the user must have to correctly enter their answer.
- Use the fewest words possible. Don't use "please" or add unnecessary explanation/context in your label. Instead, use hint text or hint text with a help drawer link to provide information the user must have to correctly enter their answer.

### Accessibility testing

Expand Down
8 changes: 1 addition & 7 deletions packages/docs/content/components/month-picker.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ The Month Picker component renders a grid of checkboxes with shortened month nam
### Accessibility

#### Accessibility
- Be mindful of color contrast ratios between the checkbox and its background color. For instance, a dark green or blue behind the component will most likely cause problems for users. When using a dark background, consider using the `inversed` prop. [Read our guidance on color for more information.](../../foundation/system-color-tokens/#accessibility-considerations)
- Be mindful of color contrast ratios between the checkbox and its background color. For instance, a dark green or blue behind the component will most likely cause problems for users. When using a dark background, consider using the `inversed` prop. [Read our guidance on color for more information.](../../foundation/system-color-tokens/#accessibility-considerations)

### Accessibility testing

Expand Down Expand Up @@ -68,12 +68,6 @@ The following CSS variables can be overridden to customize MonthPicker fields:

<ComponentThemeOptions componentname="choice" />

### Form components

This component also makes use of form field styles, which can be customized by the following variables:

<ComponentThemeOptions componentname="form" />

## Component maturity

<MaturityChecklist
Expand Down
6 changes: 0 additions & 6 deletions packages/docs/content/components/radio.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,12 +52,6 @@ The following CSS variables can be overridden to customize choice fields:

<ComponentThemeOptions componentname="choice" />

#### Form components

This component also makes use of form field styles, which can be customized by the following variables:

<ComponentThemeOptions componentname="form" />

## Guidance

### When to use
Expand Down
6 changes: 0 additions & 6 deletions packages/docs/content/components/text-field/masked-field.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,12 +33,6 @@ The following CSS variables can be overridden to customize Input/Form components

<ComponentThemeOptions componentname="text-input" />

#### Form components

This component uses a text field and its styles, which can be customized by the following variables:

<ComponentThemeOptions componentname="form" />

## Accessibility
Please note that USWDS and others recognize some [accessibility issues](https://designsystem.digital.gov/components/input-mask/#known-issues) with masked input fields:
- It can be difficult to recover from errors without good form validation and feedback to users, particularly if special characters are disallowed and ignored, or replaced. [USWDS](https://github.com/uswds/uswds/issues/5481)
Expand Down
9 changes: 3 additions & 6 deletions packages/docs/content/components/text-field/text-field.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,11 +34,13 @@ medicare:
## Guidance

### When to use

- If you can’t reasonably predict a user’s answer to a prompt and there might be wide variability in users’ answers.
- When using another type of input will make answering more difficult. For example, birthdays and other known dates are easier to type in than they are to select from a calendar picker.
- When users want to paste in a response.

### Guidelines

- Don't use placeholder text in form fields. Use hint text instead, if you need to provide contextual information. Placeholder text disappears after a user types a value, therefore users will no longer have that text available when they need to review their entries. People who have cognitive or visual disabilities have additional problems with placeholder text.
- The length of the text field provides a hint to users as to how much text to write. Do not require users to write paragraphs of text into a single-line input box; use a `<textarea>` instead.
- Text fields are among the easiest type of input for desktop users but are more difficult for mobile users.
Expand All @@ -55,6 +57,7 @@ medicare:
## Accessibility

### Accessibility guidance

- Group each set of thematically related controls in a `fieldset` element. Use the `legend` element to offer a label within each `fieldset`. The `fieldset` and `legend` elements make it easier for screen reader users to navigate the form.
- Keep your form blocks in a vertical pattern. This approach is ideal, from an accessibility standpoint, because of limited vision that makes it hard to scan from left to right.

Expand All @@ -76,12 +79,6 @@ The following CSS variables can be overridden to customize Input/Form components

<ComponentThemeOptions componentname="text-input" />

### Form components

This component also makes use of form field styles, which can be customized by the following variables:

<ComponentThemeOptions componentname="form" />

## Related patterns

- [Masked field](/components/text-field/masked-field/)
Expand Down
6 changes: 5 additions & 1 deletion packages/docs/src/components/content/ComponentThemeOptions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,11 @@ const ComponentThemeOptions = ({ theme, componentname }: ComponentThemeOptionsPr
);

return (
<section className="c-configuration-options ds-u-padding-bottom--3">{componentOptions}</section>
<section className="c-configuration-options ds-u-padding-bottom--3">
{componentVariables.length > 0
? componentOptions
: `No variables available for component: "${componentname}".`}
</section>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This logic makes sense to me, although I'm not sure how much value the fallback message adds for the end user. Would it make more sense to return null early if componentVariables.length === 0 to avoid rendering anything at all?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I was between that option and the above code. I think my intent here is to signal something to us devs that this isn't working as expected, and that's because the ComponentThemeOption component is often rendered below another heading that provides context, and if this is the only thing there, then it makes sense to alert the devs and have them remove the whole section.

But maybe I'm over thinking it and should make it simpler?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I hear you—that makes sense. I don’t have strong feelings about this, so feel free to disregard, but I wonder if there’s a way to split the difference? Maybe return early if it's empty, but issue a console.warn in development?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok, yeah that is the pattern we use for downstream packages. I guess it doesn't make sense to do it a different way for ourselves, but I'm just trying to make sure we don't miss anything, and burying it in the console feels like a way to miss it... I'll go with your suggestion for consistency and maybe I'm over thinking it. Thanks @tamara-corbalt !

);
};

Expand Down