trussworks / react-uswds

USWDS 3.0 components built in React
https://trussworks.github.io/react-uswds/
Apache License 2.0
170 stars 78 forks source link

[feat] Create required asterisk component #2523

Closed werdnanoslen closed 8 months ago

werdnanoslen commented 11 months ago

Does your feature request relate to a specific USWDS component?

All form components

What USWDS Version is this feature present in?

3.5.0 via https://github.com/uswds/uswds-site/pull/1834

Is your feature request related to a problem? Please describe.

New guidance from USWDS on showing required fields: https://designsystem.digital.gov/templates/form-templates/#identifying-required-fields-2

Describe the solution you'd like

  1. Create an asterisk component that uses USWDS' <abbr>-based element
  2. Import the component into the Label component and give it a boolean prop to toggle its inclusion

Describe alternatives you've considered

  1. Simply copy-paste your own required asterisk code into every Label (still possible)
  2. Create just the component and manually add the component to the Label's instance (also still possible)

Additional context

When using this, it's still important to put a message at the top of a form that explains what this asterisk is (e.g. "Required fields are marked with an asterisk (*)") and to use the standard required prop

brandonlenz commented 11 months ago

This might need to be able to be applied to a fieldset legends as well

brandonlenz commented 9 months ago

Added needs requirements label, as we need to outline exactly which components need this change. Could be a small code change to several files., but those should be identified for easy OSS contribution