checkbox text overflow

[Mottie]

Bug Report

• [x] I’ve searched for any related issues and avoided creating a duplicate issue.

What happened

While testing long checkbox labels, the text does not wrap and overflows off the screen. This also happens for the description, error and hint text (see screenshot)

What I expected to happen

Long text to wrap

Possible fix:

.usa-legend,
.usa-hint,
#checkbox-error-message,
.usa-checkbox__label {
  overflow-wrap: break-word;
}

.usa-hint,
#checkbox-error-message {
  max-width: 480px;
  display: block; /* or change these spans into divs */
}

Result

Reproducing

• Formation version: All
• Device: (e.g. iPhone 8, Macbook) All
• Browser: (e.g. Firefox, IE 11) All

Steps to reproduce:

1. Go to checkbox storybook
2. Enter long label text
3. Enter long error message
4. Enter long description text
5. Enter long hint text

Urgency

How urgent is this request? Please select the appropriate option below and/or provide details

• [ ] This bug is blocking work currently in progress
• [x] This bug is affecting work currently in progress but we have a workaround
• [ ] This bug is blocking work planned within the next few sprints
• [ ] This bug is not blocking any work
• [ ] Other

Details

Only able to fix the checkbox label using ::part(label), but we don't have an excessively long description, hint or error message, so this isn't urgent.

[caw310]

Hey team! Please add your planning poker estimate with Zenhub @Andrew565 @ataker @harshil1793 @it-harrison @jamigibbs @micahchiang @nickjg231 @powellkerry @rmessina1010 @rsmithadhoc

[jamigibbs]

This might be something we can bring upstream to USWDS because the .usa- styles are coming from their modules:

@use 'usa-checkbox/src/styles/usa-checkbox';
@use 'usa-legend/src/styles/usa-legend';
@use 'usa-label/src/styles/usa-label';
@use 'usa-hint/src/styles/usa-hint';
@use 'usa-error-message/src/styles/usa-error-message';