@hashicorp/design-system-components 2.3.0 → 2.3.2

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @hashicorp/design-system-components
 
+## 2.3.2
+
+### Patch Changes
+
+- [#1344](https://github.com/hashicorp/design-system/pull/1344) [`6d6cf3ea8`](https://github.com/hashicorp/design-system/commit/6d6cf3ea81bf5bd1f631c99fc53cc88318d7d52f) Thanks [@cbfx](https://github.com/cbfx)! - `SideNav::Portal::Target` - Fixed a possible source of flickering when a panel has already been rendered
+
+## 2.3.1
+
+### Patch Changes
+
+- [#1338](https://github.com/hashicorp/design-system/pull/1338) [`2bc23fd20`](https://github.com/hashicorp/design-system/commit/2bc23fd20bafdedda65126f606c345ea5eb6fa1e) Thanks [@didoo](https://github.com/didoo)! - `SideNav` - Fix issue with links being clickable even if not visible
+
+- [#1339](https://github.com/hashicorp/design-system/pull/1339) [`ea8edb9bf`](https://github.com/hashicorp/design-system/commit/ea8edb9bf0567b5dc97ded9efbfeb5c6f27f52d5) Thanks [@didoo](https://github.com/didoo)! - `SideNav` - Updated CSS declaration that was causing an horizontal scrollbar to appear in some conditions
+
 ## 2.3.0
 
 ### Minor Changes

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

@@ -1,3 +1,8 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+
 <div class="hds-side-nav" ...attributes>
   <div class="hds-side-nav__wrapper">
     {{yield to="root"}}

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" ...attributes>
+  <div class="hds-side-nav__content-panel hds-side-nav-hide-when-minimized" ...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 hds-side-nav-hide-when-minimized"
+    class="hds-side-nav__content-panels"
     {{did-update this.didUpdateSubnav this.numSubnavs}}
   />
 </div>

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

@@ -9,12 +9,12 @@ import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { DEBUG } from '@glimmer/env';
 import Ember from 'ember';
-import { debounce } from '@ember/runloop';
 
 export default class SidenavPortalTarget extends Component {
   @service router;
 
   @tracked numSubnavs = 0;
+  @tracked lastPanelEl = null;
 
   static get prefersReducedMotionOverride() {
     return Ember.testing;
@@ -38,7 +38,7 @@ export default class SidenavPortalTarget extends Component {
 
   @action
   didUpdateSubnav(element, [count]) {
-    debounce(this, 'animateSubnav', element, [count], 100);
+    this.animateSubnav(element, [count]);
   }
 
   @action
@@ -135,14 +135,23 @@ export default class SidenavPortalTarget extends Component {
 
     // fade in next panel
     let nextPanelEl = targetElement.children[activeIndex];
+
+    // get reference to last child panel
+    let lastPanelEl = targetElement.children[targetElement.children.length - 1];
+
     if (nextPanelEl) {
       nextPanelEl.ariaHidden = 'false';
       nextPanelEl.style.setProperty('visibility', 'visible');
-      // this eliminates a flicker if there's only 1 subnav rendering
-      if (activeIndex === 0) {
+      // this eliminates a flicker if there's only one subnav rendering or if we
+      // already just rendered this panel.
+      if (activeIndex === 0 || nextPanelEl.isSameNode(this.lastPanelEl)) {
         fadeDelay = 0;
         fadeDuration = 0;
       }
+
+      // remember the last panel
+      this.lastPanelEl = lastPanelEl;
+
       nextPanelEl.animate([{ opacity: '0' }, { opacity: '1' }], {
         delay: fadeDelay,
         duration: fadeDuration,

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

@@ -167,6 +167,10 @@
   padding:
     var(--token-side-nav-wrapper-padding-vertical)
     var(--token-side-nav-wrapper-padding-horizontal);
+  // this is necessary, otherwise when the sidenav is minimized an horizontal scrollbar may appear
+  // (if there are words longer than the width of the available space for the list "item" content)
+  overflow-x: hidden;
+  // we want the content to vertically scroll if needed
   overflow-y: auto;
 }
 

package/package.json

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