fix(topbar): do not use ToggleButton in drawer (#235)

AxisCommunications · Mar 22, 2024 · 7e4ba4f · 7e4ba4f
1 parent c243ebb
commit 7e4ba4f
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 5 deletions.
diff --git a/components/topbar/src/application-drawer.styles.ts b/components/topbar/src/application-drawer.styles.ts
@@ -105,6 +105,10 @@ export const useApplicationDrawrStyles = makeStyles({
     justifyContent: "flex-start",
     paddingLeft: tokens.spacingHorizontalSNudge,
   },
+  contentButtonChecked: {
+    color: tokens.colorNeutralForeground2Selected,
+    backgroundColor: tokens.colorSubtleBackgroundSelected,
+  },
   linkWrapper: {
     display: "flex",
     justifyContent: "flex-end",

diff --git a/components/topbar/src/application-drawer.tsx b/components/topbar/src/application-drawer.tsx
@@ -13,7 +13,6 @@ import {
   DrawerHeader,
   Link,
   mergeClasses,
-  ToggleButton,
   tokens,
 } from "@fluentui/react-components";
 import { useApplicationDrawrStyles as useApplicationDrawerStyles } from "./application-drawer.styles";
@@ -154,10 +153,12 @@ const SingleApplication = ({
   const styles = useApplicationDrawerStyles();
 
   return (
-    <ToggleButton
-      checked={application.id === currentSelectionId}
+    <Button
       data-testid={`application-drawer-item-${application.id}`}
-      className={styles.contentButton}
+      className={mergeClasses(
+        styles.contentButton,
+        application.id === currentSelectionId && styles.contentButtonChecked
+      )}
       appearance="subtle"
       icon={iconConverter(
         application.icon,
@@ -169,7 +170,7 @@ const SingleApplication = ({
       <Body1 className={styles.applicationButton}>
         {application.label}
       </Body1>
-    </ToggleButton>
+    </Button>
   );
 };