We need to import height-width utilities from css-library into vets-website and content-build. This is broadly a two step process:
Update breakpoint names for the height-width classes to USWDS v3 equivalents in vets-website and content-build
Comment out the height-width 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.
There are multiple height and width utilities that currently get generated: height, max-height, min-height, width, max-width, min-width.
Global search in vets-website shows:
3 instance of xsmall-screen:vads-u-max-width-...
6 instances of small-screen:vads-u-width-...
1 instance of small-desktop-screen:vads-u-max-width-...
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-property>- 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
[ ] In formation, comment out the height-width import in formation/core.scss
[ ] Bump the version number for Formation and manually publish to NPM
Description
We need to import height-width 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.xsmall-screen:vads-u-max-width-...
small-screen:vads-u-width-...
small-desktop-screen:vads-u-max-width-...
Tasks
<vads-responsive-prefix>:vads-u-<utility-property>-
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