lyne-components

0.51.1 (2024-05-08)

Bug Fixes

• sbb-toggle: fix event timing (#2646) (6da2d26)

0.51.0 (2024-05-07)

⚠ BREAKING CHANGES

• 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

Features

• add default entries for style exports in package.json (#2643) (73271e2)
• add root entry point with global component registration (#2641) (3572fa9)
• alert: add animation property (#2507) (8b91eb8)
• notification: add animation property (#2507) (8b91eb8)
• notification: add size 's' (#2606) (cf97ecd)
• reduce font-faces to the single SBB variant (#2618) (679d9e9)
• sbb-accordion, sbb-expansion-panel: add size s (#2603) (015201d)
• sbb-alert: add size s (#2591) (3a82c67)
• sbb-container: allow expanded background color (#2640) (2854e8e)
• split CSS outputs into smaller modules (#2615) (646e5a4)

Bug Fixes

• enable next.js 14 support and add some upstream fixes (#2613) (341b7ce)
• prefix all css variable names (#2609) (788cef7)
• sbb-container: fix background color for nested containers (#2611) (c9f0e0e)
• sbb-dialog: show all content if header is always present (#2637) (924fa37), closes #2635
• sbb-image: fix alt attribute and provide css var for aspect-ratio (#2607) (54d3192)
• sbb-loading-indicator: fix sizes of loading indicator (#2630) (a1270b2)
• sbb-tab-group: avoid unwanted margin block spaces (#2628) (87d10d8)

Code Refactoring

• disable-animation: migrate disable-animation mechanism (#2507) (8b91eb8)

0.50.2 (2024-04-16)

Bug Fixes

• adapt lyne tokens change (#2582) (94bf4f0)
• adapt react package import paths missed during migration (#2589) (0781c6a)
• sbb-overlay: consider sbb-overlay as overlay in inert mechanism (#2588) (4ecc125)
• sbb-teaser-hero: use auto hyphens for title text to avoid overflow (#2581) (3b8844c)

0.50.1 (2024-04-15)

Bug Fixes

• update import paths missed in the migration (#2579) (9c90fa8)

0.50.0 (2024-04-11)

⚠ BREAKING CHANGES

• 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: <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>.
• 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.

Features

• button: implemented size 'S' (#2544) (396d4dc)
• provide full font characters set as alternative (#2573) (4047883)
• sbb-form-field: support the textarea inside the <sbb-form-field> (#2506) (f8316f0), closes #2497
• sbb-overlay: extract sbb-overlay component from dialog (#2477) (5ea4fb7), closes #2476 #2470
• sbb-sticky-bar: allow configuration of z-index (#2566) (20a98b2)
• update size tokens (#2551) (74d8929)

Bug Fixes

• fix boolean handling in react wrapper (#2547) (e4ba04b)
• sbb-calendar: align month view label (#2564) (0215e00)
• sbb-dialog: fix accessibility with option to hide the header on scroll (159f536)
• sbb-dialog: fix z-index (#2572) (374d7b7)
• sbb-form-error: fix internal css variable name (#2558) (cc275af)
• set colspan properly (0215e00)
• use valid import/export syntax (#2563) (585cfc5)

Code Refactoring

• re-structure common behaviors (#2533) (906d576), closes #2534
• restructure entry points (#2575) (3d4c8ab)

0.49.0 (2024-03-28)

⚠ BREAKING CHANGES

• sbb-form-field: label 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>
• renamed component sbb-screenreader-only to sbb-screeen-reader-only.
• sbb-calendar: The 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.

Features

• implement experimental support for server side rendering (SSR) (#2466) (3abcc68)

Bug Fixes

• fix scrollbar styles for Chrome (#2524) (1266a21)
• sbb-button: remove gap for hidden icons in icon slot (#2526) (433c57c)
• sbb-form-field: remove label property and attribute (#2523) (602064c)
• stories with label bold for sbb-checkbox and sbb-radio-button (#2528) (9e85be5)

Code Refactoring

• rename component name from sbb-screenreader-only to sbb-screeen-reader-only (#2520) (6fbf085)
• sbb-calendar: implement initial support for other date libraries (6d4e9c2)

0.48.3 (2024-03-21)

Bug Fixes

• sbb-checkbox, sbb-toggle-check: enable attribute mutation after form reset (#2505) (6bd8924)
• sbb-header: fix header shadow on keyboard navigation (#2508) (3eefbea)
• sbb-navigation-section: ensure sbb-active initializes correctly (#2493) (baede50)

0.48.2 (2024-03-14)

Bug Fixes

• fix button dts files (#2485) (2228a02)
• fix order of class decorators (#2489) (580b56f)
• sbb-navigation: fix navigation actions contrast ratio (#2481) (f605a1e)

0.48.1 (2024-03-13)

Bug Fixes

• fix unresolved sass imports (#2483) (964ab42)
• sbb-status: fix flex behavior in Firefox (#2479) (92d7492)

0.48.0 (2024-03-12)

⚠ BREAKING CHANGES

• sbb-navigation: The 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.
• The action element refactoring brings a couple of breaking changes:
  • The following components have been split into two components. One with pure button and one with pure link behavior:
    • sbb-card-action: split in sbb-card-button and sbb-card-link
    • sbb-header-action: split in sbb-header-button and sbb-header-link
    • sbb-menu-action: split in sbb-menu-button and sbb-menu-link
    • sbb-navigation-action: split in sbb-navigation-button and sbb-navigation-link
  • The isStatic 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:
    • If the component was used as a button (no href set), replace it with <sbb{-variant}-button>
    • If the component was used as a link (href set), replace it with <sbb{-variant}-button-link>
    • If the component was nested into another action element (isStatic set), replace it with <sbb{-variant}-button-static>
  • The usage of an icon-only 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 case
  • Check and replace any sbb-button in sbb-toast with the new sbb-transparent-button/sbb-transparent-button-link, since the variant is not automatically set anymore
  • sbb-link has been split into nine components, based on type and variant:
    • If 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="...">
    • If 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>
    • If 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> variant
  • sbb-link-list now only accepts sbb-block-link | sbb-block-link-button
  • sbb-skiplink-list now only accepts sbb-block-link | sbb-block-link-button
  • sbb-toast now only accepts sbb-link | sbb-link-button | sbb-transparent-button | sbb-transparent-button-link
  • SASS mixin renamings:
    • link-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--negative
    • link-inline-consolidation SASS mixin renamed to link-consolidation,
    • link-inline SASS mixin renamed to link,
    • link-inline-negative SASS mixin renamed to link-negative
• color: Removed 'default' suffix from color tokens (e.g. --sbb-color-iron-default => --sbb-color-iron and SbbColorIronDefault => SbbColorIron).
• multiple: rename type TitleLevel to SbbTitleLevel

Features

• button variant refactoring (98ea7f5)
• implement initial support for SSR (#2437) (39d37ca)
• increase --sbb-font-size-title-5 for zero to small breakpoints (#2448) (15b786a)
• sbb-card: introduce new color for active state (#2462) (6553d6b)
• sbb-checkbox, sbb-toggle-check: introduce native form support (#2456) (c9549a1)
• sbb-navigation: remove navigation section divider (#2473) (71c1412)
• sbb-selection-panel: increase border width for active state (#2463) (4c4bf5c), closes #2461
• sbb-sticky-bar: allow overlapping to the following content (#2459) (9518dfd)
• sbb-teaser-paid: first implementation (#2434) (68f807a)

Bug Fixes

• fix imports of common styles (#2475) (fda1960)
• layout: apply max-width only for ultra screen size (#2458) (cce71b2)
• sbb-navigation: fix active and focus handling (#2471) (ea81790)
• sbb-radio-group, sbb-tab-group: avoid incorrect setup if component is invisible during init (#2446) (1586137)
• sbb-selection-panel: fix transition of border-width (#2468) (8300b7f)
• sbb-selection-panel: fix transition of border-width [second attempt] (#2469) (942bf45)
• sbb-status: fix text styling (#2457) (292d316)
• sbb-teaser: prevent overlapping chip if including long content (#2450) (b78b3ce)

Documentation

• multiple: remove undefined type from titleLevel (#2447) (c2532cd)

Styles

• color: remove 'default' suffix from color tokens (77454de)

Code Refactoring

• sbb-navigation: improve active handling and focus (4f8f309)

0.47.2 (2024-02-15)

Bug Fixes

• sbb-container: remove overflowing margin without using overflow (#2427) (42b7da3)
• sbb-toast: fix default z-index (#2428) (d0927ff)

0.47.1 (2024-02-15)

Bug Fixes

• sbb-status: add index export (03349f0)

0.47.0 (2024-02-14)

⚠ BREAKING CHANGES

• sbb-image: property noBorderRadius has been replaced by borderRadius which can receive 'default', 'none' and 'round'.

Features

• sbb-image: introduce support for round variant (#2401) (971bd5c)
• sbb-status: allow custom icons (#2403) (56b4068), closes #2398

Bug Fixes

• sbb-pearl-chain-time: use role paragraph for accessibility reasons (#2424) (9009807)

0.46.3 (2024-02-14)

Bug Fixes

• react-wrapper: avoid writing classname property on a component (#2421) (1ee492e)
• sbb-container: container causes interference with overlay components (#2419) (099164c)

0.46.2 (2024-02-14)

Bug Fixes

• sbb-map-container: adapt width starting from ultra breakpoint (#2417) (3c55d0c)

0.46.1 (2024-02-13)

Bug Fixes

• sbb-select: let promise of update cycle complete (5086cd6)

0.46.0 (2024-02-12)

⚠ BREAKING CHANGES

• sbb-popover: Component 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).

Bug Fixes

• sbb-popover: rename tooltip to popover and fix accessibility bugs (#2368) (70c1c07), closes #2018
• sbb-select: wait for shadow DOM readiness before setup when using nextjs (#2409) (fbef967)
• sbb-sticky-bar: remove unnecessary import to container (#2406) (c935436)

0.45.0 (2024-02-08)

⚠ BREAKING CHANGES

• sbb-alert: renamed willPresent event to willOpen and didPresent to didOpen.

Features

• a11y: implemented a11y tree snapshot function (#2378) (3484e7b)
• sbb-clock: introduce option to configure color of seconds hand (#2400) (b94d92d)
• sbb-container: first implementation (#2271) (7403b67)
• sbb-screenreader-only: initial implementation (#2377) (2e763d4)
• update journey-summary storybook title (#2390) (3469654)

Bug Fixes

• multiple: render lists with just one element as span (#2381) (e703be1)
• sbb-alert: refactor animation to properly work in Safari (#2394) (30bf7c1), closes #2389
• sbb-calendar: using keyboard navigation loses focus (#2354) (68be709)
• sbb-form-field: suppress firefox outline for external framework compatibility (#2386) (6374162)
• sbb-notification: fix accessibility (#2325) (00e9540)
• sbb-select: hide placeholder when using floating label in HCM (#2399) (dd38d13), closes #2326

0.44.1 (2024-01-24)

Bug Fixes

• sbb-header: fix border radius of focus outline in Safari (#2365) (aa409e7)
• scrollbar: fix track color in nested context (#2363) (82a4ad8)

0.44.0 (2024-01-22)

⚠ BREAKING CHANGES

• sbb-teaser: The property 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).
• The following components have been removed: 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.

Features

• form-field: allow label to be visually hidden (#2361) (9f618db)
• sbb-teaser: redesign (#2211) (ba5f86c)

Bug Fixes

• sbb-title: move font-smoothing into scss mixin (#2355) (331bac3)

Code Refactoring

• remove unused components (e3b29eb)