Skip to content

feat(core-ui): Add ClearButton to CompositeSelect#111706

Merged
nsdeschenes merged 7 commits intomasterfrom
nd/chore-core-ui-add-clear-button-to-composite-select
Mar 31, 2026
Merged

feat(core-ui): Add ClearButton to CompositeSelect#111706
nsdeschenes merged 7 commits intomasterfrom
nd/chore-core-ui-add-clear-button-to-composite-select

Conversation

@nsdeschenes
Copy link
Copy Markdown
Contributor

@nsdeschenes nsdeschenes commented Mar 27, 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.

Example:

Screenshot 2026-03-27 at 09 27 39

@nsdeschenes nsdeschenes changed the title feat(compactSelect): Add ClearButton to CompositeSelect feat(core-ui): Add ClearButton to CompositeSelect Mar 27, 2026
@github-actions github-actions bot added the Scope: Frontend Automatically applied to PRs that change frontend components label Mar 27, 2026
Comment thread static/app/components/core/compactSelect/composite.tsx Outdated
Copy link
Copy Markdown
Collaborator

@TkDodo TkDodo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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?

nsdeschenes and others added 7 commits March 31, 2026 14:05
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>
@nsdeschenes nsdeschenes force-pushed the nd/chore-core-ui-add-clear-button-to-composite-select branch from f9aa32d to a615723 Compare March 31, 2026 17:05
Copy link
Copy Markdown
Contributor

@cursor cursor bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cursor Bugbot has reviewed your changes and found 1 potential issue.

Fix All in Cursor

Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.

Comment thread static/app/components/core/compactSelect/composite.tsx
@nsdeschenes nsdeschenes merged commit 7dd85b0 into master Mar 31, 2026
74 checks passed
@nsdeschenes nsdeschenes deleted the nd/chore-core-ui-add-clear-button-to-composite-select branch March 31, 2026 17:52
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>
@github-actions github-actions bot locked and limited conversation to collaborators Apr 16, 2026
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

Scope: Frontend Automatically applied to PRs that change frontend components

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants