Merge branch 'main' into app-frame-component

packages/components/CHANGELOG.md

@@ -1,5 +1,70 @@
 # @hashicorp/design-system-components
 
+## 2.1.0
+
+### Minor Changes
+
+- [#1258](https://github.com/hashicorp/design-system/pull/1258) [`3466d2279`](https://github.com/hashicorp/design-system/commit/3466d2279191504442029976a4e18d3ca99015bf) Thanks [@MelSumner](https://github.com/MelSumner)! - Adds Hds::ApplicationState component
+
+### Patch Changes
+
+- [#1291](https://github.com/hashicorp/design-system/pull/1291) [`b2c21a86e`](https://github.com/hashicorp/design-system/commit/b2c21a86ee681d53e728fa5c52192b9003762ea9) Thanks [@didoo](https://github.com/didoo)! - Fixed missing inset shadow for `TextInput`, `Textarea`, `Checkbox`, `Radio`, `PowerSelect` overrides
+
+## 2.0.0
+
+### Major Changes
+
+- [#1185](https://github.com/hashicorp/design-system/pull/1185) [`a883e7fd7`](https://github.com/hashicorp/design-system/commit/a883e7fd763ae7a93ecc5ef3d49ed0230b48ea11) Thanks [@alex-ju](https://github.com/alex-ju)! - Add `Checkmark`, `Checkbox` and `Radio` as `Hds::Dropdown::ListItem`s
+
+  Rename `Hds::Dropdown::ListItem` internal CSS classes as follows:
+
+  - `hds-dropdown-list-item--copy-item` → `hds-dropdown-list-item--variant-copy-item`
+  - `hds-dropdown-list-item--description` → `hds-dropdown-list-item--variant-description`
+  - `hds-dropdown-list-item--generic` → `hds-dropdown-list-item--variant-generic`
+  - `hds-dropdown-list-item--interactive` → `hds-dropdown-list-item--variant-interactive`
+  - `hds-dropdown-list-item--separator` → `hds-dropdown-list-item--variant-separator`
+  - `hds-dropdown-list-item--title` → `hds-dropdown-list-item--variant-title`
+
+  **Note:** If test assertions are relying on these class names, tests will fail. If extensions/overrides have been applied to these classes, they will suffer visual changes.
+
+- [#1212](https://github.com/hashicorp/design-system/pull/1212) [`6e79216a8`](https://github.com/hashicorp/design-system/commit/6e79216a880ae140cce15f1dc6494f0aeca8e0b8) Thanks [@alex-ju](https://github.com/alex-ju)! - Add `Hds::Dropdown::Header` and `Hds::Dropdown::Footer` as generic blocks to `Hds::Dropdown`
+
+  Rename `Hds::Dropdown` internal CSS class `hds-dropdown-list` → `hds-dropdown__list`
+
+  The `hds-dropdown__list` element is now wrapped in a `hds-dropdown__content` element to accommodate the new header and footer elements. As a result, the following modifiers will be applied to the wrapper element.
+
+  - `hds-dropdown-list--fixed-width` → `hds-dropdown__content--fixed-width`
+  - `hds-dropdown-list--position-left` → `hds-dropdown__content--position-left`
+  - `hds-dropdown-list--position-right` → `hds-dropdown__content--position-right`
+
+  **Note:** If test assertions are relying on these class names, tests will fail. If extensions/overrides have been applied to these classes, they will suffer visual changes.
+
+- [#1266](https://github.com/hashicorp/design-system/pull/1266) [`082842b59`](https://github.com/hashicorp/design-system/commit/082842b59321f843c4955e4cdaf2ce2674a8913d) Thanks [@alex-ju](https://github.com/alex-ju)! - Add `@icon`, `@count`, `@badge` and `@badgeCount` to `Dropdown::Toggle::Button`
+
+  `Hds::Dropdown::Toggle::Button` and `Hds::Dropdown::Toggle::Icon` now share the chevron element. As a result, we renamed internal CSS classes as follows:
+
+  - `hds-button__text` → `hds-dropdown-toggle-button__text`
+  - `hds-button__icon` → `hds-dropdown-toggle-chevron`
+
+  The icon element within `Hds::Dropdown::Toggle::Icon` no longer has the `hds-dropdown-toggle-icon__chevron` class and it's currently wrapped in the `hds-dropdown-toggle-chevron` container, similar to `Hds::Dropdown::Toggle::Button`.
+
+  The `Hds::Dropdown::Toggle::Icon` now has a solid border, for consistency with `Hds::Dropdown::Toggle::Button` and the secondary style of `Hds::Button`.
+
+  **Note:** If test assertions are relying on these class names, tests will fail. If extensions/overrides have been applied to these classes, they will suffer visual changes.
+
+### Minor Changes
+
+- [#1276](https://github.com/hashicorp/design-system/pull/1276) [`5ad29412d`](https://github.com/hashicorp/design-system/commit/5ad29412d2edc0cc4265d3c0bbbf388e821f1cc7) Thanks [@alex-ju](https://github.com/alex-ju)! - Allow small `@size` on `Dropdown::Toggle::Icon`
+
+- [#1262](https://github.com/hashicorp/design-system/pull/1262) [`3eb78b8de`](https://github.com/hashicorp/design-system/commit/3eb78b8de7c678cff977c9d3a677c47a3216caad) Thanks [@alex-ju](https://github.com/alex-ju)! - Add new `@listPositions` for `Dropdown` as follows:
+
+  - `bottom-left`
+  - `bottom-right` (default)
+  - `top-left`
+  - `top-right`
+
+  **Note:** `left` and `right` are now deprecated and will be removed in a future major release
+
 ## 1.8.1
 
 ### Patch Changes
@@ -382,32 +447,34 @@ This release signifies the first major release of the HashiCorp Design System. M
 
 ### 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
+- [#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
 
-  - Introduced `<Hds::Interactive>` (a generic, "utility" component used internally by all the interactive elements like buttons and links)
+- Introduced `<Hds::Interactive>` (a generic, "utility" component used internally by all the interactive elements like buttons and links)
 
-  # Button
+#### 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!**
+- 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
+#### Link/LinkTo::CTA
 
-  - removed the `<Hds::Link/LinkTo::CTA>` component, in favour of `<Hds::Button>` component (see above) - 🚨 **Breaking change!**
+- removed the `<Hds::Link/LinkTo::CTA>` component, in favour of `<Hds::Button>` component (see above) - 🚨 **Breaking change!**
 
-  # Link::Inline
+#### Link::Inline
 
-  - added the `<Hds::Link::Inline>` component (with API very similar to the `<Hds::Link::Standalone>`)
+- added the `<Hds::Link::Inline>` component (with API very similar to the `<Hds::Link::Standalone>`)
 
-  # Dropdown
+#### Dropdown
 
-  - Updated the `Dropdown::ListItem::Interactive` to use the new `<Hds::Interactive>` component
+- Updated the `Dropdown::ListItem::Interactive` to use the new `<Hds::Interactive>` component
 
-  # Alert/Toast components
+#### Alert/Toast components
 
-  - Removed the `<LinkTo::Standalone>` action (now you can use directly `<Link::Standalone>`)
+- Removed the `<LinkTo::Standalone>` action (now you can use directly `<Link::Standalone>`)
 
 ## 0.11.2
 
@@ -427,9 +494,11 @@ This release signifies the first major release of the HashiCorp Design System. M
 
 ### 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
+- [#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)
+- [#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

packages/components/addon/components/hds/application-state/body.hbs

@@ -0,0 +1,13 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+<div class="hds-application-state__body" ...attributes>
+  {{#if (has-block)}}
+    {{yield}}
+  {{else}}
+    <p class="hds-application-state__body-text hds-typography-body-300">
+      {{@text}}
+    </p>
+  {{/if}}
+</div>

packages/components/addon/components/hds/application-state/footer.hbs

@@ -0,0 +1,7 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+<div class={{this.classNames}} ...attributes>
+  {{yield (hash Link::Standalone=(component "hds/link/standalone"))}}
+</div>

packages/components/addon/components/hds/application-state/footer.js

@@ -0,0 +1,30 @@
+import Component from '@glimmer/component';
+
+export default class HdsApplicationStateFooterComponent extends Component {
+  /**
+   * Indicate if the footer should have a top border or not.
+   *
+   * @param hasDivider
+   * @type {boolean}
+   * @default false
+   */
+  get hasDivider() {
+    return this.args.hasDivider || false;
+  }
+
+  /**
+   * 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-application-state__footer'];
+
+    // add a class based on the existence of @hasDivider argument
+    if (this.hasDivider) {
+      classes.push(`hds-application-state__footer--has-divider`);
+    }
+
+    return classes.join(' ');
+  }
+}

packages/components/addon/components/hds/application-state/header.hbs

@@ -0,0 +1,20 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+<div class="hds-application-state__header" ...attributes>
+  {{#if @icon}}
+    <div class="hds-application-state__icon">
+      <FlightIcon @name={{@icon}} @size="24" />
+    </div>
+  {{/if}}
+  <div class="hds-application-state__title hds-typography-display-400 hds-font-weight-semibold">
+    {{@title}}
+  </div>
+  {{#if @errorCode}}
+    <div class="hds-application-state__error-code hds-typography-body-100 hds-font-weight-medium">
+      Error
+      {{@errorCode}}
+    </div>
+  {{/if}}
+</div>

packages/components/addon/components/hds/application-state/index.hbs

@@ -0,0 +1,13 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+<div class="hds-application-state" ...attributes>
+  {{yield
+    (hash
+      Header=(component "hds/application-state/header")
+      Body=(component "hds/application-state/body")
+      Footer=(component "hds/application-state/footer")
+    )
+  }}
+</div>

packages/components/addon/components/hds/dropdown/footer.hbs

@@ -1,3 +1,8 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+
 <div class="hds-dropdown__footer {{if @hasDivider 'hds-dropdown__footer--with-divider'}}" ...attributes>
   {{yield}}
 </div>

packages/components/addon/components/hds/dropdown/header.hbs

@@ -1,3 +1,8 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+
 <div class="hds-dropdown__header {{if @hasDivider 'hds-dropdown__header--with-divider'}}" ...attributes>
   {{yield}}
 </div>

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

@@ -1,3 +1,8 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+
 <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}}

packages/components/addon/components/hds/dropdown/list-item/checkbox.js

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
 import Component from '@glimmer/component';
 import { getElementId } from '../../form/utils/getElementId';
 

packages/components/addon/components/hds/dropdown/list-item/checkmark.hbs

@@ -1,3 +1,8 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+
 {{! template-lint-disable require-context-role require-presentational-children }}
 <li class={{this.classNames}}>
   <Hds::Interactive

packages/components/addon/components/hds/dropdown/list-item/checkmark.js

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
 import Component from '@glimmer/component';
 
 export default class HdsDropdownListItemCheckmarkComponent extends Component {

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

@@ -1,3 +1,8 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+
 <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}}

packages/components/addon/components/hds/dropdown/list-item/radio.js

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
 import Component from '@glimmer/component';
 import { getElementId } from '../../form/utils/getElementId';
 

packages/components/addon/components/hds/dropdown/toggle/chevron.hbs

@@ -1,3 +1,8 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+
 <div class="hds-dropdown-toggle-chevron">
   <FlightIcon @name="chevron-down" @isInlineBlock={{false}} />
 </div>