Feat/vert tabs #1384
Feat/vert tabs #1384
Conversation
|
WalkthroughThe update brings vertical tabs functionality to various components and files in the project, enhancing UI flexibility with new styles, properties, and examples for vertical tab alignment. Changes
Possibly related issues
Recent Review DetailsConfiguration used: CodeRabbit UI Files selected for processing (1)
Files skipped from review as they are similar to previous changes (1)
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (invoked as PR comments)
Additionally, you can add CodeRabbit Configration File (
|
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
Out of diff range and nitpick comments (3)
apps/web/examples/tabs/tabs.vertical.tsx (1)
11-27: Check for potential accessibility improvements.It's good practice to ensure that interactive elements like tabs have appropriate ARIA roles and properties. Verify that the
TabsandTabs.Itemcomponents are properly using ARIA attributes to enhance accessibility.apps/web/content/docs/components/tabs.mdx (2)
Line range hint
6-6: Improve clarity in documentation.Consider simplifying the phrase "inside of the main tabs component" to "inside the main tabs component" for better readability.
Line range hint
18-18: Enhance readability by adding necessary spaces and commas.Add a space after the code block and before the "## Default tabs" heading. Also, consider using commas before 'and' in complex sentences to improve clarity.
- ...e-react"; ``` ## Default tabs Add the `<Tabs.Item>` child component to the `<Tabs>` compo... + ...e-react"; ``` + + ## Default tabs + + Add the `<Tabs.Item>` child component to the `<Tabs>` component, and you can add any type of markup and React components inside of it, and it will be shown when clicking on the associated tab item.
Hello Maintainers,
this PR adds the missing
Vertical TabComponent to theTabsComponents and extends theTabscomponents.A Note over here is to make the
Vertical TabWorking, I've added an extra attribute to the code which isdata-tab-style="vertical"where theverticalwill be passed based on thestyleprops we're receiving from the User for type of Tabs they wants to use, and using that selector in thetheme.tsI have made theVertical Tabworking without affecting or breaking the existing one.Furthermore, @SutuSebastian I would suggest & recommend to rename the
styleto something else likevariantin order to allow the user to select the type ofTabsthey're interested to use, this way we can allow the user to select theTabvariant, as well as they can able to use thestyle={{ }}to use the CSS and avoid the confusion as well.Summary by CodeRabbit
New Features
Documentation
Style