feat(topbar): add new look for application drawer trigger button when triggerGroupShortName is set

components/topbar/src/application-drawer.styles.ts

@@ -1,5 +1,7 @@
 import { makeStyles, shorthands, tokens } from "@fluentui/react-components";
 
+const triggerSpacingWithGroup = tokens.spacingHorizontalS;
+
 export const useApplicationDrawrStyles = makeStyles({
   drawer: {
     ...shorthands.borderRight(0),
@@ -48,6 +50,10 @@ export const useApplicationDrawrStyles = makeStyles({
     ...shorthands.gap(tokens.spacingHorizontalS),
     ...shorthands.padding(tokens.spacingVerticalXS, tokens.spacingHorizontalM),
   },
+  drawerTriggerApplicationWithGroup: {
+    ...shorthands.gap(triggerSpacingWithGroup),
+    ...shorthands.padding(tokens.spacingVerticalXS, triggerSpacingWithGroup),
+  },
   drawerTriggerApplicationIcon: {
     display: "flex",
     color: tokens.colorNeutralForeground2,
@@ -61,6 +67,18 @@ export const useApplicationDrawrStyles = makeStyles({
   drawerTriggerApplicationText: {
     color: tokens.colorNeutralForeground2,
   },
+  drawerTriggerTextWithGroup: {
+    marginLeft: triggerSpacingWithGroup,
+    color: tokens.colorNeutralForeground2,
+  },
+  triggerDividerWithGroup: {
+    ...shorthands.border("0.5px", "solid", tokens.colorNeutralForeground2),
+    ...shorthands.borderRadius("1px"),
+    height: "12px",
+    boxSizing: "border-box",
+    marginTop: "1px",
+    marginLeft: triggerSpacingWithGroup,
+  },
   applicationGroupTitle: {
     display: "flex",
     alignItems: "center",

components/topbar/src/application-drawer.tsx

@@ -49,10 +49,25 @@ const DrawerTrigger = (
         onMouseLeave={() => setHover(false)}
       >
         {<ApplicationAreaIcon applicationArea={applicationArea} />}
-        <Divider vertical style={{ padding: "0 0 0 12px" }}></Divider>
+        {currentSelection?.triggerGroupShortName
+          ? (
+            <>
+              <Body1Strong className={styles.drawerTriggerTextWithGroup}>
+                {currentSelection?.triggerGroupShortName}
+              </Body1Strong>
+              <div className={styles.triggerDividerWithGroup}></div>
+            </>
+          )
+          : <Divider vertical style={{ padding: "0 0 0 12px" }}></Divider>}
         {currentSelection
           ? (
-            <div className={styles.drawerTriggerApplication}>
+            <div
+              className={mergeClasses(
+                styles.drawerTriggerApplication,
+                currentSelection?.triggerGroupShortName
+                  && styles.drawerTriggerApplicationWithGroup
+              )}
+            >
               <div
                 className={mergeClasses(
                   styles.drawerTriggerApplicationIcon,

components/topbar/src/application-drawer.types.ts

@@ -12,11 +12,17 @@ export type SingleApplicationDrawerContent = {
   icon: JSX.Element;
   /** Label to show in opened drawer. */
   label: string;
-  /** Label to show in drawer trigger button when drawer is closed.
+  /**
+   * @deprecated
+   *  Label to show in drawer trigger button when drawer is closed.
    *  If not set, label will be used.
    *  Unused for content with children.
    */
   triggerLabel?: string;
+  /**
+   * Group label to show before triggerLabel
+   */
+  triggerGroupShortName?: string;
 };
 
 export type ApplicationDrawerProps = {

examples/src/components/top-bar.tsx

@@ -85,6 +85,7 @@ export const Navbar = () => {
           icon: <FishIcon />,
           label: "Fisk",
           id: "fisk",
+          triggerGroupShortName: "FISH",
         },
         {
           icon: <CatIcon />,
@@ -98,6 +99,7 @@ export const Navbar = () => {
       label: "Add",
       triggerLabel: "ADD trigger",
       id: "add",
+      triggerGroupShortName: "ADD",
     },
   ];