Description
The red border added to usa-form-group--error divs has a negative margin of -2.5 units. This is equal to the border size + its padding so it causes the margin to be pushed off screen unless the user has added additional padding to its parent element.
This error border helps to signify the form's error state and should be maintained in desktop views.
Steps to reproduce the issue
- Visit form error state storybook preview
- Resize the window from horizontally
- In smaller views, the error border will be visible
- In wider views, the error border will be pushed out of view.
Additional information
Related code
|
// Block input elements |
|
.usa-form-group--error { |
|
@include u-border-left(0.5, "error-dark"); |
|
margin-top: units(4); |
|
padding-left: units(2); |
|
position: relative; |
|
|
|
@include at-media("desktop") { |
|
margin-left: units(-2.5); |
|
} |
|
} |
Description
The red border added to
usa-form-group--errordivs has a negative margin of-2.5units. This is equal to the border size + its padding so it causes the margin to be pushed off screen unless the user has added additional padding to its parent element.This error border helps to signify the form's error state and should be maintained in desktop views.
Steps to reproduce the issue
Additional information
Related code
uswds/src/patterns/components/usa-form-group/_usa-form-group.scss
Lines 1 to 11 in df175b5