@hashicorp/design-system-components 2.12.2 → 2.14.0

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

@@ -31,7 +31,13 @@
 
   // desktop
   &.hds-side-nav--is-desktop {
-    width: var(--hds-app-sidenav-width-expanded);
+    &.hds-side-nav--is-not-minimized {
+      width: var(--hds-app-sidenav-width-expanded);
+    }
+
+    &.hds-side-nav--is-minimized {
+      width: var(--hds-app-sidenav-width-minimized);
+    }
   }
 }
 
@@ -61,65 +67,6 @@
   }
 }
 
-
-// MENU/TOGGLE BUTTON
-
-.hds-side-nav__menu-toggle-button {
-  position: absolute;
-  z-index: 1;
-  color: var(--token-color-foreground-high-contrast);
-  background: none;
-  border: 1px solid transparent;
-  cursor: pointer;
-  transition-timing-function: var(--hds-app-sidenav-animation-easing);
-  transition-duration: var(--hds-app-sidenav-animation-duration);
-  transition-property: width, height, padding, border-radius, transform;
-
-  &:hover {
-    background-color: var(--token-color-palette-neutral-600);
-    border-color: transparent;
-  }
-
-  &:active {
-    background-color: var(--token-color-palette-neutral-500);
-    border-color: transparent;
-  }
-
-  &:focus {
-    background-color: var(--token-color-palette-neutral-500);
-    border-color: var(--token-color-focus-action-internal);
-    outline: 3px solid var(--token-color-focus-action-external);
-  }
-
-  // by default it's styled as "close" button
-  .hds-side-nav--is-mobile & {
-    width: 24px;
-    height: 24px;
-    padding: 1px;
-    background-color: var(--token-color-foreground-primary);
-    border-radius: 3px;
-    transform:
-      translateX(calc(var(--hds-app-sidenav-width-expanded) + 8px))
-      translateY(24px);
-    // z-index: 15; // not needed anymore?
-  }
-
-  // when the sidenav is minimized it's styled as "menu" button
-  .hds-side-nav--is-mobile.hds-side-nav--is-minimized & {
-    width: 36px;
-    height: 36px;
-    padding: 5px;
-    border-radius: 5px;
-    transform: translateX(22px) translateY(var(--hds-app-sidenav-menu-button-y-shift));
-  }
-
-  // when it's desktop we _never_ want to show the menu/toggle button
-  .hds-side-nav--is-desktop & {
-    display: none;
-  }
-}
-
-
 // RESPONSIVE WRAPPER
 // this container element is used to control the width of the sidebar at different viewports (desktop/mobile) and states (minimized/expanded)
 
@@ -129,6 +76,7 @@
   height: 100%;
   color: var(--token-side-nav-color-foreground-primary); // we set a default color (in case generic content is added to the header/body/footer of the sidenav)
   background: var(--token-side-nav-color-surface-primary);
+  border-right: var(--token-side-nav-wrapper-border-width) solid var(--token-side-nav-wrapper-border-color);
 
   // RESPONSIVENESS - This controls the width of the "sidenav" container, and is independent (bur related) from the parent "sidebar" grid area
 
@@ -138,17 +86,11 @@
       var(--hds-app-sidenav-animation-easing);
   }
 
-  // mobile
-  .hds-side-nav--is-mobile.hds-side-nav--is-minimized & {
+  .hds-side-nav--is-minimized & {
     width: var(--hds-app-sidenav-width-minimized);
   }
 
-  .hds-side-nav--is-mobile.hds-side-nav--is-not-minimized & {
-    width: var(--hds-app-sidenav-width-expanded);
-  }
-
-  // desktop
-  .hds-side-nav--is-desktop & {
+  .hds-side-nav--is-not-minimized & {
     width: var(--hds-app-sidenav-width-expanded);
   }
 }
@@ -160,6 +102,15 @@
   padding-right: var(--token-side-nav-wrapper-padding-horizontal);
   padding-bottom: 8px; // by design
   padding-left: var(--token-side-nav-wrapper-padding-horizontal);
+  transition:
+    padding var(--hds-app-sidenav-animation-duration)
+    var(--hds-app-sidenav-animation-easing);
+
+  .hds-side-nav--is-minimized & {
+    padding-top: var(--token-side-nav-wrapper-padding-vertical-minimized);
+    padding-right: var(--token-side-nav-wrapper-padding-horizontal-minimized);
+    padding-left: var(--token-side-nav-wrapper-padding-horizontal-minimized);
+  }
 }
 
 .hds-side-nav__wrapper-body {
@@ -187,10 +138,9 @@
 // - shown (transitioning their opacity) when the sidenav is "expanded"
 
 .hds-side-nav-hide-when-minimized {
-  .hds-side-nav--is-mobile.hds-side-nav--is-minimized & {
+  .hds-side-nav--is-minimized & {
     visibility: hidden !important; // we need `!important` here to override the inline style applied to the single panels
     opacity: 0;
-    transition: none;
     // this is needed because, despite the element having `visibility: hidden`,
     // the child elements ("panels") have their visibility dynamically managed via JS
     // and when they have "visibility: visible" applied, they are not visually visible
@@ -206,8 +156,7 @@
     pointer-events: none;
   }
 
-  .hds-side-nav--is-mobile.hds-side-nav--is-not-minimized &,
-  .hds-side-nav--is-desktop & {
+  .hds-side-nav--is-not-minimized & {
     visibility: visible;
     opacity: 1;
     transition:

package/app/styles/components/side-nav/toggle-button.scss

@@ -0,0 +1,106 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+//
+// SIDE-NAV > TOGGLE BUTTON
+//
+
+
+.hds-side-nav__toggle-button {
+  position: absolute;
+  top: 22px;
+  left: calc(var(--token-side-nav-wrapper-border-width) * -1);
+  z-index: 1;
+  display: flex;
+  flex-direction: row-reverse;
+  align-items: center;
+  width: 26px;
+  height: 36px;
+  padding: 0 4px;
+  color: var(--token-color-foreground-high-contrast);
+  background: none;
+  background-color: var(--token-side-nav-color-surface-primary);
+  border: var(--token-side-nav-wrapper-border-width) solid var(--token-side-nav-wrapper-border-color);
+  border-left-color: transparent;
+  border-top-right-radius: var(--token-side-nav-toggle-button-border-radius);
+  border-bottom-right-radius: var(--token-side-nav-toggle-button-border-radius);
+  transform: translateX(var(--hds-app-sidenav-width-expanded));
+  cursor: pointer;
+  transition:
+    transform var(--hds-app-sidenav-animation-duration)
+    var(--hds-app-sidenav-animation-easing),
+    width var(--hds-app-sidenav-animation-duration)
+    var(--hds-app-sidenav-animation-easing);
+
+  &::before {
+    position: absolute;
+    top: calc(var(--token-side-nav-toggle-button-border-radius) * -2);
+    left: calc(var(--token-side-nav-wrapper-border-width) * -1);
+    box-sizing: border-box;
+    width: calc(var(--token-side-nav-toggle-button-border-radius) * 2);
+    height: calc(var(--token-side-nav-toggle-button-border-radius) * 2);
+    border-bottom: var(--token-side-nav-wrapper-border-width) solid var(--token-side-nav-wrapper-border-color);
+    border-left: var(--token-side-nav-wrapper-border-width) solid var(--token-side-nav-wrapper-border-color);
+    border-bottom-left-radius: var(--token-side-nav-toggle-button-border-radius);
+    box-shadow: 0 var(--token-side-nav-toggle-button-border-radius) 0 var(--token-side-nav-color-surface-primary);
+    content: "";
+  }
+
+  &::after {
+    position: absolute;
+    bottom: calc(var(--token-side-nav-toggle-button-border-radius) * -2);
+    left: calc(var(--token-side-nav-wrapper-border-width) * -1);
+    box-sizing: border-box;
+    width: calc(var(--token-side-nav-toggle-button-border-radius) * 2);
+    height: calc(var(--token-side-nav-toggle-button-border-radius) * 2);
+    border-top: var(--token-side-nav-wrapper-border-width) solid var(--token-side-nav-wrapper-border-color);
+    border-left: var(--token-side-nav-wrapper-border-width) solid var(--token-side-nav-wrapper-border-color);
+    border-top-left-radius: var(--token-side-nav-toggle-button-border-radius);
+    box-shadow: 0 calc(var(--token-side-nav-toggle-button-border-radius) * -1) 0 var(--token-side-nav-color-surface-primary);
+    content: "";
+  }
+
+  &:hover,
+  &.mock-hover {
+    width: 30px;
+    background-color: var(--token-side-nav-color-surface-interactive-hover);
+
+    &::before {
+      box-shadow: 0 var(--token-side-nav-toggle-button-border-radius) 0 var(--token-side-nav-color-surface-interactive-hover);
+    }
+
+    &::after {
+      box-shadow: 0 calc(var(--token-side-nav-toggle-button-border-radius) * -1) 0 var(--token-side-nav-color-surface-interactive-hover);
+    }
+  }
+
+  &:active,
+  &.mock-active {
+    background-color: var(--token-side-nav-color-surface-interactive-active);
+
+    &::before {
+      box-shadow: 0 var(--token-side-nav-toggle-button-border-radius) 0 var(--token-side-nav-color-surface-interactive-active);
+    }
+
+    &::after {
+      box-shadow: 0 calc(var(--token-side-nav-toggle-button-border-radius) * -1) 0 var(--token-side-nav-color-surface-interactive-active);
+    }
+  }
+
+  &:focus-visible,
+  &.mock-focus {
+    border-color: var(--token-color-focus-action-internal);
+    outline: 3px solid var(--token-color-focus-action-external);
+
+    &::before,
+    &::after {
+      display: none;
+    }
+  }
+
+  .hds-side-nav--is-minimized & {
+    transform: translateX(var(--hds-app-sidenav-width-minimized));
+  }
+}

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

@@ -16,13 +16,11 @@
   // breakpoint
   --hds-app-desktop-breakpoint: 1088px; // this is used only to read its value via JS and set the `hds-side-nav--is-desktop` class
   // widths
-  --hds-app-sidenav-width-minimized: 80px;
+  --hds-app-sidenav-width-minimized: 48px;
   --hds-app-sidenav-width-expanded: 280px;
   --hds-app-sidenav-width-fixed: var(--hds-app-sidenav-width-expanded);
-  // sidebar menu
-  --hds-app-sidenav-menu-button-y-shift: 84px;
   // animation
-  --hds-app-sidenav-animation-duration: 250ms;
+  --hds-app-sidenav-animation-duration: 200ms;
   --hds-app-sidenav-animation-delay: var(--hds-app-sidenav-animation-duration);
   --hds-app-sidenav-animation-easing: cubic-bezier(0.65, 0, 0.35, 1);
 }

package/app/styles/components/tag.scss

@@ -29,7 +29,7 @@ $hds-tag-border-radius: 50px;
 .hds-tag__dismiss {
   flex: 0 0 auto;
   margin: 0; // reset default button margin
-  padding: 6px 2px 6px 8px;
+  padding: 6px 4px 6px 8px;
   border: none; // reset default button border
   border-radius: inherit;
   border-top-right-radius: 0;

package/blueprints/hds-component-test/files/tests/acceptance/components/hds/__name__.js

@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import { module, test } from 'qunit';
+import { visit } from '@ember/test-helpers';
+import { setupApplicationTest } from 'dummy/tests/helpers';
+import { a11yAudit } from 'ember-a11y-testing/test-support';
+
+module('Acceptance | components/<%= dasherizedModuleName %>', function (hooks) {
+  setupApplicationTest(hooks);
+
+  test('Components/<%= dasherizedModuleName %> page passes automated a11y checks', async function (assert) {
+    await visit('/components/<%= dasherizedModuleName %>');
+
+    await a11yAudit();
+
+    assert.ok(true, 'a11y automation audit passed');
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hashicorp/design-system-components",
-  "version": "2.12.2",
+  "version": "2.14.0",
   "description": "Helios Design System Components",
   "keywords": [
     "hashicorp",
@@ -41,7 +41,7 @@
   "dependencies": {
     "@ember/render-modifiers": "^2.0.5",
     "@ember/test-waiters": "^3.0.2",
-    "@hashicorp/design-system-tokens": "^1.8.0",
+    "@hashicorp/design-system-tokens": "^1.9.0",
     "@hashicorp/ember-flight-icons": "^3.1.3",
     "dialog-polyfill": "^0.5.6",
     "ember-a11y-refocus": "^3.0.2",