USWDS - Card: Fix $theme-card-padding-y calculations #5571
Merged
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Fixed a bug that prevented
$theme-card-padding-y
from accepting expected token values.Breaking change
This is not a breaking change.
Related issue
Closes #5515
Related pull requests
Changelog PR
Preview link
Card component
Problem statement
When setting custom values for
$theme-card-padding-y
, some values that the system says are acceptable cause an error.For example:
$theme-card-padding-y: 15
results in the following error:This problem occurs because the
u-padding
mixins accept only known unit tokens. The current calculations perform division 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-card-padding-y
is defined with 15, the mixin receives the value of 7.5, which is not a mapped unit value.Solution
When the padding value must be divided, we should not use
u-padding
mixins and instead directly define the CSS padding property.Testing and review
$theme-card-padding-y
setting accepts all listed padding token values without error: 1px, 2px, 05, 1, 105, 2, 205, 3, 4, 5, 6, 7, 8, 9, 10, 15, 0.$theme-card-padding-y
are not used in mixins.