-
-
Notifications
You must be signed in to change notification settings - Fork 1.6k
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(select): add isClearable #3746
feat(select): add isClearable #3746
Conversation
🦋 Changeset detectedLatest commit: c221d07 The changes in this PR will be included in the next version bump. This PR includes changesets to release 3 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 |
@abhinav700 is attempting to deploy a commit to the NextUI Inc Team on Vercel. A member of the Team first needs to authorize it. |
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. 🗂️ Base branches to auto review (5)
Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the WalkthroughThe pull request introduces a new module for a selection component that allows users to choose their favorite animals, featuring a clearable option. It exports a list of animal objects, a Changes
Assessment against linked issues
Possibly related PRs
Suggested reviewers
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 using PR comments)
Other keywords and placeholders
Documentation and Community
|
@wingkwong for the tests that are failing, I don't think they are related to the changes that I have made. When I tried to run the tests on the canary branch( which is in sync and I have pulled those changes locally), the same tests are failing there also even though I have not made any changes to it. |
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
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.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (2)
packages/components/select/src/select.tsx (2)
57-65
: Approve implementation with a suggestion for clarity.The clear button implementation looks good overall. The use of
useMemo
for performance optimization and the conditional rendering logic are correct. However, there's a potential confusion in the usage ofendContent
.Consider separating the clear button content from
endContent
to avoid confusion. You could introduce a new prop likeclearButtonContent
for customizing the clear button. This would make the API more explicit:const clearButton = useMemo(() => { if (isClearable && state.selectedItems?.length) { return ( <span {...getClearButtonProps()}> {clearButtonContent || <CloseFilledIcon />} </span> ); } return null; }, [isClearable, getClearButtonProps, state, clearButtonContent]);This change would allow users to customize both the clear button and the end content independently.
142-148
: Approve changes with a suggestion for comment improvement.The modifications to the component's return statement are correct. The conditional rendering of
endContent
and the placement of theclearButton
are appropriate.The comment explaining the
endContent
display is helpful, but it could be more concise and grammatically correct. Consider revising it as follows:{/** * Display endContent separately only when not showing the clear button. * Otherwise, use it as the clear button. */}This revision maintains the explanation while improving readability.
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
📒 Files selected for processing (1)
- packages/components/select/src/select.tsx (4 hunks)
🔇 Additional comments (3)
packages/components/select/src/select.tsx (3)
3-3
: LGTM: Import for clear button icon added.The import for
CloseFilledIcon
is correctly added, which will be used for the new clear button functionality.
33-33
: LGTM: New props for clear button functionality added.The
isClearable
andgetClearButtonProps
props have been correctly added to the Select component. These are essential for implementing the new clear button functionality as requested in issue #2239.Also applies to: 35-35
Line range hint
1-156
: Verify implementation against PR objectives.The implementation successfully meets the objectives stated in the PR summary and issue #2239:
- The
isClearable
option has been added to the Select component.- Users can now easily clear their selection with a clear button.
- The implementation is similar to the Autocomplete component's functionality.
- This solution is more efficient than using
endContent
with a button.The changes are focused on this single feature enhancement, adhering to the guidelines for submitting a pull request.
To ensure the implementation works as expected across the codebase, please run the following verification script:
This script will help identify any places where the new
isClearable
prop is being used and check for any remaining TODO comments related to clear functionality in Select components.
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.
Actionable comments posted: 1
🧹 Outside diff range and nitpick comments (3)
packages/components/select/src/use-select.ts (3)
81-83
: Clarify the documentation for theendContent
propConsider rephrasing the comment for better clarity.
Apply the following diff to improve the comment:
* Element to be rendered in the right side of the select. - * if you pass this prop and the `onClear` prop, the passed element - * will have the clear button props and it will be rendered instead of the - * default clear button. + * If `onClear` is provided and an element is passed to this prop, + * the element will receive the clear button props and replace the default clear button.
140-141
: Improve documentation consistencyCapitalize the first word in the sentence for consistency.
Apply the following diff:
* Callback fired when the value is cleared. - * if you pass this prop, the clear button will be shown. + * If you pass this prop, the clear button will be shown.
313-316
: Simplify boolean conversionThe use of
!!
may be unnecessary sinceoriginalProps.isDisabled
is already a boolean or undefined.Apply the following diff:
const {pressProps: clearPressProps} = usePress({ - isDisabled: !!originalProps?.isDisabled, + isDisabled: originalProps?.isDisabled, onPress: handleClear, });
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
📒 Files selected for processing (3)
- apps/docs/content/docs/components/select.mdx (3 hunks)
- packages/components/select/src/use-select.ts (10 hunks)
- packages/core/theme/src/components/select.ts (4 hunks)
🧰 Additional context used
🪛 LanguageTool
apps/docs/content/docs/components/select.mdx
[grammar] ~153-~153: There appears to be a superfluous article here.
Context: ... button which will be visible only when the some value is selected. A default clear butt...(THE_SOME)
🔇 Additional comments (13)
apps/docs/content/docs/components/select.mdx (2)
393-393
: LGTM: NewisClearable
property documentedThe
isClearable
property has been correctly added to the Select Props table. The description is clear and concise, and the default value is accurately specified.This addition ensures that the API documentation is up-to-date with the new feature.
414-414
: LGTM: NewonClear
event documentedThe
onClear
event has been correctly added to the Select Events table. The description clearly explains when the event is triggered.This addition completes the documentation for the new Clear Button feature, providing developers with the necessary information to implement and handle the clear functionality.
packages/core/theme/src/components/select.ts (4)
31-47
: Addition ofclearButton
slot enhances functionalityThe new
clearButton
slot is well-defined, and the classes applied are consistent with existing styles. This improves theselect
component by providing users with the ability to clear selections easily.
122-132
:clearButton
size variants are appropriately setThe
clearButton
sizes forsm
,md
, andlg
variants are defined, matching the expected sizing conventions of the component.
170-175
:isClearable
variant implements clearable functionality correctlyThe
isClearable
variant correctly adjusts theinput
andclearButton
styles based on the state of the input, enabling users to clear their selections when the input is filled.
222-222
: Consistent animation handling forclearButton
Including the
transition-opacity
andmotion-reduce:transition-none
classes for theclearButton
ensures consistent animation behavior with other interactive elements.packages/components/select/src/use-select.ts (7)
20-20
: LGTM!The added imports are necessary for the new functionality.
308-311
: LGTM!The
handleClear
function correctly handles clearing the selection and invokingonClear
.
323-323
: LGTM!Using
useFocusRing
to manage focus visibility for the clear button is appropriate.
341-341
: LGTM!The
isClearable
flag correctly determines if the select is clearable.
360-372
: LGTM!Dependencies are correctly listed for the
useMemo
hook.
700-700
: LGTM!Returning
isClearable
in the hook's return object.
719-719
: LGTM!Exposing
getClearButtonProps
method in the hook's return object.
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.
Actionable comments posted: 2
🧹 Outside diff range and nitpick comments (7)
apps/docs/content/components/select/isClearable.ts (2)
17-49
: LGTM: Well-implemented icon component with a minor suggestionThe
PetBoldIcon
component is well-structured, reusable, and follows React best practices. It includes important accessibility attributes and usescurrentColor
for easy styling.Consider adding a
displayName
to the component for easier debugging:PetBoldIcon.displayName = 'PetBoldIcon';
51-72
: LGTM: Well-implemented Select component with isClearable functionalityThe App component effectively demonstrates the use of the
isClearable
prop on the Select component. The implementation is clean, follows React best practices, and correctly uses theanimals
data andPetBoldIcon
.Consider adding an
onClear
handler to demonstrate how to respond to clear events:const handleClear = () => { console.log('Selection cleared'); // Add any additional logic here }; <Select // ... other props isClearable={true} onClear={handleClear} > {/* ... SelectItems */} </Select>This addition would provide a more comprehensive example of the
isClearable
functionality.packages/components/select/stories/select.stories.tsx (1)
1009-1017
: Consider the placement of the new "Clearable" story within the file.The new "Clearable" story is currently placed at the end of the file. While this is a valid location, you might want to consider placing it closer to related stories (e.g., near other stories that demonstrate core functionalities of the Select component) for better discoverability and logical grouping.
Consider moving the "Clearable" story to a more appropriate location within the file, such as after the "Default" or "Multiple" stories, to improve the overall organization of the stories.
packages/components/select/src/select.tsx (1)
66-77
: Ensure consistent styling for 'endContent' with and without 'clearButton'When
clearButton
is present,endContent
is wrapped in a<span>
with classms-3
inside a<div>
with classesflex end-18
. WhenclearButton
is not present,endContent
is wrapped in a<span>
with classmb-4
. This could lead to inconsistent styling or alignment ofendContent
depending on whether theclearButton
is shown. Consider making the styling consistent in both cases.packages/core/theme/src/components/select.ts (1)
123-123
: Consider adjustingclearButton
text size for large variantThe
clearButton
usestext-large
for bothmd
andlg
sizes. To maintain proportional scaling, consider usingtext-xl
for thelg
size variant to better reflect the larger size.Apply this diff to adjust the
clearButton
text size for thelg
variant:def select = tv({ variants: { size: { sm: { // ... clearButton: "text-medium", }, md: { // ... clearButton: "text-large", }, lg: { // ... - clearButton: "text-large", + clearButton: "text-xl", }, }, // ... }, // ... });Also applies to: 128-128, 133-133
packages/components/select/src/use-select.ts (2)
81-83
: Clarify theendContent
prop documentationTo improve readability, consider rephrasing the documentation for clarity.
Apply this diff to rephrase the comment:
/** * Element to be rendered in the right side of the select. - * if you pass this prop and the `onClear` prop, the passed element - * will have the clear button props and it will be rendered instead of the - * default clear button. + * If both `endContent` and `onClear` props are provided, the `endContent` + * element will receive the clear button props and will be rendered + * instead of the default clear button. */
139-143
: Capitalize the first word in the documentation commentTo maintain consistency, capitalize the first word in the documentation comment.
Apply this diff to fix the capitalization:
/** * Callback fired when the value is cleared. - * if you pass this prop, the clear button will be shown. + * If you pass this prop, the clear button will be shown. */
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
📒 Files selected for processing (6)
- apps/docs/content/components/select/isClearable.ts (1 hunks)
- apps/docs/content/docs/components/select.mdx (3 hunks)
- packages/components/select/src/select.tsx (4 hunks)
- packages/components/select/src/use-select.ts (10 hunks)
- packages/components/select/stories/select.stories.tsx (1 hunks)
- packages/core/theme/src/components/select.ts (4 hunks)
🧰 Additional context used
🪛 GitHub Check: ESLint
packages/components/select/src/select.tsx
[warning] 32-32:
'isOutsideLeft' is assigned a value but never used
🔇 Additional comments (22)
apps/docs/content/components/select/isClearable.ts (2)
1-15
: LGTM: Well-structured data for the Select componentThe
animals
array is well-defined with unique keys and descriptive labels, making it suitable for use with the Select component. The export statement is correct, allowing easy import in other parts of the application.
74-82
: LGTM: Correct export structureThe export statement is well-structured, allowing for easy import of all components and data in other parts of the application. The use of the spread operator to include all properties from the
react
object is correct and follows modern JavaScript practices.packages/components/select/stories/select.stories.tsx (2)
1009-1017
: LGTM! New "Clearable" story added successfully.The new "Clearable" story effectively demonstrates the
isClearable
functionality, which aligns with the PR objectives. A few observations:
- The
isClearable
prop is correctly set totrue
.- The
endContent
prop is used to add aPetBoldIcon
, which is a nice touch for visual representation.- The story uses the
Template
render function, maintaining consistency with other stories.This addition will be helpful for developers to understand and test the new clearable feature.
Line range hint
1-1017
: Overall, the changes effectively implement the new clearable functionality.The addition of the "Clearable" story successfully demonstrates the new
isClearable
prop for the Select component. This implementation aligns well with the PR objectives and provides a valuable example for developers using the component.Key points:
- The new story correctly showcases the
isClearable
prop.- The use of
endContent
withPetBoldIcon
provides a visual cue for the clearable functionality.- The implementation is consistent with other stories in the file.
Suggestions for further improvement have been made, including demonstrating the
onClear
event handler and considering the story's placement within the file. These enhancements would provide a more comprehensive example of the new functionality and improve the overall organization of the stories.apps/docs/content/docs/components/select.mdx (3)
151-155
: New "Clear Button" section added successfullyThe new section effectively documents the
isClearable
property, explaining its functionality and when the clear button becomes visible. The inclusion of a code demo (isClearable) is helpful for users to understand the implementation.
392-392
: API documentation updated withisClearable
propertyThe
isClearable
property has been correctly added to the Select Props table. The type, description, and default value are accurately documented, maintaining consistency with the existing table format.
413-413
: API documentation updated withonClear
eventThe
onClear
event has been properly added to the Select Events table. The type and description are accurately documented, providing clear information about when the event handler is called. This addition maintains consistency with the existing table format.packages/components/select/src/select.tsx (3)
3-3
: Importing CloseFilledIcon for clear button functionalityThe addition of
CloseFilledIcon
to the imports is appropriate for implementing the clearable feature.
33-33
: Addition of 'isClearable' propThe
isClearable
prop is correctly added and will enable the clear button functionality.
58-64
: Implementation of clear button logicThe
clearButton
is correctly implemented usinguseMemo
, and the conditions ensure it appears only whenisClearable
is true and there are selected items.packages/core/theme/src/components/select.ts (3)
32-48
:clearButton
slot implementation looks goodThe addition of the
clearButton
slot with appropriate utility classes ensures consistent styling and functionality across the component.
174-178
:isClearable
variant added correctlyThe introduction of the
isClearable
variant effectively manages the visibility and opacity of theclearButton
based on the component's state, enhancing the user experience.
226-226
: Appropriate animation settings forclearButton
Adding
transition-opacity
andmotion-reduce:transition-none
to theclearButton
under thedisableAnimation: false
variant ensures smooth transitions while respecting user preferences for reduced motion.packages/components/select/src/use-select.ts (9)
20-20
: Import ofusePress
is appropriateThe import of
usePress
from@react-aria/interactions
is necessary for the clear button functionality.
198-198
: Destructuring ofonClear
is appropriateIncluding
onClear
in the destructured props is necessary for the clear button functionality.
308-317
: Implementation ofhandleClear
function is correctThe
handleClear
function appropriately clears the selection and invokes theonClear
callback.
323-324
: Use ofuseFocusRing
for clear button focus management is appropriateThe focus management for the clear button is correctly implemented using
useFocusRing
.
341-341
: Assignment ofisClearable
prop is correctThe
isClearable
prop is properly assigned fromoriginalProps
.
360-360
: IncludingisClearable
inuseMemo
dependencies is appropriateIncluding
isClearable
in theuseMemo
dependencies ensures that styles are recalculated when this prop changes.Also applies to: 365-372
667-682
: Implementation ofgetClearButtonProps
follows accessibility guidelinesThe
getClearButtonProps
function correctly sets accessibility attributes and manages focus for the clear button.
700-700
: IncludingisClearable
in the returned object is appropriateAdding
isClearable
to the returned object fromuseSelect
makes it available for consumer components.
719-719
: IncludinggetClearButtonProps
in the returned object is appropriateExposing
getClearButtonProps
allows consumer components to access clear button properties.
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.
since clearButton in select theme is introduced, please also update the min theme version in peerDependencies in select package.json.
mark it on hold until the doc structure revamp pr got merged to beta branch |
ok |
5e2bdbc
to
0684bff
Compare
Closes #2239
📝 Description
Added clear button functionality to select component.
Summary by CodeRabbit
New Features
PetBoldIcon
component to enhance the dropdown menu.isClearable
property andonClear
event handler for the Select component.Bug Fixes