@hashicorp/design-system-components 2.8.0 → 2.9.0

package/CHANGELOG.md

@@ -1,18 +1,57 @@
 # @hashicorp/design-system-components
 
+## 2.9.0
+
+### Minor Changes
+
+- [#1488](https://github.com/hashicorp/design-system/pull/1488) [`372bae36d`](https://github.com/hashicorp/design-system/commit/372bae36d87377dc87aa18ed39c7834a4cc545f4) Thanks [@MelSumner](https://github.com/MelSumner)! - Adds the `Hds::CopyButton` and `Hds::CopySnippet` components.
+
+### Patch Changes
+
+- [#1539](https://github.com/hashicorp/design-system/pull/1539) [`9d3f29a42`](https://github.com/hashicorp/design-system/commit/9d3f29a42e8130b2155498a7c3cb77a6da279a68) Thanks [@Dhaulagiri](https://github.com/Dhaulagiri)! - Adjusted closing brace on copywrite headers to avoid terminal noise
+
+- [#1549](https://github.com/hashicorp/design-system/pull/1549) [`a6553ea03`](https://github.com/hashicorp/design-system/commit/a6553ea032f70f0167f149589801b72154c3cf75) Thanks [@fivetanley](https://github.com/fivetanley)! - `Hds::Modal` - reduce test flakiness around closing Modal when using `@ember/test-helpers`
+
+- [#1530](https://github.com/hashicorp/design-system/pull/1530) [`b757e6efb`](https://github.com/hashicorp/design-system/commit/b757e6efb4c115abcd604bc4ef155f731f118c72) Thanks [@alex-ju](https://github.com/alex-ju)! - Fix Embroider warnings caused by incorrect export of internal utility functions
+
+- [#1552](https://github.com/hashicorp/design-system/pull/1552) [`865ff7aad`](https://github.com/hashicorp/design-system/commit/865ff7aad593bddf6f16bfdb1210318bedfa4e22) Thanks [@alex-ju](https://github.com/alex-ju)! - `Hds::Flyout` - reduce test flakiness around closing Flyout when using `@ember/test-helpers`
+
+- [#1529](https://github.com/hashicorp/design-system/pull/1529) [`1433fe098`](https://github.com/hashicorp/design-system/commit/1433fe0988b9c4e0d280ac450e6688e5d606630d) Thanks [@alex-ju](https://github.com/alex-ju)! - `Hds::Form::Field` - Fix error message for unexpected `@layout` values
+
+- Updated dependencies []:
+  - @hashicorp/ember-flight-icons@3.0.9
+
+## 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)! - `Hds::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)! - `Hds::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)! - `Hds::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)! - `Hds::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
 
-- [#1492](https://github.com/hashicorp/design-system/pull/1492) [`a17e5b2ac`](https://github.com/hashicorp/design-system/commit/a17e5b2acf66493ccbb68a623a3b7ba2fd5ab5a8) Thanks [@KristinLBradley](https://github.com/KristinLBradley)! - `Card` - Updated default value of `@overflow` argument to `"visible"` to address an area of consumer confusion and better support the most common use cases.
+- [#1492](https://github.com/hashicorp/design-system/pull/1492) [`a17e5b2ac`](https://github.com/hashicorp/design-system/commit/a17e5b2acf66493ccbb68a623a3b7ba2fd5ab5a8) Thanks [@KristinLBradley](https://github.com/KristinLBradley)! - `Hds::Card` - Updated default value of `@overflow` argument to `"visible"` to address an area of consumer confusion and better support the most common use cases.
 
-  Technically, this is a breaking change as it will require consumers relying upon the previous `hidden` default value to now manually set the value. The result of not setting the a `"hidden"` value can cause square edges of some images to "stick out" and overlap the rounded corners of the Card itself. We considered this to be a fairly minor, low-impact issue however which would not affect functionality or usability.
+  Technically, this is a breaking change as it will require consumers relying upon the previous `hidden` default value to now manually set the value. The result of not setting the a `hidden` value can cause square edges of some images to "stick out" and overlap the rounded corners of the Card itself. We considered this to be a fairly minor, low-impact issue however which would not affect functionality or usability.
 
-- [#1452](https://github.com/hashicorp/design-system/pull/1452) [`c277d0366`](https://github.com/hashicorp/design-system/commit/c277d036673cf572c00ebf5b8b35b424c0b057fd) Thanks [@alex-ju](https://github.com/alex-ju)! - `Form::TextInput` - Add loading state on "search" type
+- [#1452](https://github.com/hashicorp/design-system/pull/1452) [`c277d0366`](https://github.com/hashicorp/design-system/commit/c277d036673cf572c00ebf5b8b35b424c0b057fd) Thanks [@alex-ju](https://github.com/alex-ju)! - `Hds::Form::TextInput` - Add loading state on "search" type
 
-- [#1468](https://github.com/hashicorp/design-system/pull/1468) [`b0a766ccf`](https://github.com/hashicorp/design-system/commit/b0a766ccf5357dd6f0e8dfb68d8c1ee823e76b50) Thanks [@alex-ju](https://github.com/alex-ju)! - Added `MaskedInput` component for forms
+- [#1468](https://github.com/hashicorp/design-system/pull/1468) [`b0a766ccf`](https://github.com/hashicorp/design-system/commit/b0a766ccf5357dd6f0e8dfb68d8c1ee823e76b50) Thanks [@alex-ju](https://github.com/alex-ju)! - Add `Hds::Form::MaskedInput` component
 
-- [#1423](https://github.com/hashicorp/design-system/pull/1423) [`5ac340c8c`](https://github.com/hashicorp/design-system/commit/5ac340c8c3a3adab388704067578cf419e2e2f10) Thanks [@KristinLBradley](https://github.com/KristinLBradley)! - Add new `Accordion` component
+- [#1423](https://github.com/hashicorp/design-system/pull/1423) [`5ac340c8c`](https://github.com/hashicorp/design-system/commit/5ac340c8c3a3adab388704067578cf419e2e2f10) Thanks [@KristinLBradley](https://github.com/KristinLBradley)! - Add `Hds::Accordion` component
 
 ### Patch Changes
 
@@ -60,7 +99,7 @@
 
 - [#1426](https://github.com/hashicorp/design-system/pull/1426) [`1f8886a2d`](https://github.com/hashicorp/design-system/commit/1f8886a2d5117d74a0dddd4bca4a09d9fcedc8da) Thanks [@MelSumner](https://github.com/MelSumner)! - Style tweaks to standalone link
 
-- [#1434](https://github.com/hashicorp/design-system/pull/1434) [`eadefc4bd`](https://github.com/hashicorp/design-system/commit/eadefc4bdb4e5fd6c110a7be1d7d9aa720695678) Thanks [@alex-ju](https://github.com/alex-ju)! - Fix scroll management on `Modal` and `Flyout` resulting in stray `style` attribute on `<body>` element
+- [#1434](https://github.com/hashicorp/design-system/pull/1434) [`eadefc4bd`](https://github.com/hashicorp/design-system/commit/eadefc4bdb4e5fd6c110a7be1d7d9aa720695678) Thanks [@alex-ju](https://github.com/alex-ju)! - Fix scroll management on `Hds::Modal` and `Hds::Flyout` resulting in stray `style` attribute on `<body>` element
 
 - Updated dependencies [[`e6e0c22c5`](https://github.com/hashicorp/design-system/commit/e6e0c22c538e381f4a97428dc35cf1295ce6ae21)]:
   - @hashicorp/ember-flight-icons@3.0.6

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/copy/button/index.hbs

@@ -0,0 +1,16 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+<Hds::Button
+  class={{this.classNames}}
+  @size={{this.size}}
+  @isFullWidth={{@isFullWidth}}
+  @text={{@text}}
+  @icon={{this.icon}}
+  @isIconOnly={{@isIconOnly}}
+  @color="secondary"
+  @iconPosition="trailing"
+  {{clipboard text=@textToCopy target=@targetToCopy container=@container onError=this.onError onSuccess=this.onSuccess}}
+  ...attributes
+/>

package/addon/components/hds/copy/button/index.js

@@ -0,0 +1,91 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Component from '@glimmer/component';
+import { assert } from '@ember/debug';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export const DEFAULT_SIZE = 'medium';
+export const SIZES = ['small', 'medium'];
+export const DEFAULT_ICON = 'clipboard-copy';
+export const SUCCESS_ICON = 'clipboard-checked';
+export const ERROR_ICON = 'clipboard';
+export const DEFAULT_STATUS = 'idle';
+
+export default class HdsCopyButtonComponent extends Component {
+  @tracked status = DEFAULT_STATUS;
+  @tracked timer;
+
+  /**
+   * @param icon
+   * @type {string}
+   * @description The icon to be displayed for each status; automatically calculated based on the tracked property `status`.
+   */
+  get icon() {
+    let icon = DEFAULT_ICON;
+    if (this.status === 'success') {
+      icon = SUCCESS_ICON;
+    } else if (this.status === 'error') {
+      icon = ERROR_ICON;
+    }
+    return icon;
+  }
+
+  /**
+   * @param size
+   * @type {string}
+   * @default medium
+   * @description The size of the copy/button; acceptable values are `small` and `medium`
+   */
+  get size() {
+    let { size = DEFAULT_SIZE } = this.args;
+
+    assert(
+      `@size for "Hds::Copy::Button" must be one of the following: ${SIZES.join(
+        ', '
+      )}; received: ${size}`,
+      SIZES.includes(size)
+    );
+
+    return size;
+  }
+
+  /**
+   * Get the class names to apply to the component.
+   * @method CopyButton#classNames
+   * @return {string} The "class" attribute to apply to the component.
+   */
+  get classNames() {
+    let classes = ['hds-copy-button'];
+
+    // add a class based on the @size argument
+    classes.push(`hds-button--size-${this.size}`);
+
+    classes.push(`hds-copy-button--status-${this.status}`);
+
+    return classes.join(' ');
+  }
+
+  @action
+  onSuccess() {
+    this.status = 'success';
+    this.resetStatusDelayed();
+  }
+
+  @action
+  onError() {
+    this.status = 'error';
+    this.resetStatusDelayed();
+  }
+
+  resetStatusDelayed() {
+    clearTimeout(this.timer);
+    // make it fade back to the default state
+    this.timer = setTimeout(() => {
+      this.status = DEFAULT_STATUS;
+    }, 1500);
+  }
+}

package/addon/components/hds/copy/snippet/index.hbs

@@ -0,0 +1,15 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+<button
+  type="button"
+  class={{this.classNames}}
+  {{clipboard text=@textToCopy onError=this.onError onSuccess=this.onSuccess}}
+  ...attributes
+>
+  <span class="hds-copy-snippet__text hds-typography-code-100 {{if @isTruncated 'hds-copy-snippet__text--truncated'}}">
+    {{@textToCopy}}
+  </span>
+  <FlightIcon @name={{this.icon}} class="hds-copy-snippet__icon" />
+</button>

package/addon/components/hds/copy/snippet/index.js

@@ -0,0 +1,118 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Component from '@glimmer/component';
+import { assert } from '@ember/debug';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export const DEFAULT_COLOR = 'primary';
+export const COLORS = ['primary', 'secondary'];
+export const DEFAULT_ICON = 'clipboard-copy';
+export const SUCCESS_ICON = 'clipboard-checked';
+export const ERROR_ICON = 'clipboard';
+export const DEFAULT_STATUS = 'idle';
+
+export default class HdsCopySnippetIndexComponent extends Component {
+  @tracked status = DEFAULT_STATUS;
+  @tracked timer;
+
+  /**
+   * @param icon
+   * @type {string}
+   * @default DEFAULT_ICON
+   * @description Determines the icon to be used, based on the success state. Note that this is auto-tracked because it depends on a tracked property (status).
+   */
+  get icon() {
+    let icon = DEFAULT_ICON;
+    if (this.status === 'success') {
+      icon = SUCCESS_ICON;
+    } else if (this.status === 'error') {
+      icon = ERROR_ICON;
+    }
+    return icon;
+  }
+
+  /**
+   * @param color
+   * @type {string}
+   * @default primary
+   * @description Determines the color of button to be used; acceptable values are `primary` and `secondary`
+   */
+  get color() {
+    let { color = DEFAULT_COLOR } = this.args;
+
+    assert(
+      `@color for "Hds::Copy::Snippet" must be one of the following: ${COLORS.join(
+        ', '
+      )}; received: ${color}`,
+      COLORS.includes(color)
+    );
+
+    return color;
+  }
+
+  /**
+   * @param isFullWidth
+   * @type {boolean}
+   * @default false
+   * @description Indicates that the component should take up the full width of the parent container.
+   */
+  get isFullWidth() {
+    return this.args.isFullWidth ?? false;
+  }
+
+  /**
+   * @param isTruncated
+   * @type {boolean}
+   * @default false
+   * @description Indicates that the component should be truncated instead of wrapping text and using multiple lines.
+   */
+  get isTruncated() {
+    return this.args.isTruncated ?? false;
+  }
+
+  /**
+   * Get the class names to apply to the component.
+   * @method CopySnippet#classNames
+   * @return {string} The "class" attribute to apply to the component.
+   */
+  get classNames() {
+    let classes = ['hds-copy-snippet'];
+
+    // add a class based on the @color argument
+    classes.push(`hds-copy-snippet--color-${this.color}`);
+
+    // add a class based on the tracked status (idle/success/error)
+    classes.push(`hds-copy-snippet--status-${this.status}`);
+
+    // add a class based on the @isFullWidth argument
+    if (this.isFullWidth) {
+      classes.push('hds-copy-snippet--width-full');
+    }
+
+    return classes.join(' ');
+  }
+
+  @action
+  onSuccess() {
+    this.status = 'success';
+    this.resetStatusDelayed();
+  }
+
+  @action
+  onError() {
+    this.status = 'error';
+    this.resetStatusDelayed();
+  }
+
+  resetStatusDelayed() {
+    clearTimeout(this.timer);
+    // make it fade back to the default state
+    this.timer = setTimeout(() => {
+      this.status = DEFAULT_STATUS;
+    }, 1500);
+  }
+}

package/addon/components/hds/dropdown/list-item/copy-item.hbs

@@ -8,13 +8,5 @@
       class="hds-dropdown-list-item__copy-item-title hds-typography-body-100 hds-font-weight-semibold"
     >{{@copyItemTitle}}</div>
   {{/if}}
-  <button type="button" class="{{if this.isSuccess 'is-success'}}" {{on "click" this.copyCode}}>
-    <div class="hds-dropdown-list-item__copy-item-text hds-typography-code-100">
-      {{this.text}}
-    </div>
-    <FlightIcon
-      @name="{{if this.isSuccess 'clipboard-checked' 'clipboard-copy'}}"
-      class="hds-dropdown-list-item__copy-item-icon"
-    />
-  </button>
+  <Hds::Copy::Snippet @textToCopy={{this.text}} @isTruncated={{@isTruncated}} />
 </li>

package/addon/components/hds/dropdown/list-item/copy-item.js

@@ -5,12 +5,8 @@
 
 import Component from '@glimmer/component';
 import { assert } from '@ember/debug';
-import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
 
 export default class HdsDropdownListItemCopyItemComponent extends Component {
-  @tracked isSuccess = false;
-
   /**
    * @param text
    * @type {string}
@@ -26,7 +22,6 @@ export default class HdsDropdownListItemCopyItemComponent extends Component {
 
     return text;
   }
-
   /**
    * Get the class names to apply to the component.
    * @method classNames
@@ -40,29 +35,4 @@ export default class HdsDropdownListItemCopyItemComponent extends Component {
 
     return classes.join(' ');
   }
-
-  @action
-  async copyCode() {
-    // https://developer.mozilla.org/en-US/docs/Web/API/Clipboard
-    await navigator.clipboard.writeText(this.args.text);
-
-    if (navigator.clipboard.readText) {
-      const result = await navigator.clipboard.readText();
-
-      if (result === this.args.text) {
-        this.isSuccess = true;
-      }
-    } else {
-      // assume that it works so Firefox can show the success state
-      // doesn't confirm that you'll get the correct pasted text
-      // but we accept this as a reasonable tradeoff
-      // since users can always copy/paste manually.
-      this.isSuccess = true;
-    }
-
-    // make it fade back to the default state
-    setTimeout(() => {
-      this.isSuccess = false;
-    }, 1000);
-  }
 }

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

@@ -8,6 +8,15 @@ import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { assert } from '@ember/debug';
 import { getElementId } from '@hashicorp/design-system-components/utils/hds-get-element-id';
+import { buildWaiter } from '@ember/test-waiters';
+import { DEBUG } from '@glimmer/env';
+
+let waiter;
+
+// Notice: this code will get stripped out in production builds (DEBUG evaluates to `true` in dev/test builds, but `false` in prod builds)
+if (DEBUG) {
+  waiter = buildWaiter('@hashicorp/design-system-components:flyout');
+}
 
 export const DEFAULT_SIZE = 'medium';
 export const DEFAULT_HAS_OVERLAY = true;
@@ -115,7 +124,19 @@ export default class HdsFlyoutIndexComponent extends Component {
   }
 
   @action
-  onDismiss() {
+  async onDismiss() {
+    // allow ember test helpers to be aware of when the `close` event fires
+    // when using `click` or other helpers from '@ember/test-helpers'
+    // Notice: this code will get stripped out in production builds (DEBUG evaluates to `true` in dev/test builds, but `false` in prod builds)
+    if (DEBUG && this.element.open) {
+      let token = waiter.beginAsync();
+      let listener = () => {
+        waiter.endAsync(token);
+        this.element.removeEventListener('close', listener);
+      };
+      this.element.addEventListener('close', listener);
+    }
+
     // Make flyout dialog invisible using the native `close` method
     this.element.close();
 

package/addon/components/hds/form/field/index.js

@@ -40,7 +40,7 @@ export default class HdsFormFieldIndexComponent extends Component {
     let { layout } = this.args;
 
     assert(
-      `@type for "Hds::Form::Field" must be one of the following: ${LAYOUT_TYPES.join(
+      `@layout for "Hds::Form::Field" must be one of the following: ${LAYOUT_TYPES.join(
         ', '
       )}; received: ${layout}`,
       LAYOUT_TYPES.includes(layout)

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/modal/index.js

@@ -8,6 +8,15 @@ import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { assert } from '@ember/debug';
 import { getElementId } from '@hashicorp/design-system-components/utils/hds-get-element-id';
+import { buildWaiter } from '@ember/test-waiters';
+import { DEBUG } from '@glimmer/env';
+
+let waiter;
+
+// Notice: this code will get stripped out in production builds (DEBUG evaluates to `true` in dev/test builds, but `false` in prod builds)
+if (DEBUG) {
+  waiter = buildWaiter('@hashicorp/design-system-components:modal');
+}
 
 export const DEFAULT_SIZE = 'medium';
 export const DEFAULT_COLOR = 'neutral';
@@ -156,7 +165,19 @@ export default class HdsModalIndexComponent extends Component {
   }
 
   @action
-  onDismiss() {
+  async onDismiss() {
+    // allow ember test helpers to be aware of when the `close` event fires
+    // when using `click` or other helpers from '@ember/test-helpers'
+    // Notice: this code will get stripped out in production builds (DEBUG evaluates to `true` in dev/test builds, but `false` in prod builds)
+    if (DEBUG && this.element.open) {
+      let token = waiter.beginAsync();
+      let listener = () => {
+        waiter.endAsync(token);
+        this.element.removeEventListener('close', listener);
+      };
+      this.element.addEventListener('close', listener);
+    }
+
     // Make modal dialog invisible using the native `close` method
     this.element.close();
 

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/components/hds/copy/button/index.js

@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+export { default } from '@hashicorp/design-system-components/components/hds/copy/button/index';

package/app/components/hds/copy/index.js

@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+export { default } from '@hashicorp/design-system-components/components/hds/copy/index';

package/app/components/hds/copy/snippet/index.js

@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+export { default } from '@hashicorp/design-system-components/components/hds/copy/snippet/index';

package/app/styles/@hashicorp/design-system-components.scss

@@ -23,6 +23,7 @@
 @use "../components/button";
 @use "../components/button-set";
 @use "../components/card";
+@use "../components/copy";
 @use "../components/disclosure-primitive";
 @use "../components/dismiss-button";
 @use "../components/dropdown";

package/app/styles/components/copy/button.scss

@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+//
+// COPY > BUTTON
+//
+
+// mostly the hds-button but with a few style tweaks
+// so the CSS is scoped to the component class (we're not changing any of the other class names)
+.hds-copy-button {
+  cursor: pointer;
+
+  .hds-button__icon {
+    color: var(--token-color-foreground-action);
+  }
+
+  &.hds-copy-button--status-success {
+    .hds-button__icon {
+      color: var(--token-color-foreground-success);
+    }
+  }
+
+  &.hds-copy-button--status-error {
+    .hds-button__icon {
+      color: var(--token-color-foreground-critical);
+    }
+  }
+}
+

package/app/styles/components/copy/index.scss

@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+@use "./button.scss";
+@use "./snippet.scss";
+

package/app/styles/components/copy/snippet.scss

@@ -0,0 +1,111 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+//
+// COPY > SNIPPET
+//
+@use "../../mixins/focus-ring" as *;
+
+.hds-copy-snippet {
+  @include hds-focus-ring-with-pseudo-element();
+
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 6px 4px;
+  white-space: normal;
+  text-align: left;
+  overflow-wrap: anywhere;
+  border: 1px solid transparent;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.hds-copy-snippet--color-primary {
+  color: var(--token-color-foreground-action);
+  background-color: var(--token-color-surface-interactive);
+
+  &:hover,
+  &.mock-hover {
+    color: var(--token-color-foreground-action-hover);
+    border-color: var(--token-color-border-strong);
+  }
+
+  &:active,
+  &.mock-active {
+    color: var(--token-color-foreground-action-active);
+    background-color: var(--token-color-surface-interactive-active);
+    border-color: var(--token-color-border-strong);
+  }
+}
+
+.hds-copy-snippet--color-secondary {
+  color: var(--token-color-foreground-primary);
+  background-color: var(--token-color-surface-interactive);
+
+  &:hover,
+  &.mock-hover {
+    border-color: var(--token-color-border-strong);
+  }
+
+  &:active,
+  &.mock-active {
+    background-color: var(--token-color-surface-interactive-active);
+    border-color: var(--token-color-border-strong);
+  }
+
+  .hds-copy-snippet__icon {
+    color: var(--token-color-foreground-action);
+
+    &:hover {
+      color: var(--token-color-foreground-action-hover);
+    }
+
+    &:active {
+      color: var(--token-color-foreground-action-active);
+    }
+
+    &:focus {
+      color: var(--token-color-foreground-action);
+    }
+  }
+}
+
+.hds-copy-snippet--status-success {
+  .hds-copy-snippet__icon {
+    color: var(--token-color-foreground-success);
+  }
+}
+
+.hds-copy-snippet--status-error {
+  .hds-copy-snippet__icon {
+    color: var(--token-color-foreground-critical);
+  }
+}
+
+.hds-copy-snippet__text {
+  flex: 1 0 0;
+  max-width: calc(100% - 24px);
+}
+
+.hds-copy-snippet__icon {
+  flex: none;
+}
+
+.hds-copy-snippet--width-full {
+  justify-content: center;
+
+  .hds-copy-snippet__text {
+    flex: 0 0 auto;
+  }
+}
+
+.hds-copy-snippet__text--truncated {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}

package/app/styles/components/dropdown.scss

@@ -279,60 +279,8 @@ $hds-dropdown-toggle-border-radius: $hds-button-border-radius;
 .hds-dropdown-list-item--variant-copy-item {
   width: 100%;
   padding: 10px 16px 12px;
-
-  button {
-    display: flex;
-    justify-content: space-between;
-    width: 100%;
-    padding: 12px 8px;
-    color: var(--token-color-foreground-primary);
-    background-color: transparent;
-    border: 1px solid var(--token-color-border-primary);
-    border-radius: 5px;
-
-    &:hover,
-    &.mock-hover {
-      background-color: var(--token-color-surface-interactive-hover);
-      cursor: pointer;
-    }
-
-    @include hds-focus-ring-basic();
-
-    &:focus,
-    &.mock-focus {
-      // TODO this focus is just way too complex
-      background-color: var(--token-color-surface-action);
-      border-color: var(--token-color-focus-action-internal);
-    }
-
-    &:active,
-    &.mock-active {
-      background-color: var(--token-color-surface-interactive-active);
-    }
-
-    &.is-success {
-      background-color: var(--token-color-surface-success);
-      border-color: var(--token-color-border-success);
-
-      .hds-dropdown-list-item__copy-item-icon {
-        color: var(--token-color-foreground-success);
-      }
-    }
-  }
-}
-
-.hds-dropdown-list-item__copy-item-text {
-  overflow: hidden;
-  white-space: nowrap;
-  text-align: left;
-  text-overflow: ellipsis;
 }
 
-.hds-dropdown-list-item__copy-item-icon {
-  flex: none;
-  margin-left: 8px;
-  color: var(--token-color-foreground-action);
-}
 
 // HDS::DROPDOWN::LIST-ITEM::DESCRIPTION
 

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.9.0",
   "description": "Helios Design System Components",
   "keywords": [
     "hashicorp",
@@ -40,13 +40,15 @@
   },
   "dependencies": {
     "@ember/render-modifiers": "^2.0.5",
-    "@hashicorp/design-system-tokens": "^1.6.0",
-    "@hashicorp/ember-flight-icons": "^3.0.7",
+    "@ember/test-waiters": "^3.0.2",
+    "@hashicorp/design-system-tokens": "^1.7.0",
+    "@hashicorp/ember-flight-icons": "^3.0.9",
     "dialog-polyfill": "^0.5.6",
     "ember-a11y-refocus": "^3.0.2",
     "ember-auto-import": "^2.6.3",
     "ember-cached-decorator-polyfill": "^0.1.4",
     "ember-cli-babel": "^7.26.11",
+    "ember-cli-clipboard": "^1.0.0",
     "ember-cli-htmlbars": "^6.2.0",
     "ember-cli-sass": "^10.0.1",
     "ember-composable-helpers": "^4.5.0",
@@ -54,7 +56,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"
@@ -73,7 +75,6 @@
     "ember-a11y-testing": "^5.2.1",
     "ember-body-class": "^3.0.0",
     "ember-cli": "~4.12.1",
-    "ember-cli-clipboard": "^1.0.0",
     "ember-cli-dependency-checker": "^3.3.1",
     "ember-cli-deprecation-workflow": "^2.1.0",
     "ember-cli-inject-live-reload": "^2.1.0",
@@ -102,7 +103,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"

package/app/utils/hds-get-element-id.js

@@ -1,6 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-export { default } from '@hashicorp/design-system-components/utils/hds-get-element-id';

package/app/utils/hds-set-aria-described-by.js

@@ -1,6 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-export { default } from '@hashicorp/design-system-components/utils/hds-set-aria-described-by';