feat(core-ui): Add ClearButton to CompositeSelect#111706
Merged
nsdeschenes merged 7 commits intomasterfrom Mar 31, 2026
Merged
Conversation
TkDodo
approved these changes
Mar 31, 2026
Collaborator
TkDodo
left a comment
There was a problem hiding this comment.
looks good, I just saw that in your aggregateDropdown, there are a lot of type assertions in CompositeSelect.Region. I just removed them all and there’s no error:
if (isMulti) {
return (
<CompositeSelect.Region
key={groupKey}
label={group.label}
multiple
options={group.options}
value={activeValues}
onChange={handleChange}
/>
);
}
return (
<CompositeSelect.Region
key={groupKey}
label={group.label}
options={group.options}
value={activeValues[0]}
onChange={opt => handleChange([opt])}
/>
);
})}
feels like a win for simplicity?
Add CompositeSelect.ClearButton as a static property, following the same pattern as CompositeSelect.Region. Renders a styled 'Clear' button that delegates all behavior to the caller's onClick — no auto-close, matching CompactSelect's built-in clear button behavior. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Add a Clear Button section to the CompositeSelect story with a live demo showing conditional rendering and the correct usage pattern. Update the compound components list and clarify that the menu stays open after clearing, matching CompactSelect's behavior. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Add a clear button to the metric aggregate selector's menu header. Hide it when the current selection is already the default value for the metric type, since clearing would be a no-op. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…lect Instead of maintaining a duplicate styled component in composite.tsx, re-export the ClearButton from control.tsx so both CompactSelect and CompositeSelect share the same implementation. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Add SelectKey type import and annotate useState calls with explicit types to resolve TS2322 and TS2345 errors surfaced by typecheck:mdx. Co-Authored-By: Claude Sonnet 4 <noreply@example.com>
Replace TypeScript-syntax state annotations with JS-compatible
initializers that TypeScript can still infer correctly. MDX files are
parsed by acorn which does not support TypeScript syntax, so inline type
annotations caused eslint parse errors.
Use useState('') for month (infers string via generic inference from
options) and tagOptions.slice(0,0).map(o => o.value) for tags (infers
string[] from the mapped options array).
Co-Authored-By: Claude Sonnet 4 <noreply@example.com>
f9aa32d to
a615723
Compare
Contributor
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 1 potential issue.
Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
dashed
pushed a commit
that referenced
this pull request
Apr 1, 2026
The current `CompositeSelect` component doesn't seem to have an easy way to hook up clearing selections, which is understandable since there are multi-selection possibilities so to tackle this I'd like to add in a button that is styled to match that of the `CompactSelect`'s clear button. --------- Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com> Co-authored-by: Claude Sonnet 4 <noreply@example.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 subscribe to this conversation on GitHub.
Already have an account?
Sign in.
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.

The current
CompositeSelectcomponent doesn't seem to have an easy way to hook up clearing selections, which is understandable since there are multi-selection possibilities so to tackle this I'd like to add in a button that is styled to match that of theCompactSelect's clear button.Example: