feat(Tabs): Contained tabs on the grid

[francinelucca]

Closes #13353

Adds fullWidth prop to TabList so that Tabs (container) can be aligned to the Grid

Changelog

New

• fullWidth prop now available for contained TabList
• 'contained fullWidth' tab story and e2e test
• tests for fullWidth prop and added mock for useMatchMedia in Tab testing
• 'cds-tabs--full-width' class for fullWidth contained Tabs and accompanying style
• Grid guidance using fullWidth prop for Tabs

Testing / Reviewing

1. Check that stories match spec: Tabs: Aligning to the Grid design guidance #13351 (comment)
   • https://deploy-preview-13927--carbon-components-react.netlify.app/?path=/story/components-tabs--contained-full-width
   • https://deploy-preview-13927--carbon-components-react.netlify.app/iframe.html?args=&id=components-tabs--contained-grid-test&viewMode=story
2. Check developer guidance is true and coherent: https://deploy-preview-13927--carbon-components-react.netlify.app/?path=/docs/components-tabs--contained-full-width#tabs-and-the-grid---fullwidth-prop
3. Should have no visual/behavioral regression to default tab styles and functionality outside of fullWidth

TODO:

• Remove Test story

[netlify]

✅ Deploy Preview for carbon-components-react ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	fec0348
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-components-react/deploys/6494a4c4dfce8d000811c719
😎 Deploy Preview	https://deploy-preview-13927--carbon-components-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 settings.

[netlify]

✅ Deploy Preview for carbon-elements ready!

Name	Link
🔨 Latest commit	fec0348
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-elements/deploys/6494a4c4e901250008b2f45c
😎 Deploy Preview	https://deploy-preview-13927--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 settings.

[francinelucca]

We're still ironing some dev things out but this should be good for design review @kingtraceyj . You can check it out at this url: https://deploy-preview-13927--carbon-components-react.netlify.app/iframe.html?args=&id=components-tabs--contained-grid-test&viewMode=story

[kingtraceyj]

this is working as intended! 💥

[alisonjoseph]

Question: are we not aligning individual tabs on the grid anymore? That was the original intent of the design spec, but maybe it changed?

This is a screen shot from the POC that we did as a comparison.

Edited to add it seems that this is intended 😅 Added some suggestions below on how we can possibly clarify the docs so they can get tabs aligned on the grid, and not just full width.

[alisonjoseph]

This is looking great! I think we can make the docs a little clearer by adding / showing an example on how to actually get the tabs on the grid by matching the column numbers. We might want to show that in the code sample on the docs also.

[francinelucca]

@alisonjoseph yeah we confirmed with Tracey & Lauren only the Container needs to be aligned to the Grid and if the number of columns coincide with the number of Tabs then the individual tab items will also be aligned to the Grid. We just added some extra guidance around that in the Docs, let us know what you think :)

[alisonjoseph]

Awesome! LGTM, and a lot easier to understand now with added docs 🥳

[carbon-bot]

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