fix(topbar): style updates to application drawer (#195)

AxisCommunications · Feb 13, 2024 · 549b673 · 549b673
1 parent cf95617
commit 549b673
Show file tree

Hide file tree

Showing 5 changed files with 120 additions and 58 deletions.
diff --git a/components/topbar/src/application-drawer.styles.ts b/components/topbar/src/application-drawer.styles.ts
@@ -1,51 +1,91 @@
 import { makeStyles, shorthands, tokens } from "@fluentui/react-components";
 
 export const useApplicationDrawrStyles = makeStyles({
+  drawer: {
+    ...shorthands.borderRight(0),
+  },
   header: {
     display: "flex",
     flexDirection: "row",
     justifyContent: "space-between",
-    backgroundColor: tokens.colorNeutralBackground5,
+    backgroundColor: tokens.colorNeutralBackground3,
     color: tokens.colorNeutralForeground3,
     ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalM),
   },
+  body: {
+    backgroundColor: tokens.colorNeutralBackground2,
+    backgroundImage: "none",
+  },
   headerTitle: {
     display: "flex",
     flexDirection: "row",
     alignItems: "center",
     ...shorthands.gap(tokens.spacingHorizontalS),
   },
-  iconAndText: {
+  drawerTriggerButton: {
+    paddingLeft: "0px",
+    paddingTop: "0px",
+    paddingBottom: "0px",
+    ...shorthands.borderWidth(0),
+    ...shorthands.borderRadius(
+      tokens.borderRadiusXLarge,
+      tokens.borderRadiusLarge,
+      tokens.borderRadiusLarge,
+      tokens.borderRadiusXLarge
+    ),
+  },
+  drawerTriggerApplication: {
     fontSize: "1.8em",
     display: "flex",
     flexDirection: "row",
     alignItems: "center",
     ...shorthands.gap(tokens.spacingHorizontalS),
     ...shorthands.padding(tokens.spacingVerticalXS, tokens.spacingHorizontalM),
   },
+  drawerTriggerApplicationIcon: {
+    color: tokens.colorNeutralForeground3,
+    "&:hover": {
+      color: tokens.colorNeutralForeground2BrandHover,
+    },
+  },
+  drawerTriggerApplicationIconHovered: {
+    color: tokens.colorNeutralForeground2BrandHover,
+  },
+  drawerTriggerApplicationText: {
+    color: tokens.colorNeutralForeground3,
+  },
+  applicationGroupTitle: {
+    fontSize: "1.4em",
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    ...shorthands.gap(tokens.spacingHorizontalS),
+    ...shorthands.padding(tokens.spacingVerticalXS, tokens.spacingHorizontalS),
+  },
   applicationGroupTitleIcon: {
     color: tokens.colorNeutralForeground2,
   },
   applicationGroupTitleText: {
     color: tokens.colorNeutralForeground4,
   },
-  currentSpplicationGroupTitleIcon: {
-    color: tokens.colorNeutralForeground3,
-  },
-  currentApplicationGroupTitleText: {
-    color: tokens.colorNeutralForeground3,
-  },
   applicationButton: {
     paddingLeft: tokens.spacingHorizontalXXS,
   },
   content: {
     display: "flex",
     flexDirection: "column",
-    alignItems: "flex-start",
     width: "100%",
-    ...shorthands.gap(tokens.spacingVerticalM),
+    ...shorthands.gap(tokens.spacingVerticalS),
     paddingTop: tokens.spacingVerticalXXXL,
   },
+  contentGroup: {
+    display: "flex",
+    flexDirection: "column",
+    width: "100%",
+  },
+  contentDivider: {
+    paddingTop: tokens.spacingVerticalS,
+  },
   contentChildren: {
     display: "flex",
     flexDirection: "column",
@@ -57,9 +97,7 @@ export const useApplicationDrawrStyles = makeStyles({
   contentButton: {
     width: "100%",
     justifyContent: "flex-start",
-  },
-  selectedContentButton: {
-    backgroundColor: tokens.colorNeutralBackground2Hover,
+    paddingLeft: tokens.spacingHorizontalSNudge,
   },
   linkWrapper: {
     display: "flex",

diff --git a/components/topbar/src/application-drawer.tsx b/components/topbar/src/application-drawer.tsx
@@ -1,6 +1,5 @@
 import { ArrowRightRegular, Dismiss20Regular } from "@fluentui/react-icons";
-import React, { Fragment, useState } from "react";
-
+import React, { useState } from "react";
 import { ApplicationArea } from "./top-bar.types";
 import { useTranslation } from "./translation-context";
 import {
@@ -14,6 +13,7 @@ import {
   DrawerHeader,
   Link,
   mergeClasses,
+  ToggleButton,
   tokens,
 } from "@fluentui/react-components";
 import { useApplicationDrawrStyles as useApplicationDrawerStyles } from "./application-drawer.styles";
@@ -29,22 +29,47 @@ import {
 } from "./application-drawer.types";
 import { useApplicationStyles } from "./application.styles";
 
-const CurrentApplication = ({ application }: {
-  application: SingleApplicationDrawerContent;
-}): JSX.Element => {
+const DrawerTrigger = (
+  { setIsOpen, applicationArea, currentSelection }: {
+    setIsOpen: (isOpen: boolean) => void;
+    applicationArea: ApplicationArea;
+    currentSelection: SingleApplicationDrawerContent | undefined;
+  }
+) => {
   const styles = useApplicationDrawerStyles();
+  const [hover, setHover] = useState(false);
 
   return (
-    <div className={styles.iconAndText}>
-      <div
-        className={styles.currentSpplicationGroupTitleIcon}
-      >
-        {application.icon}
-      </div>
-      <Body1Strong className={styles.currentApplicationGroupTitleText}>
-        {application.label}
-      </Body1Strong>
-    </div>
+    <Button
+      className={styles.drawerTriggerButton}
+      data-testid="application-drawer-trigger"
+      appearance="subtle"
+      onClick={() => setIsOpen(true)}
+      onMouseEnter={() => setHover(true)}
+      onMouseLeave={() => setHover(false)}
+    >
+      {<ApplicationAreaIcon applicationArea={applicationArea} />}
+      <Divider vertical style={{ padding: "0 0 0 12px" }}></Divider>
+      {currentSelection
+        ? (
+          <div className={styles.drawerTriggerApplication}>
+            <div
+              className={mergeClasses(
+                styles.drawerTriggerApplicationIcon,
+                hover && styles.drawerTriggerApplicationIconHovered
+              )}
+            >
+              {currentSelection.icon}
+            </div>
+            <Body1Strong
+              className={styles.drawerTriggerApplicationText}
+            >
+              {currentSelection.label}
+            </Body1Strong>
+          </div>
+        )
+        : null}
+    </Button>
   );
 };
 
@@ -55,7 +80,7 @@ const ApplicationGroupTitle = ({ application }: {
   const appStyles = useApplicationStyles();
 
   return (
-    <div className={styles.iconAndText}>
+    <div className={styles.applicationGroupTitle}>
       <div
         className={mergeClasses(
           styles.applicationGroupTitleIcon,
@@ -125,15 +150,12 @@ const SingleApplication = ({
   applicationArea: ApplicationArea;
 }): JSX.Element => {
   const styles = useApplicationDrawerStyles();
-  const buttonStyle = mergeClasses(
-    styles.contentButton,
-    application.id === currentSelectionId && styles.selectedContentButton
-  );
 
   return (
-    <Button
+    <ToggleButton
+      checked={application.id === currentSelectionId}
       data-testid={`application-drawer-item-${application.id}`}
-      className={buttonStyle}
+      className={styles.contentButton}
       appearance="subtle"
       icon={iconConverter(
         application.icon,
@@ -145,7 +167,7 @@ const SingleApplication = ({
       <Body1 className={styles.applicationButton}>
         {application.label}
       </Body1>
-    </Button>
+    </ToggleButton>
   );
 };
 
@@ -205,18 +227,17 @@ export const ApplicationDrawer = ({
 
   return (
     <>
-      <Button
-        data-testid="application-drawer-trigger"
-        appearance="subtle"
-        onClick={() => setIsOpen(true)}
+      <DrawerTrigger
+        applicationArea={applicationArea}
+        currentSelection={currentSelection}
+        setIsOpen={setIsOpen}
+      />
+
+      <Drawer
+        className={styles.drawer}
+        open={isOpen}
+        onOpenChange={(_, { open }) => setIsOpen(open)}
       >
-        {<ApplicationAreaIcon applicationArea={applicationArea} />}
-        <Divider vertical style={{ padding: "0 0 0 12px" }}></Divider>
-        {currentSelection
-          ? <CurrentApplication application={currentSelection} />
-          : null}
-      </Button>
-      <Drawer open={isOpen} onOpenChange={(_, { open }) => setIsOpen(open)}>
         <DrawerHeader className={styles.header}>
           <div className={styles.headerTitle}>
             <ApplicationAreaIcon applicationArea={applicationArea} />
@@ -234,7 +255,7 @@ export const ApplicationDrawer = ({
           />
         </DrawerHeader>
 
-        <DrawerBody>
+        <DrawerBody className={styles.body}>
           {link && (
             <div className={styles.linkWrapper}>
               <Link
@@ -249,10 +270,10 @@ export const ApplicationDrawer = ({
           )}
           <div className={styles.content}>
             {title}
-            <Divider></Divider>
+            <Divider />
             {content?.map((c) => {
               return (
-                <Fragment key={c.id}>
+                <div className={styles.contentGroup} key={c.id}>
                   {c.children
                     ? (
                       <ApplicationWithChildren
@@ -270,8 +291,8 @@ export const ApplicationDrawer = ({
                         applicationArea={applicationArea}
                       />
                     )}
-                  <Divider></Divider>
-                </Fragment>
+                  <Divider className={styles.contentDivider} />
+                </div>
               );
             })}
           </div>

diff --git a/components/topbar/src/application-drawer.types.ts b/components/topbar/src/application-drawer.types.ts
@@ -4,8 +4,11 @@ export type ApplicationDrawerContent = SingleApplicationDrawerContent & {
 
 export type SingleApplicationDrawerContent = {
   id: string;
-  /** For proper rendering, this should be a bundled filled and unfilled version of an icon.
-   *  Created with bundleIcon(). */
+  /**
+   * Size of icon shall be 16 for content with children and 20 for content without children.
+   * For proper rendering, this should be a bundled filled and unfilled version of an icon.
+   *  Created with bundleIcon().
+   */
   icon: JSX.Element;
   label: string;
 };

diff --git a/components/topbar/src/application.styles.ts b/components/topbar/src/application.styles.ts
@@ -71,7 +71,7 @@ export const useApplicationStyles = makeStyles({
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    ...shorthands.borderRadius("6px"),
+    ...shorthands.borderRadius("4px", "4px", "1px", "4px"),
   },
   myApplicationAreaBase: {
     height: "32px",

diff --git a/examples/src/components/top-bar.tsx b/examples/src/components/top-bar.tsx
@@ -37,15 +37,15 @@ import {
   Megaphone24Filled,
   OpenRegular,
   QuestionCircleRegular,
-  ZoomFit20Filled,
-  ZoomFit20Regular,
+  ZoomFit16Filled,
+  ZoomFit16Regular,
 } from "@fluentui/react-icons";
 import React, { useCallback, useState } from "react";
 import { useAppContext } from "../context/ApplicationStateProvider";
 
 const ApplicationIcon = bundleIcon(AnimalCat20Filled, AnimalCat20Regular);
 const MailIcon = bundleIcon(MailFilled, MailRegular);
-const ZoomIcon = bundleIcon(ZoomFit20Filled, ZoomFit20Regular);
+const ZoomIcon = bundleIcon(ZoomFit16Filled, ZoomFit16Regular);
 const FishIcon = bundleIcon(FoodFish20Filled, FoodFish20Regular);
 const CatIcon = bundleIcon(AnimalCat20Filled, AnimalCat20Regular);
 const AddSubIcon = bundleIcon(