@hashicorp/design-system-components 0.12.3 → 0.12.6

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @hashicorp/design-system-components
 
+## 0.12.6
+
+### Patch Changes
+
+- [#399](https://github.com/hashicorp/design-system/pull/399) [`62e3077e`](https://github.com/hashicorp/design-system/commit/62e3077e5cf40e93852e9fa3489d3d1970d45070) Thanks [@alex-ju](https://github.com/alex-ju)! - Enable programmatic close on dropdown component
+
+## 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
@@ -23,7 +50,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
 
@@ -68,25 +95,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:
 
@@ -94,8 +120,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
 
@@ -137,9 +163,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
 
@@ -160,9 +186,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/disclosure/index.hbs

@@ -11,7 +11,7 @@
   </div>
   {{#if this.isOpen}}
     <div class="hds-disclosure__content" tabindex="-1">
-      {{yield to="content"}}
+      {{yield (hash close=this.close) to="content"}}
     </div>
   {{/if}}
 </div>

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

@@ -29,20 +29,20 @@ export default class HdsDisclosureComponent extends Component {
       !event.relatedTarget || // click or tap a non-related target (e.g. outside the element)
       !this.element.contains(event.relatedTarget) // move focus to a target outside the element
     ) {
-      this.deactivate();
+      this.close();
     }
   }
 
   @action
   onKeyUp(event) {
     if (event.key === 'Escape') {
-      this.deactivate();
+      this.close();
       this.toggleRef.focus();
     }
   }
 
   @action
-  deactivate() {
+  close() {
     if (this.isOpen) {
       this.isOpen = false;
     }

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

@@ -7,10 +7,11 @@
       )
     }}
   </:toggle>
-  <:content>
+  <: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")

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.3",
+  "version": "0.12.6",
   "description": "HashiCorp Design System Components",
   "keywords": [
     "hashicorp",
@@ -35,15 +35,14 @@
   },
   "dependencies": {
     "@hashicorp/design-system-tokens": "^0.8.1",
-    "@hashicorp/ember-flight-icons": "^2.0.7",
+    "@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.1",
     "@percy/ember": "^3.0.0",
     "babel-eslint": "^10.1.0",
     "broccoli-asset-rev": "^3.0.0",