From 549b673949a3a53ac90da61c48390bcc3e8a40e3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niklas=20Ramstr=C3=B6m?= Date: Tue, 13 Feb 2024 11:44:51 +0100 Subject: [PATCH] fix(topbar): style updates to application drawer (#195) --- .../topbar/src/application-drawer.styles.ts | 64 +++++++++--- components/topbar/src/application-drawer.tsx | 99 +++++++++++-------- .../topbar/src/application-drawer.types.ts | 7 +- components/topbar/src/application.styles.ts | 2 +- examples/src/components/top-bar.tsx | 6 +- 5 files changed, 120 insertions(+), 58 deletions(-) diff --git a/components/topbar/src/application-drawer.styles.ts b/components/topbar/src/application-drawer.styles.ts index d704cc2b..536c369d 100644 --- a/components/topbar/src/application-drawer.styles.ts +++ b/components/topbar/src/application-drawer.styles.ts @@ -1,21 +1,40 @@ 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", @@ -23,29 +42,50 @@ export const useApplicationDrawrStyles = makeStyles({ ...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 index b8128470..6cc2e6c5 100644 --- 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 ( -
-
- {application.icon} -
- - {application.label} - -
+ ); }; @@ -55,7 +80,7 @@ const ApplicationGroupTitle = ({ application }: { const appStyles = useApplicationStyles(); return ( -
+
{ const styles = useApplicationDrawerStyles(); - const buttonStyle = mergeClasses( - styles.contentButton, - application.id === currentSelectionId && styles.selectedContentButton - ); return ( - + ); }; @@ -205,18 +227,17 @@ export const ApplicationDrawer = ({ return ( <> - - setIsOpen(open)}>
@@ -234,7 +255,7 @@ export const ApplicationDrawer = ({ /> - + {link && (
{title} - + {content?.map((c) => { return ( - +
{c.children ? ( )} - - + +
); })}
diff --git a/components/topbar/src/application-drawer.types.ts b/components/topbar/src/application-drawer.types.ts index 251832ef..868e1b33 100644 --- 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 index 404b04a3..208a1ec7 100644 --- 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 index 2c72059e..61705e1d 100644 --- 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(