Improve utility settings #4631
Improve utility settings #4631
Conversation
$output-these-utilities is a list of utility keys. "default" includes all utilities. If a list of keys is passed, the utility builder will build only those utilities. Utility keys are the names of individual maps stored as variables in uswds-utilities/src/styles/rules
| { | ||
| $val-value: false; | ||
| // Check to see if the utility is in the output uselist | ||
| @if ($output-these-utilities == "default") or list.index($output-these-utilities, $utility-name) { |
There was a problem hiding this comment.
Only cycle through utilities on the uselist
| .usa-identifier__required-link, | ||
| .usa-identifier__required-link.usa-link { |
There was a problem hiding this comment.
Prevent usa-link from overriding Identifier styles, regardless of where the usa-link styles fall in the cascade
| $theme-input-tile-border-color: "base-lighter" !default; | ||
| $theme-input-tile-border-color-selected: "primary-lighter" !default; | ||
| // Deprecated in 3.0.0 | ||
| $output-all-utilities: true; |
There was a problem hiding this comment.
Deprecate $output-all-utilities setting and remove 2.x deprecated settings
| + "\A" | ||
| + "\A Disable notifications using `$theme-show-notifications: false`" | ||
| + "\A in your general settings file." | ||
| + "\A Disable notifications using `$theme-show-notifications: false`." |
There was a problem hiding this comment.
Remove reference to multiple settings files
|
|
||
| $add-list-reset: ( | ||
| list-reset: ( | ||
| add-list-reset: ( |
There was a problem hiding this comment.
Use proper name for this utility object key
| // Generate font rules if the `font` utility is on the uselist | ||
| // and its output is set to true | ||
| @if (($output-these-utilities == "default" or list.index($output-these-utilities, "font")) and map.get($font-settings, "output") == true) { | ||
| @each $face, $stack in $project-font-stacks { | ||
| @if $stack { | ||
| [class*="#{ns('utility')}font-#{$face}-"] { | ||
| font-family: #{$stack}#{$if-important}; | ||
| } |
There was a problem hiding this comment.
Only output these font rules if the font utility is on the uselist
| // Only do this if the the utility is meant to output | ||
| @if not($media-key) or | ||
| ($media-key and map-deep-get($utility, settings, responsive)) | ||
| { | ||
| @if map-deep-get($utility, settings, output) { |
There was a problem hiding this comment.
Alllll these other changes are just adding a tab indent...
| } // end the value loop | ||
| } // end the output conditional | ||
| } | ||
| } // end the uselist conditional |
There was a problem hiding this comment.
....and the tab indent section finally ends
|
|
||
| $utilities-use-important: false; | ||
| $output-all-utilities: true; | ||
| $output-these-utilities: default !default; |
There was a problem hiding this comment.
Whoops, this has a default flag!
mejiaj
left a comment
mejiaj
left a comment
There was a problem hiding this comment.
Question on notification, otherwise LGTM.
Pretty nice! I was able to successfully create a list of utility overrides and disable a utility breakpoint and only output those new utilities.
Co-authored-by: James Mejia <james.mejia@gsa.gov>
Removes
$output-all-utilitiessetting and replaces it with$output-these-utilities.$output-all-utilitiesis an unusual setting — it overrides any utility-specific settings to output all utilities.$output-these-utilitiesallows users to to create a uselist of all utility modules they want to include in the project.Previously, to disable any utility, a developer would have to change the value of its settings object. Since all utilities are output by default, disabling the status of multiple utility modules requires adding multiple settings objects, a dreary and tedious affair that looks something like this:
With
$output-these-utilities, the default isdefault— which means "all utilities". To include only specific utilities, devs can pass a uselist of all the desired utilities:Also