[DevTools] Use pretty icon with icon for unique suspenders toggle (#34625)
Stacked on #34624. <img width="638" height="170" alt="Screenshot 2025-09-27 at 12 57 10 PM" src="https://github.com/user-attachments/assets/f67023b1-e7be-4252-93ab-6302bc63ac26" /> <img width="641" height="250" alt="Screenshot 2025-09-27 at 12 57 21 PM" src="https://github.com/user-attachments/assets/f96a9b48-c6f4-406f-a0ea-b3da288411b5" />
Sebastian Markbåge committed
Sep 28, 2025 at 19:13 UTC
e2d19bf6a9549db38be6502aab83a1a0ca249e37
3 files changed
+33
-15
packages/react-devtools-shared/src/devtools/views/ButtonIcon.js
+20
@@ -40,6 +40,8 @@ export type IconType =
40
| 'panel-right-open'
41
| 'panel-bottom-open'
42
| 'panel-bottom-close'
43
+ | 'filter-on'
44
+ | 'filter-off'
45
| 'error'
46
| 'suspend'
47
| 'undo'
@@ -153,6 +155,14 @@ export default function ButtonIcon({className = '', type}: Props): React.Node {
155
pathData = PATH_MATERIAL_PANEL_BOTTOM_CLOSE;
156
viewBox = panelIcons;
157
break;
158
+ case 'filter-on':
159
+ pathData = PATH_MATERIAL_FILTER_ALT;
160
+ viewBox = panelIcons;
161
+ break;
162
+ case 'filter-off':
163
+ pathData = PATH_MATERIAL_FILTER_ALT_OFF;
164
+ viewBox = panelIcons;
165
+ break;
166
case 'suspend':
167
pathData = PATH_SUSPEND;
168
break;
@@ -338,3 +348,13 @@ const PATH_MATERIAL_PANEL_BOTTOM_OPEN = `
348
const PATH_MATERIAL_PANEL_BOTTOM_CLOSE = `
349
m506-508 102-110q8-8.82 3.5-19.41T595-648H365q-12.25 0-16.62 10.5Q344-627 352-618l102 110q11.18 11 26.09 11T506-508Zm243-308q27.64 0 47.32 19.68T816-749v538q0 27.64-19.68 47.32T749-144H211q-27.64 0-47.32-19.68T144-211v-538q0-27.64 19.68-47.32T211-816h538ZM216-336v120h528v-120H216Zm528-72v-336H216v336h528Zm-528 72v120-120Z
350
`;
351
+
352
+// Source: Material Design Icons filter_alt
353
+const PATH_MATERIAL_FILTER_ALT = `
354
+ M440-160q-17 0-28.5-11.5T400-200v-240L168-736q-15-20-4.5-42t36.5-22h560q26 0 36.5 22t-4.5 42L560-440v240q0 17-11.5 28.5T520-160h-80Zm40-308 198-252H282l198 252Zm0 0Z
355
+`;
356
+
357
+// Source: Material Design Icons filter_alt_off
358
+const PATH_MATERIAL_FILTER_ALT_OFF = `
359
+ m592-481-57-57 143-182H353l-80-80h487q25 0 36 22t-4 42L592-481ZM791-56 560-287v87q0 17-11.5 28.5T520-160h-80q-17 0-28.5-11.5T400-200v-247L56-791l56-57 736 736-57 56ZM535-538Z
360
+`;
packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.css
+2
-2
@@ -116,7 +116,7 @@
116
flex: 0 0 42px;
117
padding: 0.5rem;
118
display: flex;
119
- align-items: flex-start;
119
+ align-items: center;
120
border-bottom: 1px solid var(--color-border);
121
}
122
@@ -137,5 +137,5 @@
137
padding: 0.5rem;
138
display: grid;
139
grid-template-columns: 1fr auto;
140
- align-items: flex-start;
140
+ align-items: center;
141
}
packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.js
+11
-13
@@ -36,7 +36,7 @@ import {
36
import {StoreContext, OptionsContext} from '../context';
37
import {TreeDispatcherContext} from '../Components/TreeContext';
38
import Button from '../Button';
39
-import Tooltip from '../Components/reach-ui/tooltip';
39
+import Toggle from '../Toggle';
40
import typeof {
41
SyntheticEvent,
42
SyntheticPointerEvent,
@@ -75,9 +75,8 @@ function ToggleUniqueSuspenders() {
75
SuspenseTreeStateContext,
76
);
77
78
- function handleToggleUniqueSuspenders(event: SyntheticEvent) {
79
- const nextUniqueSuspendersOnly = (event.currentTarget as HTMLInputElement)
80
- .checked;
78
+ function handleToggleUniqueSuspenders() {
79
+ const nextUniqueSuspendersOnly = !uniqueSuspendersOnly;
80
const nextTimeline =
81
rootID === null
82
? []
@@ -93,13 +92,12 @@ function ToggleUniqueSuspenders() {
92
}
93
94
return (
96
- <Tooltip label="Only include boundaries with unique suspenders">
97
- <input
98
- checked={uniqueSuspendersOnly}
99
- type="checkbox"
100
- onChange={handleToggleUniqueSuspenders}
101
- />
102
- </Tooltip>
95
+ <Toggle
96
+ isChecked={uniqueSuspendersOnly}
97
+ onChange={handleToggleUniqueSuspenders}
98
+ title={'Only include boundaries with unique suspenders'}>
99
+ <ButtonIcon type={uniqueSuspendersOnly ? 'filter-on' : 'filter-off'} />
100
+ </Toggle>
101
);
102
}
103
@@ -429,9 +427,9 @@ function SuspenseTab(_: {}) {
427
<div className={styles.SuspenseBreadcrumbs}>
428
<SuspenseBreadcrumbs />
429
</div>
432
- <ToggleUniqueSuspenders />
430
<SelectRoot />
434
- {!hideSettings && <div className={styles.VRule} />}
431
+ <div className={styles.VRule} />
432
+ <ToggleUniqueSuspenders />
433
{!hideSettings && <SettingsModalContextToggle />}
434
<ToggleInspectedElement
435
dispatch={dispatch}