feat(tabs): support contextual layout tokens (size & density)#13951
Conversation
✅ Deploy Preview for carbon-components-react ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify site configuration. |
✅ Deploy Preview for carbon-elements ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
|
@aagonzales I want to tag you here as well as there are some differences percy reported. It looks like the labels in line tabs are not 100% centered in main right now due to a difference in padding: Would love it if you could have a look at the implementation of this PR and see whether this achieves the desired visuals. |
|
The Percey screenshots aren't showing but when I manually compare it to the spec this PR still seems slightly off (1px maybe). The foreground is a Figma asset, the background is a code asset. (I could live with it though) 
I also think the 8px top and bottom isn't true. Not sure where that number came from looking at the assets. They should just be vertically centered. |
|
@aagonzales I pushed an update positioning the label 1px lower. Checking with the latest Figma library I see an exact overlay now. Let me know if this works! |
|
@janhassel yup that's it! Matches up perfectly now. 👍 |
tw15egan
left a comment
There was a problem hiding this comment.
Sorry, missed this review! LGTM once merge conflict is resolved 👍🏻 ✅
|
@tw15egan I just resolved the merge conflict. I think the percy approval is the last failing check now. |
Ref #13923
Adds support for contextual layout tokens to
Tabs.Changelog
Changed
sizeanddensitygroupsTesting / Reviewing
Locally run storybook
layout.sizewith sm, md, lg (default: md)layout.densitylayout.sizewith sm, md, lg (default: md)layout.sizewith sm, md, lg, xl (default: lg)layout.densitylayout.densitylayout.sizewith lg, xl (default: xl)layout.density<Tab iconSize="lg">lg