@hashicorp/design-system-components 0.12.2 → 0.12.5

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @hashicorp/design-system-components
 
+## 0.12.5
+
+### Patch Changes
+
+- [#391](https://github.com/hashicorp/design-system/pull/391) [`0d8515f0`](https://github.com/hashicorp/design-system/commit/0d8515f06ae15b9955a15e9cafa97dc1d4c87cee) Thanks [@didoo](https://github.com/didoo)! - Fixed bug in `Link::Standalone` and `Link::Inline` components that added `target="_blank"` and `rel="noopener noreferrer”` attributes in any case/condition.
+
+* [#354](https://github.com/hashicorp/design-system/pull/354) [`e7997ee6`](https://github.com/hashicorp/design-system/commit/e7997ee68d7d8b104243c8b6129db1030a3cea57) Thanks [@didoo](https://github.com/didoo)! - small update to the `yield` helper component - this is used in `Alert` and `Toast` but the changes should have no impact
+
+## 0.12.4
+
+### Patch Changes
+
+- [#343](https://github.com/hashicorp/design-system/pull/343) [`a74711c8`](https://github.com/hashicorp/design-system/commit/a74711c8c0de6843625781488ed94521c7f8cb7c) Thanks [@MelSumner](https://github.com/MelSumner)! - Fixes copy-item bug in FireFox
+
+* [#328](https://github.com/hashicorp/design-system/pull/328) [`32b36ab1`](https://github.com/hashicorp/design-system/commit/32b36ab132b3356923ef6d1f3f36c2f7036e852c) Thanks [@didoo](https://github.com/didoo)! - updated `font-weight` to `medium` for `Link::Standalone` component (to be in sync with design specs)
+
+- [#319](https://github.com/hashicorp/design-system/pull/319) [`7c96344f`](https://github.com/hashicorp/design-system/commit/7c96344f3c83baecc56daac6dfdddb809c161c1f) Thanks [@didoo](https://github.com/didoo)! - updated the `Hds::Dropdown::ListItem::Interactive` to support the `isLoading` state
+
+- Updated dependencies []:
+  - @hashicorp/ember-flight-icons@2.0.8
+
+## 0.12.3
+
+### Patch Changes
+
+- Updated dependencies [[`a46fc035`](https://github.com/hashicorp/design-system/commit/a46fc03570f51e8375b15571ddcb10e62ba446fb)]:
+  - @hashicorp/design-system-tokens@0.8.1
+
 ## 0.12.2
 
 ### Patch Changes
@@ -16,7 +44,7 @@
 
 ## 0.12.0
 
-### Minor Changes
+### Minor Changes (Some Breaking)
 
 - [#217](https://github.com/hashicorp/design-system/pull/217) [`210edd17`](https://github.com/hashicorp/design-system/commit/210edd17431e6e3097260aed0df5a8902f93b7f7) Thanks [@didoo](https://github.com/didoo)! - # Interactive
 
@@ -61,25 +89,24 @@
 
 ## 0.11.0
 
-### Minor Changes
+### Minor Changes (Some Breaking)
 
 - [#245](https://github.com/hashicorp/design-system/pull/245) [`c6de1018`](https://github.com/hashicorp/design-system/commit/c6de101880ec1c21971e3775e1a21b6cb9e69757) Thanks [@didoo](https://github.com/didoo)! - - Added `Alert` component
   - Added `Toast` component
+- [#259](https://github.com/hashicorp/design-system/pull/259) [`478b3069`](https://github.com/hashicorp/design-system/commit/478b3069e800cf2ccefba9b5475c72b024e25d16) Thanks [@didoo](https://github.com/didoo)! - - removed autofocus on first item for `Disclosure` component (and as a result also for `Breadcrumb` and `Dropdown` components) (🚨 Breaking)
+  - updated focus state treatment for `Dropdown` component (🚨 Breaking)
 
 ### Patch Changes
 
-- [#259](https://github.com/hashicorp/design-system/pull/259) [`478b3069`](https://github.com/hashicorp/design-system/commit/478b3069e800cf2ccefba9b5475c72b024e25d16) Thanks [@didoo](https://github.com/didoo)! - - removed autofocus on first item for `Disclosure` component (and as a result also for `Breadcrumb` and `Dropdown` components)
-  - updated focus state treatment for `Dropdown` component
-
-* [#225](https://github.com/hashicorp/design-system/pull/225) [`f1f07179`](https://github.com/hashicorp/design-system/commit/f1f0717952b3e6b41676135cf00e77a6e55579ec) Thanks [@Dhaulagiri](https://github.com/Dhaulagiri)! - update to ember-keyboard@8.1.0 in packages/components
+- [#225](https://github.com/hashicorp/design-system/pull/225) [`f1f07179`](https://github.com/hashicorp/design-system/commit/f1f0717952b3e6b41676135cf00e77a6e55579ec) Thanks [@Dhaulagiri](https://github.com/Dhaulagiri)! - update to ember-keyboard@8.1.0 in packages/components
 
 - [#265](https://github.com/hashicorp/design-system/pull/265) [`79bc3e99`](https://github.com/hashicorp/design-system/commit/79bc3e99cd5cc6cb60fc82286d5726c0d0ffbd82) Thanks [@Dhaulagiri](https://github.com/Dhaulagiri)! - npx ember-cli-update@4.3.0 dependency updates
 
-* [#253](https://github.com/hashicorp/design-system/pull/253) [`21786983`](https://github.com/hashicorp/design-system/commit/21786983d4ebbb3f38a72d4d105504169bfeda78) Thanks [@MelSumner](https://github.com/MelSumner)! - bugfix for icon size in copy-item component
+- [#253](https://github.com/hashicorp/design-system/pull/253) [`21786983`](https://github.com/hashicorp/design-system/commit/21786983d4ebbb3f38a72d4d105504169bfeda78) Thanks [@MelSumner](https://github.com/MelSumner)! - bugfix for icon size in copy-item component
 
 ## 0.10.0
 
-### Minor Changes
+### Minor Changes (Some Breaking)
 
 - [#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:
 
@@ -87,8 +114,8 @@
   - 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
+  - removed the default icon for `toggle/icon` (🚨 Breaking)
+  - removed icon requirement from the `critical` list item (🚨 Breaking)
   - updated the documentation and integration tests
   - some code refactorings, reorganizations and cleanups
 
@@ -130,9 +157,9 @@
 
 ## 0.7.0
 
-### Minor Changes
+### Minor Changes (Some Breaking)
 
-- [#150](https://github.com/hashicorp/design-system/pull/150) [`c236c159`](https://github.com/hashicorp/design-system/commit/c236c159f7d7ec6edc661710963f5733eb961edf) Thanks [@didoo](https://github.com/didoo)! - removed “box-sizing“ declarations from the components (we assume the consumers codebase already have set it to “border-box“ by default
+- [#150](https://github.com/hashicorp/design-system/pull/150) [`c236c159`](https://github.com/hashicorp/design-system/commit/c236c159f7d7ec6edc661710963f5733eb961edf) Thanks [@didoo](https://github.com/didoo)! - removed “box-sizing“ declarations from the components (we assume the consumers codebase already have set it to “border-box“ by default (🚨 Breaking)
 
 ## 0.6.0
 
@@ -153,9 +180,9 @@
 
 ## 0.5.0
 
-### Minor Changes
+### Minor Changes (Some Breaking)
 
-- [#127](https://github.com/hashicorp/design-system/pull/127) [`fa13190f`](https://github.com/hashicorp/design-system/commit/fa13190f1058f172898221aa1e1913965bfa53e9) Thanks [@didoo](https://github.com/didoo)! - removed the “isDisabled“ prop from the “Button” component; added instructions for developers to manually add it themselves if needed.
+- [#127](https://github.com/hashicorp/design-system/pull/127) [`fa13190f`](https://github.com/hashicorp/design-system/commit/fa13190f1058f172898221aa1e1913965bfa53e9) Thanks [@didoo](https://github.com/didoo)! - removed the “isDisabled“ prop from the “Button” component; added instructions for developers to manually add it themselves if needed. (🚨 Breaking)
 
 ### Patch Changes
 

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

@@ -40,16 +40,24 @@ export default class HdsDropdownListItemCopyItemComponent extends Component {
   async copyCode() {
     // https://developer.mozilla.org/en-US/docs/Web/API/Clipboard
     await navigator.clipboard.writeText(this.args.text);
-    const result = await navigator.clipboard.readText();
 
-    if (result === this.args.text) {
+    if (navigator.clipboard.readText) {
+      const result = await navigator.clipboard.readText();
+
+      if (result === this.args.text) {
+        this.isSuccess = true;
+      }
+    } else {
+      // assume that it works so Firefox can show the success state
+      // doesn't confirm that you'll get the correct pasted text
+      // but we accept this as a reasonable tradeoff
+      // since users can always copy/paste manually.
       this.isSuccess = true;
-      // console.log(`result is ${result}`);
-
-      // make it fade back to the default state
-      setTimeout(() => {
-        this.isSuccess = false;
-      }, 1000);
     }
+
+    // make it fade back to the default state
+    setTimeout(() => {
+      this.isSuccess = false;
+    }, 1000);
   }
 }

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

@@ -1,22 +1,33 @@
 <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}}
-    ...attributes
-  >
-    {{#if @icon}}
+  {{#if @isLoading}}
+    <div class="hds-dropdown-list-item__interactive-loading-wrapper" ...attributes>
       <div class="hds-dropdown-list-item__interactive-icon">
-        <FlightIcon @name={{@icon}} @isInlineBlock={{false}} />
+        <FlightIcon @name="loading" @isInlineBlock={{false}} />
+      </div>
+      <div class="hds-dropdown-list-item__interactive-text hds-typography-body-100 hds-font-weight-regular">
+        {{this.text}}
       </div>
-    {{/if}}
-    <div class="hds-dropdown-list-item__interactive-text hds-typography-body-200 hds-font-weight-medium">
-      {{this.text}}
     </div>
-  </Hds::Interactive>
+  {{else}}
+    <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>
+      {{/if}}
+      <div class="hds-dropdown-list-item__interactive-text hds-typography-body-200 hds-font-weight-medium">
+        {{this.text}}
+      </div>
+    </Hds::Interactive>
+  {{/if}}
 </li>

package/addon/components/hds/link/inline.hbs

@@ -9,8 +9,7 @@
   @route={{@route}}
   @isRouteExternal={{@isRouteExternal}}
   @href={{@href}}
-  target="_blank"
-  rel="noopener noreferrer"
+  @isHrefExternal={{@isHrefExternal}}
   ...attributes
 >{{#if (and @icon (eq this.iconPosition "leading"))~}}
     <span class="hds-link-inline__icon hds-link-inline__icon--leading">

package/addon/components/hds/link/standalone.hbs

@@ -8,8 +8,6 @@
   @isRouteExternal={{@isRouteExternal}}
   @href={{@href}}
   @isHrefExternal={{@isHrefExternal}}
-  target="_blank"
-  rel="noopener noreferrer"
   ...attributes
 >
   {{#if (eq this.iconPosition "leading")}}

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

@@ -1,3 +1,2 @@
-<div ...attributes>
-  {{yield}}
-</div>
+{{! template-lint-disable no-yield-only }}
+{{yield}}

package/app/styles/components/dropdown.scss

@@ -333,14 +333,14 @@ $hds-dropdown-toggle-border-radius: 5px;
   }
 }
 
-.hds-dropdown-list-item__interactive-text {
-  text-align: left; // the button element was centering text
-}
-
 .hds-dropdown-list-item__interactive-icon {
   margin-right: 8px;
 }
 
+.hds-dropdown-list-item__interactive-text {
+  text-align: left; // the button element was centering text
+}
+
 .hds-dropdown-list-item--color-action {
   a, button {
     color: var(--token-color-foreground-primary);
@@ -371,6 +371,20 @@ $hds-dropdown-toggle-border-radius: 5px;
   }
 }
 
+.hds-dropdown-list-item__interactive-loading-wrapper {
+  align-items: center;
+  display: flex;
+  padding: 8px 10px 8px 16px;
+
+  .hds-dropdown-list-item__interactive-text {
+    color: var(--token-color-foreground-faint);
+  }
+
+  .hds-dropdown-list-item__interactive-icon {
+    color: var(--token-color-foreground-primary);
+  }
+}
+
 .hds-dropdown-list-item--separator {
   height: 4px;
   position: relative;

package/app/styles/components/link/standalone.scss

@@ -19,6 +19,7 @@ $hds-link-standalone-border-width: 1px;
   border: $hds-link-standalone-border-width solid transparent; // needs to exist AND be transparent for a11y
   display: flex;
   font-family: var(--token-typography-font-stack-text);
+  font-weight: var(--token-typography-font-weight-medium);
   justify-content: center;
   // notice: the text decoration is applied directly to the "text" container because of a bug in Safari (see https://github.com/hashicorp/design-system-components/issues/159)
   text-decoration-color: transparent;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hashicorp/design-system-components",
-  "version": "0.12.2",
+  "version": "0.12.5",
   "description": "HashiCorp Design System Components",
   "keywords": [
     "hashicorp",
@@ -34,16 +34,15 @@
     "test:ember:percy": "percy exec ember test"
   },
   "dependencies": {
-    "@hashicorp/design-system-tokens": "^0.8.0",
-    "@hashicorp/ember-flight-icons": "^2.0.7",
+    "@hashicorp/design-system-tokens": "^0.8.1",
+    "@hashicorp/ember-flight-icons": "^2.0.8",
     "ember-auto-import": "^2.4.1",
     "ember-cli-babel": "^7.26.11",
     "ember-cli-htmlbars": "^6.0.1",
     "ember-cli-sass": "^10.0.1",
     "ember-keyboard": "^8.1.0",
     "ember-named-blocks-polyfill": "^0.2.5",
-    "sass": "^1.43.4",
-    "sinon": "^14.0.0"
+    "sass": "^1.43.4"
   },
   "devDependencies": {
     "@ember/optional-features": "^2.0.0",
@@ -51,7 +50,7 @@
     "@embroider/test-setup": "^1.5.0",
     "@glimmer/component": "^1.0.4",
     "@glimmer/tracking": "^1.0.4",
-    "@percy/cli": "^1.2.1",
+    "@percy/cli": "^1.3.0",
     "@percy/ember": "^3.0.0",
     "babel-eslint": "^10.1.0",
     "broccoli-asset-rev": "^3.0.0",