@hashicorp/design-system-components 0.9.2 → 0.10.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @hashicorp/design-system-components
 
+## 0.10.0
+
+### Minor Changes
+
+- [#200](https://github.com/hashicorp/design-system/pull/200) [`a8072537`](https://github.com/hashicorp/design-system/commit/a8072537542791398d375cde4a7a85c2955c66da) Thanks [@didoo](https://github.com/didoo)! - Updated Dropdown component:
+
+  - added chevron animation for `toggle` elements
+  - fixed issue with `list-item/interactive` height
+  - added handling of dynamic `width` for the list
+  - exposed an `onClose` event
+  - removed the default icon for `toggle/icon`
+  - removed icon requirement from the `critical` list item
+  - updated the documentation and integration tests
+  - some code refactorings, reorganizations and cleanups
+
 ## 0.9.2
 
 ### Patch Changes

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

@@ -38,6 +38,10 @@ export default class HdsDisclosureComponent extends Component {
       this.isActive = false;
       // we need to reset this check
       this.isToggleClicked = 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/dropdown/index.hbs

@@ -1,25 +1,22 @@
-<Hds::Disclosure class="hds-dropdown">
+<Hds::Disclosure class="hds-dropdown" @onClose={{@onClose}} ...attributes>
   <:toggle as |t|>
     {{yield
       (hash
-        ToggleButton=(component "hds/dropdown/toggle-button" isOpen=t.isActive onClick=t.onClickToggle)
-        ToggleIcon=(component "hds/dropdown/toggle-icon" isOpen=t.isActive onClick=t.onClickToggle)
+        ToggleButton=(component "hds/dropdown/toggle/button" isOpen=t.isActive onClick=t.onClickToggle)
+        ToggleIcon=(component "hds/dropdown/toggle/icon" isOpen=t.isActive onClick=t.onClickToggle)
       )
     }}
   </:toggle>
   <:content>
-    <ul
-      class="hds-dropdown-list
-        {{if (eq @listPosition 'left') 'hds-dropdown-list--position-left' 'hds-dropdown-list--position-right'}}"
-    >
+    <ul class={{this.listClassNames}} {{style width=@width}}>
       {{yield
         (hash
-          CopyItem=(component "hds/dropdown/list-item" item="copy-item")
-          Description=(component "hds/dropdown/list-item" item="description")
-          Generic=(component "hds/dropdown/list-item" item="generic")
-          Interactive=(component "hds/dropdown/list-item")
-          Separator=(component "hds/dropdown/list-item" item="separator")
-          Title=(component "hds/dropdown/list-item" item="title")
+          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>

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

@@ -0,0 +1,45 @@
+import Component from '@glimmer/component';
+import { assert } from '@ember/debug';
+
+export const DEFAULT_POSITION = 'right';
+export const POSITIONS = ['right', 'left'];
+
+export default class HdsDropdownIndexComponent extends Component {
+  /**
+   * @param listPosition
+   * @type {string}
+   * @default primary
+   * @description Determines the position of the "list"
+   */
+  get listPosition() {
+    let { listPosition = DEFAULT_POSITION } = this.args;
+
+    assert(
+      `@listPosition for "Hds::Dropdown::Index" must be one of the following: ${POSITIONS.join(
+        ', '
+      )}; received: ${listPosition}`,
+      POSITIONS.includes(listPosition)
+    );
+
+    return listPosition;
+  }
+
+  /**
+   * Get the class names to apply to the "list"
+   * @method DropdownIndex#listClassNames
+   * @return {string} The "class" attribute to apply to the "list" element
+   */
+  get listClassNames() {
+    let classes = ['hds-dropdown-list'];
+
+    // add a class based on the @listPosition argument
+    classes.push(`hds-dropdown-list--position-${this.listPosition}`);
+
+    // add a class based on the @width argument
+    if (this.args.width) {
+      classes.push('hds-dropdown-list--fixed-width');
+    }
+
+    return classes.join(' ');
+  }
+}

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

@@ -0,0 +1,20 @@
+<li class={{this.classNames}} ...attributes>
+  {{#if @copyItemTitle}}
+    <div
+      class="hds-dropdown-list-item__copy-item-title hds-typography-body-100 hds-font-weight-semibold"
+    >{{@copyItemTitle}}</div>
+  {{/if}}
+  <button
+    type="button"
+    class="{{if @state (concat 'is-' @state)}} {{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>
+</li>

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

@@ -0,0 +1,48 @@
+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 = this.args.isSuccess ?? false;
+
+  /**
+   * @param text
+   * @type {string}
+   * @description The text of the item. If no text value is defined an error will be thrown
+   */
+  get text() {
+    let { text } = this.args;
+
+    assert(
+      '@text for "Hds::Dropdown::ListItem::CopyItem" must have a valid value',
+      text !== undefined
+    );
+
+    return text;
+  }
+
+  /**
+   * 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--copy-item',
+    ];
+
+    return classes.join(' ');
+  }
+
+  @action
+  copyCode() {
+    navigator.clipboard.writeText(this.args.text);
+    // this if statement resolves to [object Promise] so maybe some improvements
+    // could be made here
+    if (navigator.clipboard.readText()) {
+      this.isSuccess = true;
+    }
+  }
+}

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

@@ -0,0 +1,3 @@
+<li class={{this.classNames}} ...attributes>
+  {{this.text}}
+</li>

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

@@ -0,0 +1,38 @@
+import Component from '@glimmer/component';
+import { assert } from '@ember/debug';
+
+export default class HdsDropdownListItemDescriptionComponent extends Component {
+  /**
+   * @param text
+   * @type {string}
+   * @description The text of the item. If no text value is defined an error will be thrown
+   */
+  get text() {
+    let { text } = this.args;
+
+    assert(
+      '@text for "Hds::Dropdown::ListItem::Description" must have a valid value',
+      text !== undefined
+    );
+
+    return text;
+  }
+
+  /**
+   * 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--description',
+    ];
+
+    // add classes for the typographic style
+    classes.push('hds-typography-body-100');
+    classes.push('hds-font-weight-regular');
+
+    return classes.join(' ');
+  }
+}

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

@@ -0,0 +1,3 @@
+<li class="hds-dropdown-list-item hds-dropdown-list-item--generic" ...attributes>
+  {{yield}}
+</li>

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

@@ -0,0 +1,44 @@
+<li class={{this.classNames}}>
+  {{#if @route}}
+    <LinkTo
+      class="{{if @state (concat 'is-' @state)}}"
+      @current-when={{@current-when}}
+      @models={{hds-link-to-models @model @models}}
+      @query={{hds-link-to-query @query}}
+      @replace={{@replace}}
+      @route={{@route}}
+      ...attributes
+    >
+      {{#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">
+        {{this.text}}
+      </div>
+    </LinkTo>
+  {{else if @href}}
+    <a target="_blank" rel="noopener noreferrer" href={{@href}} class="{{if @state (concat 'is-' @state)}}">
+      {{#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">
+        {{this.text}}
+      </div>
+    </a>
+  {{else}}
+    <button class="{{if @state (concat 'is-' @state)}}" type="button" ...attributes>
+      {{#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">
+        {{this.text}}
+      </div>
+    </button>
+  {{/if}}
+</li>

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

@@ -0,0 +1,59 @@
+import Component from '@glimmer/component';
+import { assert } from '@ember/debug';
+
+export const DEFAULT_COLOR = 'action';
+export const COLORS = ['action', 'critical'];
+
+export default class HdsDropdownListItemInteractiveComponent extends Component {
+  /**
+   * @param text
+   * @type {string}
+   * @description The text of the item. If no text value is defined an error will be thrown
+   */
+  get text() {
+    let { text } = this.args;
+
+    assert(
+      '@text for "Hds::Dropdown::ListItem::Interactive" must have a valid value',
+      text !== undefined
+    );
+
+    return text;
+  }
+
+  /**
+   * @param color
+   * @type {string}
+   * @default primary
+   * @description Determines the color of the item (when item is set to interactive)
+   */
+  get color() {
+    let { color = DEFAULT_COLOR } = this.args;
+
+    assert(
+      `@color for "Hds::Dropdown::ListItem::Interactive" must be one of the following: ${COLORS.join(
+        ', '
+      )}; received: ${color}`,
+      COLORS.includes(color)
+    );
+
+    return color;
+  }
+
+  /**
+   * 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--interactive',
+    ];
+
+    // add a class based on the @color argument
+    classes.push(`hds-dropdown-list-item--color-${this.color}`);
+
+    return classes.join(' ');
+  }
+}

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

@@ -0,0 +1 @@
+<li class="hds-dropdown-list-item hds-dropdown-list-item--separator" role="separator" ...attributes></li>

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

@@ -0,0 +1,3 @@
+<li class={{this.classNames}} ...attributes>
+  {{this.text}}
+</li>

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

@@ -0,0 +1,35 @@
+import Component from '@glimmer/component';
+import { assert } from '@ember/debug';
+
+export default class HdsDropdownListItemTitleComponent extends Component {
+  /**
+   * @param text
+   * @type {string}
+   * @description The text of the item. If no text value is defined an error will be thrown
+   */
+  get text() {
+    let { text } = this.args;
+
+    assert(
+      '@text for "Hds::Dropdown::ListItem::Title" must have a valid value',
+      text !== undefined
+    );
+
+    return text;
+  }
+
+  /**
+   * 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--title'];
+
+    // add classes for the typographic style
+    classes.push('hds-typography-body-100');
+    classes.push('hds-font-weight-semibold');
+
+    return classes.join(' ');
+  }
+}

package/addon/components/hds/dropdown/{toggle-button.hbs → toggle/button.hbs}

@@ -13,11 +13,11 @@
 }}
 
 <Hds::Button
+  class={{this.classNames}}
   @text={{this.text}}
-  @icon="chevron-{{if @isOpen 'up' 'down'}}"
+  @icon="chevron-down"
   @iconPosition="trailing"
   @color={{this.color}}
-  class="hds-dropdown-toggle--with-button-component"
-  {{on "click" this.onClick}}
   ...attributes
+  {{on "click" this.onClick}}
 />

package/addon/components/hds/dropdown/{toggle-button.js → toggle/button.js}

@@ -4,6 +4,8 @@ import { assert } from '@ember/debug';
 export const DEFAULT_COLOR = 'primary';
 export const COLORS = ['primary', 'secondary'];
 
+const NOOP = () => {};
+
 export default class HdsDropdownToggleButtonComponent extends Component {
   /**
    * @param text
@@ -14,7 +16,7 @@ export default class HdsDropdownToggleButtonComponent extends Component {
     let { text } = this.args;
 
     assert(
-      '@text for "Hds::Dropdown::ToggleButton" must have a valid value',
+      '@text for "Hds::Dropdown::Toggle::Button" must have a valid value',
       text !== undefined
     );
 
@@ -31,7 +33,7 @@ export default class HdsDropdownToggleButtonComponent extends Component {
     let { color = DEFAULT_COLOR } = this.args;
 
     assert(
-      `@color for "Hds::Dropdown::ToggleButton" must be one of the following: ${COLORS.join(
+      `@color for "Hds::Dropdown::Toggle::Button" must be one of the following: ${COLORS.join(
         ', '
       )}; received: ${color}`,
       COLORS.includes(color)
@@ -53,7 +55,23 @@ export default class HdsDropdownToggleButtonComponent extends Component {
     if (typeof onClick === 'function') {
       return onClick;
     } else {
-      return () => {};
+      return NOOP;
+    }
+  }
+
+  /**
+   * Get the class names to apply to the component.
+   * @method ToggleButton#classNames
+   * @return {string} The "class" attribute to apply to the component.
+   */
+  get classNames() {
+    let classes = ['hds-dropdown-toggle-button'];
+
+    // add a class based on the @isOpen argument
+    if (this.args.isOpen) {
+      classes.push('hds-dropdown-toggle-button--is-open');
     }
+
+    return classes.join(' ');
   }
 }

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

@@ -0,0 +1,12 @@
+<button class={{this.classNames}} aria-label={{this.text}} ...attributes {{on "click" this.onClick}} type="button">
+  <div class="hds-dropdown-toggle-icon__wrapper">
+    {{#if @imageSrc}}
+      <img src={{@imageSrc}} alt="" role="presentation" height="32" width="32" />
+    {{else if @icon}}
+      <FlightIcon @name={{@icon}} @size="24" />
+    {{/if}}
+  </div>
+  {{#if this.hasChevron}}
+    <FlightIcon @name="chevron-down" class="hds-dropdown-toggle-icon__chevron" @isInlineBlock={{false}} />
+  {{/if}}
+</button>

package/addon/components/hds/dropdown/{toggle-icon.js → toggle/icon.js}

@@ -1,7 +1,17 @@
 import Component from '@glimmer/component';
 import { assert } from '@ember/debug';
 
+const NOOP = () => {};
 export default class HdsDropdownToggleIconComponent extends Component {
+  constructor() {
+    super(...arguments);
+    if (!(this.args.icon || this.args.imageSrc)) {
+      assert(
+        '@icon or @imageSrc must be defined for "Hds::Dropdown::Toggle::Icon"'
+      );
+    }
+  }
+
   /**
    * @param text
    * @type {string}
@@ -11,7 +21,7 @@ export default class HdsDropdownToggleIconComponent extends Component {
     let { text } = this.args;
 
     assert(
-      '@text for "Hds::Dropdown::ToggleIcon" must have a valid value',
+      '@text for "Hds::Dropdown::Toggle::Icon" must have a valid value',
       text !== undefined
     );
 
@@ -29,17 +39,6 @@ export default class HdsDropdownToggleIconComponent extends Component {
     return this.args.hasChevron ?? true;
   }
 
-  /**
-   * Sets the icon name
-   *
-   * @param icon
-   * @type {string}
-   * @default user
-   */
-  get icon() {
-    return this.args.icon ?? 'user';
-  }
-
   /**
    * @param onClick
    * @type {function}
@@ -53,7 +52,23 @@ export default class HdsDropdownToggleIconComponent extends Component {
     if (typeof onClick === 'function') {
       return onClick;
     } else {
-      return () => {};
+      return NOOP;
+    }
+  }
+
+  /**
+   * Get the class names to apply to the component.
+   * @method ToggleIcon#classNames
+   * @return {string} The "class" attribute to apply to the component.
+   */
+  get classNames() {
+    let classes = ['hds-dropdown-toggle-icon'];
+
+    // add a class based on the @isOpen argument
+    if (this.args.isOpen) {
+      classes.push('hds-dropdown-toggle-icon--is-open');
     }
+
+    return classes.join(' ');
   }
 }

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

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

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

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

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

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

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

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

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

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

package/app/components/hds/dropdown/{toggle-icon.js → list-item/title.js}

@@ -1 +1 @@
-export { default } from '@hashicorp/design-system-components/components/hds/dropdown/toggle-icon';
+export { default } from '@hashicorp/design-system-components/components/hds/dropdown/list-item/title';

package/app/components/hds/dropdown/{toggle-button.js → toggle/button.js}

@@ -1 +1 @@
-export { default } from '@hashicorp/design-system-components/components/hds/dropdown/toggle-button';
+export { default } from '@hashicorp/design-system-components/components/hds/dropdown/toggle/button';

package/app/components/hds/dropdown/{list-item.js → toggle/icon.js}

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

package/app/styles/components/dropdown.scss

@@ -20,29 +20,33 @@
 
 @use '../mixins/focus-ring' as *;
 
+$hds-dropdown-toggle-base-height: 36px;
+$hds-dropdown-toggle-border-radius: 5px;
+
+
 // TOGGLE/ICON
+
 .hds-dropdown-toggle-icon {
   align-items: center;
   background-color: transparent;
   border: 1px solid transparent; // We need this to be transparent for a11y
-  border-radius: 5px;
+  border-radius: $hds-dropdown-toggle-border-radius;
   display: flex;
-  height: 36px;
+  height: $hds-dropdown-toggle-base-height;
   justify-content: center;
+  min-width: $hds-dropdown-toggle-base-height;
   outline-style: solid; // used to avoid double outline+focus-ring in Safari (see https://github.com/hashicorp/design-system-components/issues/161#issuecomment-1031548656)
   outline-color: transparent; // We need this to be transparent for a11y
   padding: 1px;
-  min-width: 36px;
 
-  &:hover,  
+  &:hover,
   &.is-hover {
     background-color: var(--token-color-surface-interactive);
     border-color: var(--token-color-border-strong);
     cursor: pointer;
   }
 
-  // this is the :focus
-  @include hds-focus-ring-with-pseudo-element($top: -1px, $right: -1px, $bottom: -1px, $left: -1px, $radius: 5px);
+  @include hds-focus-ring-with-pseudo-element($top: -1px, $right: -1px, $bottom: -1px, $left: -1px, $radius: $hds-dropdown-toggle-border-radius);
 
   &:active,
   &.is-active {
@@ -53,7 +57,7 @@
 
 .hds-dropdown-toggle-icon__wrapper {
   align-items: center;
-  border-radius: 3px; // 5px- 1px padding - 1px border
+  border-radius: 3px; // $hds-dropdown-toggle-border-radius - 1px padding - 1px border
   display: flex;
   justify-content: center;
   height: 32px;
@@ -62,21 +66,43 @@
 
   img {
     border-radius: inherit;
+    height: 100%;
     object-fit: cover; // this will make sure it's correct even if the item isn't square
+    width: 100%;
   }
 }
 
 .hds-dropdown-toggle-icon__chevron {
-  margin-left: 0.25rem;
+  margin-left: 4px;
+
+  @media (prefers-reduced-motion: no-preference) {
+    transition: transform .3s;
+  }
+
+  .hds-dropdown-toggle-icon--is-open & {
+    transform: rotate(-180deg);
+  }
 }
 
 // TOGGLE/BUTTON
-.hds-dropdown-toggle--with-button-component {
+
+.hds-dropdown-toggle-button {
   box-shadow: none; // we override this to remove the elevation style
 
   .hds-button__icon {
+    margin-left: 8px; // this overrides the rule `.hds-button__text + .hds-button__icon`
     margin-right: -6px; // we apply a negative margin to counter the padding-right of the button and reduce the visual space between the icon and the right border
-    margin-left: 0.5rem; // this overrides the rule `.hds-button__text + .hds-button__icon`
+
+    @media (prefers-reduced-motion: no-preference) {
+      transition: transform .3s;
+    }
+  }
+}
+
+
+.hds-dropdown-toggle-button--is-open {
+  .hds-button__icon {
+    transform: rotate(-180deg);
   }
 }
 
@@ -91,71 +117,37 @@
   box-shadow: var(--token-surface-high-box-shadow);
   list-style: none;
   margin: 0;
-  max-width: 25rem;
-  min-width: 12.5rem;
+  max-width: 400px;
+  min-width: 200px;
   padding: 4px 0;
-  &.hds-dropdown-list--position-right {
-    position: absolute;
-    right: 0;
-    top: calc(100% + 0.25rem);
-    z-index: 2; // https://github.com/hashicorp/design-system/issues/114
-  }
-
-  &.hds-dropdown-list--position-left {
-    position: absolute;
-    left: 0;
-    top: calc(100% + 0.25rem);
-    z-index: 2; // https://github.com/hashicorp/design-system/issues/114
-  }
+  width: max-content; // notice: this is important because being in a position absolute means the layout algorithm assigns a width of 0 and this impacts on the flex algorithm of the children (in some cases they don't use the full width)
 }
 
-// LIST > LIST-ITEM
-// HDS::DROPDOWN::LIST-ITEM
-
-.hds-dropdown-list-item--title {
-  color: var(--token-color-foreground-strong);
-  font-family: var(--token-typography-body-100-font-family);
-  font-size: var(--token-typography-body-100-font-size);
-  font-weight: var(--token-typography-font-weight-semibold);
-  line-height: var(--token-typography-body-100-line-height);
-  padding: 10px 16px 4px;
+.hds-dropdown-list--fixed-width {
+  max-width: initial;
+  min-width: initial;
 }
 
-.hds-dropdown-list-item--generic {
-  padding-left: 16px;
-  padding-right: 16px;
+.hds-dropdown-list--position-right {
+  position: absolute;
+  right: 0;
+  top: calc(100% + 4px);
+  z-index: 2; // https://github.com/hashicorp/design-system/issues/114
 }
 
-.hds-dropdown-list-item--description {
-  color: var(--token-color-foreground-faint);
-  font-family: var(--token-typography-body-100-font-family);
-  font-size: var(--token-typography-body-100-font-size);
-  font-weight: var(--token-typography-font-weight-regular);
-  line-height: var(--token-typography-body-100-line-height);
-  padding: 2px 16px 4px;
+.hds-dropdown-list--position-left {
+  left: 0;
+  position: absolute;
+  top: calc(100% + 4px);
+  z-index: 2; // https://github.com/hashicorp/design-system/issues/114
 }
 
-.hds-dropdown-list-item--separator {
-  position: relative;
-  height: 4px;
-  width: 100%;
 
-  &::before {
-    position: absolute;
-    right: 6px;
-    left: 6px;
-    bottom: 0;
-    border-bottom: 1px solid var(--token-color-border-primary);
-    content: '';
-  }
-}
+// LIST > LIST-ITEM
+// HDS::DROPDOWN::LIST-ITEM
 
 .hds-dropdown-list-item__copy-item-title {
   color: var(--token-color-foreground-faint);
-  font-family: var(--token-typography-body-100-font-family);
-  font-size: var(--token-typography-body-100-font-size); // 13
-  font-weight: var(--token-typography-font-weight-semibold);
-  line-height: var(--token-typography-body-100-line-height); // 18
   padding: 2px 0 4px;
 }
 
@@ -163,17 +155,16 @@
   padding: 10px 16px 12px;
   width: 100%;
 
-  button { 
+  button {
     background-color: transparent;
     border-radius: 5px;
     border: 1px solid var(--token-color-border-primary);
-    color: var(--token-color-foreground-primary);  
+    color: var(--token-color-foreground-primary);
     display: flex;
-    font-family: var(--token-typography-font-stack-code);
     justify-content: space-between;
     padding: 12px 8px;
     width: 100%;
-    
+
     &:hover,
     &.is-hover {
       background-color: var(--token-color-surface-interactive-hover);
@@ -181,55 +172,60 @@
     }
 
     @include hds-focus-ring-basic();
-    
+
     &:focus,
     &.is-focus {
-      //TODO this focus is just way too complex 
+      //TODO this focus is just way too complex
       background-color:  var(--token-color-surface-action);
       border-color: var(--token-color-focus-action-internal);
     }
-    
-    &:active, 
+
+    &:active,
     &.is-active {
       background-color: var(--token-color-surface-interactive-active);
     }
 
     &.is-success {
-      border-color: var(--token-color-border-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 {
-      font-size: var(--token-typography-code-100-font-size);
-      font-weight: var(--token-typography-font-weight-regular);
-      line-height: var(--token-typography-code-100-line-height);
-      // max-width: 250px; // TODO we should be able to figure out the proportions here
-      overflow: hidden;
-      text-align: left;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-
-    .hds-dropdown-list-item__copy-item-icon {
-      color: var(--token-color-foreground-action);
-      margin-left: 0.5rem;
     }
   }
 }
 
+.hds-dropdown-list-item__copy-item-text {
+  overflow: hidden;
+  text-align: left;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.hds-dropdown-list-item__copy-item-icon {
+  color: var(--token-color-foreground-action);
+  margin-left: 8px;
+}
+
+.hds-dropdown-list-item--description {
+  color: var(--token-color-foreground-faint);
+  padding: 2px 16px 4px;
+}
+
+.hds-dropdown-list-item--generic {
+  padding-left: 16px;
+  padding-right: 16px;
+}
+
+
 .hds-dropdown-list-item--interactive {
-  position: relative;
   isolation: isolate; // used to create a new stacking context (needed to have the pseudo element below text/icon but not the parent container)
   min-height: 36px;
+  position: relative;
 
-  // need to reset a few extra things to make the button visually appear the same as the links
-  // TODO this is 0.125rem taller than the link...
+  // need to reset a few extra things to make the button visually appear the same as the link
   button {
-    border: 1px inset transparent; // cause of the extra height
     background-color: transparent;
     width: 100%;
 
@@ -242,10 +238,11 @@
   // shared styles for links and buttons
   a, button {
     align-items: center;
+    border: 1px solid transparent; // because a border for the button is needed for a11y, we apply it to both the button and the link so they have the same height
     display: flex;
     outline-style: solid; // used to avoid double outline+focus-ring in Safari (see https://github.com/hashicorp/design-system-components/issues/161#issuecomment-1031548656)
     outline-color: transparent;
-    padding: 8px 10px 8px 16px;
+    padding: 7px 9px 7px 15px; // notice: we're subtracting 1px because of the transparent border
     text-decoration: none;
 
     // this is used for the left "hover" indicator
@@ -253,7 +250,7 @@
       border-radius: 1px;
       bottom: 6px;
       content: '';
-      left: 0.25rem;
+      left: 4px;
       position: absolute;
       top: 6px;
       width: 2px;
@@ -266,11 +263,11 @@
       border-radius: 5px;
       bottom: 0px;
       content: '';
-      left: 0.625rem;
+      left: 10px;
       position: absolute;
-      right: 0.25rem;
-      z-index: -1;
+      right: 4px;
       top: 0;
+      z-index: -1;
     }
 
     // Notice: to avoid too much duplication we define two local CSS variables
@@ -282,7 +279,7 @@
       &::after {
         background-color: var(--current-background-color);
         box-shadow: var(--current-focus-ring-box-shadow);
-        left: 0.25rem;
+        left: 4px;
       }
     }
     // undo the previous declaration for browsers that support ":focus-visible" but wouldn't normally show default focus styles
@@ -296,7 +293,7 @@
       &::after {
         background-color: var(--current-background-color);
         box-shadow: var(--current-focus-ring-box-shadow);
-        left: 0.25rem;
+        left: 4px;
       }
     }
     // remove the focus ring on "active + focused" state (by design)
@@ -310,15 +307,11 @@
 }
 
 .hds-dropdown-list-item__interactive-text {
-  font-family: var(--token-typography-body-200-font-family);
-  font-size: var(--token-typography-body-200-font-size);
-  font-weight: var(--token-typography-font-weight-medium);
-  line-height: var(--token-typography-body-200-line-height);
   text-align: left; // the button element was centering text
 }
 
 .hds-dropdown-list-item__interactive-icon {
-  margin-right: 0.5rem;
+  margin-right: 8px;
 }
 
 .hds-dropdown-list-item--color-action {
@@ -361,25 +354,19 @@
     // assign the values to the local CSS variables used above
     &::after {
       --current-background-color: var(--token-color-surface-critical);
-      --current-focus-ring-box-shadow: var(
-        --token-focus-ring-critical-box-shadow
-      );
+      --current-focus-ring-box-shadow: var(--token-focus-ring-critical-box-shadow);
     }
 
     &:hover,
     &.is-hover {
-      color: var(
-        --token-color-palette-red-300
-      ); // TODO we need to add this token to the design system
+      color: var(--token-color-palette-red-300);
       &::before {
         background-color: currentColor;
       }
     }
     &:active,
     &.is-active {
-      color: var(
-        --token-color-palette-red-400
-      ); // TODO we need to add this token to the design system
+      color: var(--token-color-palette-red-400);
       &::before {
         background-color: currentColor;
       }
@@ -389,3 +376,24 @@
     }
   }
 }
+
+.hds-dropdown-list-item--separator {
+  height: 4px;
+  position: relative;
+  width: 100%;
+
+  &::before {
+    border-bottom: 1px solid var(--token-color-border-primary);
+    bottom: 0;
+    content: '';
+    left: 6px;
+    position: absolute;
+    right: 6px;
+  }
+}
+
+.hds-dropdown-list-item--title {
+  color: var(--token-color-foreground-strong);
+  padding: 10px 16px 4px;
+}
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hashicorp/design-system-components",
-  "version": "0.9.2",
+  "version": "0.10.0",
   "description": "HashiCorp Design System Components",
   "keywords": [
     "hashicorp",
@@ -75,6 +75,7 @@
     "ember-resolver": "^8.0.2",
     "ember-source": "~3.28.0",
     "ember-source-channel-url": "^3.0.0",
+    "ember-style-modifier": "^0.8.0",
     "ember-template-lint": "^3.6.0",
     "ember-template-lint-plugin-prettier": "^3.0.1",
     "ember-truth-helpers": "^3.0.0",

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

@@ -1,84 +0,0 @@
-{{#if (eq this.item "title")}}
-  <li class={{this.classNames}}>
-    {{this.text}}
-  </li>
-
-{{else if (eq this.item "generic")}}
-  <li class={{this.classNames}}>
-    {{yield}}
-  </li>
-
-{{else if (eq this.item "copy-item")}}
-  <li class={{this.classNames}}>
-    {{#if @copyItemTitle}}
-      <div class="hds-dropdown-list-item__copy-item-title">{{@copyItemTitle}}</div>
-    {{/if}}
-    <button
-      type="button"
-      class="{{if @state (concat 'is-' @state)}} {{if this.isSuccess 'is-success'}}"
-      {{on "click" this.copyCode}}
-    >
-      <div class="hds-dropdown-list-item__copy-item-text">
-        {{this.text}}
-      </div>
-      <FlightIcon
-        @name="{{if this.isSuccess 'clipboard-checked' 'clipboard-copy'}}"
-        class="hds-dropdown-list-item__copy-item-icon"
-      />
-    </button>
-  </li>
-
-{{else if (eq this.item "description")}}
-  <li class={{this.classNames}}>
-    {{this.text}}
-  </li>
-
-{{else if (eq this.item "separator")}}
-  <li class={{this.classNames}} role="separator"></li>
-
-{{else if (eq this.item "interactive")}}
-  <li class={{this.classNames}}>
-    {{#if @route}}
-      <LinkTo
-        class="{{if @state (concat 'is-' @state)}}"
-        @current-when={{@current-when}}
-        @models={{hds-link-to-models @model @models}}
-        @query={{hds-link-to-query @query}}
-        @replace={{@replace}}
-        @route={{@route}}
-        ...attributes
-      >
-        {{#if @icon}}
-          <div class="hds-dropdown-list-item__interactive-icon">
-            <FlightIcon @name={{this.icon}} @isInlineBlock={{false}} />
-          </div>
-        {{/if}}
-        <div class="hds-dropdown-list-item__interactive-text">
-          {{this.text}}
-        </div>
-      </LinkTo>
-    {{else if @href}}
-      <a target="_blank" rel="noopener noreferrer" href={{@href}} class="{{if @state (concat 'is-' @state)}}">
-        {{#if this.icon}}
-          <div class="hds-dropdown-list-item__interactive-icon">
-            <FlightIcon @name={{this.icon}} @isInlineBlock={{false}} />
-          </div>
-        {{/if}}
-        <div class="hds-dropdown-list-item__interactive-text">
-          {{this.text}}
-        </div>
-      </a>
-    {{else}}
-      <button class="{{if @state (concat 'is-' @state)}}" type="button" ...attributes>
-        {{#if this.icon}}
-          <div class="hds-dropdown-list-item__interactive-icon">
-            <FlightIcon @name={{this.icon}} @isInlineBlock={{false}} />
-          </div>
-        {{/if}}
-        <div class="hds-dropdown-list-item__interactive-text">
-          {{this.text}}
-        </div>
-      </button>
-    {{/if}}
-  </li>
-{{/if}}

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

@@ -1,120 +0,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 = 'action';
-export const DEFAULT_ITEM = 'interactive';
-export const COLORS = ['action', 'critical'];
-export const ITEMS = [
-  'copy-item',
-  'description',
-  'generic',
-  'interactive',
-  'separator',
-  'title',
-];
-
-export default class HdsDropdownListItemComponent extends Component {
-  @tracked isSuccess = this.args.isSuccess ?? false;
-
-  /**
-   * @param item
-   * @type {string}
-   * @default interactive
-   * @description Determines the type of item to show
-   */
-  get item() {
-    let { item = DEFAULT_ITEM } = this.args;
-
-    assert(
-      `@item for "Hds::Dropdown::ListItem" must be one of the following: ${ITEMS.join(
-        ', '
-      )}; received: ${item}`,
-      ITEMS.includes(item)
-    );
-
-    return item;
-  }
-
-  /**
-   * @param text
-   * @type {string}
-   * @description The text of the item. If no text value is defined an error will be thrown unless it is the generic or separator item type.
-   */
-  get text() {
-    let { text } = this.args;
-
-    assert(
-      '@text for "Hds::Dropdown::ListItem" must have a valid value',
-      text !== undefined
-    );
-
-    return text;
-  }
-
-  /**
-   * @param color
-   * @type {string}
-   * @default primary
-   * @description Determines the color of the item (when item is set to interactive)
-   */
-  get color() {
-    let { color = DEFAULT_COLOR } = this.args;
-
-    assert(
-      `@color for "Hds::Dropdown::ListItem" must be one of the following: ${COLORS.join(
-        ', '
-      )}; received: ${color}`,
-      COLORS.includes(color)
-    );
-
-    return color;
-  }
-
-  /**
-   * @param icon
-   * @type {string}
-   * @default null
-   * @description The name of the icon to be used.
-   */
-  get icon() {
-    assert(
-      `when the "Hds::ListItem" @color is "critical" an @icon is required`,
-      !(this.color === 'critical' && !this.args.icon)
-    );
-
-    return this.args.icon ?? null;
-  }
-
-  /**
-   * 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'];
-
-    // add a class based on the @item argument
-    if (this.item) {
-      classes.push(`hds-dropdown-list-item--${this.item}`);
-    }
-
-    // add a class based on the @color argument
-    if (this.item === 'interactive') {
-      classes.push(`hds-dropdown-list-item--color-${this.color}`);
-    }
-
-    return classes.join(' ');
-  }
-
-  @action
-  copyCode() {
-    navigator.clipboard.writeText(this.args.text);
-    // this if statement resolves to [object Promise] so maybe some improvements
-    // could be made here
-    if (navigator.clipboard.readText()) {
-      this.isSuccess = true;
-    }
-  }
-}

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

@@ -1,22 +0,0 @@
-<button
-  class="hds-dropdown-toggle-icon"
-  aria-label={{this.text}}
-  ...attributes
-  {{on "click" this.onClick}}
-  type="button"
->
-  <div class="hds-dropdown-toggle-icon__wrapper">
-    {{#if @imageSrc}}
-      <img src={{@imageSrc}} alt="" role="presentation" height="32" width="32" />
-    {{else}}
-      <FlightIcon @name={{this.icon}} @size="24" />
-    {{/if}}
-  </div>
-  {{#if this.hasChevron}}
-    <FlightIcon
-      @name="chevron-{{if @isOpen 'up' 'down'}}"
-      class="hds-dropdown-toggle-icon__chevron"
-      @isInlineBlock={{false}}
-    />
-  {{/if}}
-</button>