Work on AppLayout design.

fortanix · Feb 4, 2025 · 4db9fc7 · 4db9fc7
1 parent 707533f
commit 4db9fc7
Show file tree

Hide file tree

Showing 14 changed files with 83 additions and 83 deletions.
diff --git a/src/assets/fortanix/fortanix_logo_icon.svg b/src/assets/fortanix/fortanix_logo_icon.svg
diff --git a/src/components/overlays/DropdownMenu/DropdownMenu.module.scss b/src/components/overlays/DropdownMenu/DropdownMenu.module.scss
@@ -96,8 +96,12 @@
         align-items: center;
         gap: bk.$spacing-3;
 
-        .bk-dropdown-menu__item__icon { font-size: 1.4em; }
-        .bk-dropdown-menu__item__label { --keep: ; }
+        .bk-dropdown-menu__item__icon {
+          font-size: 1.2em;
+        }
+        .bk-dropdown-menu__item__label {
+          user-select: none;
+        }
 
         @include bk.focus-inset;
       }

diff --git a/src/layouts/AppLayout/AppLayout.module.scss b/src/layouts/AppLayout/AppLayout.module.scss
@@ -7,8 +7,9 @@
 
 @layer baklava.base {
   :root {
-    /* Height of the header needs to be known at root level so we can use it for things like `scroll-padding-top` */
-    --bk-app-layout-header-height: var(--bk-sizing-5);
+    // Height of the header needs to be known at root level so we can use it for things like `scroll-padding-top`.
+    // Calculate by: content height (spacing-9) + 2 times the block padding (padding-3).
+    --bk-app-layout-header-height: calc(#{bk.$spacing-9} + 2 * #{bk.$spacing-3});
   }
 }
 
@@ -19,7 +20,7 @@
 
     --bk-app-layout-sidebar-width-open: 220px;
     --bk-app-layout-sidebar-width: var(--bk-app-layout-sidebar-width-open);
-
+    
     /* Note: do not use vw/vh, because we may want to show the layout in a container (e.g. story) */
     min-width: 100cqw;
     min-height: 100cqh;
@@ -99,7 +100,7 @@
         'footer' max-content
         / 1fr;
     }
-
+    
     //&:has([slot='sidebar']:hover) { --bk-app-layout-sidebar-width: 80px; } // TEST
     @media (prefers-reduced-motion: no-preference) {
       transition: grid 300ms;

diff --git a/src/layouts/AppLayout/AppLayout.stories.tsx b/src/layouts/AppLayout/AppLayout.stories.tsx
@@ -58,8 +58,15 @@ export const Standard: Story = {
         <div slot="sidebar" className="bk-theme--dark">
           <Sidebar className="bk-app-layout__sidebar">
             <Nav>
-              <Nav.NavItem active icon="dashboard" label="Dashboard" href="#"/>
-              <Nav.NavItem icon="dashboard" label="Groups" href="#"/>
+              <Nav.NavItem active icon="dashboard" label="Overview" href="#"/>
+              <Nav.NavItem icon="badge-assessment" label="Assessment" href="#"/>
+              <Nav.NavItem icon="services" label="Services" href="#"/>
+            </Nav>
+            <hr/>
+            <Nav>
+              <Nav.NavItem icon="cloud-accounts" label="Connections" href="#"/>
+              <Nav.NavItem icon="policy" label="Policy Center" href="#"/>
+              <Nav.NavItem icon="user-authentication" label="Authentication" href="#"/>
             </Nav>
             <OverflowTester lines={45}/>
           </Sidebar>

diff --git a/src/layouts/AppLayout/AppLayout.tsx b/src/layouts/AppLayout/AppLayout.tsx
@@ -12,7 +12,6 @@ type AppLayoutProps = React.PropsWithChildren<ComponentProps<'div'> & {
   /** Whether this component should be unstyled. */
   unstyled?: undefined | boolean,
 }>;
-
 /**
  * AppLayout component.
  */

diff --git a/src/layouts/AppLayout/Header/AccountSelector.module.scss b/src/layouts/AppLayout/Header/AccountSelector.module.scss
@@ -21,6 +21,10 @@
 
     .bk-account-selector__icon {
       --bk-icon-accent-color: #{bk.$theme-header-icon-background-default};
+      //font-size: 1.2em; // FIXME: need to make sure the overall size (with decoration) is not affected
+    }
+    .bk-account-selector__caret {
+      margin-inline-start: -0.2rem; // Compensate for visual gap in the icon itself
     }
   }
 }
diff --git a/src/layouts/AppLayout/Header/AccountSelector.tsx b/src/layouts/AppLayout/Header/AccountSelector.tsx
@@ -27,9 +27,9 @@ export const AccountSelector = (props: AccountSelectorProps) => {
       placement="bottom-start"
       items={
         <>
-          <DropdownMenuProvider.Option optionKey="account-1" icon="accounts" label="Account 1"/>
-          <DropdownMenuProvider.Option optionKey="account-2" icon="accounts" label="Account 2"/>
-          <DropdownMenuProvider.Option optionKey="account-3" icon="accounts" label="Account 3"/>
+          <DropdownMenuProvider.Option optionKey="account-1" icon="account" label="Account 1"/>
+          <DropdownMenuProvider.Option optionKey="account-2" icon="account" label="Account 2"/>
+          <DropdownMenuProvider.Option optionKey="account-3" icon="account" label="Account 3"/>
         </>
       }
     >
@@ -40,11 +40,11 @@ export const AccountSelector = (props: AccountSelectorProps) => {
             className: cx('bk', { [cl['bk-account-selector']]: !unstyled }, propsRest.className),
           })}
         >
-          <Icon icon="group" className={cl['bk-account-selector__icon']}
+          <Icon icon="account" className={cx(cl['bk-account-selector__icon'])}
             decoration={{ type: 'background-circle' }}
           />
           {state.selectedOption === null ? 'Accounts' : state.selectedOption}
-          <Icon icon="caret-down"/>
+          <Icon icon="caret-down" className={cx(cl['bk-account-selector__caret'])}/>
         </Button>
       }
     </DropdownMenuProvider>

diff --git a/src/layouts/AppLayout/Header/SolutionSelector.module.scss b/src/layouts/AppLayout/Header/SolutionSelector.module.scss
@@ -8,6 +8,8 @@
   .bk-solution-selector {
     @include bk.component-base(bk-solution-selector);
 
+    user-select: none;
+
     // Allow the element to shrink down to just the icon
     overflow: hidden;
     flex-shrink: 4; // Shrink relatively fast (since there is no important information besides the icon)
@@ -20,5 +22,8 @@
     .bk-solution-selector__icon {
       --bk-icon-accent-color: #{bk.$theme-header-icon-background-default};
     }
+    .bk-solution-selector__caret {
+      margin-inline-start: -0.2rem; // Compensate for visual gap in the icon itself
+    }
   }
 }
diff --git a/src/layouts/AppLayout/Header/SolutionSelector.tsx b/src/layouts/AppLayout/Header/SolutionSelector.tsx
@@ -43,7 +43,7 @@ export const SolutionSelector = (props: SolutionSelectorProps) => {
             decoration={{ type: 'background-circle' }}
           />
           Solutions
-          <Icon icon="caret-down"/>
+          <Icon icon="caret-down" className={cl['bk-solution-selector__caret']}/>
         </Button>
       }
     </DropdownMenuProvider>

diff --git a/src/layouts/AppLayout/Header/UserMenu.module.scss b/src/layouts/AppLayout/Header/UserMenu.module.scss
@@ -11,11 +11,11 @@
     flex-shrink: 1; // Allow the user menu to shrink inside a parent flexbox
     min-width: 1rem; // Allow it to shrink down to just the icon on small screens
     max-width: 40ch;
-    margin-inline-start: bk.$spacing-3;
+    margin-inline-start: bk.$spacing-2;
 
     display: flex;
     flex-direction: row;
-    gap: bk.$spacing-3;
+    gap: bk.$spacing-2;
     align-items: center;
 
     > .bk-user-menu__user-icon {

diff --git a/src/layouts/AppLayout/Header/UserMenu.tsx b/src/layouts/AppLayout/Header/UserMenu.tsx
@@ -28,7 +28,7 @@ export const UserMenu = (props: UserMenuProps) => {
     if (userName) {
       return (
         <>
-          <Icon icon="user-profile" className={cx(cl['bk-user-menu__user-icon'])}/>
+          <Icon icon="user" className={cx(cl['bk-user-menu__user-icon'])}/>
           <span className={cx(cl['bk-user-menu__user-name'])}>{userName}</span>
         </>
       );

diff --git a/src/layouts/AppLayout/Logo/Logo.module.scss b/src/layouts/AppLayout/Logo/Logo.module.scss
@@ -10,15 +10,15 @@
   .bk-app-logo {
     @include bk.component-base(bk-app-logo);
     container-type: inline-size;
-    width: 200px;
+    width: 200px; // FIXME
     aspect-ratio: 1 / 0.2;
 
     --icon-size: 0.16fr;
 
     place-self: center start;
 
-    // overflow: clip;
-    // user-select: none;
+    overflow: clip;
+    user-select: none;
 
     margin: 13px 10px;
     margin-bottom: 7px;

diff --git a/src/layouts/AppLayout/Nav/Nav.module.scss b/src/layouts/AppLayout/Nav/Nav.module.scss
@@ -4,68 +4,52 @@
 
 @use '../../../styling/defs.scss' as bk;
 
-// https://ryanmulligan.dev/blog/layout-breakouts/
-// https://cloudfour.com/thinks/breaking-out-with-css-grid-layout/
-@mixin grid-breakout($inset-content: bk.$spacing-2) {
-  --gap-content: #{$inset-content};
-  --size-content: calc(100% - var(--gap) * 2);
-
-  display: grid;
-  grid-template-columns:
-    [full-start] var(--gap-content)
-    [content-start] var(--size-content) [content-end]
-    var(--gap-content) [full-end];
-}
-
 @layer baklava.components {
   .bk-nav {
     @include bk.component-base(bk-nav);
 
-    --bk-nav-inset-content: #{bk.$spacing-3};
-    //padding-block: var(--bk-nav-inset-content);
-
-    @include grid-breakout($inset-content: var(--bk-nav-inset-content));
+    --bk-nav-inset: var(--bk-app-layout-sidebar-inset, #{bk.$spacing-4});
 
     menu {
       display: flex;
       flex-direction: column;
-      //row-gap: var(--bk-sizing-2);
+      row-gap: bk.$spacing-3;
 
       .bk-nav__item {
-        @include bk.font(bk.$font-family-display);
+        --bk-nav-item-border-size: #{bk.$spacing-1};
+
+        @include bk.font(bk.$font-family-body, $size: bk.$font-size-m);
 
         .bk-nav__item__link {
           cursor: pointer;
 
-          /* Focus outline */
-          &:focus-visible {
-            outline: none !important;
-            box-shadow: inset 5px 0 var(--bk-focus-outline-color);
-          }
+          // Make space for the left border when in active state
+          border-left: var(--bk-nav-item-border-size) solid transparent;
 
+          // Break out of the sidebar padding to extend to the edges (for hover/active states)
+          margin-inline: calc(-1 * var(--bk-nav-inset));
+          padding-inline: var(--bk-nav-inset);
+          padding-inline-start: calc(var(--bk-nav-inset) - var(--bk-nav-item-border-size));
           padding-block: bk.$spacing-2;
 
-          &:hover {
+          @include bk.focus-inset;
+          &:hover, &:focus-visible {
             background: bk.$theme-side-nav-menu-background-hover;
           }
 
-          grid-column: full;
-
           display: flex;
           flex-direction: row;
           gap: bk.$spacing-2;
 
-          .bk-nav__item__link__icon {
-            // ignore
-          }
-          .bk-nav__item__link__label {
-            // ignore
-          }
+          .bk-nav__item__link__icon { --keep: ; }
+          .bk-nav__item__link__label { --keep: ; }
         }
-
         &[aria-current] {
-          border-left-width: 4px;
-          border-left-color: bk.$theme-side-nav-menu-tab-default;
+          .bk-nav__item__link {
+            background: bk.$theme-side-nav-menu-background-hover;
+            border-left-color: bk.$theme-side-nav-menu-tab-default;
+            font-weight: bk.$font-weight-semibold;
+          }
         }
       }
     }

diff --git a/src/layouts/AppLayout/Sidebar/Sidebar.module.scss b/src/layouts/AppLayout/Sidebar/Sidebar.module.scss
@@ -9,7 +9,12 @@
     @include bk.component-base(bk-app-layout-sidebar);
     container-type: inline-size;
 
-    align-self: start; /* https://ishadeed.com/article/position-sticky-css-grid */
+    --bk-app-layout-sidebar-inset: #{bk.$spacing-4}; // Allow sidebar child components to know the inset
+
+    align-self: start; // https://ishadeed.com/article/position-sticky-css-grid
+
+    padding-block-start: bk.$spacing-6;
+    padding-inline: var(--bk-app-layout-sidebar-inset);
 
     display: flex;
     flex-direction: column;
@@ -27,16 +32,18 @@
         cursor: pointer;
       }
 
-      /* Customize some components */
+      // Customize some components
       .bk-logo-with-text {
         margin: var(--bk-sizing-3);
         height: calc(var(--bk-sizing-4) + 18px);
       }
     }
+
+    // Separators
+    hr {
+      margin-block: bk.$spacing-3;
+      border: none;
+      border-top: bk.rem-from-px(1) solid bk.$theme-side-nav-menu-divider-default;
+    }
   }
 }
-
-/* FIXME */
-.bk-theme--dark.bk-layout__sidebar {
-  /* background: bk.$color-brand-300; */
-}
-Original file line number
+Diff line change
@@ Expand Up @@
       /** Whether this component should be unstyled. */
       unstyled?: undefined | boolean,
     }>;
     /**
      * AppLayout component.
      */
@@ Expand Down @@