Skip to content

Conversation

mahoneycm
Copy link
Contributor

@mahoneycm mahoneycm commented Sep 18, 2024

Summary

Added $theme-utility-breakpoints-custom setting to the utility settings table.

Name var default type description
Custom breakpoints $theme-utility-breakpoints-custom map Set additional custom mobile-first breakpoints to be output as utilities alongside the enabled system breakpoints. Values must be passed in a scss map as px.

Related PR

Documentation for uswds/uswds#6048

Preview link

Settings page →

Major changes

  • Added the new theme setting to the utility settings table.

Testing and review

  1. Visit settings page
  2. Read new setting description
  3. Confirm description has appropriate name, var, default, type, and description values
  4. Confirm placement for the new setting is appropriate

@amyleadem
Copy link
Contributor

@mahoneycm Should the base branch on this bb be release-3.9.0?

@mahoneycm mahoneycm changed the base branch from main to release-3.9.0 September 18, 2024 17:38
@@ -2,6 +2,14 @@ title: Settings
type: utility
changelogURL:
items:
- date: NNNN-NN-NN
summary: Added new `$theme-utility-breakpoints-custom` setting.
summaryAdditional: Users can now set custom breakpoints which will generate utilities alongside the default system breakpoints.
Copy link
Contributor

@amyleadem amyleadem Sep 30, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion: Some minor tweaks to improve readability

Suggested change
summaryAdditional: Users can now set custom breakpoints which will generate utilities alongside the default system breakpoints.
summaryAdditional: This setting generates responsive variants of USWDS utilities at custom breakpoints.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@amyleadem I'd argue that the original is a little clearer. First, it mentions that this is a new setting and second it tells you that new utils can be generated from it.

@amyleadem
Copy link
Contributor

suggestion:
I am thinking that we should add some additional notes about this setting to responsive-variants.html.

  1. Suggesting we update the section to include a sentence like this:
    "Additionally, you can add custom breakpoints to your project by configuring the $theme-utility-breakpoints-custom setting. Learn more about the breakpoint settings on the Settings page."

    Before:
    image

    After:
    image

  2. Additionally, it might be a good opportunity to add a yellow site note here that warns users that each breakpoint that is turned on makes a sizeable impact to the compiled CSS. (right now, adding a new breakpoint adds about 50kb to the total file size). Here is a possible draft note (this will probably need to be cleaned up):

    "Note: Turn on only the breakpoints you need in your project. Each enabled breakpoint will increase the size of your compiled CSS by a significant amount. To improve performance on your site, turn off any unused breakpoints."

Co-authored-by: Amy Leadem <93996430+amyleadem@users.noreply.github.com>
Copy link
Contributor

@mejiaj mejiaj left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Changelog looks good and added suggestion for clarity in settings table.

@amyleadem
Copy link
Contributor

amyleadem commented Oct 1, 2024

Update: I'm going to move my suggestions to enhance responsive-variants.html to a separate PR so that it doesn't hold up the release. We can evaluate it independently as a follow-on if needed

Update to the update: I opened #2852 for this proposed addition.

Copy link
Contributor

@amyleadem amyleadem left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Approving this with the acknowledgment that we might follow up with future information in #2852.

@amyleadem amyleadem merged commit 30896bc into release-3.9.0 Oct 4, 2024
0 of 4 checks passed
@thisisdano thisisdano deleted the cm-custom-breakpoint-documentation branch October 4, 2024 22:39
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants