Summary

Fixed a bug that prevented $theme-site-margins-width from accepting expected token values.

Breaking change

This is not a breaking change.

Related issue

Closes #5559

Related pull requests

Changelog PR

Preview link

Alert component

Problem statement

When setting custom values for $theme-site-margins-width, some values that the system says are acceptable cause an error.

For example,$theme-site-margins-width: 6 results in the following error:

SassError: "`12` is not a valid `padding` token. You should correct this. Standard `padding` tokens:  1px, 2px, 05, 1, 105, 2, 205, 3, 4, 5, 6, 7, 8, 9, 10, 15, 0"

19 │     padding-left: get-uswds-value("padding", $value...) #{$important};
    

This happens because the u-padding mixins accept only known padding units. The current calculations perform multiplication on the setting value before running it through the mixin, which means that the mixins are not always receiving acceptable unit values. For example, when $theme-site-margins-width is defined with 6, the mixin receives the value of 12, which is not a mapped unit value.

Solution

1. Defining the padding with the CSS padding property rather than the u-padding mixin allows the system to successfully do the required calculations.
2. Wrapping calculations inside calc() enables the math to work when there are mixed units (For example, when $theme-site-margins-width is set to 1px).

Warning
This PR uncovered that the alert component has some alignment issues when the value for $theme-site-margins-width is adjusted. It can cause text to overlap or become misaligned with the other components. I have opened issue #5583 to address this.

Testing and review

To test the alignment with default value for $theme-site-margins-width:
Open the alert component and confirm no visual regressions in alignment.

To test custom values for $theme-site-margins-width:

1. Check out this branch in a local build
2. Customize the value of $theme-site-margins-width to any of the following values: 1px, 2px, 05, 1, 105, 2, 205, 3, 4, 5, 6, 7, 8, 9, 10, 15, 0.
3. Confirm that the Sass compiles without error
4. Confirm the visual presentation adjusts as expected.
   • ⚠️ Note that the alert component will not adjust as expected. See the warning above for more details.