@hashicorp/design-system-components 2.3.3 → 2.4.1

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @hashicorp/design-system-components
 
+## 2.4.1
+
+### Patch Changes
+
+- Updated dependencies [[`2c7d70868`](https://github.com/hashicorp/design-system/commit/2c7d70868b0fa000618214589e2422e07db68b22)]:
+  - @hashicorp/ember-flight-icons@3.0.3
+
+## 2.4.0
+
+### Minor Changes
+
+- [#1371](https://github.com/hashicorp/design-system/pull/1371) [`aa2be65cf`](https://github.com/hashicorp/design-system/commit/aa2be65cf3df7742c09d772b4f14b2b56f549b53) Thanks [@KristinLBradley](https://github.com/KristinLBradley)! - Refactor `Hds::Disclosure` internal utility component into two new components:
+  - Rename the original `Hds::Disclosure` component to `Hds::MenuPrimitive`
+  - Add a new `Hds::DisclosurePrimitive` component stripped of the “click outside/unfocus/esc to close” functionality
+
+### Patch Changes
+
+- [#1373](https://github.com/hashicorp/design-system/pull/1373) [`b2949f208`](https://github.com/hashicorp/design-system/commit/b2949f2087b0e52574a927bb095dc748a6aa81c3) Thanks [@MelSumner](https://github.com/MelSumner)! - Updates aria-label support for consistency. Consumers can now see in the component API docs where `@ariaLabel` is supported for a custom value, and what the fallback value is.
+
+- [#1364](https://github.com/hashicorp/design-system/pull/1364) [`3e1543077`](https://github.com/hashicorp/design-system/commit/3e1543077960d682c9e16d335a894186cf2ef6ad) Thanks [@alex-ju](https://github.com/alex-ju)! - Prevent `Tooltip` content from overflowing
+
 ## 2.3.3
 
 ### Patch Changes

package/README.md

@@ -53,7 +53,7 @@ Finally, add this line to the top of your app's style file (`app.scss` or simila
 Usage
 ------------------------------------------------------------------------------
 
-See the dedicated components website: https://design-system-components-hashicorp.vercel.app/
+See the dedicated components website: https://helios.hashicorp.design/components
 
 
 Contributing

package/addon/components/hds/breadcrumb/index.hbs

@@ -2,7 +2,7 @@
   Copyright (c) HashiCorp, Inc.
   SPDX-License-Identifier: MPL-2.0
 }}
-<nav class={{this.classNames}} aria-label="breadcrumbs" ...attributes>
+<nav class={{this.classNames}} aria-label={{this.ariaLabel}} ...attributes>
   <ol class="hds-breadcrumb__list" {{did-insert this.didInsert}}>
     {{yield}}
   </ol>

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

@@ -32,6 +32,15 @@ export default class HdsBreadcrumbComponent extends Component {
     return this.args.itemsCanWrap ?? true;
   }
 
+  /**
+   * @param ariaLabel
+   * @type {string}
+   * @default 'breadcrumbs'
+   */
+  get ariaLabel() {
+    return this.args.ariaLabel ?? 'breadcrumbs';
+  }
+
   /**
    * Get the class names to apply to the component.
    * @method Breadcrumb#classNames

package/addon/components/hds/breadcrumb/truncation.hbs

@@ -3,12 +3,12 @@
   SPDX-License-Identifier: MPL-2.0
 }}
 <li class="hds-breadcrumb__item hds-breadcrumb__item--is-truncation" ...attributes>
-  <Hds::Disclosure>
+  <Hds::MenuPrimitive>
     <:toggle as |t|>
       <button
         type="button"
         class="hds-breadcrumb__truncation-toggle"
-        aria-label="show more"
+        aria-label={{this.ariaLabel}}
         aria-expanded={{if t.isOpen "true" "false"}}
         {{on "click" t.onClickToggle}}
       >
@@ -22,5 +22,5 @@
         </ol>
       </div>
     </:content>
-  </Hds::Disclosure>
+  </Hds::MenuPrimitive>
 </li>

package/addon/components/hds/breadcrumb/truncation.js

@@ -0,0 +1,12 @@
+import Component from '@glimmer/component';
+
+export default class HdsBreadcrumbTruncationComponent extends Component {
+  /**
+   * @param ariaLabel
+   * @type {string}
+   * @default 'show more'
+   */
+  get ariaLabel() {
+    return this.args.ariaLabel ?? 'show more';
+  }
+}

package/addon/components/hds/disclosure-primitive/index.hbs

@@ -0,0 +1,14 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+<div class="hds-disclosure-primitive" ...attributes>
+  <div class="hds-disclosure-primitive__toggle">
+    {{yield (hash onClickToggle=this.onClickToggle isOpen=this.isOpen) to="toggle"}}
+  </div>
+  {{#if this.isOpen}}
+    <div class="hds-disclosure-primitive__content">
+      {{yield (hash close=this.close) to="content"}}
+    </div>
+  {{/if}}
+</div>

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

@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { schedule } from '@ember/runloop';
+
+export default class HdsDisclosurePrimitiveComponent extends Component {
+  @tracked isOpen; // notice: if in the future we need to add a "@isOpen" prop to control the status from outside (eg to have the DisclosurePrimitive opened on render) just add  "this.args.isOpen" here to initalize the variable
+
+  @action
+  onClickToggle() {
+    this.isOpen = !this.isOpen;
+  }
+
+  @action
+  close() {
+    // we schedule this afterRender to avoid an error in tests caused by updating `isOpen` multiple times in the same computation
+    schedule('afterRender', () => {
+      this.isOpen = false;
+      // we call the "onClose" callback if it exists (and is a function)
+      if (this.args.onClose && typeof this.args.onClose === 'function') {
+        this.args.onClose();
+      }
+    });
+  }
+}

package/addon/components/hds/dismiss-button/index.hbs

@@ -2,6 +2,6 @@
   Copyright (c) HashiCorp, Inc.
   SPDX-License-Identifier: MPL-2.0
 }}
-<button class="hds-dismiss-button" type="button" aria-label="Dismiss" ...attributes>
+<button class="hds-dismiss-button" type="button" aria-label={{this.ariaLabel}} ...attributes>
   <FlightIcon @name="x" @size="16" @isInlineBlock={{false}} />
 </button>

package/addon/components/hds/dismiss-button/index.js

@@ -0,0 +1,12 @@
+import Component from '@glimmer/component';
+
+export default class HdsDismissButtonIndexComponent extends Component {
+  /**
+   * @param ariaLabel
+   * @type {string}
+   * @default 'Dismiss'
+   */
+  get ariaLabel() {
+    return this.args.ariaLabel ?? 'Dismiss';
+  }
+}

package/addon/components/hds/dropdown/index.hbs

@@ -2,7 +2,7 @@
   Copyright (c) HashiCorp, Inc.
   SPDX-License-Identifier: MPL-2.0
 }}
-<Hds::Disclosure class={{this.classNames}} @onClose={{@onClose}} ...attributes>
+<Hds::MenuPrimitive class={{this.classNames}} @onClose={{@onClose}} ...attributes>
   <:toggle as |t|>
     {{yield
       (hash
@@ -33,4 +33,4 @@
       {{yield (hash close=c.close Footer=(component "hds/dropdown/footer"))}}
     </div>
   </:content>
-</Hds::Disclosure>
+</Hds::MenuPrimitive>

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

@@ -4,7 +4,7 @@
  */
 
 import Component from '@glimmer/component';
-import { getElementId } from '../../form/utils/getElementId';
+import { getElementId } from '@hashicorp/design-system-components/utils/hds-get-element-id';
 
 export default class HdsDropdownListItemCheckboxComponent extends Component {
   /**

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

@@ -36,4 +36,5 @@
       {{/if}}
     </span>
   </Hds::Interactive>
-</li>
+</li>
+{{! template-lint-enable require-context-role require-presentational-children }}

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

@@ -4,7 +4,7 @@
  */
 
 import Component from '@glimmer/component';
-import { getElementId } from '../../form/utils/getElementId';
+import { getElementId } from '@hashicorp/design-system-components/utils/hds-get-element-id';
 
 export default class HdsDropdownListItemRadioComponent extends Component {
   /**

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

@@ -4,10 +4,10 @@
  */
 
 import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { assert } from '@ember/debug';
-import { getElementId } from '../form/utils/getElementId';
-import { tracked } from '@glimmer/tracking';
+import { getElementId } from '@hashicorp/design-system-components/utils/hds-get-element-id';
 
 export const DEFAULT_SIZE = 'medium';
 export const DEFAULT_HAS_OVERLAY = true;

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

@@ -7,9 +7,9 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { assert } from '@ember/debug';
 import { action } from '@ember/object';
-import { getElementId } from '../utils/getElementId';
-import { setAriaDescribedBy } from '../utils/setAriaDescribedBy';
 import { schedule } from '@ember/runloop';
+import { getElementId } from '@hashicorp/design-system-components/utils/hds-get-element-id';
+import { setAriaDescribedBy } from '@hashicorp/design-system-components/utils/hds-set-aria-described-by';
 
 export const LAYOUT_TYPES = ['vertical', 'flag'];
 

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

@@ -6,8 +6,8 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
-import { getElementId } from '../utils/getElementId';
-import { setAriaDescribedBy } from '../utils/setAriaDescribedBy';
+import { getElementId } from '@hashicorp/design-system-components/utils/hds-get-element-id';
+import { setAriaDescribedBy } from '@hashicorp/design-system-components/utils/hds-set-aria-described-by';
 
 export default class HdsFormFieldsetIndexComponent extends Component {
   @tracked ariaDescribedBy = this.args.extraAriaDescribedBy;

package/addon/components/hds/form/radio-card/index.js

@@ -7,8 +7,8 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { assert } from '@ember/debug';
-import { setAriaDescribedBy } from '../utils/setAriaDescribedBy';
 import { schedule } from '@ember/runloop';
+import { setAriaDescribedBy } from '@hashicorp/design-system-components/utils/hds-set-aria-described-by';
 
 export const DEFAULT_CONTROL_POSITION = 'bottom';
 export const DEFAULT_ALIGNMENT = 'left';

package/addon/components/hds/{disclosure → menu-primitive}/index.hbs

@@ -4,18 +4,19 @@
 }}
 {{! template-lint-disable no-invalid-interactive }}
 <div
-  class="hds-disclosure"
+  class="hds-menu-primitive"
   ...attributes
   {{did-insert this.didInsert}}
   {{on "focusout" this.onFocusOut}}
   {{on "keyup" this.onKeyUp}}
 >
-  <div class="hds-disclosure__toggle" tabindex="-1">
+  <div class="hds-menu-primitive__toggle" tabindex="-1">
     {{yield (hash onClickToggle=this.onClickToggle isOpen=this.isOpen) to="toggle"}}
   </div>
   {{#if this.isOpen}}
-    <div class="hds-disclosure__content" tabindex="-1">
+    <div class="hds-menu-primitive__content" tabindex="-1">
       {{yield (hash close=this.close) to="content"}}
     </div>
   {{/if}}
-</div>
+</div>
+{{! template-lint-enable no-invalid-interactive }}

package/addon/components/hds/{disclosure → menu-primitive}/index.js

@@ -8,8 +8,8 @@ import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { schedule } from '@ember/runloop';
 
-export default class HdsDisclosureComponent extends Component {
-  @tracked isOpen; // notice: if in the future we need to add a "@isOpen" prop to control the status from outside (eg to have the Disclosure opened on render) just add  "this.args.isOpen" here to initalize the variable
+export default class HdsMenuPrimitiveComponent extends Component {
+  @tracked isOpen; // notice: if in the future we need to add a "@isOpen" prop to control the status from outside (eg to have the MenuPrimitive opened on render) just add  "this.args.isOpen" here to initalize the variable
   @tracked toggleRef;
 
   @action
@@ -24,7 +24,7 @@ export default class HdsDisclosureComponent extends Component {
       this.toggleRef = event.currentTarget;
     }
     this.isOpen = !this.isOpen;
-    // we explicitly apply a focus state to the toggle element to overcome a bug in WebKit (see b8abfcf)
+    // we explicitly apply a focus state to the toggle element to overcome a bug in WebKit (see https://github.com/hashicorp/design-system/commit/40cd7f6b3cb15c45f9a1235fafd0fb3ed58e6e62)
     this.toggleRef.focus();
   }
 

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

@@ -4,10 +4,10 @@
  */
 
 import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { assert } from '@ember/debug';
-import { getElementId } from '../form/utils/getElementId';
-import { tracked } from '@glimmer/tracking';
+import { getElementId } from '@hashicorp/design-system-components/utils/hds-get-element-id';
 
 export const DEFAULT_SIZE = 'medium';
 export const DEFAULT_COLOR = 'neutral';

package/addon/components/hds/pagination/compact/index.hbs

@@ -3,7 +3,7 @@
   SPDX-License-Identifier: MPL-2.0
 }}
 <div class="hds-pagination" ...attributes>
-  <nav class="hds-pagination-nav" aria-label="Pagination navigation">
+  <nav class="hds-pagination-nav" aria-label={{this.ariaLabel}}>
     <Hds::Pagination::Nav::Arrow
       @direction="prev"
       @showLabel={{this.showLabels}}

package/addon/components/hds/pagination/compact/index.js

@@ -47,6 +47,15 @@ export default class HdsPaginationCompactIndexComponent extends Component {
     return showLabels;
   }
 
+  /**
+   * @param ariaLabel
+   * @type {string}
+   * @default 'Pagination navigation'
+   */
+  get ariaLabel() {
+    return this.args.ariaLabel ?? 'Pagination navigation';
+  }
+
   get routeQueryParams() {
     return this.router.currentRoute?.queryParams || {};
   }

package/addon/components/hds/pagination/numbered/index.hbs

@@ -12,7 +12,7 @@
     />
   {{/if}}
 
-  <nav class="hds-pagination-nav" aria-label="Pagination navigation">
+  <nav class="hds-pagination-nav" aria-label={{this.ariaLabel}}>
     <Hds::Pagination::Nav::Arrow
       @direction="prev"
       @showLabel={{this.showLabels}}

package/addon/components/hds/pagination/numbered/index.js

@@ -4,8 +4,8 @@
  */
 
 import Component from '@glimmer/component';
-import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
 import { assert } from '@ember/debug';
 import { inject as service } from '@ember/service';
 
@@ -127,6 +127,15 @@ export default class HdsPaginationNumberedIndexComponent extends Component {
     );
   }
 
+  /**
+   * @param ariaLabel
+   * @type {string}
+   * @default 'Pagination navigation'
+   */
+  get ariaLabel() {
+    return this.args.ariaLabel ?? 'Pagination navigation';
+  }
+
   // This very specific `get/set` pattern is used to handle the two different use cases of the component
   // being "controlled" (when it has routing, meaning it needs to support links as controls)
   // vs being "uncontrolled" (see comments above for details).
@@ -258,7 +267,7 @@ export default class HdsPaginationNumberedIndexComponent extends Component {
         this.currentPage + 1,
         this.currentPageSize
       );
-      // IMPORTANT: here we neeed to use an object and not an array
+      // IMPORTANT: here we need to use an object and not an array
       // otherwise the {{get object page}} will be shifted by one
       // (the pages are 1-based while the array would be zero-based)
       routing.queryPages = {};

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

@@ -21,8 +21,7 @@
         class="hds-side-nav__menu-toggle-button"
         type="button"
         {{on "click" this.toggleMinimizedStatus}}
-        {{! To be localized - see: https://hashicorp.atlassian.net/browse/HDS-567 }}
-        aria-label={{if this.isMinimized "Open menu" "Close menu"}}
+        aria-label={{this.ariaLabel}}
       >
         <FlightIcon @name={{if this.isMinimized "menu" "x"}} @size="24" @stretched={{true}} />
       </button>

package/addon/components/hds/side-nav/index.js

@@ -4,8 +4,8 @@
  */
 
 import Component from '@glimmer/component';
-import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
 import { assert } from '@ember/debug';
 import { registerDestructor } from '@ember/destroyable';
 
@@ -55,6 +55,18 @@ export default class HdsSideNavComponent extends Component {
     return this.isResponsive && !this.isDesktop && !this.isMinimized;
   }
 
+  /**
+   * @param ariaLabel
+   * @type {string}
+   * @default 'close menu'
+   */
+  get ariaLabel() {
+    if (this.isMinimized) {
+      return this.args.ariaLabel ?? 'Open menu';
+    }
+    return this.args.ariaLabel ?? 'Close menu';
+  }
+
   get classNames() {
     let classes = []; // `hds-side-nav` is already set by the "Hds::SideNav::Base" component
 

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

@@ -4,8 +4,8 @@
  */
 
 import Component from '@glimmer/component';
-import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
 import { assert } from '@ember/debug';
 
 const DENSITIES = ['short', 'medium', 'tall'];

package/addon/components/hds/tabs/index.hbs

@@ -34,4 +34,5 @@
       )
     )
   }}
-</div>
+</div>
+{{! template-lint-enable no-invalid-role }}

package/addon/components/hds/tabs/tab.hbs

@@ -26,4 +26,5 @@
       <Hds::BadgeCount @text={{@count}} @size="small" class="hds-tabs__tab-count" role="presentation" />
     {{/if}}
   </button>
-</li>
+</li>
+{{! template-lint-enable require-context-role no-invalid-role }}

package/addon/components/hds/tag/index.hbs

@@ -4,7 +4,7 @@
 }}
 <span class={{this.classNames}} ...attributes>
   {{#if this.onDismiss}}
-    <button class="hds-tag__dismiss" type="button" aria-label="Dismiss {{this.text}}" {{on "click" this.onDismiss}}>
+    <button class="hds-tag__dismiss" type="button" aria-label={{this.ariaLabel}} {{on "click" this.onDismiss}}>
       <FlightIcon class="hds-tag__dismiss-icon" @name="x" @size="16" @isInlineBlock={{false}} />
     </button>
   {{/if}}

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

@@ -38,6 +38,16 @@ export default class HdsTagIndexComponent extends Component {
     return text;
   }
 
+  /**
+   * @param ariaLabel
+   * @type {string}
+   * @default 'Dismiss'
+   */
+  get ariaLabel() {
+    let tagAriaLabel = this.args.ariaLabel ?? 'Dismiss';
+    return tagAriaLabel + ' ' + this.args.text;
+  }
+
   /**
    * @param color
    * @type {string}

package/app/components/hds/disclosure-primitive/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/disclosure-primitive/index';

package/app/components/hds/{disclosure → menu-primitive}/index.js

@@ -3,4 +3,4 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
-export { default } from '@hashicorp/design-system-components/components/hds/disclosure/index';
+export { default } from '@hashicorp/design-system-components/components/hds/menu-primitive/index';

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

@@ -22,13 +22,14 @@
 @use "../components/button";
 @use "../components/button-set";
 @use "../components/card";
-@use "../components/disclosure";
+@use "../components/disclosure-primitive";
 @use "../components/dismiss-button";
 @use "../components/dropdown";
 @use "../components/flyout";
 @use "../components/form"; // multiple components
 @use "../components/icon-tile";
 @use "../components/link"; // multiple components
+@use "../components/menu-primitive";
 @use "../components/modal";
 @use "../components/pagination";
 @use "../components/segmented-group";

package/app/styles/components/disclosure-primitive.scss

@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+//
+// DisclosurePrimitive COMPONENT
+//
+
+.hds-disclosure-primitive {
+  position: relative;
+  width: fit-content;
+}

package/app/styles/components/dropdown.scss

@@ -176,7 +176,7 @@ $hds-dropdown-toggle-border-radius: $hds-button-border-radius;
 
 // LIST
 // UL ELEMENT
-// GOES INSIDE HDS::DISCLOSURE's :content block
+// GOES INSIDE HDS::MenuPrimitive's :content block
 
 .hds-dropdown__content {
   display: flex;

package/app/styles/components/{disclosure.scss → menu-primitive.scss}

@@ -4,10 +4,10 @@
  */
 
 //
-// DISCLOSURE COMPONENT
+// MenuPrimitive COMPONENT
 //
 
-.hds-disclosure {
+.hds-menu-primitive {
   position: relative;
   width: fit-content;
 }

package/app/styles/components/tooltip.scss

@@ -75,6 +75,9 @@
     // This needs to go here because Tippy generates a javascript
     // max-width on .tippy-box.
     max-width: var(--token-tooltip-max-width);
+    // prevent this container from potentially inheriting other values
+    // such as `white-space: nowrap` that would cause content overflow
+    white-space: normal;
   }
 
   // works with Tippy's custom SVG arrow variation:

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

@@ -0,0 +1,6 @@
+/**
+ * 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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hashicorp/design-system-components",
-  "version": "2.3.3",
+  "version": "2.4.1",
   "description": "Helios Design System Components",
   "keywords": [
     "hashicorp",
@@ -39,7 +39,7 @@
   "dependencies": {
     "@ember/render-modifiers": "^2.0.5",
     "@hashicorp/design-system-tokens": "^1.5.0",
-    "@hashicorp/ember-flight-icons": "^3.0.2",
+    "@hashicorp/ember-flight-icons": "^3.0.3",
     "dialog-polyfill": "^0.5.6",
     "ember-a11y-refocus": "^3.0.2",
     "ember-auto-import": "^2.6.0",