-
Notifications
You must be signed in to change notification settings - Fork 1.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat(tab): introduce fixed variant #4431
Conversation
The new variant is enabled with `.bx--tabs--fixed` class. Fixes carbon-design-system#1329.
Deploy preview for the-carbon-components ready! Built with commit e0f760f https://deploy-preview-4431--the-carbon-components.netlify.com |
Deploy preview for carbon-elements ready! Built with commit e0f760f |
Deploy preview for carbon-components-react ready! Built with commit e0f760f https://deploy-preview-4431--carbon-components-react.netlify.com |
Deploy preview for the-carbon-components ready! Built with commit 34851f8 https://deploy-preview-4431--the-carbon-components.netlify.com |
Deploy preview for carbon-elements ready! Built with commit 34851f8 |
Deploy preview for carbon-components-react ready! Built with commit 34851f8 https://deploy-preview-4431--carbon-components-react.netlify.com |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
it looks like the div
inside flexbox container situation also occurs in our vanilla docs (related 621be60)
.component-example__live--rendered > div
is a div
inside of a flexbox so it no longer has width: 100%
by default, and instead it shrinks to fit the content, which looks like this
@@ -5,7 +5,7 @@ | |||
LICENSE file in the root directory of this source tree. | |||
--> | |||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
we may need unique IDs for the examples otherwise the tabs will control the content for all examples
.#{$prefix}--tabs--fixed | ||
.#{$prefix}--tabs__nav-item:hover:not(.#{$prefix}--tabs__nav-item--disabled) { | ||
@include carbon--breakpoint(md) { | ||
background-color: $hover-ui; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I know this is the token the spec has, but for some reason the color it's receiving is #e5e5e5
instead of #cacaca
, so the hover color is lighter and it should be darker. Not sure why the color doesn't match the token though. Is this the right token? @aagonzales
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
good catch, it will need to use a different token. Use$hover-selected-ui
(even though its not "selected" it gets it the correct color) 🤷♀
Just a few things:
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks @aagonzales @emyarod @jnm2377 for reviewing!
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
the vanilla IDs still seem to be shared since the examples are controlling each other, otherwise looks good to me pending design review
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
hmm looks like the state delay is an existing bug. It happens in the default tabs as well @aagonzales @asudoh |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Other than the hover border, LGTM. I would be ok with opening a separate issue/PR for the selected state delay since it's technically a different existing bug/out of scope for this PR, but also would be ok if you wanted to include a fix for it in this PR since you're already working on tabs. 👍
@aagonzales @emyarod Good catches - Ensured 3rem height, removed right border for selected tab, and resolved duplicate tab panel target. For the detailed animation wrt selected state, I see a performance issue in the Storybook setup. Fixed it that seems to solve or at least alleviate the problem. If the problem still persists I think it's a good idea to defer it, as @jnm2377 saw that it's not a new issue. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🎉 awesome! ship it!
The new variant is enabled with
.bx--tabs--fixed
class.Fixes #1329.
Changelog
New
.bx--tabs--fixed
class, which enables the new tab variant.Testing / Reviewing
Testing should make sure our tabs component is not broken.