@hashicorp/design-system-components 0.8.0 → 0.9.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @hashicorp/design-system-components
 
+## 0.9.0
+
+### Minor Changes
+
+- [#66](https://github.com/hashicorp/design-system/pull/66) [`29e2ce55`](https://github.com/hashicorp/design-system/commit/29e2ce55bab74cc02dd511794dfadd2b3ac40a14) Thanks [@MelSumner](https://github.com/MelSumner)! - Adds dropdown component to the design system
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @hashicorp/ember-flight-icons@2.0.4
+
 ## 0.8.0
 
 ### Minor Changes

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

@@ -0,0 +1,27 @@
+<Hds::Disclosure class="hds-dropdown">
+  <: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)
+      )
+    }}
+  </:toggle>
+  <:content>
+    <ul
+      class="hds-dropdown-list
+        {{if (eq @listPosition 'left') 'hds-dropdown-list--position-left' 'hds-dropdown-list--position-right'}}"
+    >
+      {{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")
+        )
+      }}
+    </ul>
+  </:content>
+</Hds::Disclosure>

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

@@ -0,0 +1,84 @@
+{{#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

@@ -0,0 +1,120 @@
+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-button.hbs

@@ -0,0 +1,23 @@
+{{!
+// >>>>>>>>>>> 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
+  @text={{this.text}}
+  @icon="chevron-{{if @isOpen 'up' 'down'}}"
+  @iconPosition="trailing"
+  @color={{this.color}}
+  class="hds-dropdown-toggle--with-button-component"
+  {{on "click" this.onClick}}
+  ...attributes
+/>

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

@@ -0,0 +1,59 @@
+import Component from '@glimmer/component';
+import { assert } from '@ember/debug';
+
+export const DEFAULT_COLOR = 'primary';
+export const COLORS = ['primary', 'secondary'];
+
+export default class HdsDropdownToggleButtonComponent extends Component {
+  /**
+   * @param text
+   * @type {string}
+   * @description The text of the button. If no text value is defined an error will be thrown.
+   */
+  get text() {
+    let { text } = this.args;
+
+    assert(
+      '@text for "Hds::Dropdown::ToggleButton" must have a valid value',
+      text !== undefined
+    );
+
+    return text;
+  }
+
+  /**
+   * @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::Dropdown::ToggleButton" must be one of the following: ${COLORS.join(
+        ', '
+      )}; received: ${color}`,
+      COLORS.includes(color)
+    );
+
+    return color;
+  }
+
+  /**
+   * @param onClick
+   * @type {function}
+   * @default () => {}
+   */
+  get onClick() {
+    let { onClick } = this.args;
+
+    // notice: this is a guard used in case the toggle is used as standalone element (eg. in the showcase)
+    // in reality it's always used inside the Dropdown main component as yielded component, so the onClick handler is always defined
+    if (typeof onClick === 'function') {
+      return onClick;
+    } else {
+      return () => {};
+    }
+  }
+}

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

@@ -0,0 +1,22 @@
+<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>

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

@@ -0,0 +1,59 @@
+import Component from '@glimmer/component';
+import { assert } from '@ember/debug';
+
+export default class HdsDropdownToggleIconComponent extends Component {
+  /**
+   * @param text
+   * @type {string}
+   * @description The text of the `aria-label` applied to the toggle
+   */
+  get text() {
+    let { text } = this.args;
+
+    assert(
+      '@text for "Hds::Dropdown::ToggleIcon" must have a valid value',
+      text !== undefined
+    );
+
+    return text;
+  }
+
+  /**
+   * Indicates if a dropdown chevron icon should be displayed; should be displayed unless the "more-horizontal" icon is used.
+   *
+   * @param hasChevron
+   * @type {boolean}
+   * @default true
+   */
+  get hasChevron() {
+    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}
+   * @default () => {}
+   */
+  get onClick() {
+    let { onClick } = this.args;
+
+    // notice: this is a guard used in case the toggle is used as standalone element (eg. in the showcase)
+    // in reality it's always used inside the Dropdown main component as yielded component, so the onClick handler is always defined
+    if (typeof onClick === 'function') {
+      return onClick;
+    } else {
+      return () => {};
+    }
+  }
+}

package/addon/components/hds/link/cta.js

@@ -112,19 +112,6 @@ export default class HdsLinkCtaComponent extends Component {
     return this.args.isFullWidth ?? false;
   }
 
-  @action
-  didInsert(el) {
-    // we need to register the element to compare it with the one that triggered the "key/space" event
-    this.el = el;
-  }
-
-  @action
-  onKeySpace(event) {
-    if (event.target === this.el) {
-      event.target.click();
-    }
-  }
-
   /**
    * Get the class names to apply to the component.
    * @method classNames
@@ -147,4 +134,17 @@ export default class HdsLinkCtaComponent extends Component {
 
     return classes.join(' ');
   }
+
+  @action
+  didInsert(el) {
+    // we need to register the element to compare it with the one that triggered the "key/space" event
+    this.el = el;
+  }
+
+  @action
+  onKeySpace(event) {
+    if (event.target === this.el) {
+      event.target.click();
+    }
+  }
 }

package/addon/components/hds/link-to/cta.js

@@ -127,19 +127,6 @@ export default class HdsLinkToCtaComponent extends Component {
     return route;
   }
 
-  @action
-  didInsert(el) {
-    // we need to register the element to compare it with the one that triggered the "key/space" event
-    this.el = el;
-  }
-
-  @action
-  onKeySpace(event) {
-    if (event.target === this.el) {
-      event.target.click();
-    }
-  }
-
   /**
    * Get the class names to apply to the component.
    * @method classNames
@@ -162,4 +149,17 @@ export default class HdsLinkToCtaComponent extends Component {
 
     return classes.join(' ');
   }
+
+  @action
+  didInsert(el) {
+    // we need to register the element to compare it with the one that triggered the "key/space" event
+    this.el = el;
+  }
+
+  @action
+  onKeySpace(event) {
+    if (event.target === this.el) {
+      event.target.click();
+    }
+  }
 }

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

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

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

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

package/app/components/hds/dropdown/toggle-button.js

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

package/app/components/hds/dropdown/toggle-icon.js

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

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

@@ -11,6 +11,7 @@
 @use "../components/button";
 @use "../components/card";
 @use "../components/disclosure";
+@use "../components/dropdown";
 @use "../components/icon-tile";
 @use "../components/link/cta";
 @use "../components/link/standalone";

package/app/styles/components/dropdown.scss

@@ -0,0 +1,392 @@
+// >>>>>>>>>> WARNING <<<<<<<<<<<
+//
+// Notice: in this component we're using directly 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 here using
+// the specialized class declared below.
+// 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.
+
+//
+// DROPDOWN COMPONENT
+//
+// properties within each class are sorted alphabetically
+// notice: pseudo-classes for the states *must* follow the order link > visited > hover > focus > active
+// see https://github.com/hashicorp/design-system-components/issues/132
+//
+//
+
+@use '../mixins/focus-ring' as *;
+
+// 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;
+  display: flex;
+  height: 36px;
+  justify-content: center;
+  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,  
+  &.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);
+
+  &:active,
+  &.is-active {
+    background-color: var(--token-color-surface-interactive-active);
+    border-color: var(--token-color-border-strong);
+  }
+}
+
+.hds-dropdown-toggle-icon__wrapper {
+  align-items: center;
+  border-radius: 3px; // 5px- 1px padding - 1px border
+  display: flex;
+  justify-content: center;
+  height: 32px;
+  padding: 1px;
+  width: 32px;
+
+  img {
+    border-radius: inherit;
+    object-fit: cover; // this will make sure it's correct even if the item isn't square
+  }
+}
+
+.hds-dropdown-toggle-icon__chevron {
+  margin-left: 0.25rem;
+}
+
+// TOGGLE/BUTTON
+.hds-dropdown-toggle--with-button-component {
+  box-shadow: none; // we override this to remove the elevation style
+
+  .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`
+  }
+}
+
+
+// LIST
+// UL ELEMENT
+// GOES INSIDE HDS::DISCLOSURE's :content block
+
+.hds-dropdown-list {
+  background-color: var(--token-color-surface-primary);
+  border-radius: 6px;
+  box-shadow: var(--token-surface-high-box-shadow);
+  list-style: none;
+  margin: 0;
+  max-width: 25rem;
+  min-width: 12.5rem;
+  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
+  }
+}
+
+// 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-item--generic {
+  padding-left: 16px;
+  padding-right: 16px;
+}
+
+.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-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: '';
+  }
+}
+
+.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;
+}
+
+.hds-dropdown-list-item--copy-item {
+  padding: 10px 16px 12px;
+  width: 100%;
+
+  button { 
+    background-color: transparent;
+    border-radius: 5px;
+    border: 1px solid var(--token-color-border-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);
+      cursor: pointer;
+    }
+
+    @include hds-focus-ring-basic();
+    
+    &:focus,
+    &.is-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, 
+    &.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);
+      
+      .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--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;
+
+  // 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...
+  button {
+    border: 1px inset transparent; // cause of the extra height
+    background-color: transparent;
+    width: 100%;
+
+    &:hover {
+      cursor: pointer;
+    }
+
+  }
+
+  // shared styles for links and buttons
+  a, button {
+    align-items: center;
+    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;
+    text-decoration: none;
+
+    // this is used for the left "hover" indicator
+    &::before {
+      border-radius: 1px;
+      bottom: 6px;
+      content: '';
+      left: 0.25rem;
+      position: absolute;
+      top: 6px;
+      width: 2px;
+      z-index: -1;
+    }
+
+    // Notice: this is used for the active/focus states which have very specific positions
+    // and also has a background color, so we can't use the existing focus-ring mixins
+    &::after {
+      border-radius: 5px;
+      bottom: 0px;
+      content: '';
+      left: 0.625rem;
+      position: absolute;
+      right: 0.25rem;
+      z-index: -1;
+      top: 0;
+    }
+
+    // Notice: to avoid too much duplication we define two local CSS variables
+    // and define their values in the color variants below
+
+    // default focus for browsers that still rely on ":focus"
+    &:focus,
+    &.is-focus {
+      &::after {
+        background-color: var(--current-background-color);
+        box-shadow: var(--current-focus-ring-box-shadow);
+        left: 0.25rem;
+      }
+    }
+    // undo the previous declaration for browsers that support ":focus-visible" but wouldn't normally show default focus styles
+    &:focus:not(:focus-visible) {
+      &::after {
+        box-shadow: none;
+      }
+    }
+    // set focus for browsers that support ":focus-visible"
+    &:focus-visible {
+      &::after {
+        background-color: var(--current-background-color);
+        box-shadow: var(--current-focus-ring-box-shadow);
+        left: 0.25rem;
+      }
+    }
+    // remove the focus ring on "active + focused" state (by design)
+    &:focus:active,
+    &.is-focus.is-active {
+      &::after {
+        box-shadow: none;
+      }
+    }
+  }
+}
+
+.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;
+}
+
+.hds-dropdown-list-item--color-action {
+  a, button {
+    color: var(--token-color-foreground-primary);
+
+    // assign the values to the local CSS variables used above
+    &::after {
+      --current-background-color: var(--token-color-surface-action);
+      --current-focus-ring-box-shadow: var(
+        --token-focus-ring-action-box-shadow
+      );
+    }
+
+    &:hover,
+    &.is-hover {
+      color: var(--token-color-foreground-action-hover);
+      &::before {
+        background-color: currentColor;
+      }
+    }
+
+    &:active,
+    &.is-active {
+      color: var(--token-color-foreground-action-active);
+      &::before {
+        background-color: currentColor;
+      }
+      &::after {
+        background-color: var(--token-color-surface-action);
+      }
+    }
+  }
+}
+
+.hds-dropdown-list-item--color-critical {
+  a, button {
+    color: var(--token-color-foreground-critical);
+
+    // 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
+      );
+    }
+
+    &:hover,
+    &.is-hover {
+      color: var(
+        --token-color-palette-red-300
+      ); // TODO we need to add this token to the design system
+      &::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
+      &::before {
+        background-color: currentColor;
+      }
+      &::after {
+        background-color: var(--token-color-surface-critical);
+      }
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hashicorp/design-system-components",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "description": "HashiCorp Design System Components",
   "keywords": [
     "hashicorp",
@@ -35,7 +35,7 @@
   },
   "dependencies": {
     "@hashicorp/design-system-tokens": "^0.8.0",
-    "@hashicorp/ember-flight-icons": "^2.0.1",
+    "@hashicorp/ember-flight-icons": "^2.0.4",
     "ember-auto-import": "^2.2.3",
     "ember-cli-babel": "^7.26.6",
     "ember-cli-htmlbars": "^5.7.1",