Releases · hashicorp/design-system

27 Feb 11:25

9c1478b

Major Changes

Converted Ember packages to v2 addon format.

To migrate update Sass configuration in ember-cli-build.js to include the paths for ember-flight-icons and design-system-components:

sassOptions: {
  precision: 4,
  includePaths: [
    './node_modules/@hashicorp/design-system-tokens/dist/products/css',
    './node_modules/@hashicorp/ember-flight-icons/dist/styles',
    './node_modules/@hashicorp/design-system-components/dist/styles',
  ],
},

Alternatively, you can import the CSS by adding this configuration in ember-cli-build.js.

app.import(
  "node_modules/@hashicorp/design-system-components/dist/styles/@hashicorp/design-system-components.css"
);

#1872

Assets 2

27 Feb 11:25

hashibot-hds

@hashicorp/[email protected]

9c1478b

@hashicorp/[email protected]

Major Changes

New tokens added for large and medium size Tab variants. The "medium" tokens replace the former equivalent tokens which were not differentiated by size.

--token-tabs-tab-height-medium (Replaces --token-tabs-tab-height)
--token-tabs-tab-height-large (New)
--token-tabs-tab-padding-horizontal-medium (Replaces --token-tabs-tab-padding-horizontal)
--token-tabs-tab-padding-horizontal-large (New)

#1937

Assets 2

27 Feb 11:25

hashibot-hds

@hashicorp/[email protected]

9c1478b

@hashicorp/[email protected]

Major Changes

Converted Ember packages to v2 addon format.

To migrate, update Sass configuration in ember-cli-build.js to include the paths for ember-flight-icons and design-system-components:

sassOptions: {
  precision: 4,
  includePaths: [
    './node_modules/@hashicorp/design-system-tokens/dist/products/css',
    './node_modules/@hashicorp/ember-flight-icons/dist/styles',
    './node_modules/@hashicorp/design-system-components/dist/styles',
  ],
},

Alternatively, you can import the CSS by adding this configuration in ember-cli-build.js.

app.import(
  "node_modules/@hashicorp/design-system-components/dist/styles/@hashicorp/design-system-components.css"
);

#1872

Form::CharacterCount - refactored the component, removing onInsert callback and adding @value argument

To migrate:

for standalone Form::CharacterCount instances, you must pass in a @value argument representing the value of the referenced input
when used as a contextual component F.CharacterCount in Form::[MaskedInput|TextInput|Textarea]::Field make sure the form control is updating the associated @value on input (usually using on "input" (fn this.updateValue) function)

#1896 - Thanks @meirish for the contribution! 🙏

Table - Multiple updates to the main component and its subcomponents:

Updated table headers to support tooltips
Updated visual treatment and location of the "sort" button in the table headers
Refactored CSS code to simplify usage of hds-table-related class names

Table::ThSort:

Added support for tooltip via the @tooltip argument
Updated visual treatment and location of the "sort" button
Updated DOM structure of the <th> content
Remove class hds-table__th-sort--button-content
Replaced class hds-table__th-sort with classes hds-table__th + hds-table__th--sort
Replaced class hds-table__th-sort--text--[left|center|right] with hds-table__th--align-[left|center|right]
Renamed onClick callback to onClickSort

Table::Th:

Added support for tooltip via the @tooltip argument
Updated DOM structure of the <th> content
Replaced class hds-table__th--text-[left|center|right] with hds-table__th--align-[left|center|right]

Table::Td:

Replaced class hds-table__td--text-[left|center|right] with hds-table__td--align-[left|center|right]

To migrate run the codemod v4/table (see readme file)

#1860

Pagination - Removed handling of query parameters from onPageSizeChange function for Pagination::Numbered

Unfortunately, it's not possible to cover this breaking change with a codemod. Consumers should review their usage of the onPageSizeChange callback and, if necessary, implement the persistence of the "page number" and "page size" values via query parameters themselves.

#1913

Renamed namespaced contextual components as follows:

Alert::Link::Standalone to Alert::LinkStandalone
ApplicationState::Footer::Link::Standalone to ApplicationState::Footer::LinkStandalone
Form::Checkbox::Group::Checkbox::Field to Checkbox::Group::CheckboxField
Form::Radio::Group::Radio::Field to Form::Radio::Group::RadioField
Form::Toggle::Group::Toggle::Field to Form::Toggle::Group::ToggleField
Toast::Link::Standalone to Toast::LinkStandalone