Use pretty icon with icon for unique suspenders toggle

Author: sebmarkbage

packages/react-devtools-shared/src/devtools/views/ButtonIcon.js

@@ -40,6 +40,8 @@ export type IconType =
   | 'panel-right-open'
   | 'panel-bottom-open'
   | 'panel-bottom-close'
+  | 'filter-on'
+  | 'filter-off'
   | 'error'
   | 'suspend'
   | 'undo'
@@ -153,6 +155,14 @@ export default function ButtonIcon({className = '', type}: Props): React.Node {
       pathData = PATH_MATERIAL_PANEL_BOTTOM_CLOSE;
       viewBox = panelIcons;
       break;
+    case 'filter-on':
+      pathData = PATH_MATERIAL_FILTER_ALT;
+      viewBox = panelIcons;
+      break;
+    case 'filter-off':
+      pathData = PATH_MATERIAL_FILTER_ALT_OFF;
+      viewBox = panelIcons;
+      break;
     case 'suspend':
       pathData = PATH_SUSPEND;
       break;
@@ -338,3 +348,13 @@ const PATH_MATERIAL_PANEL_BOTTOM_OPEN = `
 const PATH_MATERIAL_PANEL_BOTTOM_CLOSE = `
   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
 `;
+
+// Source: Material Design Icons filter_alt
+const PATH_MATERIAL_FILTER_ALT = `
+  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
+`;
+
+// Source: Material Design Icons filter_alt_off
+const PATH_MATERIAL_FILTER_ALT_OFF = `
+  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
+`;

packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.js

@@ -36,7 +36,7 @@ import {
 import {StoreContext, OptionsContext} from '../context';
 import {TreeDispatcherContext} from '../Components/TreeContext';
 import Button from '../Button';
-import Tooltip from '../Components/reach-ui/tooltip';
+import Toggle from '../Toggle';
 import typeof {
   SyntheticEvent,
   SyntheticPointerEvent,
@@ -75,9 +75,8 @@ function ToggleUniqueSuspenders() {
     SuspenseTreeStateContext,
   );
 
-  function handleToggleUniqueSuspenders(event: SyntheticEvent) {
-    const nextUniqueSuspendersOnly = (event.currentTarget as HTMLInputElement)
-      .checked;
+  function handleToggleUniqueSuspenders() {
+    const nextUniqueSuspendersOnly = !uniqueSuspendersOnly;
     const nextTimeline =
       rootID === null
         ? []
@@ -93,13 +92,12 @@ function ToggleUniqueSuspenders() {
   }
 
   return (
-    <Tooltip label="Only include boundaries with unique suspenders">
-      <input
-        checked={uniqueSuspendersOnly}
-        type="checkbox"
-        onChange={handleToggleUniqueSuspenders}
-      />
-    </Tooltip>
+    <Toggle
+      isChecked={uniqueSuspendersOnly}
+      onChange={handleToggleUniqueSuspenders}
+      title={'Only include boundaries with unique suspenders'}>
+      <ButtonIcon type={uniqueSuspendersOnly ? 'filter-on' : 'filter-off'} />
+    </Toggle>
   );
 }
 
@@ -429,9 +427,9 @@ function SuspenseTab(_: {}) {
               <div className={styles.SuspenseBreadcrumbs}>
                 <SuspenseBreadcrumbs />
               </div>
-              <ToggleUniqueSuspenders />
               <SelectRoot />
-              {!hideSettings && <div className={styles.VRule} />}
+              <div className={styles.VRule} />
+              <ToggleUniqueSuspenders />
               {!hideSettings && <SettingsModalContextToggle />}
               <ToggleInspectedElement
                 dispatch={dispatch}