From 3c78c06a3d334af9ec870d6fe5c4133404664983 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Tue, 25 Jun 2024 15:56:37 +0000 Subject: [PATCH] chore(main): release 1.0.0 --- CHANGELOG.md | 236 +++++++++++++++++++++++++++++++++++++++++++++++++++ package.json | 2 +- 2 files changed, 237 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 752d179c24..6ab7957009 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,242 @@ All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines. +## [1.0.0](https://github.com/sbb-design-systems/lyne-components/compare/v1.1.0...v1.0.0) (2024-06-25) + + +### ⚠ BREAKING CHANGES + +* **sbb-teaser-hero, sbb-teaser-paid:** `sbb-teaser-hero` and `sbb-teaser-paid` are now part of the `@sbb-esta/lyne-elements-experimental` package. +* **sbb-tab:** the `sbb-tab-title` component has been renamed to `sbb-tab-label`. A new component named `sbb-tab` has been created, and it is now the only supported tag for the tab's content; `article`, `section` and `div` are not supported anymore. To solve the issue #1351, the `didChange` event on `sbb-tab-group` now includes an object which contains the currently selected tab index, the `sbb-tab-label` component and related `sbb-tab` component, plus, if available, the previous ones. +* **sbb-selection-panel, sbb-checkbox, sbb-radio-button:** `sbb-selection-panel` has been renamed to `sbb-selection-expansion-panel`. The `sbb-checkbox` and `sbb-radio-button` components cannot be used anymore with `sbb-selection-expansion-panel` (does not apply for cases where they are slotted inside the `content` slot). As a replacement, we introduce the new components `sbb-checkbox-panel` and `sbb-radio-button-panel`, which could also be used standalone in cases where there is no content. `sbb-checkbox-group` and `sbb-radio-button-group` also support the panel variants. How to migrate? + - Rename usages of `sbb-selection-panel` to `sbb-selection-expansion-panel`. + - Inside the `sbb-selection-expansion-panel`, replace `sbb-checkbox` with `sbb-checkbox-panel` and `sbb-radio-button` with `sbb-radio-button-panel` (does not apply for cases where they are slotted inside the `content` slot of the `sbb-selection-expansion-panel`) + - In cases where there was no content (slot), don't use `sbb-selection-panel`/`sbb-selection-expansion-panel` anymore, but directly use `sbb-checkbox-panel` or `sbb-radio-button-panel`. +* **sbb-checkbox, sbb-radio-button:** `sbb-selection-panel` has been renamed to `sbb-selection-expansion-panel`. The `sbb-checkbox` and `sbb-radio-button` components cannot be used anymore with `sbb-selection-expansion-panel` (does not apply for cases where they are slotted inside the `content` slot). As a replacement, we introduce the new components `sbb-checkbox-panel` and `sbb-radio-button-panel`, which could also be used standalone in cases where there is no content. `sbb-checkbox-group` and `sbb-radio-button-group` also support the panel variants. How to migrate? + - Rename usages of `sbb-selection-panel` to `sbb-selection-expansion-panel`. + - Inside the `sbb-selection-expansion-panel`, replace `sbb-checkbox` with `sbb-checkbox-panel` and `sbb-radio-button` with `sbb-radio-button-panel` (does not apply for cases where they are slotted inside the `content` slot of the `sbb-selection-expansion-panel`) + - In cases where there was no content (slot), don't use `sbb-selection-panel`/`sbb-selection-expansion-panel` anymore, but directly use `sbb-checkbox-panel` or `sbb-radio-button-panel`. +* type 'SbbDialogCloseEventDetails' has been renamed to 'SbbOverlayCloseEventDetails' +* The half-public data-now attribute has become a public `now` property that can be used to set time or date-based components into a specific state, especially for testing purposes. + - `sbb-calendar`, `sbb-datepicker`, `sbb-timetable-row`, `sbb-journey-summary`, `sbb-pearl-chain`, `sbb-pearl-chain-time`: change the attribute `data-now` to `now`. The property `now` can be a Date or Unix timestamp. If you had a timestamp in milliseconds before, please divide by 1000 to get seconds. + - `sbb-clock`: change the attribute `data-now` to `now`. The property `now` has to be in the format "HH:MM:SS". +* `Lyne components` and `Lyne components react` libraries have been renamed, please update imports accordingly. + - `@sbb-esta/lyne-components` => `@sbb-esta/lyne-elements` + - `@sbb-esta/lyne-components-react` => `@sbb-esta/lyne-react` + The following components, and their react wrappers, have been moved into `@sbb-esta/lyne-elements-experimental` and `@sbb-esta/lyne-react-experimental` respectively: + - sbb-journey-summary + - sbb-pearl-chain + - sbb-pearl-chain-time + - sbb-pearl-chain-vertical + - sbb-pearl-chain-vertical-item + - sbb-timetable-duration + - sbb-timetable-row +* **sbb-link:** Due to screen reader limitations, we had to move the `link` role inside the Shadow DOM. Therefore, for the following components, replace the `[aria-label]` usages with `[accessibility-label]` attribute or `accessibilityLabel` property: + - `sbb-breadcrumb` + - `sbb-button-link`, `sbb-secondary-button-link`, `sbb-tertiary-button-link`, `sbb-transparent-button-link` + - `sbb-card-link` + - `sbb-header-link` + - `sbb-link`, `sbb-block-link` + - `sbb-menu-link` + - `sbb-navigation-link` + - `sbb-teaser`, `sbb-teaser-hero`, `sbb-teaser-paid` +* As we split up the former `typography.css` into smaller consumable modules, we had to change the names of some files. + - Renamed `typography.css` to `standard-theme.css`. Notice: there is still a file called `typography.css` that contains only a few typography-related outputs. Therefore, **import adaption from `typography.css` to `standard-theme.css` is mandatory**. + - Changed the name of `fullfont.css` to `font-characters-extension.css`. +* Replaced `Roman`, `Bold`, and `Light` font-face variants with the single `SBB` font. Using CSS `font-weight` property automatically selects the correct font family. Migration guide: + - Replace `font-family: "SBBWeb Roman", ...` with `font-family: "SBB", ...` and use `font-weight: normal` (potentially not necessary as `normal` is the default). + - Replace `font-family: "SBBWeb Bold", ...` with `font-family: "SBB", ...` and use `font-weight: bold` or CSS class `sbb-text--bold`. + - Replace `font-family: "SBBWeb Light", ...` with `font-family: "SBB", ...` and use `font-weight: 300`. + - Replace CSS variable `--sbb-typo-type-face-sbb-roman` with `--sbb-typo-font-family` and use `font-weight: normal` (potentially not necessary as `normal` is the default). + - Replace CSS variable `--sbb-typo-type-face-sbb-bold` with `--sbb-typo-font-family` and use `font-weight: bold`. + - Replace CSS variable `--sbb-typo-type-face-sbb-light` with `--sbb-typo-font-family` and use `font-weight: 300`. +* **alert:** Removed `disable-animation` property. Use `animation='none'` instead. +* **notification:** Removed `disable-animation` property. Use `animation='none'` instead or depending on the case 'open' or 'close'. +* **disable-animation:** Add the `sbb-disable-animation` CSS class to disable animations for the element and all its children. Consequently, all `disable-animation` properties of the following components have been removed. + - Removed `disable-animation` property from `sbb-accordion` + - Removed `disable-animation` property from `sbb-alert` + - Removed `disable-animation` property from `sbb-autocomplete` + - Removed `disable-animation` property from `sbb-datepicker-toggle` + - Removed `disable-animation` property from `sbb-dialog` + - Removed `disable-animation` property from `sbb-expansion-panel` + - Removed `disable-animation` property from `sbb-image` + - Removed `disable-animation` property from `sbb-loading-indicator` + - Removed `disable-animation` property from `sbb-menu` + - Removed `disable-animation` property from `sbb-navigation` + - Removed `disable-animation` property from `sbb-navigation-section` + - Removed `disable-animation` property from `sbb-notification` + - Removed `disable-animation` property from `sbb-overlay` + - Removed `disable-animation` property from `sbb-popover` + - Removed `disable-animation` property from `sbb-select` + - Removed `disable-animation` property from `sbb-selection-panel` + - Removed `disable-animation` property from `sbb-sticky-bar` + - Removed `disable-animation` property from `sbb-toast` + - Removed `disable-animation` property from `sbb-toggle` +* The entry points for the `@sbb-esta/lyne-components` have changed from extension-less to including the extension (e.g. `@sbb-esta/lyne-components/button` to `@sbb-esta/lyne-components/button.js`). +* **sbb-dialog:** The `sbb-dialog` component now needs the dedicated inner elements `sbb-dialog-title`, `sbb-dialog-content`, and `sbb-dialog-actions`. Use these components to respectively provide a title, a content and, optionally, a footer with an action group. Moreover, the full-screen variant (which occurred when no title was provided to the dialog) has been removed. To achieve a full-screen overlay, please use the new `sbb-overlay` component. As a migration help, consider the following example. Old: ```

Dialog content.

...
```. New: ```Title

Dialog content

...
```. Previously, a full-screen dialog was displayed if no title was provided to the dialog component: ```

Dialog content.

```. To achieve the same, it is now mandatory to use the `sbb-overlay` component: ```

Overlay content.

```. +* Changed several internal class names. Consumers shouldn't be affected. +* **sbb-form-field:** The css var `--sbb-form-field-height` has been renamed to `--sbb-form-field-min-height`. +* **sbb-form-field:** `label` property and attribute of `` was removed. Use `