Box: Offset padding by border width to ensure equal footprint regardless of configuration#74001
Draft
jameskoster wants to merge 4 commits intotrunkfrom
Draft
Box: Offset padding by border width to ensure equal footprint regardless of configuration#74001jameskoster wants to merge 4 commits intotrunkfrom
jameskoster wants to merge 4 commits intotrunkfrom
Conversation
jameskoster
added
[Type] Enhancement
Member
I feel like if we're making this change, we should get rid of the |
Member
|
I'm kinda okay with trying this. I feel like it's adding some internal complexity, though in doing so shields external consumers from having to consider the conflicts between border and paddings. From a design system perspective, I think it's reasonable to prioritize that these settings work well together in producing some predictable outcome, over enforcing some specific pixel value for individual styles (e.g. padding could end up being different by 1px). |
aduth
reviewed
Dec 15, 2025
packages/ui/src/box/box.tsx
Outdated
Comment on lines
+62
to
-44
| borderWidth: Exclude< NonNullable< BoxProps[ 'borderWidth' ] >, number > | ||
| ): string => | ||
| typeof value === 'number' |
Member
There was a problem hiding this comment.
This is a good reminder we need to remove this number support exhaustively from paddings, similar to what we did with Stack gaps in #73852.
Contributor
Author
|
I removed the |
Contributor
Author
|
It just occurred to me that we might want to make this behavior optional. I don't think we necessarily need to add that complexity here, but it could be something to keep in mind. |
|
Size Change: -32 B (0%) Total Size: 2.58 MB
ℹ️ View Unchanged
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
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.
What
This PR refactors the
Boxcomponent'sborderWidthprop to only support'xs'and'sm'values (mapping to 1px and 2px respectively), and adjusts padding calculation to account for border width so the total rendered spacing remains consistent.Why
Addresses a fundamental issue we discovered in #73875 where a badge with a border will have a different footprint to a badge without one.
The
'md'and'lg'values map to4pxand8pxwhich I don't think there is any use for currently.How
Padding offset implementation: Modified
getSpacingValueto accept an optionaloffsetValueparameter that subtracts from the base padding value using CSScalc(). The padding calculation now passes the border width value as an offset when both padding and borderWidth are present.To test
npm run storybookpaddingandborderWidthvalues the rendered box will always have the same footprint