From a3b60f74b09863199dd6fb05987e3a0d910931ba Mon Sep 17 00:00:00 2001
From: TkDodo <dominik.dorfmeister@sentry.io>
Date: Thu, 20 Nov 2025 10:37:27 +0100
Subject: [PATCH 1/2] ref: compositeSelect gets a required trigger

---
 .../core/compactSelect/composite.spec.tsx     | 21 ++++++++++------
 .../core/compactSelect/composite.stories.tsx  | 24 +++++++++----------
 .../core/compactSelect/composite.tsx          |  4 +++-
 .../overviewTimeline/sortSelector.tsx         | 17 ++++++++-----
 .../components/membersFilter.tsx              |  7 +++++-
 5 files changed, 46 insertions(+), 27 deletions(-)

diff --git a/static/app/components/core/compactSelect/composite.spec.tsx b/static/app/components/core/compactSelect/composite.spec.tsx
index c1a55a70f630bd..c7012cc10d54a3 100644
--- a/static/app/components/core/compactSelect/composite.spec.tsx
+++ b/static/app/components/core/compactSelect/composite.spec.tsx
@@ -5,7 +5,10 @@ import {CompositeSelect} from './composite';
 describe('CompactSelect', () => {
   it('renders', async () => {
     render(
-      <CompositeSelect menuTitle="Menu title">
+      <CompositeSelect
+        menuTitle="Menu title"
+        trigger={props => <button {...props}>Open menu</button>}
+      >
         <CompositeSelect.Region
           label="Region 1"
           value="choice_one"
@@ -66,7 +69,7 @@ describe('CompactSelect', () => {
 
   it('renders disabled trigger button', async () => {
     render(
-      <CompositeSelect disabled>
+      <CompositeSelect disabled trigger={props => <button {...props}>Open menu</button>}>
         <CompositeSelect.Region
           label="Region 1"
           onChange={jest.fn()}
@@ -85,7 +88,7 @@ describe('CompactSelect', () => {
   // focus state. This test ensures that focus moves seamlessly between regions.
   it('manages focus between regions', async () => {
     render(
-      <CompositeSelect>
+      <CompositeSelect trigger={props => <button {...props}>Open menu</button>}>
         <CompositeSelect.Region
           label="Region 1"
           onChange={jest.fn()}
@@ -142,7 +145,7 @@ describe('CompactSelect', () => {
     const region1Mock = jest.fn();
     const region2Mock = jest.fn();
     render(
-      <CompositeSelect>
+      <CompositeSelect trigger={props => <button {...props}>Open menu</button>}>
         <CompositeSelect.Region
           label="Region 1"
           onChange={region1Mock}
@@ -214,7 +217,11 @@ describe('CompactSelect', () => {
 
   it('can search', async () => {
     render(
-      <CompositeSelect searchable searchPlaceholder="Search placeholder…">
+      <CompositeSelect
+        searchable
+        searchPlaceholder="Search placeholder…"
+        trigger={props => <button {...props}>Open menu</button>}
+      >
         <CompositeSelect.Region
           label="Region 1"
           onChange={jest.fn()}
@@ -256,7 +263,7 @@ describe('CompactSelect', () => {
 
   it('works with grid lists', async () => {
     render(
-      <CompositeSelect grid>
+      <CompositeSelect grid trigger={props => <button {...props}>Open menu</button>}>
         <CompositeSelect.Region
           label="Region 1"
           value="choice_one"
@@ -322,7 +329,7 @@ describe('CompactSelect', () => {
   it('can use numbers as values', async () => {
     const onChange = jest.fn();
     render(
-      <CompositeSelect>
+      <CompositeSelect trigger={props => <button {...props}>Open menu</button>}>
         <CompositeSelect.Region
           label="Region 1"
           value={1}
diff --git a/static/app/components/core/compactSelect/composite.stories.tsx b/static/app/components/core/compactSelect/composite.stories.tsx
index 31adcebc1c53c8..e257be6afa4769 100644
--- a/static/app/components/core/compactSelect/composite.stories.tsx
+++ b/static/app/components/core/compactSelect/composite.stories.tsx
@@ -1,5 +1,7 @@
 import {Fragment, useState} from 'react';
 
+import {Button} from '@sentry/scraps/button';
+
 import {Flex} from 'sentry/components/core/layout';
 import {IconSentry, IconStar} from 'sentry/icons';
 import * as Storybook from 'sentry/stories';
@@ -78,12 +80,11 @@ export default Storybook.story('CompositeSelect', story => {
           <code>options</code>.
         </p>
         <CompositeSelect
-          triggerProps={{
-            children: 'Select an Option',
-            showChevron: false,
-            icon: <IconSentry />,
-            size: 'sm',
-          }}
+          trigger={props => (
+            <Button icon={<IconSentry />} size="sm" {...props}>
+              Select an Option
+            </Button>
+          )}
         >
           <CompositeSelect.Region
             label="Month"
@@ -125,12 +126,11 @@ export default Storybook.story('CompositeSelect', story => {
 
         <Flex gap="md">
           <CompositeSelect
-            triggerProps={{
-              size: 'sm',
-              icon: <IconSentry />,
-              children: 'Composite Select Single Select',
-              showChevron: false,
-            }}
+            trigger={props => (
+              <Button icon={<IconSentry />} size="sm" {...props}>
+                Composite Select Single Select
+              </Button>
+            )}
           >
             <CompositeSelect.Region
               label="Mains"
diff --git a/static/app/components/core/compactSelect/composite.tsx b/static/app/components/core/compactSelect/composite.tsx
index 487ecf13f672f9..68d140ef4d4752 100644
--- a/static/app/components/core/compactSelect/composite.tsx
+++ b/static/app/components/core/compactSelect/composite.tsx
@@ -65,13 +65,15 @@ type CompositeSelectChild =
   | null
   | undefined;
 
-export interface CompositeSelectProps extends ControlProps {
+export interface CompositeSelectProps
+  extends Omit<ControlProps, 'triggerProps' | 'trigger'> {
   /**
    * The "regions" inside this composite selector. Each region functions as a separated,
    * self-contained selectable list (each renders as a `ul` with its own list state)
    * whose values don't interfere with one another.
    */
   children: CompositeSelectChild | CompositeSelectChild[];
+  trigger: NonNullable<ControlProps['trigger']>;
 }
 
 /**
diff --git a/static/app/views/insights/crons/components/overviewTimeline/sortSelector.tsx b/static/app/views/insights/crons/components/overviewTimeline/sortSelector.tsx
index 1a084508a403a6..ec92c2f818ed1f 100644
--- a/static/app/views/insights/crons/components/overviewTimeline/sortSelector.tsx
+++ b/static/app/views/insights/crons/components/overviewTimeline/sortSelector.tsx
@@ -3,6 +3,7 @@ import {
   type CompositeSelectProps,
 } from 'sentry/components/core/compactSelect/composite';
 import type {SelectOption} from 'sentry/components/core/compactSelect/types';
+import DropdownButton from 'sentry/components/dropdownButton';
 import {IconSort} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {useLocation} from 'sentry/utils/useLocation';
@@ -77,12 +78,16 @@ export function SortSelector({onChangeOrder, onChangeSort, order, sort, size}: P
   return (
     <CompositeSelect
       size={size}
-      triggerProps={{
-        prefix: t('Sort By'),
-        'aria-label': t('Sort Cron Monitors'),
-        icon: <IconSort />,
-        children: `${label} \u2014 ${orderLabel}`,
-      }}
+      trigger={props => (
+        <DropdownButton
+          aria-label={t('Sort Cron Monitors')}
+          icon={<IconSort />}
+          prefix={t('Sort By')}
+          {...props}
+        >
+          {`${label} \u2014 ${orderLabel}`}
+        </DropdownButton>
+      )}
     >
       <CompositeSelect.Region
         aria-label={t('Sort Options')}
diff --git a/static/app/views/settings/organizationMembers/components/membersFilter.tsx b/static/app/views/settings/organizationMembers/components/membersFilter.tsx
index 87883590c3103a..a6436c318adc97 100644
--- a/static/app/views/settings/organizationMembers/components/membersFilter.tsx
+++ b/static/app/views/settings/organizationMembers/components/membersFilter.tsx
@@ -1,5 +1,6 @@
 import type {SelectOption} from 'sentry/components/core/compactSelect';
 import {CompositeSelect} from 'sentry/components/core/compactSelect/composite';
+import DropdownButton from 'sentry/components/dropdownButton';
 import {IconSliders} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import type {OrgRole} from 'sentry/types/organization';
@@ -54,7 +55,11 @@ function MembersFilter({roles, query, onChange}: Props) {
 
   return (
     <CompositeSelect
-      triggerProps={{icon: <IconSliders />, size: 'md', children: t('Filter')}}
+      trigger={props => (
+        <DropdownButton {...props} size="md" icon={<IconSliders />}>
+          {t('Filter')}
+        </DropdownButton>
+      )}
       maxMenuHeight="22rem"
       size="sm"
     >

From 8055756de205597506743d122ab168b3f60106c4 Mon Sep 17 00:00:00 2001
From: TkDodo <dominik.dorfmeister@sentry.io>
Date: Thu, 20 Nov 2025 10:43:10 +0100
Subject: [PATCH 2/2] ref: fix tests

we no longer do trigger label updating
---
 static/app/components/core/compactSelect/composite.spec.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/static/app/components/core/compactSelect/composite.spec.tsx b/static/app/components/core/compactSelect/composite.spec.tsx
index c7012cc10d54a3..20a67debd506e8 100644
--- a/static/app/components/core/compactSelect/composite.spec.tsx
+++ b/static/app/components/core/compactSelect/composite.spec.tsx
@@ -174,9 +174,8 @@ describe('CompactSelect', () => {
     // select Choice One
     await userEvent.click(screen.getByRole('option', {name: 'Choice One'}));
 
-    // Region 1's callback is called, and trigger label is updated
+    // Region 1's callback is called
     expect(region1Mock).toHaveBeenCalledWith({value: 'choice_one', label: 'Choice One'});
-    expect(screen.getByRole('button', {name: 'Choice One'})).toBeInTheDocument();
 
     // open the menu again
     await userEvent.click(screen.getByRole('button'));
@@ -212,7 +211,6 @@ describe('CompactSelect', () => {
     expect(region2Mock).toHaveBeenCalledWith([
       {value: 'choice_three', label: 'Choice Three'},
     ]);
-    expect(screen.getByRole('button', {name: 'Choice One +1'})).toBeInTheDocument();
   });
 
   it('can search', async () => {