@hashicorp/design-system-components 2.8.0 → 2.8.1

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @hashicorp/design-system-components
 
+## 2.8.1
+
+### Patch Changes
+
+- [#1516](https://github.com/hashicorp/design-system/pull/1516) [`f2192cad7`](https://github.com/hashicorp/design-system/commit/f2192cad73b6d966bf813f54dcee02e157c76392) Thanks [@didoo](https://github.com/didoo)! - `SideNav` - Fixed issue with links still being interactive (even if visually hidden) when the navigation is "minimized"
+
+- [#1518](https://github.com/hashicorp/design-system/pull/1518) [`5fd48e31e`](https://github.com/hashicorp/design-system/commit/5fd48e31ed3241ee19a8226bb28fa04ad79479c5) Thanks [@didoo](https://github.com/didoo)! - `PageHeader` - Fixed overflow of non-breaking text for `title`, `subtitle` and `description` elements
+
+- [#1494](https://github.com/hashicorp/design-system/pull/1494) [`169a85b63`](https://github.com/hashicorp/design-system/commit/169a85b6348649bc0e2411f3ab6f6a086eecb692) Thanks [@natmegs](https://github.com/natmegs)! - `Form::TextInput` - Add support for datetime-local type
+
+- [#1500](https://github.com/hashicorp/design-system/pull/1500) [`b6c2867a4`](https://github.com/hashicorp/design-system/commit/b6c2867a4b7d1c183e9a17d16208ed12ce1aa43f) Thanks [@didoo](https://github.com/didoo)! - - `SideNav` - updated layout styling for the `SideNav::List::Title` element
+
+- [#1520](https://github.com/hashicorp/design-system/pull/1520) [`7f7ec22c3`](https://github.com/hashicorp/design-system/commit/7f7ec22c387ac9df05d05de31e5c2b45d6324777) Thanks [@alex-ju](https://github.com/alex-ju)! - Upgrade `ember-style-modifier` to `3.0.1`
+
+- Updated dependencies [[`fd5953633`](https://github.com/hashicorp/design-system/commit/fd595363396c2e6672025ab8f9c3df7d2a3fce53)]:
+  - @hashicorp/design-system-tokens@1.7.0
+  - @hashicorp/ember-flight-icons@3.0.8
+
 ## 2.8.0
 
 ### Minor Changes

package/addon/components/hds/accordion/item/button.hbs

@@ -1,3 +1,8 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+~}}
+
 <button
   class={{this.classNames}}
   type="button"

package/addon/components/hds/accordion/item/index.hbs

@@ -1,3 +1,8 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+~}}
+
 <Hds::DisclosurePrimitive class={{this.classNames}} @isOpen={{@isOpen}} ...attributes>
   <:toggle as |t|>
     <div class="hds-accordion-item__toggle">

package/addon/components/hds/form/text-input/base.js

@@ -16,6 +16,7 @@ export const TYPES = [
   'url',
   'date',
   'time',
+  'datetime-local',
   'search',
 ];
 

package/addon/components/hds/page-header/index.hbs

@@ -8,7 +8,7 @@
     {{yield (hash IconTile=(component "hds/icon-tile" size="medium"))}}
     <div class="hds-page-header__main">
       <div class="hds-page-header__content">
-        <div class="hds-page-header__title-main">
+        <div class="hds-page-header__title-wrapper">
           {{yield (hash Title=(component "hds/page-header/title"))}}
           {{yield (hash Badges=(component "hds/page-header/badges"))}}
         </div>

package/app/styles/components/form/text-input.scss

@@ -88,7 +88,8 @@
   // DATE/TIME
 
   &[type="date"],
-  &[type="time"] {
+  &[type="time"],
+  &[type="datetime-local"] {
 
     // browsers set a specific width for these controls, we want to keep it
     width: initial;
@@ -108,7 +109,8 @@
 
   // we override the default icon with the Flight corresponding one
   // notice: the original in Chrome has two assets, one for light and one for dark mode, and uses a special syntax, but apparently it doesn't work if used in a stylesheet
-  &[type="date"] {
+  &[type="date"],
+  &[type="datetime-local"] {
     &::-webkit-calendar-picker-indicator {
       background-image: var(--token-form-text-input-background-image-data-url-date);
       background-position: center center;

package/app/styles/components/page-header.scss

@@ -42,6 +42,7 @@
   @container (min-width: 768px) {
     flex-direction: row;
     justify-content: space-between;
+    min-width: 0; // this is important or it will blow beyond the parent flexbox width with long non-breaking names
   }
 }
 
@@ -50,9 +51,11 @@
   flex-direction: column;
   flex-grow: 1;
   gap: 8px;
+  min-width: 0; // this is important or it will blow beyond the parent flexbox width with long non-breaking names
+  max-width: 100%;
 }
 
-.hds-page-header__title-main {
+.hds-page-header__title-wrapper {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
@@ -60,6 +63,11 @@
   align-items: center;
 }
 
+.hds-page-header__title {
+  max-width: 100%;
+  overflow-wrap: break-word;
+}
+
 .hds-page-header__badges-wrapper {
   display: flex;
   flex-wrap: wrap;
@@ -72,6 +80,11 @@
   gap: 4px;
 }
 
+.hds-page-header__subtitle,
+.hds-page-header__description {
+  overflow-wrap: break-word;
+}
+
 .hds-page-header__actions {
   display: flex;
   flex-direction: row;

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

@@ -34,9 +34,9 @@
 .hds-side-nav__list-title {
   display: flex;
   align-items: center;
-  min-height: 34px;
+  min-height: var(--token-side-nav-body-list-item-height);
   margin-top: var(--token-side-nav-body-list-margin-vertical);
-  padding: 0 var(--token-side-nav-body-list-item-padding-horizontal);
+  padding: 9px var(--token-side-nav-body-list-item-padding-horizontal); // 8px = (min-height - body-100-line-height) / 2
   color: var(--token-side-nav-color-foreground-faint);
 
   // Remove margin from title at top of all list-items & lists

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

@@ -191,6 +191,19 @@
     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
+    // (because of the `opacity: 0` of the parent) but the user can still interact with them
+    // and click on the links inside the sidenav even if they're not visible at all,
+    // so we have to block the interactivity of the whole container
+    // for reference see these PRs:
+    // - https://github.com/hashicorp/design-system/pull/1338
+    // - https://github.com/hashicorp/design-system/pull/1388
+    // - https://github.com/hashicorp/design-system/pull/1516
+    // and this codepen with a redux of the problem:
+    // - https://codepen.io/didoo/pen/mdQKMJW?editors=1100
+    pointer-events: none;
   }
 
   .hds-side-nav--is-mobile.hds-side-nav--is-not-minimized &,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hashicorp/design-system-components",
-  "version": "2.8.0",
+  "version": "2.8.1",
   "description": "Helios Design System Components",
   "keywords": [
     "hashicorp",
@@ -40,8 +40,8 @@
   },
   "dependencies": {
     "@ember/render-modifiers": "^2.0.5",
-    "@hashicorp/design-system-tokens": "^1.6.0",
-    "@hashicorp/ember-flight-icons": "^3.0.7",
+    "@hashicorp/design-system-tokens": "^1.7.0",
+    "@hashicorp/ember-flight-icons": "^3.0.8",
     "dialog-polyfill": "^0.5.6",
     "ember-a11y-refocus": "^3.0.2",
     "ember-auto-import": "^2.6.3",
@@ -54,7 +54,7 @@
     "ember-keyboard": "^8.2.0",
     "ember-named-blocks-polyfill": "^0.2.5",
     "ember-stargate": "^0.4.3",
-    "ember-style-modifier": "^0.8.0",
+    "ember-style-modifier": "^3.0.1",
     "ember-truth-helpers": "^3.1.1",
     "sass": "^1.62.1",
     "tippy.js": "^6.3.7"
@@ -102,7 +102,7 @@
     "prettier": "^2.8.8",
     "qunit": "^2.19.4",
     "qunit-dom": "^2.0.0",
-    "stylelint": "^14.16.1",
+    "stylelint": "^15.10.1",
     "stylelint-config-rational-order": "^0.1.2",
     "stylelint-config-standard-scss": "^5.0.0",
     "webpack": "^5.84.1"