@hashicorp/design-system-components 2.4.2 → 2.4.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @hashicorp/design-system-components
 
+## 2.4.3
+
+### Patch Changes
+
+- [#1388](https://github.com/hashicorp/design-system/pull/1388) [`56a6b94df`](https://github.com/hashicorp/design-system/commit/56a6b94dfa337a887153e39393ed2a2bb1b93774) Thanks [@didoo](https://github.com/didoo)! - Fixed `SideNav` issue with content resizing when transitioning its `width`
+
 ## 2.4.2
 
 ### Patch Changes

package/addon/components/hds/breadcrumb/truncation.js

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
 import Component from '@glimmer/component';
 
 export default class HdsBreadcrumbTruncationComponent extends Component {

package/addon/components/hds/dismiss-button/index.js

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
 import Component from '@glimmer/component';
 
 export default class HdsDismissButtonIndexComponent extends Component {

package/addon/components/hds/side-nav/index.hbs

@@ -3,7 +3,13 @@
   SPDX-License-Identifier: MPL-2.0
 }}
 
-<Hds::SideNav::Base class={{this.classNames}} ...attributes {{focus-trap isActive=this.shouldTrapFocus}}>
+<Hds::SideNav::Base
+  class={{this.classNames}}
+  ...attributes
+  {{on "transitionstart" (fn this.setTransition "start")}}
+  {{on "transitionend" (fn this.setTransition "end")}}
+  {{focus-trap isActive=this.shouldTrapFocus}}
+>
   <:root>
     {{#if this.hasA11yRefocus}}
       <NavigationNarrator

package/addon/components/hds/side-nav/index.js

@@ -12,6 +12,7 @@ import { registerDestructor } from '@ember/destroyable';
 export default class HdsSideNavComponent extends Component {
   @tracked isResponsive = this.args.isResponsive ?? true;
   @tracked isMinimized = this.isResponsive; // we set it minimized by default so that if we switch viewport from desktop to mobile its already minimized
+  @tracked isAnimating = false;
   @tracked isDesktop = true;
   hasA11yRefocus = this.args.hasA11yRefocus ?? true;
 
@@ -84,6 +85,9 @@ export default class HdsSideNavComponent extends Component {
     } else {
       classes.push('hds-side-nav--is-not-minimized');
     }
+    if (this.isAnimating) {
+      classes.push('hds-side-nav--is-animating');
+    }
 
     return classes.join(' ');
   }
@@ -106,6 +110,19 @@ export default class HdsSideNavComponent extends Component {
     }
   }
 
+  @action
+  setTransition(phase, event) {
+    // we only want to respond to `width` animation/transitions
+    if (event.propertyName !== 'width') {
+      return;
+    }
+    if (phase === 'start') {
+      this.isAnimating = true;
+    } else {
+      this.isAnimating = false;
+    }
+  }
+
   @action
   updateDesktopVariable(event) {
     this.isDesktop = event.matches;

package/addon/components/hds/side-nav/portal/index.hbs

@@ -4,7 +4,7 @@
 }}
 
 <Portal @target={{if @targetName @targetName "hds-side-nav-portal-target"}}>
-  <div class="hds-side-nav__content-panel hds-side-nav-hide-when-minimized" ...attributes>
+  <div class="hds-side-nav__content-panel" ...attributes>
     <Hds::SideNav::List aria-label={{@ariaLabel}} as |ListElements|>
       {{yield ListElements}}
     </Hds::SideNav::List>

package/addon/components/hds/side-nav/portal/target.hbs

@@ -8,7 +8,7 @@
     @multiple={{true}}
     @onChange={{this.panelsChanged}}
     @name={{if @targetName @targetName "hds-side-nav-portal-target"}}
-    class="hds-side-nav__content-panels"
+    class="hds-side-nav__content-panels hds-side-nav-hide-when-minimized"
     {{did-update this.didUpdateSubnav this.numSubnavs}}
   />
 </div>

package/app/styles/components/side-nav/content.scss

@@ -21,7 +21,7 @@
 .hds-side-nav__content-panels {
   // see https://codepen.io/didoo/pen/YzOeRPr
   display: grid;
-  grid-template-columns: repeat(5, 100%);
+  grid-template-columns: repeat(5, var(--hds-app-sidenav-width-expanded));
   width: 100%;
 }
 

package/app/styles/components/side-nav/main.scss

@@ -202,5 +202,10 @@
       var(--hds-app-sidenav-animation-easing)
       var(--hds-app-sidenav-animation-delay);
   }
-}
 
+  // we want to avoid accidental interactions with the navigation elements while the sidenav is animating its width
+  // (elements with `visibility: visible` can already be interacted with, while their opacity is transitioning)
+  .hds-side-nav--is-animating & {
+    pointer-events: none;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hashicorp/design-system-components",
-  "version": "2.4.2",
+  "version": "2.4.3",
   "description": "Helios Design System Components",
   "keywords": [
     "hashicorp",