We need to import visibility utilities from css-library into vets-website and content-build. This is broadly a two step process:
Update breakpoint names for the visibility classes to USWDS v3 equivalents in vets-website and content-build
Comment out the visibility 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 in vets-website shows: nothing
Global search in content-build shows: nothing
Above changes may need to be split into a couple of PRs to accommodate vets-website CI.
Tasks
[ ] Search and replace instances of <vads-responsive-prefix>:vads-u-<utility>- 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 visibility utilities from css-library into vets-website and content-build. 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.Tasks
<vads-responsive-prefix>:vads-u-<utility>-
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