feat(components): tabs component add tabPosition prop#2398
Merged
jrgarciadev merged 9 commits intoApr 15, 2024
Conversation
🦋 Changeset detectedLatest commit: 8af8cf9 The changes in this PR will be included in the next version bump. This PR includes changesets to release 2 packages
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 ↗︎
|
|
@winchesHe is attempting to deploy a commit to the NextUI Team on Vercel. A member of the Team first needs to authorize it. |
|
Is there planned merging date about this issue ? Thank you for replying! |
Contributor
Author
I'm not very sure, maybe I need to have the author review first @jrgarciadev |
Member
|
Hey @winchesHe nice addition, could you please make these changes?
Thanks! 🙏🏻 |
Contributor
Author
Got it, I will make these changes 👀 |
Contributor
Author
I have finished these changes, also added test case, thank you for you review again 👀 @jrgarciadev |
jrgarciadev
reviewed
Mar 14, 2024
Contributor
|
Important Auto Review SkippedAuto reviews are disabled on base/target branches other than the default branch. Please add the base/target branch pattern to the list of additional branches to be reviewed in the settings. Please check the settings in the CodeRabbit UI or the To trigger a single review, invoke the WalkthroughThe recent update enhances the tab component in the web application by introducing features for customizing the tab layout. Users can now adjust the position of tabs (top, bottom, start, end) and set the orientation to vertical. These additions provide more flexibility in designing the tab component to meet diverse user interface needs. Changes
Assessment against linked issues
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://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Review Status
Actionable comments generated: 0
Configuration used: .coderabbit.yaml
Files selected for processing (9)
- apps/docs/content/components/tabs/index.ts (2 hunks)
- apps/docs/content/components/tabs/tab-position.ts (1 hunks)
- apps/docs/content/components/tabs/vertical.ts (1 hunks)
- apps/docs/content/docs/components/tabs.mdx (2 hunks)
- packages/components/tabs/tests/tabs.test.tsx (3 hunks)
- packages/components/tabs/src/tabs.tsx (2 hunks)
- packages/components/tabs/src/use-tabs.ts (5 hunks)
- packages/components/tabs/stories/tabs.stories.tsx (1 hunks)
- packages/core/theme/src/components/tabs.ts (2 hunks)
Files skipped from review due to trivial changes (1)
- apps/docs/content/components/tabs/index.ts
Additional comments: 14
apps/docs/content/components/tabs/vertical.ts (1)
- 1-45: The example provided in
vertical.tseffectively demonstrates the use of theisVerticalprop to toggle the orientation of theTabscomponent. It's a clear and concise example that should help users understand how to implement vertical tabs in their applications.packages/components/tabs/src/tabs.tsx (2)
- 12-12: The destructuring of
getWrapperPropsfrom theuseTabshook is correctly implemented, ensuring that the tabs wrapper can be dynamically adjusted based on thetabPositionandisVerticalprops.- 39-50: Wrapping the tabs and the
TabPanelwithin a<div>usinggetWrapperPropsis a good approach to apply dynamic styling and attributes. This change supports the new positioning features while maintaining the component's structure and accessibility.apps/docs/content/components/tabs/tab-position.ts (1)
- 1-45: The example in
tab-position.tseffectively demonstrates the use of thetabPositionprop to adjust the position of theTabscomponent. The use of aRadioGroupfor selecting the position is a practical way to showcase the feature and provides a clear example for users.packages/components/tabs/src/use-tabs.ts (2)
- 50-59: The introduction of the
tabPositionandisVerticalprops in theuseTabshook is well-implemented. These props enhance the flexibility of theTabscomponent by allowing users to adjust the position and orientation of the tabs. Default values are appropriately set, ensuring backward compatibility.- 158-167: The logic for determining the
tabPositionand generating thegetWrapperPropsfunction based on thetabPositionandisVerticalprops is correctly implemented. This approach allows for dynamic adjustment of the tabs' styling and attributes, supporting the new positioning features.packages/components/tabs/__tests__/tabs.test.tsx (2)
- 246-271: The tests for changing the position of the tabs are well-implemented and cover the expected behavior for each position (
top,bottom,start,end). These tests ensure that thetabPositionprop correctly influences the tabs' rendering and attributes.- 273-310: The tests for changing the orientation of the tabs effectively verify the behavior of the
isVerticalprop. They ensure that settingisVerticaltotrueorfalsecorrectly adjusts the tabs' orientation and related attributes. This coverage is essential for validating the new orientation feature.packages/components/tabs/stories/tabs.stories.tsx (2)
- 319-336: The
TabPositionstory is well-implemented, providing a clear example of how to use thetabPositionprop with theTabscomponent. The use ofargTypesto allow interactive adjustment of thetabPositionin the Storybook UI is a practical way to demonstrate the feature.- 338-348: The
Verticalstory effectively demonstrates the use of theisVerticalprop to adjust the orientation of theTabscomponent. This story provides a clear example for users on how to implement vertical tabs in their applications.packages/core/theme/src/components/tabs.ts (2)
- 74-74: The addition of an empty
wrapperproperty to thetabscomponent styles seems to be a placeholder for future styling options. However, without any styles defined, it currently serves no purpose.Consider removing the empty
wrapperproperty if it's not being used, or add relevant styles if it's intended for future use.
- 163-178: The implementation of the
tabPositionvariants fortop,start,end, andbottomwith corresponding styles fortabList,panel, andwrapperis a significant enhancement. It allows for flexible positioning of tabs, catering to different layout requirements.This change effectively addresses the feature request for more versatile tab positioning options. It's also worth noting the thoughtful consideration for RTL support, as indicated in the previous comments and responses.
apps/docs/content/docs/components/tabs.mdx (2)
- 76-86: The documentation updates introducing the
tabPositionandisVerticalprops provide clear guidance on how to utilize these new features for tab layout customization. The examples and explanations are well-structured, making it easy for users to understand and apply these properties in their projects.These updates are crucial for ensuring that users are aware of and can effectively leverage the new tab positioning and orientation capabilities. Great job on enhancing the documentation to match the codebase changes.
- 73-90: > 📝 NOTE
This review was outside the diff hunks and was mapped to the diff hunk with the greatest overlap. Original lines [90-147]
The section on rendering tabs as links and integrating with client-side routers like Next.js and React Router is informative and provides practical examples for developers. It's a valuable addition that demonstrates how to synchronize tab selection with the current URL, enhancing the usability of tabs in applications with routing requirements.
This guidance is essential for developers looking to create more dynamic and interactive tab-based interfaces that integrate seamlessly with modern web frameworks.
Contributor
There was a problem hiding this comment.
Review Status
Actionable comments generated: 1
Configuration used: .coderabbit.yaml
Files selected for processing (1)
- .changeset/famous-panthers-know.md (1 hunks)
Additional comments: 1
.changeset/famous-panthers-know.md (1)
- 1-3: The metadata format specifying the package name and version change type is correctly structured.
jrgarciadev
approved these changes
Apr 2, 2024
Member
|
@winchesHe could you please fix the conflicts? |
Contributor
Author
Quite sure |
winchesHe
force-pushed
the
feature-tabs-tab-position
branch
from
f777615 to
6f8fd97
Compare
Member
|
@winchesHe sorry but what do you think about changing the property name from |
winchesHe
force-pushed
the
feature-tabs-tab-position
branch
from
a4fb881 to
7923d85
Compare
jrgarciadev
reviewed
Apr 3, 2024
jrgarciadev
reviewed
Apr 3, 2024
jrgarciadev
reviewed
Apr 3, 2024
jrgarciadev
requested changes
Apr 3, 2024
jrgarciadev
added a commit
that referenced
this pull request
Apr 16, 2024
* refactor(input): input ref test (#2613) * refactor(input): remove duplicate test * refactor(input): remove unncessary waitFor * fix(radio): isRequired & missing warning message in Form (#2597) * fix(radio): avoid overriding required props * fix(radio): merge with domRef * feat(changeset): fixed missing required props and validationMessage * fix(radio): unnecessary mergeRefs * Calendar component 📅 (#2456) * feat(calendar): initial structure * feat(calendar): calendar structure completed, styles in progress * chore(calendar): dark colors adjusted * feat(calendar): styles improved, variants added, animations added with framer motion * chore(calendar): animation changed, shadow improved * chore(calendar): disableAnimation support added as well as weekDays format * feat(calendar): more stories added * chore(calendar): refactor calendar cell styling * feat(calendar): create calendar function added to the root provider * feat(calendar): invalid state and error message added * feat(calendar): calendar picker added, provider modified * feat(root): object.values deps replaced by new func, intersection hoook added, types version unified * feat(calendar): calendar pickers in progress * feat(calendar): calendar pickers added * fix(calendar): year label formatting * chore(calendar): add layout parameter to Calendar stories * feat(calendar): pickers completed, context added * feat(calendar): visibleMonths supported, warnings fixed, tests added * chore(root): changeset * chore(calendar): add topContent and bottomContent props to calendar * feat(calendar): add @nextui-org/radio package and update calendar component * refactor: assigned type(DateValue) to focusedDate(ControlledFocusedVaue) (#2637) Co-authored-by: shrinidhi.upadhyaya <shrinidhi.upadhyaya@stud.uni-bamberg.de> * Range Calendar 📆 (#2634) * feat(calendar): range calendar added, calendar and context adapted * feat(calendar): range calendar stories added * chore(calendar): range calendar tests added * fix(calendar): update calendar styles to adjust to dynamic width * Date Input 🗓️ (#2641) * feat(date-picker): date field component initialized * chore(date-picker): date field renamed to date-input * feat(date-picker): date input completed * chore(date-input): commented code removed * feat(avatar): support slots in AvatarGroup (#2669) * feat: rename newPost to new (#2665) * fix(avatar): spread getAvatarGroupCountProps in avatar count * feat(avatar): support slots in avatarGroup * feat(avatar): support classNames and add getAvatarGroupCountProps * feat(docs): add classNames to avatar group * feat(avatar): add CustomSlots in avatar group * feat(changeset): support slots in avatar group --------- Co-authored-by: winches <96854855+winchesHe@users.noreply.github.com> * Date Picker Component 🗓️ (#2652) * feat(date-picker): first iteration * chore(date-picker): update date-picker README.md with improved description * feat(date-picker): code organized, integration done * fix(date-picker): min and max value + styles * fix(date-picker): popover offset adn calendar styles * feat(date-picker): stories added * fix(date-picker): calendar width properly handled * feat(date-picker): styles simplified * chore(date-picker): almost all test passing * fix(date-picker): test and styles * chore(date-picker): calendar popover tests added * fix(date-picker): props to be passed to the date-input * TimeInput Component 🕒 (#2672) * feat(time-input): time input added with some stories, tests and date-picker integration missing * feat(time-input): tests added, date-picker integration added, missing stories added * chore(react): missing packages added * chore(time-input): fix stories names * fix(time-input): time value type * fix: date-picker visibleMonth width does not get widen enough (#2703) * DateRangePicker Component 🗓️ (#2682) * chore(date-range-picker): in progress * chore(date-range-picker): in progress * feat(date-input): components separated into multiple pieces to be able to implement the date range picker * feat(date-range-picker): first version of it working * chore(date-picker): hyphen symbol changed * feat(date-range-picker): stories done * fix(range-calendar): styles * docs: Calendar & RangeCalendar (#2686) * feat(docs): add calendar in routes.json * feat(docs): refresh search-meta.json * feat(docs): add calendar examples * feat(docs): calendar content * feat(deps): add @internationalized/date * refactor(docs): remove div wrapper * feat(docs): add calendar doc * fix(docs): calendar presets * fix(docs): preset styles * chore(docs): remove calendar iframe examples * refactor(docs): discard iframe in calendar doc * fix(docs): incorrect DateValue import * feat(docs): include @internationalized/date in live demo scope * feat(docs): add presets description * chore(docs): update search-meta.json * fix(docs): remove DateValue * feat(docs): include reactAriaI18n in react live demo scope * fix(docs): presets import issue * chore(docs): update search-meta.json * feat(docs): add api reference for nextui provider * fix(calendar): ixExpanded typo * feat(docs): add missing props & event * chore(docs): update search-meta.json * chore(docs): update route keywords * chore(docs): revise value style add defaultFocusedValue * chore(docs): remove padding and revise gap * feat(docs): range calendar * chore(docs): update search-meta.json * feat(docs): add reactAriaHook * fix(docs): incorrect component and add storybook and reactAriaHook * fix(docs): incorrect import path * chore(docs): reorder range calendar position in sidebar * chore(Docs): remove custom styles & implementation * chore(docs): remove last item from accessibility * chore(docs): onValueChange -> onChange * feat(docs): add ts example for range calendar * chore(docs): remove unwanted content in range calendar * feat(docs): add ts examples for calendar * chore(docs): update import path * chore(docs): update import path * chore(docs): styles adjusted, routes updated --------- Co-authored-by: Junior Garcia <jrgarciadev@gmail.com> * docs: TimeInput (#2698) * feat(docs): add time input to routes.json * feat(deps): add @internationalized/date * feat(docs): add @internationalized/date and @react-aria/i18n to code demo scopes * feat(docs): time input contetnt * chore(docs): revise time input examples * feat(docs): time input content * chore(time-input): update description * feat(docs): add ts examples in time-input * chore(docs): revise TimeValue import --------- Co-authored-by: Junior Garcia <jrgarciadev@gmail.com> * chore(date-picker): exports updated * docs: DatePicker (#2700) * docs: created the doc for datepicker and its examples * docs: regenerate search-meta.json * fix: reverted the unncessary change to Input component * fix: fixed the component-link for date-picker * fix: fixed the component-link for date-picker * fix: added variants section to the doc * fix: made adjustment to the explanations for the props of DatePicker comp --------- Co-authored-by: Junior Garcia <jrgarciadev@gmail.com> * doc: DateInput (#2711) * docs: created base examples and the document * chore: created search-meta and follow-up fix for each date-input example cases * fix: fixed some example components styles * fix(docs): updated routes.json * fix(docs): fixed typo in the docs * fix: fixed the component-link for date-input * fix: fixed the component-link for date-input * fix: label-placements example flex style adjustment * fix: added variants section to the doc --------- Co-authored-by: HaRuki Kuriwada <haruki.kuriwada@hennge.com> Co-authored-by: Junior Garcia <jrgarciadev@gmail.com> * refactor(theme): units removed, tailwind-variants upgraded (#2713) * fix(theme): units replaced by spacing * fix(select): positioning the label if a description is used (#2553) Co-authored-by: Poli Sour <polisour.work@gmail.com> * Upgrade to new react aria version (#2561) * chore(root): pkg upgraded * fix: type error * fix: build error * chore: update packages from a~d * chore: update packages from i~r * chore: update packages from s~u * chore: update core, hooks, and utilities packages * feat: add support radio group validationBehavior props * fix: validationBehavior default to native * chore: add validationBehavior props in RadioGroup Stories * fix: handling of errorMessage * chore: add support validationBehavior autocomplete * chore: partial support for validation of select * chore: add support validationBehavior checkbox * chore: change validationBehavior default to native * Merge branch 'v.2.3.0' into feat/upgrade-react-aria * fix: validation logic * fix: add default value for autocomplete * chore: add example using error message function * chore: fixed error displayed in storybook * chore: omit validationBehavior from component props * chore: update docs and storybook on validate * fix: pnpm-lock version --------- Co-authored-by: Junior Garcia <jrgarciadev@gmail.com> * fix(core): build and date input / time input apis * chore(date-picker): omit validation behavior * chore(docs): add missing props to calendar and range calendar * docs: add nextui-cli page (#2714) * docs: add nextui-cli page * docs: update search meta * docs: typo * docs: typo * docs: typo * feat(docs): cli docs done --------- Co-authored-by: Junior Garcia <jrgarciadev@gmail.com> * chore(docs): add cli commands to installation docs * fix(checkbox): prettier * fix(docs): incorrect cli api references link * doc: DateRangePicker (#2712) * chore: created base for date-range-picker doc * fix: added follow-up story examples to the doc * fix: fixed bugs happening on the doc * fix: fixed bugs happening on the doc * fix(docs): incorrect file path and revise title * fix: component examples style fixes * fix: component presets typo fix * refactor(core): date range picker docs completed, standaline date picker field fixed --------- Co-authored-by: HaRuki Kuriwada <haruki.kuriwada@hennge.com> Co-authored-by: աɨռɢӄաօռɢ <wingkwong.code@gmail.com> Co-authored-by: Junior Garcia <jrgarciadev@gmail.com> * fix: only two keyframes currently supported with spring and inertia animations (#2596) * chore(deps): bump framer-motion * feat(changeset): fixed framer motion issue * chore(changeset): revise changeset message * chore(deps): update pnpm-lock.yaml * fix: react hook form issue (#2603) * fix(input): pass domRef?.current?.value to controlled state * fix(input): pass domRef?.current?.value to useTextField instead * fix(checkbox): handle RHF case * fix(checkbox): add missing isSelected case * chore(checkbox): update ref type * chore(deps): add @nextui-org/use-safe-layout-effect * chore(deps): update pnpm-lock.yaml * chore(deps): update pnpm-lock.yaml * fix(select): handle RHF case * chore(deps): add @nextui-org/use-safe-layout-effect to select * fix(autocomplete): handle RHF case * chore(deps): add @nextui-org/use-safe-layout-effect to autocomplete * refactor(components): revise comments * feat(changeset): react-hook-form uncontrolled components * chore(deps): pnpm-lock.yaml * fix(input): domRef.current.value has higher precedence * fix(checkbox): set isChecked based on input ref checked * feat(components): tabs component add tabPosition prop (#2398) * feat(components): tabs component add tabPosition prop * fix: review problem change * test: add tabs position vertical test * docs: update changeset * fix(tabs): optimize return of tabs * fix(tabs): rename orientation to placement * fix(tabs): optimize description * chore(docs): routes * fix: isReadOnly in Autocomplete MDX (#2444) * feat(autocomplete): add isReadOnly example * fix(autocomplete): isReadOnly logic in Autocomplete * feat(root): add changeset - fixed isReadOnly logic in Autocomplete * chore(autocomplete component) isReadOnly property demo isReadOnly property demo in website MDX for autocomplete component. * Update apps/docs/content/docs/components/autocomplete.mdx Co-authored-by: Junior Garcia <jrgarciadev@gmail.com> --------- Co-authored-by: աɨռɢӄաօռɢ <wingkwong.code@gmail.com> Co-authored-by: Alpha <116849110+alpha-xek@users.noreply.github.com> Co-authored-by: Junior Garcia <jrgarciadev@gmail.com> * fix(select): only trigger setSelectedKeys when domRef.current.value is true (#2722) * chore(docs): blog changes (#2724) * chore(docs): blog changes * feat(docs): blog improved * chore(blog): draft param added * chore: version changeset added * feat(blog): v2.3.0 almost done * chore(docs): tailwind colors updated, calendar overflow fixed * chore(blog): add presets demo * fix(calendar): overflow on windows * chore(docs): improve popover placements demo * fix(autocomplete): set shouldUseVirtualFocus to false in getListboxProps (#2731) * chore(blog): add cotributors * chore(blog): draft --------- Co-authored-by: աӄա <wingkwong.code@gmail.com> Co-authored-by: Shrinidhi Upadhyaya <shrinidhiupadhyaya1195@gmail.com> Co-authored-by: shrinidhi.upadhyaya <shrinidhi.upadhyaya@stud.uni-bamberg.de> Co-authored-by: winches <96854855+winchesHe@users.noreply.github.com> Co-authored-by: HaRuki <soccer_haruki15@me.com> Co-authored-by: HaRuki Kuriwada <haruki.kuriwada@hennge.com> Co-authored-by: Poli Sour <57824881+novsource@users.noreply.github.com> Co-authored-by: Poli Sour <polisour.work@gmail.com> Co-authored-by: Ryo Matsukawa <76232929+ryo-manba@users.noreply.github.com> Co-authored-by: winches <329487092@qq.com> Co-authored-by: Alpha Xek <116849110+alphaxek@users.noreply.github.com> Co-authored-by: Alpha <116849110+alpha-xek@users.noreply.github.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
5 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #2386
📝 Description
🚀 New behavior
💣 Is this a breaking change (Yes/No):
📝 Additional Information
Add Tabs Component props
1、placement
2、isVertical
Summary by CodeRabbit
tabPositionproperty.isVerticalproperty for both horizontal and vertical tab layouts.tabList,panel, and a newwrapperelement.tabPositionandisVerticalproperties for personalized tab layouts.