@hashicorp/design-system-components 2.4.1 → 2.4.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @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
+
+- [#1380](https://github.com/hashicorp/design-system/pull/1380) [`cd16ccc19`](https://github.com/hashicorp/design-system/commit/cd16ccc19e0992be2bed5d567880d2d0d36f1880) Thanks [@MelSumner](https://github.com/MelSumner)! - A11y Fix: removes `aria-label` from stepper/indicator and from task/indicator, which was causing an accessibility test error.
+
 ## 2.4.1
 
 ### Patch Changes

package/README.md

@@ -10,7 +10,6 @@ Compatibility
 ------------------------------------------------------------------------------
 
 * Ember.js v3.28 or above
-  * Note: The library _should_ work with earlier versions of Ember, but we only test with Ember 3.28 and newer
 * Ember CLI v3.28 or above
 * Node.js v12 or above
 

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/addon/components/hds/stepper/step/indicator.hbs

@@ -2,7 +2,7 @@
   Copyright (c) HashiCorp, Inc.
   SPDX-License-Identifier: MPL-2.0
 }}
-<div class={{this.classNames}} ...attributes aria-label={{@status}}>
+<div class={{this.classNames}} ...attributes>
   <div class="hds-stepper-indicator-step__svg-hexagon">
     <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
       <path

package/addon/components/hds/stepper/task/indicator.hbs

@@ -2,6 +2,6 @@
   Copyright (c) HashiCorp, Inc.
   SPDX-License-Identifier: MPL-2.0
 }}
-<div class={{this.classNames}} ...attributes aria-label={{@status}}>
+<div class={{this.classNames}} ...attributes>
   <FlightIcon class="hds-stepper-indicator-task__icon" @name={{this.iconName}} @size="16" />
 </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.1",
+  "version": "2.4.3",
   "description": "Helios Design System Components",
   "keywords": [
     "hashicorp",