AppFrame: “Enterprise Nav” phase 1.5 updates (HDS-3612) (#2299)

Co-authored-by: Cristiano Rastelli <cristiano.rastelli@hashicorp.com>

Author: KristinLBradley

.changeset/rich-actors-speak.md

@@ -0,0 +1,13 @@
+---
+"@hashicorp/design-system-components": minor
+---
+
+`AppFrame`:
+- Modified sticky/fixed position to turn off when viewport height is under 480px in height
+- Refactored styles to make `AppFrame` responsible for sticky/fixed layout of `SideNav` and `AppHeader`
+
+`AppHeader`:
+- Styled inoperable actions as disabled (which occurs when the `SideNav` is expanded in mobile view)
+
+`SideNav`:
+- Removed the `withAppHeader` option as it is no longer needed.

packages/components/src/components/hds/app-frame/index.hbs

@@ -2,7 +2,7 @@
   Copyright (c) HashiCorp, Inc.
   SPDX-License-Identifier: MPL-2.0
 }}
-<div class="hds-app-frame" ...attributes>
+<div class={{this.classNames}} ...attributes>
   {{#if this.hasHeader}}
     {{yield (hash Header=(component "hds/app-frame/parts/header"))}}
   {{/if}}

packages/components/src/components/hds/app-frame/index.ts

@@ -33,47 +33,34 @@ export interface HdsAppFrameSignature {
 }
 
 export default class HdsAppFrameComponent extends Component<HdsAppFrameSignature> {
-  /**
-   * Indicates if the "header" container should be displayed
-   *
-   * @param hasHeader
-   * @type {boolean}
-   * @default true
-   */
+  // Indicates if the "header" container should be displayed
   get hasHeader(): boolean {
     return this.args.hasHeader ?? true;
   }
 
-  /**
-   * Indicates if the "sidebar" container should be displayed
-   *
-   * @param hasSidebar
-   * @type {boolean}
-   * @default true
-   */
+  // Indicates if the "sidebar" container should be displayed
   get hasSidebar(): boolean {
     return this.args.hasSidebar ?? true;
   }
 
-  /**
-   * Indicates if the "footer" container should be displayed
-   *
-   * @param hasFooter
-   * @type {boolean}
-   * @default true
-   */
+  // Indicates if the "footer" container should be displayed
   get hasFooter(): boolean {
     return this.args.hasFooter ?? true;
   }
 
-  /**
-   * Indicates if the "modals" container should be displayed
-   *
-   * @param hasModals
-   * @type {boolean}
-   * @default true
-   */
+  // Indicates if the "modals" container should be displayed
   get hasModals(): boolean {
     return this.args.hasModals ?? true;
   }
+
+  // Get the class names to apply to the component.
+  get classNames(): string {
+    const classes = ['hds-app-frame'];
+
+    if (this.hasHeader && this.hasSidebar) {
+      classes.push('hds-app-frame--has-header-with-sidebar');
+    }
+
+    return classes.join(' ');
+  }
 }

packages/components/src/components/hds/side-nav/index.ts

@@ -27,7 +27,6 @@ interface HdsSideNavSignature {
     onToggleMinimizedStatus?: (arg: boolean) => void;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     onDesktopViewportChange?: (arg: boolean) => void;
-    withAppHeader?: boolean;
   };
   Blocks: {
     header?: [
@@ -146,11 +145,6 @@ export default class HdsSideNavComponent extends Component<HdsSideNavSignature>
       classes.push('hds-side-nav--is-animating');
     }
 
-    // Add class based on the presence of app-header
-    if (this.args.withAppHeader) {
-      classes.push('hds-side-nav--with-app-header');
-    }
-
     return classes.join(' ');
   }
 

packages/components/src/styles/components/app-frame.scss

@@ -16,22 +16,16 @@
   grid-template-rows: auto 1fr auto;
   grid-template-columns: auto 1fr;
   min-height: 100vh;
-
-  // prevent interaction with AppHeader when SideNav is open/expanded
-  &:has(.hds-side-nav--is-not-minimized) .hds-app-header--is-mobile {
-    pointer-events: none;
-  }
 }
 
-
 // FRAME'S CONTAINERS
 
 .hds-app-frame__header {
-  z-index: 7;
+  z-index: 21; // needs to stay above the main content & sidebar
   grid-area: header;
 
-  // NOTE: May not need to qualify this with .hds-app-header as it may not matter if AppHeader is not present
-  &:has(.hds-app-header) {
+  // Make header position sticky/fixed if the viewport height is greater than 480px
+  @media (height >= 480px) {
     position: sticky;
     top: 0;
     right: 0;
@@ -40,8 +34,21 @@
 }
 
 .hds-app-frame__sidebar {
-  z-index: 6;
+  position: sticky;
+  top: 0;
+  z-index: 20; // needs to stay above the main content
   grid-area: sidebar;
+  height: 100vh;
+  min-height: 100vh;
+
+  // Modify sidenav layout when used together with fixed app-header
+  @media (height >= 480px) {
+    .hds-app-frame--has-header-with-sidebar & {
+      top: var(--token-app-header-height);
+      height: calc(100vh - var(--token-app-header-height));
+      min-height: calc(100vh - var(--token-app-header-height));
+    }
+  }
 }
 
 .hds-app-frame__main {
@@ -52,7 +59,6 @@
   grid-area: footer;
 }
 
-
 // MODALS "CONTAINER"
 
 .hds-app-frame__modals {

packages/components/src/styles/components/app-header.scss

@@ -13,7 +13,6 @@
 
 .hds-app-header {
   position: relative;
-  z-index: 20; // needs to stay above the main content
   display: flex;
   gap: 12px;
   align-items: center;
@@ -76,6 +75,30 @@
   .hds-dropdown-toggle-button,
   .hds-dropdown-toggle-icon {
     @include hds-interactive-dark-theme();
+
+    // disabled state:
+    &:disabled,
+    &[disabled],
+    &.mock-disabled,
+    &:disabled:focus,
+    &[disabled]:focus,
+    &.mock-disabled:focus,
+    &:disabled:hover,
+    &[disabled]:hover,
+    &.mock-disabled:hover {
+      @include hds-interactive-dark-theme-state-disabled();
+    }
+  }
+}
+
+// prevent interaction with AppHeader when SideNav is open/expanded
+.hds-app-frame:has(.hds-side-nav--is-not-minimized) .hds-app-header--is-mobile {
+  .hds-button,
+  .hds-dropdown-toggle-button,
+  .hds-dropdown-toggle-icon,
+  .hds-app-header__home-link {
+    @include hds-interactive-dark-theme-state-disabled(); // emulate disabled state
+    pointer-events: none;
   }
 }
 
@@ -90,6 +113,19 @@
   // Set home link container size:
   width: var(--token-app-header-home-link-size);
   height: var(--token-app-header-home-link-size);
+
+  // disabled state:
+  &:disabled,
+  &[disabled],
+  &.mock-disabled,
+  &:disabled:focus,
+  &[disabled]:focus,
+  &.mock-disabled:focus,
+  &:disabled:hover,
+  &[disabled]:hover,
+  &.mock-disabled:hover {
+    @include hds-interactive-dark-theme-state-disabled();
+  }
 
   // Set SVG logo size:
   svg {

packages/components/src/styles/components/side-nav/header.scss

@@ -47,6 +47,19 @@
   width: 100%;
   height: 100%;
   padding: calc(var(--token-side-nav-header-home-link-padding) - 1px); // by design -  we take in account the transparent border
+
+  // disabled state:
+  &:disabled,
+  &[disabled],
+  &.mock-disabled,
+  &:disabled:focus,
+  &[disabled]:focus,
+  &.mock-disabled:focus,
+  &:disabled:hover,
+  &[disabled]:hover,
+  &.mock-disabled:hover {
+    @include hds-interactive-dark-theme-state-disabled();
+  }
 }
 
 
@@ -67,6 +80,19 @@
   .hds-dropdown-toggle-button, 
   .hds-dropdown-toggle-icon {
     @include hds-interactive-dark-theme();
+
+    // disabled state:
+    &:disabled,
+    &[disabled],
+    &.mock-disabled,
+    &:disabled:focus,
+    &[disabled]:focus,
+    &.mock-disabled:focus,
+    &:disabled:hover,
+    &[disabled]:hover,
+    &.mock-disabled:hover {
+      @include hds-interactive-dark-theme-state-disabled();
+    }
   }
 }
 
@@ -81,4 +107,17 @@
   width: 36px; // same height as the dropdown "toggle"
   height: 36px;
   padding: 5px; // we take in account the transparent border
+
+  // disabled state:
+  &:disabled,
+  &[disabled],
+  &.mock-disabled,
+  &:disabled:focus,
+  &[disabled]:focus,
+  &.mock-disabled:focus,
+  &:disabled:hover,
+  &[disabled]:hover,
+  &.mock-disabled:hover {
+    @include hds-interactive-dark-theme-state-disabled();
+  }
 }

packages/components/src/styles/components/side-nav/main.scss

@@ -8,25 +8,14 @@
 //
 
 .hds-side-nav {
-  position: sticky;
-  top: 0;
-  z-index: 20; // needs to stay above the main content
+  position: relative;
   width: var(--hds-app-sidenav-width-fixed); // "default" width used by the `SideNav::Base` subcomponent (that is not responsive)
-  height: 100vh;
-  min-height: 100vh;
+  height: 100%;
+  min-height: 100%;
   isolation: isolate; // used to create a new stacking context (so we can set the overlay's z-index to -1)
 
   // VARIATIONS
 
-  // with-app-header
-  // Modify sidenav layout when used together with app-header
-
-  &.hds-side-nav--with-app-header {
-    top: var(--token-app-header-height);
-    height: calc(100vh - var(--token-app-header-height));
-    min-height: calc(100vh - var(--token-app-header-height));
-  }
-
   // headerless
   // SideNav without a :header block
   &.hds-side-nav--is-headerless {

packages/components/src/styles/mixins/_interactive-dark-theme.scss

@@ -88,19 +88,10 @@
       border-color: var(--token-color-palette-neutral-400);
     }
   }
+}
 
-  // Disabled:
-  &:disabled,
-  &[disabled],
-  &.mock-disabled,
-  &:disabled:focus,
-  &[disabled]:focus,
-  &.mock-disabled:focus,
-  &:disabled:hover,
-  &[disabled]:hover,
-  &.mock-disabled:hover {
-    color: var(--token-color-foreground-disabled);
-    background-color: var(--token-color-palette-neutral-600);
-    border-color: var(--token-color-palette-neutral-500);
-  }
+@mixin hds-interactive-dark-theme-state-disabled() {
+  color: var(--token-color-foreground-disabled);
+  background-color: var(--token-color-palette-neutral-600);
+  border-color: var(--token-color-palette-neutral-500);
 }

showcase/app/styles/showcase-pages/app-frame.scss

@@ -66,6 +66,18 @@ body.layouts-app-frame {
       width: 100%;
       height: 100%;
     }
+
+    // remove sticky positioning from examples
+    .hds-app-frame__header,
+    .hds-app-frame__sidebar {
+      position: relative;
+      top: 0;
+    }
+
+    .hds-app-frame__sidebar {
+      height: auto;
+      min-height: 0;
+    }
   }
 
   .shw-layout-app-frame-wrapper--with-3d {

showcase/app/templates/components/app-header.hbs

@@ -312,7 +312,7 @@
   <Shw::Text::H4>States</Shw::Text::H4>
 
   <Shw::Flex as |SF|>
-    {{#let (array "default" "hover" "active" "focus") as |states|}}
+    {{#let (array "default" "hover" "active" "focus" "disabled") as |states|}}
       {{#each states as |state|}}
         <SF.Item @label={{state}}>
           <div class="hds-app-header">
@@ -324,7 +324,7 @@
   </Shw::Flex>
 
   <Shw::Flex as |SF|>
-    {{#let (array "default" "hover" "active" "focus") as |states|}}
+    {{#let (array "default" "hover" "active" "focus" "disabled") as |states|}}
       {{#each states as |state|}}
         <SF.Item>
           <div class="hds-app-header">
@@ -349,7 +349,7 @@
 
   <Shw::Text::Body>Secondary</Shw::Text::Body>
   <Shw::Flex as |SF|>
-    {{#let (array "default" "hover" "active" "focus") as |states|}}
+    {{#let (array "default" "hover" "active" "focus" "disabled") as |states|}}
       {{#each states as |state|}}
         <SF.Item @label={{state}}>
           <div class="hds-app-header">
@@ -368,7 +368,7 @@
 
   <Shw::Text::Body>Primary</Shw::Text::Body>
   <Shw::Flex as |SF|>
-    {{#let (array "default" "hover" "active" "focus") as |states|}}
+    {{#let (array "default" "hover" "active" "focus" "disabled") as |states|}}
       {{#each states as |state|}}
         <SF.Item @label={{state}}>