@hashicorp/design-system-components 2.3.1 → 2.3.3

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @hashicorp/design-system-components
 
+## 2.3.3
+
+### Patch Changes
+
+- [#1350](https://github.com/hashicorp/design-system/pull/1350) [`be5c5aad8`](https://github.com/hashicorp/design-system/commit/be5c5aad8fb9d59ecc57be5f78a45619bf18ce10) Thanks [@KristinLBradley](https://github.com/KristinLBradley)! - `RadioCard` - Update CSS to enable wrapping of long strings in label which were overflowing the container
+
+- [#1353](https://github.com/hashicorp/design-system/pull/1353) [`0ed127294`](https://github.com/hashicorp/design-system/commit/0ed127294e66fa7d7412f40eb82ed4c3a89e3763) Thanks [@didoo](https://github.com/didoo)! - removed `z-index` value from `AppFrame::Footer`
+
+## 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

package/addon/components/hds/disclosure/index.js

@@ -30,7 +30,7 @@ export default class HdsDisclosureComponent extends Component {
 
   @action
   onFocusOut(event) {
-    // due to inconsitent implementation of relatedTarget across browsers we use the activeElement as a fallback
+    // due to inconsistent implementation of relatedTarget across browsers we use the activeElement as a fallback
     // if the related target is not part of the disclosed content we close the disclosed container
     if (!this.element.contains(event.relatedTarget || document.activeElement)) {
       this.close();

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/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/app-frame.scss

@@ -36,7 +36,6 @@
 }
 
 .hds-app-frame__footer {
-  z-index: 5;
   grid-area: footer;
 }
 

package/app/styles/components/form/radio-card.scss

@@ -140,6 +140,7 @@
   display: block;
   margin: 8px 0;
   color: var(--token-form-label-color);
+  overflow-wrap: break-word;
 
   &:first-child {
     margin-top: 0;

package/package.json

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