hashicorp · didoo · May 26, 2022 · Apr 14, 2022 · Apr 14, 2022 · Apr 14, 2022
@@ -0,0 +1,28 @@
+---
+"@hashicorp/design-system-components": minor
+---
+
+# Interactive
+- Introduced `<Hds::Interactive>` (a generic, "utility" component used internally by all the interactive elements like buttons and links)
+
+# Button
+- updated the button API to handle also links as `<a>`/`<LinkTo/LinkToExternal>` 
+  - it can be used in place of the `<Hds::Link/LinkTo::CTA>` component (see below)
+  - when the button is a link
+		- the text is underlined for differentiation with a normal button - ⚠️ **Visual change!**
+		- the button responds to `space` key event
+- removed the `@type` argument from the API in favour of the `type` native attribute - 🚨 **Breaking change!**
+
+# Link/LinkTo::CTA
+- removed the `<Hds::Link/LinkTo::CTA>` component, in favour of `<Hds::Button>` component (see above) - 🚨 **Breaking change!**
+
+# Link::Inline
+- added the `<Hds::Link::Inline>` component (with API very similar to the `<Hds::Link::Standalone>`)
+
+# Dropdown
+- Updated the `Dropdown::ListItem::Interactive` to use the new `<Hds::Interactive>` component
+
+# Alert/Toast components
+- Removed the `<LinkTo::Standalone>` action (now you can use directly `<Link::Standalone>`)
+
+
@@ -14,9 +14,7 @@
     <div class="hds-alert__actions">
       {{yield
         (hash
-          Button=(component "hds/button" size="small")
-          Link::Standalone=(component "hds/link/standalone" size="small")
-          LinkTo::Standalone=(component "hds/link-to/standalone" size="small")
+          Button=(component "hds/button" size="small") Link::Standalone=(component "hds/link/standalone" size="small")
         )
       }}
     </div>

@@ -1,4 +1,16 @@
-<button class={{this.classNames}} ...attributes aria-label={{if this.isIconOnly this.text null}} type={{this.type}}>
+<Hds::Interactive
+  class={{this.classNames}}
+  @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}}
+  ...attributes
+  aria-label={{if this.isIconOnly this.text null}}
+>
   {{#if this.isIconOnly}}
     <div class="hds-button__icon">
       <FlightIcon @name={{this.icon}} @size={{this.iconSize}} @stretched={{true}} />
@@ -26,4 +38,4 @@
       </div>
     {{/if}}
   {{/if}}
-</button>
+</Hds::Interactive>
@@ -3,11 +3,9 @@ import { assert } from '@ember/debug';
 
 export const DEFAULT_SIZE = 'medium';
 export const DEFAULT_COLOR = 'primary';
-export const DEFAULT_TYPE = 'button';
 export const DEFAULT_ICONPOSITION = 'leading';
 export const SIZES = ['small', 'medium', 'large'];
 export const COLORS = ['primary', 'secondary', 'tertiary', 'critical'];
-export const TYPES = ['button', 'submit', 'reset'];
 export const ICONPOSITIONS = ['leading', 'trailing'];
 
 export default class HdsButtonIndexComponent extends Component {
@@ -126,25 +124,6 @@ export default class HdsButtonIndexComponent extends Component {
     }
   }
 
-  /**
-   * @param type
-   * @type {string}
-   * @default button
-   * @description The value for the button's `type` attribute. Acceptable values are `button`, `submit`, and `reset`
-   */
-  get type() {
-    let { type = DEFAULT_TYPE } = this.args;
-
-    assert(
-      `@type for "Hds::Button" must be one of the following: ${TYPES.join(
-        ', '
-      )}; received: ${type}`,
-      TYPES.includes(type)
-    );
-
-    return type;
-  }
-
   /**
    * @param isFullWidth
    * @type {boolean}

@@ -1,43 +1,22 @@
 <li class={{this.classNames}}>
-  {{#if @route}}
-    <LinkTo
-      @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}}
+  <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}}
+    ...attributes
+  >
+    {{#if @icon}}
+      <div class="hds-dropdown-list-item__interactive-icon">
+        <FlightIcon @name={{@icon}} @isInlineBlock={{false}} />
       </div>
-    </LinkTo>
-  {{else if @href}}
-    <a target="_blank" rel="noopener noreferrer" href={{@href}}>
-      {{#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 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}}
+    {{/if}}
+    <div class="hds-dropdown-list-item__interactive-text hds-typography-body-200 hds-font-weight-medium">
+      {{this.text}}
+    </div>
+  </Hds::Interactive>
 </li>
@@ -0,0 +1,33 @@
+{{! IMPORTANT: we removed the newlines before/after the yield to reduce the issues with unexpected whitespaces (see https://github.com/hashicorp/design-system/pull/231#issuecomment-1123502499) }}
+{{! NOTICE: we can't support the direct use of the "href" HTML attribute via ...attributes in the <a> elements, because we need to rely on the "@href" Ember argument to differentiate between different types of generated output }}
+{{#if @route}}
+  {{#if this.isRouteExternal}}
+    <LinkToExternal
+      @current-when={{@current-when}}
+      @models={{hds-link-to-models @model @models}}
+      @query={{hds-link-to-query @query}}
+      @replace={{@replace}}
+      @route={{@route}}
+      ...attributes
+    >{{yield}}</LinkToExternal>
+  {{else}}
+    <LinkTo
+      @current-when={{@current-when}}
+      @models={{hds-link-to-models @model @models}}
+      @query={{hds-link-to-query @query}}
+      @replace={{@replace}}
+      @route={{@route}}
+      ...attributes
+    >{{yield}}</LinkTo>
+  {{/if}}
+{{else if @href}}
+  {{#if this.isHrefExternal}}
+    <a target="_blank" rel="noopener noreferrer" ...attributes href={{@href}} {{on "keyup" this.onKeyUp}}>{{yield}}</a>
+  {{else}}
+    <a ...attributes href={{@href}} {{on "keyup" this.onKeyUp}}>{{yield}}</a>
+  {{/if}}
+{{else}}
+  <button type="button" ...attributes>
+    {{yield}}
+  </button>
+{{/if}}
@@ -0,0 +1,33 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+
+export default class HdsInteractiveComponent extends Component {
+  /**
+   * Determines if a @href value is "external" (it adds target="_blank" rel="noopener noreferrer")
+   *
+   * @param isHrefExternal
+   * @type boolean
+   * @default true
+   */
+  get isHrefExternal() {
+    return this.args.isHrefExternal ?? true;
+  }
+
+  /**
+   * Determines if a @route value is "external" (uses the LinkToExternal component instead of LinkTo)
+   *
+   * @param isRouteExternal
+   * @type boolean
+   * @default false
+   */
+  get isRouteExternal() {
+    return this.args.isRouteExternal ?? false;
+  }
+
+  @action
+  onKeyUp(event) {
+    if (event.key === ' ' || event.code === 'Space') {
+      event.target.click();
+    }
+  }
+}