@hashicorp/[email protected]

Patch Changes

explicitly added ember-element-helper as dependency for the components package

#1751

---

@hashicorp/[email protected]

Patch Changes

🔄 Updated dependencies:

• @hashicorp/[email protected]

@hashicorp/[email protected]

Major Changes

Drop support for Node 14

#1634

---

@hashicorp/[email protected]

Major Changes

Drop support for Node 14

#1634

---

Hds::Form::VisibilityToggle - Added component as a form base element

Hds::Form::TextInput::Field - Added Hds::Form::VisibilityToggle to password inputs (controlled via @hasVisibilityToggle - Notice that this is set to be visible by default now)

Hds::Form::MaskedInput - Refactored to use Hds::Form::VisibilityToggle

Hds::Form::MaskedInput - Renamed @isMasked to @isContentMasked

To migrate:

• in Hds::Form::MaskedInput instances replace @isMasked arguments with @isContentMasked

#1634

---

Hds::Dropdown – Removed @listPosition left and right (use bottom-left and bottom-right, respectively).

To migrate:

• in Hds::Dropdown instances:
  • replace @listPosition="left" with @listPosition="bottom-left"
  • replace @listPosition="right" with @listPosition="bottom-right"

#1634

---

SideNav - Renamed extraBefore/After generic containers to ExtraBefore/After (uppercase E).

To migrate:

• rename all the extraBefore/After instances yielded within the <Hds::SideNav> component to ExtraBefore/After

#1634

---

Form::RadioCard - Remove the @layout property.

Form::RadioCard::Group - Repurposed the @layout property to either horizontal (default) or vertical

To migrate Form::RadioCard and Form::RadioCard::Group instances without encountering visual changes:

• make sure all instances with @layout="fixed" have a @maxWidth defined, then remove the @layout="fixed" definition
• remove all @layout="fluid" definitions

#1634

---

Minor Changes

Dropdown::ListItem::CopyItem - Changed defaults for @color (now secondary) and @isTruncated (now true).

Consumers should review the defaults values for this (sub)component in their codebases, to make sure they match the intended visual designs.

#1634

---

Button, Interactive - Converted components to TypeScript.

#1634

---

Copy::Snippet - Fixed the way in which “width/full-width” is applied to the component + Internal update to the “truncation” implementation.

• the component is not full-width anymore by default (the width now fits the content); use @isFullWidth={{true}} to have a full-width layout
• the internal class name hds-copy-snippet__text--truncated has been changed to hds-copy-snippet--is-truncated (and moved)

Consumers should review the pages where this component is used to make sure its width matches the intended visual designs (in case, use the @isFullWidth argument to control its full-width). In case they're using the hds-copy-snippet__text--truncated class name, they should also update their code to adapt to the new implementation.

#1634

---

Removed ember-cli-clipboard as dependency and introduced a custom hds-clipboard modifier (using the web Clipboard API)

Copy::Button - Multiple updates:

• replaced third-party clipboard modifier with hds-clipboard
• removed @container argument (not needed anymore, it was used in the third party library as a hack to account for focus trapping and focus shifting)
• added @onSuccess/onError callbacks

Copy::Snippet - Multiple updates:

• replaced third-party clipboard modifier with hds-clipboard
• added @onSuccess/onError callbacks
• Dropdown::ListItem::CopyItem
  • the change to the underlying Copy::Snippet has fixed an issue with the focus being lost on copy (causing the dropdown to close on copy)

Consumers should remove the @container argument from all the instances of Copy::Button (not needed anymore) and double check that the Copy::Button/Snippet instances work exactly as before.

#1634

---

Patch Changes

Copy::Snippet - Fixed background colors for different states according to Figma specs (main change is the default/base background is now transparent, not white).

#1634

---

Form::MaskedInput - Changed copy logic for CopyButton used inside the component.

#1634

---

Accordion - Replaced internal text styling (using Text component).

ApplicationState - Replaced internal text styling (using Text component).

Copy::Snippet - Replaced internal text styling (using Text component).

Dropdown - Replaced internal text styling (using Text component).

Form:** - Replaced internal text styling (using Text component).

Flyout - Replaced internal text styling (using Text component).

Modal - Replaced internal text styling (using Text component).

PageHeader - Replaced internal text styling (using Text component).

Pagination - Replaced internal text styling (using Text component).

Stepper - Replaced internal text styling (using Text component).

Tag - Replaced internal text styling (using Text component).

No impact is expected on the consumers' applications.

#1634

---

Button - Applied explicit text alignment to the text to fix alignment on "link" buttons.

#1634

---

🔄 Updated dependencies:

• @hashicorp/[email protected]

@hashicorp/[email protected]

Minor Changes

Add codemods for design-system-components v3

#1634

---

@hashicorp/[email protected]

Minor Changes

Button - updated horizontal padding of icon-only variant

Dropdown::ToggleIcon - updated sizing of the "small" variant to match the height of the "small" variant Button

#1690

Patch Changes

Pagination - Removed handling of query parameters from onPageSizeChange function.

Notice: while technically this is a breaking change, we consider this a fast-follow fix for the previous release.

#1736

@hashicorp/[email protected]

Patch Changes

• #1724 65ebe6dde Thanks @didoo! - Pagination - updated the logic for “Compact” variant to expose @currentPageSize and handle controlled/uncontrolled changes

• #1716 cde67bc7f Thanks @didoo! - Tabs - replace assert with warn in setIndicator function

@hashicorp/[email protected]

Patch Changes

• #1709 294dddfda Thanks @didoo! - Tabs - Fixed issue with @isSelected dynamically changed within #each loops

@hashicorp/[email protected]

Minor Changes

• #1700 33d760fb8 Thanks @didoo! - Pagination::Compact - Added option to show "SizeSelector" element

• #1688 c842b6eb7 Thanks @didoo! - Tabs - Refactored logic for Tabs component + Tab/Panel sub-components to support more complex use cases:

  • introduced @selectedTabIndex argument to control the "selected" tab from the consuming application, e.g. via query params (effort spearheaded by @MiniHeyd)
  • fixed issue with nested tabs not initializing the "selected" indicator correctly
  • fixed issue with dynamic tab content not updating the "selected" indicator correctly

@hashicorp/[email protected]

Minor Changes

• #1630 04da95443 Thanks @alex-ju! - SideNav - add @isCollapsible (to control if users can collapse the sidenav on 'desktop' viewports) and @isMinimized (to control the default state on 'desktop' viewports) arguments