feat(tabs): vertical variation with inner grid

[ariellalgilmore]

Closes #16305

Adds a new vertical variant to tabs

Changelog

New

• TabListVertical component
  • will scroll selected <Tab> into view on resize and when using mouse/keyboard
• new vertical and height props to Tabs
  • the vertical Tabs variant wraps a Grid around the component except for at sm breakpoint
• Tab new update to add ellipsis with Tooltip only on vertical variant
• TabPanel still needs to account for changing heights if the adopter doesn't give the Tabs a set height

Changed

• added overflow-x: hidden to default Tabs ... fixed an issue where an unwanted horizontal scroll would appear if the length of the tabs is too long

---

Other notes:

Testing / Reviewing

{{ Add descriptions, steps or a checklist for how reviewers can verify this PR works or not }}

[netlify[bot]]

✅ Deploy Preview for v11-carbon-react ready!

Name	Link
🔨 Latest commit	5ba02e1d61e9ee4b1f7cebdc85e630a8c9f9b66d
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-react/deploys/6682fc473ab811000857a868
😎 Deploy Preview	https://deploy-preview-16738--v11-carbon-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify[bot]]

✅ Deploy Preview for carbon-elements ready!

Name	Link
🔨 Latest commit	5ba02e1d61e9ee4b1f7cebdc85e630a8c9f9b66d
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-elements/deploys/6682fc476fbf030008e646bb
😎 Deploy Preview	https://deploy-preview-16738--carbon-elements.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[alisonjoseph]

This is looking good!

Couple things

• we will need to make sure we have tests added (AVT, VRT, unit)
• we reuse the storybook stories for the live demo on the website, so will want to probably just show the tabs with the height set, and also make sure the controls are enabled for that story. (we can wait to update this until after it has been reviewed fully / by design etc)

[kingtraceyj]

@ariellalgilmore looks good to go from design! 💥

[alisonjoseph]

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 🤷‍♀️

[alisonjoseph]

Seeing some issues with default tabs now

[ariellalgilmore]

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?

[alisonjoseph]

@ariellalgilmore in Firefox, but I restarted my browser and its working now... 🙃

[ariellalgilmore]

@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

[carbon-automation[bot]]

Hey there! v11.61.0 was just released that references this issue/PR.

[wkeese]

Uh oh, this broke the background coloring on all our tabs that use contained. (Even though our tabs are horizontal, not vertical.).

This CSS you added is pretty general, it affects any code using <Tabs contained>, not just vertical tabs.

.cds--tabs--contained~.cds--tab-content>* {
  @include layer-tokens.emit-layer-tokens(2);
}

[ariellalgilmore]

Hi @wkeese, can you share a stackblitz example of what is breaking for you? and maybe some screenshots? Looking at storybook here: https://react.carbondesignsystem.com/?path=/story/components-tabs--contained and it is showing the expected results

[wkeese]

Yes, I started the discussion on Slack (https://ibm-analytics.slack.com/archives/C2K6RFJ1G/p1722510209140579) and posted an example link there.

[wkeese]

PS: Moved the discussion to ticket #17096.