USWDS-Site - Card: Fix card grid presentation

[amyleadem]

Summary

• Switched out the grid classes in the card preview template. This improves the appearance of the card component preview at narrow widths.
• Added grid styles specifically suited for the card component preview.
• Added a changelog entry for card grid fix.

Related issue

Related to #2323

Preview link

• Card component preview
• Card changelog

Problem statement

The card component preview page shows cards that get too narrow and elements within the cards overlap at narrow browser widths.

Solution

Adjusting the grid breakpoints in the card template improves the display of the component at narrow widths.

This fix currently provides specific grid classes for only for the scenarios needed. Alternatively, we could turn on the "widescreen" and "tablet-lg" values in $theme-utility-breakpoints. However, this felt heavy-handed for this specific need (See more info in this comment).

Testing and review

• Confirm the card component preview presents well at various breakpoints and has the correct grid breakpoints.
• Confirm that the approach for updating the styles makes sense.
• Confirm the changelog is accurate and free from spelling and grammatical errors.

[mahoneycm]

Ran into an issue trying to get my local to build. Also just left a question about the approach and the alternative you mentioned in the description.

[mejiaj]

Added a possible alternative to adding more to custom SCSS.

[amyleadem]

@mejiaj @mahoneycm
I have updated the grid classes in this repo and removed the USWDS test branch. I think we can now safely remove this item from the 3.7.0 release.

I added a note about why I didn't turn on the breakpoint via settings in this comment. Let me know if you see a better way to do this.

[mahoneycm]

Hey Amy!

I found a way to achieve the same styles using the string replacement without the need for any scss changes. This route resolves the build errors and isolates the changes.

Let me know what you think about this approach!

[amyleadem]

The comment history here has gotten a bit jumbled, but I wanted to summarize the recent changes in this PR:

• I kept the tablet-lg:grid-col-6 widescreen:grid-col-4 classes on card--standard. These grid breakpoints are not included in our breakpoint list, which means that we need copy over a couple of grid style rules from USWDS. However, I felt that these were the ideal breakpoints for the standard cards, and since it is a commonly-used component, I wanted to showcase them in their best light.
  • Alternatively, we could use tablet:grid-col-6 desktop-lg:grid-col-4, which are already accounted for in the CSS. No additional CSS rules would be required if we chose these classes instead, but the cards do end up getting a bit narrow at various widths.
  • Alternatively, we could also pursue custom site-specific class names here instead of copying over USWDS rules, but I went with the standard USWDS grid classes so that users would be able to use the code if they copied it from web inspector.
  • We could also turn these breakpoints in the $theme-utility-breakpoints setting, but this would add a couple thousand more references and 100kb+ to the compiled CSS.
• These grid classes do not meet BEM standards, so I had to exclude them from stylelint checks by using stylelint-disable comments.
• I changed the card--flag classes to flex-1 as @mahoneycm suggested. This allowed for the desired presentation without needing to add an additional rule definition for .widescreen\:grid-col-6.

[amyleadem]

@mejiaj @mahoneycm ready for your re-review. Let me know if you have comments.

[mahoneycm]

Lgtm!

As long as we're ok with maintaining the CSS overrides, I think that this is a visual improvement to showcase cards 👍

• Cards break at logical breakpoints
• Cards do not feel two thing at any point
• No errors when running npm run build:css

[mejiaj]

LGTM, glad we were able to agree on a fix. Good to merge once builds pass.