We need to import border utilities from css-library. This is broadly a two step process:
Update breakpoint names for the border classes to USWDS v3 equivalents
Comment out the border import in formation/core.scss, manually publish a new formation release, and then update the version of Formation in vets-website.
Current VADS Name
USWDS v3 Name
xsmall-screen (320px)
mobile (320px)
small-screen (480px)
mobile-lg (480px)
small-desktop-screen (1008px)
desktop (1024px)
large-screen (1200px)
desktop-lg (1200px)
Considerations
We won't need to touch the medium-screen breakpoint since we're keeping that in and have manually added it to our utilities.css file.
Likewise, tablet is identical across both stylesheets and doesn't need to be changed, so it isn't included in the table above.
There's a 16px difference between small-desktop-screen and its replacement, desktop, but this shouldn't matter.
Global search shows 1 instance of xsmall-screen:vads-u-border-... and 3 instances of small-screen:vads-u-border-.... None for larger breakpoints.
Above changes may be able to fit in one PR since it's only 4 updates total.
Tasks
[ ] Search and replace instances of <vads-responsive-prefix>:vads-u-border- with corresponding uswds v3 name in the table above. Example: xsmall-screen:vads-u-border-bottom--0 becomes mobile:vads-u-border-bottom--0
[ ] run vets-website locally to verify that breakpoints are being applied from css-library utilities.css
[ ] specifically run the proxy-rewrite application and test the injected header and footer
Description
We need to import border utilities from css-library. This is broadly a two step process:
Considerations
medium-screen
breakpoint since we're keeping that in and have manually added it to our utilities.css file.tablet
is identical across both stylesheets and doesn't need to be changed, so it isn't included in the table above.small-desktop-screen
and its replacement,desktop
, but this shouldn't matter.xsmall-screen:vads-u-border-...
and 3 instances ofsmall-screen:vads-u-border-...
. None for larger breakpoints.Tasks
<vads-responsive-prefix>:vads-u-border-
with corresponding uswds v3 name in the table above. Example:xsmall-screen:vads-u-border-bottom--0
becomesmobile:vads-u-border-bottom--0
utilities.css
Acceptance Criteria