From 7e4ba4f09c7153e2deadc21dec26f3799993d0c5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20Wedell?= <bjorwe@axis.com>
Date: Fri, 22 Mar 2024 16:39:06 +0100
Subject: [PATCH] fix(topbar): do not use ToggleButton in drawer (#235)

---
 components/topbar/src/application-drawer.styles.ts |  4 ++++
 components/topbar/src/application-drawer.tsx       | 11 ++++++-----
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/components/topbar/src/application-drawer.styles.ts b/components/topbar/src/application-drawer.styles.ts
index 68747e9c..038152c4 100644
--- 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
index 783cfc3c..622dae2e 100644
--- 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>
   );
 };