fix: fixed the Tabs attribute from style to variant #1405
Conversation
🦋 Changeset detectedLatest commit: d14a524 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
WalkthroughThe recent updates involve renaming the Changes
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 (
|
![coderabbitai[bot]](https://github.com/avatars/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
Outside diff range and nitpick comments (4)
apps/web/content/docs/components/tabs.mdx (3)
Line range hint
6-6: Consider revising to "inside the main tabs component" to avoid redundancy.
Line range hint
18-18: Consider adding commas before 'and' in these sentences to improve readability.Also applies to: 22-22
Line range hint
52-52: Consider changing "on how you can set the activate tab programatically" to "on how you can programmatically set the active tab".packages/ui/src/components/Tabs/Tabs.tsx (1)
Line range hint
138-138: Consider using unique identifiers instead of array indexes as keys for list items if possible to prevent potential issues with component state on re-renders.Also applies to: 165-165
Review Details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (10)
- apps/web/content/docs/components/tabs.mdx (2 hunks)
- apps/web/examples/tabs/tabs.fullWidth.tsx (2 hunks)
- apps/web/examples/tabs/tabs.root.tsx (2 hunks)
- apps/web/examples/tabs/tabs.stateOptions.tsx (2 hunks)
- apps/web/examples/tabs/tabs.withIcons.tsx (2 hunks)
- apps/web/examples/tabs/tabs.withPills.tsx (2 hunks)
- apps/web/examples/tabs/tabs.withUnderline.tsx (2 hunks)
- packages/ui/src/components/Tabs/Tabs.stories.tsx (5 hunks)
- packages/ui/src/components/Tabs/Tabs.tsx (5 hunks)
- packages/ui/src/components/Tabs/theme.ts (3 hunks)
Files skipped from review due to trivial changes (1)
- packages/ui/src/components/Tabs/Tabs.stories.tsx
Additional Context Used
LanguageTool (5)
apps/web/content/docs/components/tabs.mdx (5)
Near line 6: This phrase is redundant. Consider using “inside”.
Context: ... you can click on to change the content inside of the main tabs component using React sta...
Rule ID: OUTSIDE_OF
Near line 18: Use a comma before ‘and’ if it connects two independent clauses (unless they are closely connected and short).
Context: ...<Tabs>component to create a tab item and you can add any type of markup and Reac...
Rule ID: COMMA_COMPOUND_SENTENCE
Near line 18: Use a comma before ‘and’ if it connects two independent clauses (unless they are closely connected and short).
Context: ...markup and React components inside of it and it will be shown when clicking on the a...
Rule ID: COMMA_COMPOUND_SENTENCE
Near line 22: Use a comma before ‘and’ if it connects two independent clauses (unless they are closely connected and short).
Context: ...bs.Item>` component, it will be disabled and you won't be able to click on it. <Exa...
Rule ID: COMMA_COMPOUND_SENTENCE
Near line 52: The preposition “of” seems more likely in this position.
Context: ... React state options Here's an example on how you can set the activate tab progra...
Rule ID: AI_EN_LECTOR_REPLACEMENT_PREPOSITION
Biome (10)
apps/web/examples/tabs/tabs.fullWidth.tsx (1)
5-6: All these imports are only used as types.
apps/web/examples/tabs/tabs.root.tsx (1)
5-6: All these imports are only used as types.
apps/web/examples/tabs/tabs.stateOptions.tsx (1)
6-7: All these imports are only used as types.
apps/web/examples/tabs/tabs.withIcons.tsx (1)
5-6: All these imports are only used as types.
apps/web/examples/tabs/tabs.withPills.tsx (1)
3-4: All these imports are only used as types.
apps/web/examples/tabs/tabs.withUnderline.tsx (1)
5-6: All these imports are only used as types.
packages/ui/src/components/Tabs/Tabs.tsx (4)
152-152: The assignment should not be in an expression.
171-171: The HTML element div is non-interactive. Do not use tabIndex.
138-138: Avoid using the index of an array as key property in an element.
165-165: Avoid using the index of an array as key property in an element.
Additional comments not posted (17)
apps/web/examples/tabs/tabs.withPills.tsx (2)
11-11: Change fromstyletovariantis correctly implemented for the pills style.
34-34: Change fromstyletovariantis correctly implemented for the pills style.apps/web/content/docs/components/tabs.mdx (3)
28-28: Documentation correctly updated to reflect the change fromstyletovariantfor underline style.
40-40: Documentation correctly updated to reflect the change fromstyletovariantfor pills style.
46-46: Documentation correctly updated to reflect the change fromstyletovariantfor full width style.packages/ui/src/components/Tabs/theme.ts (2)
8-8: Theme configuration correctly updated to reflect the change fromstylestovariant.
17-17: Theme configuration correctly updated to reflect the change fromstylestovariantin bothtabitemandtabitemcontainer.Also applies to: 52-52
apps/web/examples/tabs/tabs.root.tsx (2)
15-15: Change fromstyletovariantis correctly implemented for the default style.
46-46: Change fromstyletovariantis correctly implemented for the default style.apps/web/examples/tabs/tabs.withIcons.tsx (2)
15-15: Change fromstyletovariantis correctly implemented for the underline style.
46-46: Change fromstyletovariantis correctly implemented for the underline style.apps/web/examples/tabs/tabs.withUnderline.tsx (2)
15-15: Change fromstyletovariantis correctly implemented for the underline style.
46-46: Change fromstyletovariantis correctly implemented for the underline style.apps/web/examples/tabs/tabs.fullWidth.tsx (1)
16-16: Change fromstyletovariantin<Tabs>component is consistent with PR objectives.Also applies to: 49-49
packages/ui/src/components/Tabs/Tabs.tsx (2)
17-17: Changes to interfaces and props to replacestylewithvariantare correctly implemented.Also applies to: 20-20, 26-26, 59-59, 117-118, 133-133
Line range hint
171-171: Usage oftabIndexon non-interactive elements like<div>is acceptable here for accessibility reasons in a custom component.apps/web/examples/tabs/tabs.stateOptions.tsx (1)
23-23: Change fromstyletovariantin<Tabs>component is consistent with PR objectives.Also applies to: 74-74
|
Looks good, only thing left is to create a changeset (patch) |
Pardon!. but can you help from where & how I need to create this |
Please have a look, the |
There was a problem hiding this comment.
Actionable comments posted: 1
Review Details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (1)
- .changeset/forty-pumpkins-grow.md (1 hunks)
Additional Context Used
LanguageTool (2)
.changeset/forty-pumpkins-grow.md (2)
Near line 7: Consider a shorter alternative to avoid wordiness.
Context: ...enamed the Tabs -styletovariantsin order to allow the user to use style attribute w...
Rule ID: IN_ORDER_TO_PREMIUM
Near line 7: You might be missing the article “the” here.
Context: ...ants` in order to allow the user to use style attribute which was blocking earlier.
Rule ID: AI_EN_LECTOR_MISSING_DETERMINER_THE
There was a problem hiding this comment.
Actionable comments posted: 0
Review Details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (1)
- .changeset/forty-pumpkins-grow.md (1 hunks)
Files skipped from review as they are similar to previous changes (1)
- .changeset/forty-pumpkins-grow.md
Issue Reference #1256
this PR fixes the omitting attribute of
styleand now it's been replaced withvariantattribute in order to allow the usage ofstyleattribute.Summary by CodeRabbit
New Features
styleattribute tovariantin the<Tabs>component for improved flexibility in styling options.variantattribute in the<Tabs>component.Improvements
variantattribute for tab styling.Chores
flowbite-reactpackage to support the newvariantattribute, allowing users to utilize thestyleattribute.