feat: add a clear button to FilterPicker, Select, ComboBox #787
Conversation
🦋 Changeset detectedLatest commit: d0ed1cb 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 GitHub.
|
📦 NPM canary releaseDeployed canary version 0.0.0-canary-45e7944. |
There was a problem hiding this comment.
Pull Request Overview
This PR adds a clear button feature to FilterPicker, Select, and ComboBox components, enabling users to reset their selections. It also redesigns the clear button in the SearchInput component for consistency.
- Adds
isClearableprop to FilterPicker, Select, and ComboBox components - Implements consistent clear button styling and behavior across components
- Refactors TextInput styling to support the new clear button design
Reviewed Changes
Copilot reviewed 10 out of 10 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| src/components/fields/TextInput/TextInputBase.tsx | Refactors height styles using a new $size variable for cleaner size management |
| src/components/fields/Select/Select.tsx | Adds clear button functionality with isClearable prop and proper state management |
| src/components/fields/Select/Select.stories.tsx | Adds story documentation for the new clearable feature |
| src/components/fields/SearchInput/SearchInput.tsx | Updates clear button styling to match the new design pattern |
| src/components/fields/FilterPicker/FilterPicker.tsx | Implements clear button with comprehensive selection clearing logic |
| src/components/fields/FilterPicker/FilterPicker.stories.tsx | Adds story example for clearable FilterPicker |
| src/components/fields/ComboBox/ComboBox.tsx | Adds clear functionality supporting both custom values and selection modes |
| src/components/fields/ComboBox/ComboBox.stories.tsx | Documents the clearable feature in stories |
| src/components/content/ItemBase/ItemBase.tsx | Adds grid layout support for items with icons but no other content |
| .changeset/modern-tigers-impress.md | Documents the feature addition in the changelog |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
🧪 Storybook is successfully deployed!
|
🏋️ Size limit report
Click here if you want to find out what is changed in this build |
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
There was a problem hiding this comment.
Pull Request Overview
Copilot reviewed 10 out of 10 changed files in this pull request and generated 2 comments.
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
| let validationIcon = isInvalid ? InvalidIcon : ValidIcon; | ||
| let validation = cloneElement(validationIcon); | ||
|
|
||
| // Clear button logic |
There was a problem hiding this comment.
The logic for determining hasValue is complex and warrants explanation. Consider adding a comment explaining why custom value mode checks input value while regular mode checks selected key.
| // Clear button logic | |
| // Clear button logic | |
| // In custom value mode, the user can type arbitrary input, so we check if the input field is non-empty. | |
| // In regular mode, only selections from the list are allowed, so we check if a key is selected. |
| // Clear function | ||
| let clearValue = useEvent(() => { | ||
| // Always clear input value in state so UI resets to placeholder | ||
| state.setInputValue(''); | ||
| // Notify external input value only when custom value mode is enabled | ||
| if (props.allowsCustomValue) { | ||
| props.onInputChange?.(''); | ||
| } | ||
| props.onSelectionChange?.(null); | ||
| state.setSelectedKey(null); |
There was a problem hiding this comment.
The clear function handles two different modes (custom value vs regular selection) with different notification behaviors. Consider adding a comment explaining why onInputChange is only called in custom value mode.
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
No description provided.