CSS Library - Utilities - add medium-screen to utilities.css output

[micahchiang]

Description

vets-website has a medium-screen breakpoint with a value of 768px which is used extensively throughout the repo. Our utilities stylesheet has breakpoints which are, for the most part, direct swaps in terms of pixel values. USWDS doesn't have a medium-screen breakpoint, the closest one being tablet which has a value of 640px. We added this earlier in the year and decided to keep the old 768px breakpoint as well.

Because of its broad use, we need to add all responsive utility class names for medium-screen: to our utilities.css output. We get these for all other breakpoints for free from uswds, and the output looks like this:

 .mobile\:vads-u-border--0 {
    border-: 0;
  }
  .mobile\:vads-u-border-top--0 {
    border-top: 0;
  }
  .mobile\:vads-u-border-right--0 {
    border-right: 0;
  }
  .mobile\:vads-u-border-bottom--0 {
    border-bottom: 0;
  }

Considerations

slack convo with more context

One approach may be to adapt what Formation does by looping through a breakpoint map:

@each $bp_name, $bp_value in $breakpoints {
  @media (min-width: $bp_value) {
    @each $name, $size in $font-sizes {
      .#{$bp_name}\:vads-u-font-size--#{$name} {
        font-size: $size !important;
      }
    }
  }
}

But instead of breakpoints, the map is comprised of key-value pairs for all utilities that require the medium-screen breakpoint, since that is the constant in this situation.

Another approach could be to figure out how to modify the uswds system-properties tokens in our own stylesheet. This may save us a bunch of manual work, since then we'd theoretically be able to just add "medium-screen": true to our theme-utility-breakpoints map

This is the list of all utilities the require the medium-screen breakpoint:

• border.scss
• display.scss
• flexbox.scss - multiple instances for each flex property
• font-size.scss - not sure we need this after our typography migration
• height-width.scss - multiple instances height, width, and min/max properties
• line-height.scss - not sure we need this after our typography migration
• margins.scss
• measure.scss
• padding.scss
• position.scss
• text-align.scss
• visibility.scss

Note: the above links also indicate what utilities for each property are needed. For example, the padding utility loop includes all of the class names appended to the responsive prefix: vads-u-padding--, vads-u-padding-x--, vads-u-padding-y--, etc. Our css library utilities generate these using uswds utility helpers.

Tasks

• [ ] Determine the best way forward for adding medium-screen to the list of responsive breakpoints that generates utility classes that are prefixed with medium-screen\:
• [ ] Verify that css-library/dist/utilities.css is build with all medium-screen\: utilities based on the decided upon solution

Acceptance Criteria

• [ ] above tasks have been completed

[caw310]

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

[jamigibbs]

I have a PR open with the USWDS core team to add a theme setting for including custom breakpoints to the utilities generator:

• https://github.com/uswds/uswds/pull/5985