@hashicorp/design-system-components 2.11.0 → 2.12.1

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @hashicorp/design-system-components
 
+## 2.12.1
+
+### Patch Changes
+
+- [#1627](https://github.com/hashicorp/design-system/pull/1627) [`53c9f13c0`](https://github.com/hashicorp/design-system/commit/53c9f13c0a2b120d19d74a88fd0e0799d59752c4) Thanks [@MelSumner](https://github.com/MelSumner)! - `Pagination` - Bugfix `aria-label` on the component
+
+- [#1635](https://github.com/hashicorp/design-system/pull/1635) [`2ecab760c`](https://github.com/hashicorp/design-system/commit/2ecab760c07c89ee9d34e993b879fc19e914c2e0) Thanks [@KristinLBradley](https://github.com/KristinLBradley)! - `Dropdown` - changed `@height` property to use `max-height` instead of a fixed height.
+
+## 2.12.0
+
+### Minor Changes
+
+- [#1640](https://github.com/hashicorp/design-system/pull/1640) [`8001667d2`](https://github.com/hashicorp/design-system/commit/8001667d2b0b549b5c2743ebaa4b50b58344a87f) Thanks [@didoo](https://github.com/didoo)! - `Design tokens` - Added color tokens for “Vault Secrets” product
+
+  `IconTile` - updated component to include `vault-secrets` product option
+
+### Patch Changes
+
+- [#1615](https://github.com/hashicorp/design-system/pull/1615) [`d5d4402b2`](https://github.com/hashicorp/design-system/commit/d5d4402b2b7529d60ac693babc2a9187f8fbad36) Thanks [@didoo](https://github.com/didoo)! - `Text` - Removed leftover `console.log` from code
+
+- [#1618](https://github.com/hashicorp/design-system/pull/1618) [`4e31014d5`](https://github.com/hashicorp/design-system/commit/4e31014d503d4b71e6b70b11ba750b75c0cb2d37) Thanks [@KristinLBradley](https://github.com/KristinLBradley)! - Refactor the layout of the `Dropdown` checkbox and radio inputs to make the gap between the inputs and the associated text, as well as the icon and count, clickable.
+
+- [#1617](https://github.com/hashicorp/design-system/pull/1617) [`214f66e9e`](https://github.com/hashicorp/design-system/commit/214f66e9e8818da87e6d514b3808b40a0b7e56f5) Thanks [@KristinLBradley](https://github.com/KristinLBradley)! - Change font-weight of `Hds::Link::Standalone` from 500 to 400 to match font-weight of `Hds::Button`.
+
+- [#1628](https://github.com/hashicorp/design-system/pull/1628) [`cc15349d3`](https://github.com/hashicorp/design-system/commit/cc15349d31c698d89540897570f76a5f2dc670ce) Thanks [@didoo](https://github.com/didoo)! - `Stepper` - removed some CSS declarations that were not used/applied
+
+- Updated dependencies [[`8001667d2`](https://github.com/hashicorp/design-system/commit/8001667d2b0b549b5c2743ebaa4b50b58344a87f)]:
+  - @hashicorp/design-system-tokens@1.8.0
+  - @hashicorp/ember-flight-icons@3.1.2
+
 ## 2.11.0
 
 ### Minor Changes

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

@@ -12,7 +12,7 @@
     }}
   </:toggle>
   <:content as |c|>
-    <div class={{this.classNamesContent}} {{style width=@width height=@height}}>
+    <div class={{this.classNamesContent}} {{style width=@width max-height=@height}}>
       {{yield (hash Header=(component "hds/dropdown/header"))}}
       <ul class="hds-dropdown__list" {{did-insert this.didInsertList}}>
         {{yield

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

@@ -4,16 +4,17 @@
 }}
 
 <li class="hds-dropdown-list-item hds-dropdown-list-item--variant-checkbox">
-  <Hds::Form::Checkbox::Base class="hds-dropdown-list-item__control" id={{this.id}} @value={{@value}} ...attributes />
-  {{#if @icon}}
-    <div class="hds-dropdown-list-item__icon">
-      <FlightIcon @name={{@icon}} @isInlineBlock={{false}} />
-    </div>
-  {{/if}}
   <label class="hds-dropdown-list-item__label hds-typography-body-200" for={{this.id}}>
-    {{yield}}
+    <Hds::Form::Checkbox::Base class="hds-dropdown-list-item__control" id={{this.id}} @value={{@value}} ...attributes />
+    {{#if @icon}}
+      <span class="hds-dropdown-list-item__icon">
+        <FlightIcon @name={{@icon}} @isInlineBlock={{false}} />
+      </span>
+    {{/if}}
+    <span class="hds-dropdown-list-item__text-content">{{yield}}</span>
+
+    {{#if @count}}
+      <span class="hds-dropdown-list-item__count hds-typography-body-100 hds-font-weight-medium">{{@count}}</span>
+    {{/if}}
   </label>
-  {{#if @count}}
-    <span class="hds-dropdown-list-item__count hds-typography-body-100 hds-font-weight-medium">{{@count}}</span>
-  {{/if}}
 </li>

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

@@ -4,14 +4,17 @@
 }}
 
 <li class="hds-dropdown-list-item hds-dropdown-list-item--variant-radio">
-  <Hds::Form::Radio::Base class="hds-dropdown-list-item__control" id={{this.id}} @value={{@value}} ...attributes />
-  {{#if @icon}}
-    <div class="hds-dropdown-list-item__icon">
-      <FlightIcon @name={{@icon}} @isInlineBlock={{false}} />
-    </div>
-  {{/if}}
-  <label class="hds-dropdown-list-item__label hds-typography-body-200" for={{this.id}}>{{yield}}</label>
-  {{#if @count}}
-    <span class="hds-dropdown-list-item__count hds-typography-body-100 hds-font-weight-medium">{{@count}}</span>
-  {{/if}}
+  <label class="hds-dropdown-list-item__label hds-typography-body-200" for={{this.id}}>
+    <Hds::Form::Radio::Base class="hds-dropdown-list-item__control" id={{this.id}} @value={{@value}} ...attributes />
+    {{#if @icon}}
+      <div class="hds-dropdown-list-item__icon">
+        <FlightIcon @name={{@icon}} @isInlineBlock={{false}} />
+      </div>
+    {{/if}}
+    <span class="hds-dropdown-list-item__text-content">{{yield}}</span>
+
+    {{#if @count}}
+      <span class="hds-dropdown-list-item__count hds-typography-body-100 hds-font-weight-medium">{{@count}}</span>
+    {{/if}}
+  </label>
 </li>

package/addon/components/hds/icon-tile/index.js

@@ -18,6 +18,7 @@ export const PRODUCTS = [
   'terraform',
   'vagrant',
   'vault',
+  'vault-secrets',
   'waypoint',
 ];
 export const COLORS = ['neutral', ...PRODUCTS];

package/addon/components/hds/pagination/compact/index.js

@@ -50,10 +50,10 @@ export default class HdsPaginationCompactIndexComponent extends Component {
   /**
    * @param ariaLabel
    * @type {string}
-   * @default 'Pagination navigation'
+   * @default 'Pagination'
    */
   get ariaLabel() {
-    return this.args.ariaLabel ?? 'Pagination navigation';
+    return this.args.ariaLabel ?? 'Pagination';
   }
 
   get routeQueryParams() {

package/addon/components/hds/pagination/numbered/index.js

@@ -130,10 +130,10 @@ export default class HdsPaginationNumberedIndexComponent extends Component {
   /**
    * @param ariaLabel
    * @type {string}
-   * @default 'Pagination navigation'
+   * @default 'Pagination'
    */
   get ariaLabel() {
-    return this.args.ariaLabel ?? 'Pagination navigation';
+    return this.args.ariaLabel ?? 'Pagination';
   }
 
   // This very specific `get/set` pattern is used to handle the two different use cases of the component

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

@@ -92,8 +92,6 @@ export default class HdsTextIndexComponent extends Component {
   get predefinedColor() {
     let { color } = this.args;
 
-    console.log(color, AVAILABLE_COLORS.includes(color));
-
     if (AVAILABLE_COLORS.includes(color)) {
       return color;
     } else {

package/app/styles/components/dropdown.scss

@@ -530,15 +530,17 @@ $hds-dropdown-toggle-border-radius: $hds-button-border-radius;
     margin-top: 2px;
     margin-right: 8px;
 
-    &[disabled] ~ .hds-dropdown-list-item__label,
     &[disabled] ~ .hds-dropdown-list-item__icon,
-    &[disabled] ~ .hds-dropdown-list-item__count {
+    &[disabled] ~ .hds-dropdown-list-item__count,
+    &[disabled] ~ .hds-dropdown-list-item__text-content {
       color: var(--token-color-foreground-disabled);
     }
   }
 
   .hds-dropdown-list-item__label {
+    display: flex;
     flex-grow: 1;
+    align-items: flex-start;
     color: var(--token-color-foreground-primary);
   }
 
@@ -551,7 +553,8 @@ $hds-dropdown-toggle-border-radius: $hds-button-border-radius;
 
 // COUNT
 .hds-dropdown-list-item__count {
-  margin-left: 8px;
+  margin-left: auto;
+  padding-left: 8px;
   color: var(--token-color-foreground-faint);
   line-height: 20px; // replicating the resulted height of the list item
 }

package/app/styles/components/icon-tile.scss

@@ -9,7 +9,7 @@
 
 $hds-icon-tile-sizes: ( "small", "medium", "large" );
 $hds-icon-tile-types: ( "object","resource","logo" );
-$hds-icon-tile-colors-products: ( "boundary", "consul", "hcp", "nomad", "packer", "terraform", "vagrant", "vault", "waypoint" );
+$hds-icon-tile-colors-products: ( "boundary", "consul", "hcp", "nomad", "packer", "terraform", "vagrant", "vault", "vault-secrets", "waypoint" );
 $hds-icon-tile-border-width: 1px;
 $hds-icon-tile-box-shadow: 0 1px 1px rgba(#656a76, 0.05);
 

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

@@ -21,7 +21,7 @@ $hds-link-standalone-border-width: 1px;
   align-items: center;
   justify-content: center;
   width: fit-content;
-  font-weight: var(--token-typography-font-weight-medium);
+  font-weight: var(--token-typography-font-weight-regular);
   font-family: var(--token-typography-font-stack-text);
   background-color: transparent; // needs to exist for a11y
   border: $hds-link-standalone-border-width solid transparent; // needs to exist AND be transparent for a11y

package/app/styles/components/stepper/step-indicator.scss

@@ -21,11 +21,6 @@ $hds-stepper-indicator-step-size: 24px;
   width: 100%;
   height: 100%;
   filter: drop-shadow(0 1px 1px rgba(101, 106, 118, 5%));
-
-  path {
-    fill: --status-fill-color;
-    stroke: --status-stroke-color;
-  }
 }
 
 .hds-stepper-indicator-step__status {
@@ -42,13 +37,11 @@ $hds-stepper-indicator-step-size: 24px;
 .hds-stepper-indicator-step__icon {
   width: 12px;
   height: 12px;
-  color: --status-text-color;
 }
 
 .hds-stepper-indicator-step__text {
   width: 20px;
   overflow: hidden;
-  color: --status-text-color;
   font-weight: var(--token-typography-font-weight-medium);
   font-size: 0.8125rem;
   font-family: var(--token-typography-font-stack-text);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hashicorp/design-system-components",
-  "version": "2.11.0",
+  "version": "2.12.1",
   "description": "Helios Design System Components",
   "keywords": [
     "hashicorp",
@@ -41,8 +41,8 @@
   "dependencies": {
     "@ember/render-modifiers": "^2.0.5",
     "@ember/test-waiters": "^3.0.2",
-    "@hashicorp/design-system-tokens": "^1.7.0",
-    "@hashicorp/ember-flight-icons": "^3.1.1",
+    "@hashicorp/design-system-tokens": "^1.8.0",
+    "@hashicorp/ember-flight-icons": "^3.1.2",
     "dialog-polyfill": "^0.5.6",
     "ember-a11y-refocus": "^3.0.2",
     "ember-auto-import": "^2.6.3",