-
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(Tabs): Contained tabs on the grid #13927
feat(Tabs): Contained tabs on the grid #13927
Conversation
Co-authored-by: Guilherme Datilio Ribeiro <guilhermedatilio@gmail.com>
✅ Deploy Preview for carbon-components-react ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify site settings. |
✅ Deploy Preview for carbon-elements ready!
To edit notification comments on pull requests, go to your Netlify site settings. |
…353-tabs-implement-contained-tabs-on-the-css-grid
Co-authored-by: Guilherme Datilio Ribeiro <guilhermedatilio@gmail.com>
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 |
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.
this is working as intended! 💥
…353-tabs-implement-contained-tabs-on-the-css-grid
Co-authored-by: Guilherme Datilio Ribeiro <guilhermedatilio@gmail.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.
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.
Co-authored-by: Guilherme Datilio Ribeiro <guilhermedatilio@gmail.com>
@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 :) |
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! LGTM, and a lot easier to understand now with added docs 🥳
…353-tabs-implement-contained-tabs-on-the-css-grid
… github.com:francinelucca/carbon into 13353-tabs-implement-contained-tabs-on-the-css-grid
Hey there! v11.32.0 was just released that references this issue/PR. |
Closes #13353
Adds
fullWidth
prop toTabList
so that Tabs (container) can be aligned to the GridChangelog
New
fullWidth
prop now available for containedTabList
fullWidth
prop and added mock foruseMatchMedia
in Tab testingfullWidth
contained Tabs and accompanying stylefullWidth
prop for TabsTesting / Reviewing
fullWidth
TODO: