Unfortunately, this release failed. This release entry is primarily to preserve the correct history. We will soon release a new version.
This is our first stable release. We would like to take this moment to thank everyone involved in this project. Without your efforts, this would not have been possible.
sbb-teaser-hero and sbb-teaser-paid are now part of the @sbb-esta/lyne-elements-experimental package.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 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?
sbb-selection-panel to sbb-selection-expansion-panel.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)sbb-selection-panel/sbb-selection-expansion-panel anymore, but directly use sbb-checkbox-panel or sbb-radio-button-panel.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@sbb-esta/lyne-elements-experimental and @sbb-esta/lyne-react-experimental respectively:link role inside the Shadow DOM. Therefore, for the following components, replace the [aria-label] usages with [accessibility-label] attribute or accessibilityLabel property:
sbb-breadcrumbsbb-button-link, sbb-secondary-button-link, sbb-tertiary-button-link, sbb-transparent-button-linksbb-card-linksbb-header-linksbb-link, sbb-block-linksbb-menu-linksbb-navigation-linksbb-teaser, sbb-teaser-hero, sbb-teaser-paidsbb-stepper component (#2491) (d389572)typography.css into smaller consumable modules, we had to change the names of some files.
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.fullfont.css to font-characters-extension.css.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:
font-family: "SBBWeb Roman", ... with font-family: "SBB", ... and use font-weight: normal (potentially not necessary as normal is the default).font-family: "SBBWeb Bold", ... with font-family: "SBB", ... and use font-weight: bold or CSS class sbb-text--bold.font-family: "SBBWeb Light", ... with font-family: "SBB", ... and use font-weight: 300.--sbb-typo-type-face-sbb-roman with --sbb-typo-font-family and use font-weight: normal (potentially not necessary as normal is the default).--sbb-typo-type-face-sbb-bold with --sbb-typo-font-family and use font-weight: bold.--sbb-typo-type-face-sbb-light with --sbb-typo-font-family and use font-weight: 300.disable-animation property. Use animation='none' instead.disable-animation property. Use animation='none' instead or depending on the case 'open' or 'close'.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.
disable-animation property from sbb-accordiondisable-animation property from sbb-alertdisable-animation property from sbb-autocompletedisable-animation property from sbb-datepicker-toggledisable-animation property from sbb-dialogdisable-animation property from sbb-expansion-paneldisable-animation property from sbb-imagedisable-animation property from sbb-loading-indicatordisable-animation property from sbb-menudisable-animation property from sbb-navigationdisable-animation property from sbb-navigation-sectiondisable-animation property from sbb-notificationdisable-animation property from sbb-overlaydisable-animation property from sbb-popoverdisable-animation property from sbb-selectdisable-animation property from sbb-selection-paneldisable-animation property from sbb-sticky-bardisable-animation property from sbb-toastdisable-animation property from sbb-toggleanimation property (#2507) (8b91eb8)animation property (#2507) (8b91eb8)@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 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: <sbb-dialog title-content="Title"><p>Dialog content.</p><sbb-action-group slot="action-group">...</sbb-action-group></sbb-dialog>. New: <sbb-dialog><sbb-dialog-title>Title</sbb-dialog-title><sbb-dialog-content><p>Dialog content</p></sbb-dialog-content><sbb-dialog-actions>...</sbb-dialog-actions></sbb-dialog>. Previously, a full-screen dialog was displayed if no title was provided to the dialog component: <sbb-dialog><p>Dialog content.</p></sbb-dialog>. To achieve the same, it is now mandatory to use the sbb-overlay component: <sbb-overlay><p>Overlay content.</p></sbb-overlay>.--sbb-form-field-height has been renamed to --sbb-form-field-min-height.<sbb-form-field> (#2506) (f8316f0), closes #2497sbb-overlay component from dialog (#2477) (5ea4fb7), closes #2476 #2470label property and attribute of <sbb-form-field> was removed. Use <label> tag inside <sbb-form-field> to provide the label information. E.g. <sbb-form-field label="Example">...</sbb-form-field> becomes <sbb-form-field><label>Example</label>...</sbb-form-field>sbb-screenreader-only to sbb-screeen-reader-only.SbbDatepicker property selectedDate has been renamed to selected. This also applies to the attribute selected-date, which has been renamed to selected. Additionally the DateAdapter (and NativeDateAdapter) have been superficially refactored. An important change is that the month is now 1-based, instead of 0-based.active property of <sbb-navigation-button>/<sbb-navigation-link> (former <sbb-navigation-action>) has been removed. Add the CSS class sbb-active to the corresponding button/link, to mark it as active. Additionally, whenever sbb-active class is set in navigation, the corresponding navigation section, if one is connected, automatically opens.sbb-card-action: split in sbb-card-button and sbb-card-linksbb-header-action: split in sbb-header-button and sbb-header-linksbb-menu-action: split in sbb-menu-button and sbb-menu-linksbb-navigation-action: split in sbb-navigation-button and sbb-navigation-linkisStatic flag has been removed from buttons and links; since the static case was automatically detected when action elements were nested in other action elements, now you need to check for usage of nested buttons/links in other action elements and possibly fix them using the new static variants.sbb-button: the variant property has been removed and for each value, a new component has been created (e.g. sbb-button, sbb-secondary-button, sbb-tertiary-button, sbb-transparent-button); each of them has been further divided considering the behavior:
href set), replace it with <sbb{-variant}-button>href set), replace it with <sbb{-variant}-button-link>isStatic set), replace it with <sbb{-variant}-button-static>sbb-button in a sbb-form-field is not supported anymore; a new component named sbb-mini-button has been created to handle this specific casesbb-button in sbb-toast with the new sbb-transparent-button/sbb-transparent-button-link, since the variant is not automatically set anymoresbb-link has been split into nine components, based on type and variant:
sbb-link had an [href="..."], it migrates to <sbb{-variant}-link>:
<sbb-link href="..."> should be replaced with <sbb-block-link href="..."><sbb-link href="..." variant="block"> should be replaced with <sbb-block-link href="..."><sbb-link href="..." variant="inline" > should be replaced with <sbb-link href="...">sbb-link did not have an [href="..."], it migrates to <sbb{-variant}-link-button>
<sbb-link> should be replaced with <sbb-block-link-button><sbb-link variant="block"> should be replaced with <sbb-block-link-button><sbb-link variant="inline"> should be replaced with <sbb-link-button>sbb-link had an [is-static], it migrates to <sbb{-variant}-link-static>
<sbb-link is-static> should be replaced with <sbb-block-link-static><sbb-link is-static variant="block"> should be replaced with <sbb-block-link-static><sbb-link is-static variant="inline"> should be replaced with <sbb-link-static>sbb-action-group now only accepts sbb-block-link | sbb-block-link-button besides any <sbb-button> variantsbb-link-list now only accepts sbb-block-link | sbb-block-link-buttonsbb-skiplink-list now only accepts sbb-block-link | sbb-block-link-buttonsbb-toast now only accepts sbb-link | sbb-link-button | sbb-transparent-button | sbb-transparent-button-linklink-variables SASS mixin renamed to block-link-variables,link-variables--negative SASS mixin renamed to block-link-variables--negative,link-variables--inline SASS mixin renamed to link-variables,link-variables--inline-negative SASS mixin renamed to link-variables--negativelink-inline-consolidation SASS mixin renamed to link-consolidation,link-inline SASS mixin renamed to link,link-inline-negative SASS mixin renamed to link-negative--sbb-color-iron-default => --sbb-color-iron and SbbColorIronDefault => SbbColorIron).TitleLevel to SbbTitleLevel--sbb-font-size-title-5 for zero to small breakpoints (#2448) (15b786a)noBorderRadius has been replaced by borderRadius which can receive 'default', 'none' and 'round'.sbb-tooltip has been renamed to sbb-popover. Component sbb-tooltip-trigger has been renamed to sbb-popover-trigger Attribute sbb-tooltip-close has been renamed to sbb-popover-close. Every CSS tooltip variable has been renamed from --sbb-tooltip-* to --sbb-popover-* (including trigger).willPresent event to willOpen and didPresent to didOpen.isStacked has been removed in favor of alignment. Please see the documentation for further info. The description is not clamped to two lines anymore (responsibility of consumer). The slotted image has now a default width of 300px. The slot, formerly named description, has been replaced by the unnamed slot. Support of nested p elements dropped (invalid html).sbb-timetable-barrier-free, sbb-timetable-park-and-rail, sbb-timetable-row-column-headers, sbb-timetable-row-day-change, sbb-timetable-row-header, sbb-timetable-transportation-number, sbb-timetable-transportation-time, timetable-travel-hints.