feat(tabs): vertical variation with inner grid #16738
Conversation
✅ Deploy Preview for v11-carbon-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. |
|
This is looking good! Couple things
|
|
@ariellalgilmore looks good to go from design! 💥 |
| @@ -0,0 +1,66 @@ | |||
| // | |||
There was a problem hiding this comment.
Do we still need this file? These styles were just removed here #16860 in favor of using the Layer component
I think we might be able to replace the div at line 1641 (tab panel) with <Layer>
There was a problem hiding this comment.
thanks alison! I saw that PR and when swapping the div to layer it ends up with a white background
Adding the layer around the children works, but....
if it's not in a container Tabs then the text input background will blend with the tabs background
i ended up putting the Layer in the story here since the TabPanel doesn't have access to knowing if it's inside a container tabs or not. Since Tabs doesn't have a parent element it would be hard to determine inside TabPanel with javascript if the container was being applied as a prop
There was a problem hiding this comment.
Ohh ok. Regardless where we add the Layer (in the actual component or in the story example) I think we can remove all of the css overrides.
The example for contained tabs breaks I think because we already have a Layer component in the story code. If we remove that and bake it in (as a child of the div) it should work.
I'm on the fence whether that is a fix or a breaking change. If someone is already nesting Layer for contained tabs then it will break. I'd rather is just "works" out of the box, but might be too late to change that.
There was a problem hiding this comment.
hmm i guess right now though if people are using the contained tabs with field elements then it could be displaying wrong... since that's whats currently in storybook right now, so I think it might be better to go the route of just having it work out of the box and overridding some layer styles for the non-contained tabs?
There was a problem hiding this comment.
Yea, that might be the best option. Neither is ideal, but like you said TabPanel has no idea which variant of tabs its being used with.
There was a problem hiding this comment.
just pushed! I actually ended up just using css directly which seemed the cleanest code wise and possibly would be easier on the user side if they need to override for any reason
|
I tested locally inside some weird nested grids and it is working as expected. 🥳 *It does break if you try and place it inside a column that spans less than 5, which is probably fine. Could be fun to play with container queries to see we could fix that edge case 🤷♀️ |
|
Seeing some issues with default tabs now |
hmm i'm not seeing that and doesn't seem like Percy is picking it up either? What browser/size were you looking in? |
|
@ariellalgilmore in Firefox, but I restarted my browser and its working now... 🙃 |
|
@tay1orjones we followed the same guidance as operational tag, so on mouse click it shouldn't show the tooltip, but on hover it will eventually pop up with the browser's tooltip 
|
Closes #16305
Adds a new vertical variant to tabs
Changelog
New
TabListVerticalcomponent<Tab>into view on resize and when using mouse/keyboardverticalandheightprops toTabsTabsvariant wraps aGridaround the component except for atsmbreakpointTabnew update to add ellipsis withTooltiponly on vertical variantTabPanelstill needs to account for changing heights if the adopter doesn't give theTabsa set heightChanged
overflow-x: hiddento default Tabs ... fixed an issue where an unwanted horizontal scroll would appear if the length of the tabs is too longOther notes:
Testing / Reviewing
{{ Add descriptions, steps or a checklist for how reviewers can verify this PR works or not }}