@hashicorp/design-system-components 1.8.1 → 2.0.0

package/CHANGELOG.md

@@ -1,5 +1,49 @@
 # @hashicorp/design-system-components
 
+## 2.0.0
+
+### Major Changes
+
+- [#1185](https://github.com/hashicorp/design-system/pull/1185) [`a883e7fd7`](https://github.com/hashicorp/design-system/commit/a883e7fd763ae7a93ecc5ef3d49ed0230b48ea11) Thanks [@alex-ju](https://github.com/alex-ju)! - Add `Checkmark`, `Checkbox` and `Radio` as `Hds::Dropdown::ListItem`s
+
+  Rename `Hds::Dropdown::ListItem` internal CSS classes as follows:
+
+  - `hds-dropdown-list-item--copy-item` → `hds-dropdown-list-item--variant-copy-item`
+  - `hds-dropdown-list-item--description` → `hds-dropdown-list-item--variant-description`
+  - `hds-dropdown-list-item--generic` → `hds-dropdown-list-item--variant-generic`
+  - `hds-dropdown-list-item--interactive` → `hds-dropdown-list-item--variant-interactive`
+  - `hds-dropdown-list-item--separator` → `hds-dropdown-list-item--variant-separator`
+  - `hds-dropdown-list-item--title` → `hds-dropdown-list-item--variant-title`
+
+  **Note:** If test assertions are relying on these class names, tests will fail. If extensions/overrides have been applied to these classes, they will suffer visual changes.
+
+- [#1212](https://github.com/hashicorp/design-system/pull/1212) [`6e79216a8`](https://github.com/hashicorp/design-system/commit/6e79216a880ae140cce15f1dc6494f0aeca8e0b8) Thanks [@alex-ju](https://github.com/alex-ju)! - Add `Hds::Dropdown::Header` and `Hds::Dropdown::Footer` as generic blocks to `Hds::Dropdown`
+
+  Rename `Hds::Dropdown` internal CSS class `hds-dropdown-list` → `hds-dropdown__list`
+
+  The `hds-dropdown__list` element is now wrapped in a `hds-dropdown__content` element to accommodate the new header and footer elements. As a result, the following modifiers will be applied to the wrapper element.
+
+  - `hds-dropdown-list--fixed-width` → `hds-dropdown__content--fixed-width`
+  - `hds-dropdown-list--position-left` → `hds-dropdown__content--position-left`
+  - `hds-dropdown-list--position-right` → `hds-dropdown__content--position-right`
+
+  **Note:** If test assertions are relying on these class names, tests will fail. If extensions/overrides have been applied to these classes, they will suffer visual changes.
+
+### Minor Changes
+
+- [#1266](https://github.com/hashicorp/design-system/pull/1266) [`082842b59`](https://github.com/hashicorp/design-system/commit/082842b59321f843c4955e4cdaf2ce2674a8913d) Thanks [@alex-ju](https://github.com/alex-ju)! - Add `@icon`, `@count`, `@badge` and `@badgeCount` to `Dropdown::Toggle::Button`
+
+- [#1276](https://github.com/hashicorp/design-system/pull/1276) [`5ad29412d`](https://github.com/hashicorp/design-system/commit/5ad29412d2edc0cc4265d3c0bbbf388e821f1cc7) Thanks [@alex-ju](https://github.com/alex-ju)! - Allow small `@size` on `Dropdown::ToggleIcon`
+
+- [#1262](https://github.com/hashicorp/design-system/pull/1262) [`3eb78b8de`](https://github.com/hashicorp/design-system/commit/3eb78b8de7c678cff977c9d3a677c47a3216caad) Thanks [@alex-ju](https://github.com/alex-ju)! - Add new `@listPositions` for `Dropdown` as follows:
+
+  - `bottom-left`
+  - `bottom-right` (default)
+  - `top-left`
+  - `top-right`
+
+  **Note:** `left` and `right` are now deprecated and will be removed in a future major release
+
 ## 1.8.1
 
 ### Patch Changes

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

@@ -0,0 +1,3 @@
+<div class="hds-dropdown__footer {{if @hasDivider 'hds-dropdown__footer--with-divider'}}" ...attributes>
+  {{yield}}
+</div>

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

@@ -0,0 +1,3 @@
+<div class="hds-dropdown__header {{if @hasDivider 'hds-dropdown__header--with-divider'}}" ...attributes>
+  {{yield}}
+</div>

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

@@ -12,18 +12,25 @@
     }}
   </:toggle>
   <:content as |c|>
-    <ul class={{this.listClassNames}} {{style width=@width}}>
-      {{yield
-        (hash
-          close=c.close
-          CopyItem=(component "hds/dropdown/list-item/copy-item")
-          Description=(component "hds/dropdown/list-item/description")
-          Generic=(component "hds/dropdown/list-item/generic")
-          Interactive=(component "hds/dropdown/list-item/interactive")
-          Separator=(component "hds/dropdown/list-item/separator")
-          Title=(component "hds/dropdown/list-item/title")
-        )
-      }}
-    </ul>
+    <div class={{this.classNames}} {{style width=@width height=@height}}>
+      {{yield (hash Header=(component "hds/dropdown/header"))}}
+      <ul class="hds-dropdown__list" {{did-insert this.didInsertList}}>
+        {{yield
+          (hash
+            close=c.close
+            Checkbox=(component "hds/dropdown/list-item/checkbox")
+            Checkmark=(component "hds/dropdown/list-item/checkmark")
+            CopyItem=(component "hds/dropdown/list-item/copy-item")
+            Description=(component "hds/dropdown/list-item/description")
+            Generic=(component "hds/dropdown/list-item/generic")
+            Interactive=(component "hds/dropdown/list-item/interactive")
+            Radio=(component "hds/dropdown/list-item/radio")
+            Separator=(component "hds/dropdown/list-item/separator")
+            Title=(component "hds/dropdown/list-item/title")
+          )
+        }}
+      </ul>
+      {{yield (hash close=c.close Footer=(component "hds/dropdown/footer"))}}
+    </div>
   </:content>
 </Hds::Disclosure>

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

@@ -4,16 +4,25 @@
  */
 
 import Component from '@glimmer/component';
+import { action } from '@ember/object';
 import { assert } from '@ember/debug';
 
-export const DEFAULT_POSITION = 'right';
-export const POSITIONS = ['right', 'left'];
+export const DEFAULT_POSITION = 'bottom-right';
+// TODO: retire 'right' and 'left' in favor of `bottom-right` and `bottom-left` https://github.com/hashicorp/design-system/pull/1262
+export const POSITIONS = [
+  'right',
+  'left',
+  'bottom-left',
+  'bottom-right',
+  'top-left',
+  'top-right',
+];
 
 export default class HdsDropdownIndexComponent extends Component {
   /**
    * @param listPosition
    * @type {string}
-   * @default primary
+   * @default bottom-right
    * @description Determines the position of the "list"
    */
   get listPosition() {
@@ -30,21 +39,29 @@ export default class HdsDropdownIndexComponent extends Component {
   }
 
   /**
-   * Get the class names to apply to the "list"
-   * @method DropdownIndex#listClassNames
-   * @return {string} The "class" attribute to apply to the "list" element
+   * Get the class names to apply to the content
+   * @method classNames
+   * @return {string} The "class" attribute to apply to the disclosed content
    */
-  get listClassNames() {
-    let classes = ['hds-dropdown-list'];
+  get classNames() {
+    let classes = ['hds-dropdown__content'];
 
     // add a class based on the @listPosition argument
-    classes.push(`hds-dropdown-list--position-${this.listPosition}`);
+    classes.push(`hds-dropdown__content--position-${this.listPosition}`);
 
     // add a class based on the @width argument
     if (this.args.width) {
-      classes.push('hds-dropdown-list--fixed-width');
+      classes.push('hds-dropdown__content--fixed-width');
     }
 
     return classes.join(' ');
   }
+
+  @action
+  didInsertList(element) {
+    let checkmarkItems = element.querySelectorAll(`[role="option"]`);
+    if (checkmarkItems.length) {
+      element.setAttribute('role', 'listbox');
+    }
+  }
 }

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

@@ -0,0 +1,14 @@
+<li class="hds-dropdown-list-item hds-dropdown-list-item--variant-checkbox">
+  <Hds::Form::Checkbox::Base class="hds-dropdown-list-item__control" id={{this.id}} @value={{@value}} ...attributes />
+  {{#if @icon}}
+    <div class="hds-dropdown-list-item__icon">
+      <FlightIcon @name={{@icon}} @isInlineBlock={{false}} />
+    </div>
+  {{/if}}
+  <label class="hds-dropdown-list-item__label hds-typography-body-200" for={{this.id}}>
+    {{yield}}
+  </label>
+  {{#if @count}}
+    <span class="hds-dropdown-list-item__count hds-typography-body-100 hds-font-weight-medium">{{@count}}</span>
+  {{/if}}
+</li>

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

@@ -0,0 +1,11 @@
+import Component from '@glimmer/component';
+import { getElementId } from '../../form/utils/getElementId';
+
+export default class HdsDropdownListItemCheckboxComponent extends Component {
+  /**
+   * Determines the unique ID to assign to the checkbox control
+   */
+  get id() {
+    return getElementId(this);
+  }
+}

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

@@ -0,0 +1,34 @@
+{{! template-lint-disable require-context-role require-presentational-children }}
+<li class={{this.classNames}}>
+  <Hds::Interactive
+    @current-when={{@current-when}}
+    @models={{hds-link-to-models @model @models}}
+    @query={{hds-link-to-query @query}}
+    @replace={{@replace}}
+    @route={{@route}}
+    @isRouteExternal={{@isRouteExternal}}
+    @href={{@href}}
+    @isHrefExternal={{@isHrefExternal}}
+    class="hds-dropdown-list-item__interactive"
+    ...attributes
+    role="option"
+    aria-selected={{if @selected "true" "false"}}
+  >
+    {{#if @icon}}
+      <div class="hds-dropdown-list-item__interactive-icon">
+        <FlightIcon @name={{@icon}} @isInlineBlock={{false}} />
+      </div>
+    {{/if}}
+    <div class="hds-dropdown-list-item__interactive-text hds-typography-body-200 hds-font-weight-medium">
+      {{yield}}
+    </div>
+    {{#if @count}}
+      <span class="hds-dropdown-list-item__count hds-typography-body-100 hds-font-weight-medium">{{@count}}</span>
+    {{/if}}
+    <span class="hds-dropdown-list-item__checkmark">
+      {{#if @selected}}
+        <FlightIcon class="hds-dropdown-list-item__checkmark-icon" @name="check" @isInlineBlock={{false}} />
+      {{/if}}
+    </span>
+  </Hds::Interactive>
+</li>

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

@@ -0,0 +1,23 @@
+import Component from '@glimmer/component';
+
+export default class HdsDropdownListItemCheckmarkComponent extends Component {
+  /**
+   * Get the class names to apply to the component.
+   * @method classNames
+   * @return {string} The "class" attribute to apply to the component.
+   */
+  get classNames() {
+    let classes = [
+      'hds-dropdown-list-item',
+      'hds-dropdown-list-item--color-action',
+      'hds-dropdown-list-item--variant-checkmark',
+    ];
+
+    // add a class based on the @selected argument
+    if (this.args.selected) {
+      classes.push('hds-dropdown-list-item--variant-checkmark-selected');
+    }
+
+    return classes.join(' ');
+  }
+}

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

@@ -35,7 +35,7 @@ export default class HdsDropdownListItemCopyItemComponent extends Component {
   get classNames() {
     let classes = [
       'hds-dropdown-list-item',
-      'hds-dropdown-list-item--copy-item',
+      'hds-dropdown-list-item--variant-copy-item',
     ];
 
     return classes.join(' ');

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

@@ -31,7 +31,7 @@ export default class HdsDropdownListItemDescriptionComponent extends Component {
   get classNames() {
     let classes = [
       'hds-dropdown-list-item',
-      'hds-dropdown-list-item--description',
+      'hds-dropdown-list-item--variant-description',
     ];
 
     // add classes for the typographic style

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

@@ -2,6 +2,6 @@
   Copyright (c) HashiCorp, Inc.
   SPDX-License-Identifier: MPL-2.0
 }}
-<li class="hds-dropdown-list-item hds-dropdown-list-item--generic" ...attributes>
+<li class="hds-dropdown-list-item hds-dropdown-list-item--variant-generic" ...attributes>
   {{yield}}
 </li>

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

@@ -53,7 +53,7 @@ export default class HdsDropdownListItemInteractiveComponent extends Component {
   get classNames() {
     let classes = [
       'hds-dropdown-list-item',
-      'hds-dropdown-list-item--interactive',
+      'hds-dropdown-list-item--variant-interactive',
     ];
 
     // add a class based on the @color argument

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

@@ -0,0 +1,12 @@
+<li class="hds-dropdown-list-item hds-dropdown-list-item--variant-radio">
+  <Hds::Form::Radio::Base class="hds-dropdown-list-item__control" id={{this.id}} @value={{@value}} ...attributes />
+  {{#if @icon}}
+    <div class="hds-dropdown-list-item__icon">
+      <FlightIcon @name={{@icon}} @isInlineBlock={{false}} />
+    </div>
+  {{/if}}
+  <label class="hds-dropdown-list-item__label hds-typography-body-200" for={{this.id}}>{{yield}}</label>
+  {{#if @count}}
+    <span class="hds-dropdown-list-item__count hds-typography-body-100 hds-font-weight-medium">{{@count}}</span>
+  {{/if}}
+</li>

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

@@ -0,0 +1,11 @@
+import Component from '@glimmer/component';
+import { getElementId } from '../../form/utils/getElementId';
+
+export default class HdsDropdownListItemRadioComponent extends Component {
+  /**
+   * Determines the unique ID to assign to the radio control
+   */
+  get id() {
+    return getElementId(this);
+  }
+}

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

@@ -2,4 +2,4 @@
   Copyright (c) HashiCorp, Inc.
   SPDX-License-Identifier: MPL-2.0
 }}
-<li class="hds-dropdown-list-item hds-dropdown-list-item--separator" role="separator" ...attributes></li>
+<li class="hds-dropdown-list-item hds-dropdown-list-item--variant-separator" role="separator" ...attributes></li>

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

@@ -29,7 +29,10 @@ export default class HdsDropdownListItemTitleComponent extends Component {
    * @return {string} The "class" attribute to apply to the component.
    */
   get classNames() {
-    let classes = ['hds-dropdown-list-item', 'hds-dropdown-list-item--title'];
+    let classes = [
+      'hds-dropdown-list-item',
+      'hds-dropdown-list-item--variant-title',
+    ];
 
     // add classes for the typographic style
     classes.push('hds-typography-body-100');

package/addon/components/hds/dropdown/toggle/button.hbs

@@ -2,28 +2,37 @@
   Copyright (c) HashiCorp, Inc.
   SPDX-License-Identifier: MPL-2.0
 }}
-{{!
-// >>>>>>>>>>> WARNING <<<<<<<<<<
-//
-// Notice: in this component we're directly using the `Hds::Button` component
-// (and adding a specialized class for the "toggle-button" variant, see below)
-// If you need to change the styling of the `Button` component, remember that this will impact also
-// this component too.
-// If instead you need to change only the styling of the `toggle-button` component, you can do it
-// in the CSS file using the specialized class declared there.
-// This is NOT a standard approach that we use in the HDS design system implementation, but it's been
-// the least worst option we could find to solve the problem of sharing the exact same style of the
-// `Button (primary)` with other components.
-}}
-
-<Hds::Button
+<button
   class={{this.classNames}}
-  @text={{this.text}}
-  @icon="chevron-down"
-  @iconPosition="trailing"
-  @color={{this.color}}
-  @size={{@size}}
   ...attributes
+  type="button"
   aria-expanded={{if @isOpen "true" "false"}}
   {{on "click" this.onClick}}
-/>
+>
+  {{#if @icon}}
+    <div class="hds-dropdown-toggle-button__icon">
+      <FlightIcon @name={{@icon}} @stretched={{true}} />
+    </div>
+  {{/if}}
+  <div class="hds-dropdown-toggle-button__text">
+    {{this.text}}
+  </div>
+  {{#if @count}}
+    <Hds::BadgeCount
+      @text={{@count}}
+      @size="small"
+      @type={{this.badgeType}}
+      class="hds-dropdown-toggle-button__count"
+    />
+  {{/if}}
+  {{#if @badge}}
+    <Hds::Badge
+      @text={{@badge}}
+      @icon={{@badgeIcon}}
+      @size="small"
+      @type={{this.badgeType}}
+      class="hds-dropdown-toggle-button__badge"
+    />
+  {{/if}}
+  <Hds::Dropdown::Toggle::Chevron />
+</button>

package/addon/components/hds/dropdown/toggle/button.js

@@ -6,7 +6,9 @@
 import Component from '@glimmer/component';
 import { assert } from '@ember/debug';
 
+export const DEFAULT_SIZE = 'medium';
 export const DEFAULT_COLOR = 'primary';
+export const SIZES = ['small', 'medium'];
 export const COLORS = ['primary', 'secondary'];
 
 const NOOP = () => {};
@@ -28,6 +30,25 @@ export default class HdsDropdownToggleButtonComponent extends Component {
     return text;
   }
 
+  /**
+   * @param size
+   * @type {string}
+   * @default medium
+   * @description The size of the button; acceptable values are `small` and `medium`
+   */
+  get size() {
+    let { size = DEFAULT_SIZE } = this.args;
+
+    assert(
+      `@size for "Hds::Dropdown::Toggle::Button" must be one of the following: ${SIZES.join(
+        ', '
+      )}; received: ${size}`,
+      SIZES.includes(size)
+    );
+
+    return size;
+  }
+
   /**
    * @param color
    * @type {string}
@@ -47,6 +68,16 @@ export default class HdsDropdownToggleButtonComponent extends Component {
     return color;
   }
 
+  /**
+   * @param isFullWidth
+   * @type {boolean}
+   * @default false
+   * @description Indicates that a button should take up the full width of the parent container. The default is false.
+   */
+  get isFullWidth() {
+    return this.args.isFullWidth ?? false;
+  }
+
   /**
    * @param onClick
    * @type {function}
@@ -64,6 +95,16 @@ export default class HdsDropdownToggleButtonComponent extends Component {
     }
   }
 
+  /**
+   * @param badgeType
+   * @type {string}
+   * @default 'filled'
+   * @description ensures that the correct Badge/BadgeCount type is used to meet contrast requirements
+   */
+  get badgeType() {
+    return this.color !== 'primary' ? 'inverted' : 'filled';
+  }
+
   /**
    * Get the class names to apply to the component.
    * @method ToggleButton#classNames
@@ -72,6 +113,17 @@ export default class HdsDropdownToggleButtonComponent extends Component {
   get classNames() {
     let classes = ['hds-dropdown-toggle-button'];
 
+    // add a class based on the @size argument
+    classes.push(`hds-dropdown-toggle-button--size-${this.size}`);
+
+    // add a class based on the @color argument
+    classes.push(`hds-dropdown-toggle-button--color-${this.color}`);
+
+    // add a class based on the @isFullWidth argument
+    if (this.isFullWidth) {
+      classes.push('hds-dropdown-toggle-button--width-full');
+    }
+
     // add a class based on the @isOpen argument
     if (this.args.isOpen) {
       classes.push('hds-dropdown-toggle-button--is-open');

package/addon/components/hds/dropdown/toggle/chevron.hbs

@@ -0,0 +1,3 @@
+<div class="hds-dropdown-toggle-chevron">
+  <FlightIcon @name="chevron-down" @isInlineBlock={{false}} />
+</div>

package/addon/components/hds/dropdown/toggle/icon.hbs

@@ -14,10 +14,10 @@
     {{#if @imageSrc}}
       <img src={{@imageSrc}} alt="" role="presentation" height="32" width="32" />
     {{else if @icon}}
-      <FlightIcon @name={{@icon}} @size="24" />
+      <FlightIcon @name={{@icon}} @size={{this.iconSize}} />
     {{/if}}
   </div>
   {{#if this.hasChevron}}
-    <FlightIcon @name="chevron-down" class="hds-dropdown-toggle-icon__chevron" @isInlineBlock={{false}} />
+    <Hds::Dropdown::Toggle::Chevron />
   {{/if}}
 </button>

package/addon/components/hds/dropdown/toggle/icon.js

@@ -6,7 +6,11 @@
 import Component from '@glimmer/component';
 import { assert } from '@ember/debug';
 
+export const DEFAULT_SIZE = 'medium';
+export const SIZES = ['small', 'medium'];
+
 const NOOP = () => {};
+
 export default class HdsDropdownToggleIconComponent extends Component {
   constructor() {
     super(...arguments);
@@ -33,6 +37,39 @@ export default class HdsDropdownToggleIconComponent extends Component {
     return text;
   }
 
+  /**
+   * @param size
+   * @type {string}
+   * @default medium
+   * @description The size of the button; acceptable values are `small` and `medium`
+   */
+  get size() {
+    let { size = DEFAULT_SIZE } = this.args;
+
+    assert(
+      `@size for "Hds::Dropdown::Toggle::Icon" must be one of the following: ${SIZES.join(
+        ', '
+      )}; received: ${size}`,
+      SIZES.includes(size)
+    );
+
+    return size;
+  }
+
+  /**
+   * @param iconSize
+   * @type {string}
+   * @default 24
+   * @description ensures that the correct icon size is used
+   */
+  get iconSize() {
+    if (this.args.size === 'small') {
+      return '16';
+    } else {
+      return '24';
+    }
+  }
+
   /**
    * Indicates if a dropdown chevron icon should be displayed; should be displayed unless the "more-horizontal" icon is used.
    *
@@ -69,6 +106,9 @@ export default class HdsDropdownToggleIconComponent extends Component {
   get classNames() {
     let classes = ['hds-dropdown-toggle-icon'];
 
+    // add a class based on the @size argument
+    classes.push(`hds-dropdown-toggle-icon--size-${this.size}`);
+
     // add a class based on the @isOpen argument
     if (this.args.isOpen) {
       classes.push('hds-dropdown-toggle-icon--is-open');

package/app/components/hds/dropdown/footer.js

@@ -0,0 +1 @@
+export { default } from '@hashicorp/design-system-components/components/hds/dropdown/footer';

package/app/components/hds/dropdown/header.js

@@ -0,0 +1 @@
+export { default } from '@hashicorp/design-system-components/components/hds/dropdown/header';

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

@@ -0,0 +1 @@
+export { default } from '@hashicorp/design-system-components/components/hds/dropdown/list-item/checkbox';

package/app/components/hds/dropdown/list-item/checkmark.js

@@ -0,0 +1 @@
+export { default } from '@hashicorp/design-system-components/components/hds/dropdown/list-item/checkmark';

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

@@ -0,0 +1 @@
+export { default } from '@hashicorp/design-system-components/components/hds/dropdown/list-item/radio';

package/app/components/hds/dropdown/toggle/chevron.js

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