Migration from V2 to V3

The release of version 3 was a bit bumpy due to some budget restrictions. For this reason, the version 3.0 and 3.1 didn't contain all breaking changes from v2 but instead we had to do some additional breaks in 3.2.0. We hope that you didn't had to much trouble with this. In case we missed something in the migrationguide please reach out to us via teams.

• Design Tokens
• Theme "zbds-light" vs. "light" and "zbds-dark" vs. "dark"
• Public CSS Custom Properties
• Build-time theming
• No translucent theme anymore
• CSS Layout
• Zui Icons
• Deprecations in Components
• Styling changes in Components
• New Features in Components

Design Tokens

The biggest change in version 3 was the switch to the new design token approach of the ZUi styleguide which results in some changes in the visual appearance of components (e.g. slightly different colors, some changes for some borders...) but also some renamings of attributes and emphasis values. You find a list of all changes down below.

Theme "zbds-light" vs. "light" and "zbds-dark" vs. "dark"

When we started with ZUi-Web, we had only "light" and "dark" themes. Later, the Design Team started a major rework process to unify different styles in components that ultimately resulted in the new "Beyond for Products" design. The first step in this direction for ZUi-Web was in 2022-07 when we added two new themes "zbds-light" and "zbds-dark" which had slightly different colors. With the new design-token approach, this transition has taken the next big step and as a result, there is no support for the old color values anymore.

Starting with ZUi v3.2, there is no different anymore between "light" and "zbds-light" / "dark" and "zbds-dark". They both look the same and are using the same color variables.

For now, we keep both variations for compatibility reasons. However, in the long run, we will likely remove the "zbds" versions of the themes and only support "light" and "dark" at some point in the future.

This means:

• if you are still using "light"/"dark" you don't have to change anything. However, the colors will look quite different in your app after the update. This is intended as this is the new look-and-feel of Beyond-for-Products
• if you are using "zbds-light"/"zbds-dark" you can leave it like that for now but should consider switching to "light"/"dark" as soon as possible. You will see no big differences in colors as you've already had the new color sets active.

Public CSS Custom Properties

Before we introduced the design tokens to ZUi we used our own kind of design tokens to reuse and unify colors like text colors or background colors for different hierarchies. These colors were public and could be used. With the change to the design tokens we don't need them anymore and we decided to remove them.

That means that css props like --zui-color-text-default, --zui-color-ewi-error or --zui-color-first-hierarchy-bg-default-enabled are not longer available. Please use the semantic tokens like --zui-semantic-sys--fg--default--enabled, --zui-semantic-sys--bg--error--enabled or --zui-semantic-sys--bg--1st-default--enabled instead.

The base colors like --zui-color-gs-110 are available for compatibility reasons but they will be deprecated in the future. Instead you should use our newly introduced core tokens e.g. --zui-core-color-GS-110.

Additional to the custom css properties we provide the design tokens directly from the design team as .json files in the public folder where also the fonts are located. We have two files for each of the core and semantic tokens. The first one is the raw file from the design team and the .normalized file includes the tokens in a better readable structure.

An overview with all available core and semantic tokens is in our Storybook.

Build-time theming

The second big change is the switch to build-time theming in version 2.11.1. In 2.11.1 we added a way of theming that doesn't involve a global setup of theming variables but instead, each components brings it's own theming variables and works out-of-the-box. In 2.11.1, this was opt-in, so to use the new build-time theming, you had to set a feature-flag to enable this. We got lots of positive feedback for this feature and therefore, with version 3 we will switch the default so that now the build-time theming is enabled by default. You can still set a feature-flag to get back the old behavior but this is deprecated now and will likely be removed in one of the next minor versions.

See Build Time Theming for more details.

Please adjust the setup of ZUi-Web:

Old global theming or ZUI-Web before 2.11.1

If you are still using the old global theming approach like this (before 2.11.1):

import "@zeiss/zui"
import "@zeiss/zui-icons"
import { 
    themeZbdsBase, 
    themeZbdsLight, 
    themeZbdsDark, 
    themeZbdsTranslucent,
    registerTheme, 
    registerTypefaces, 
    setAppTheme 
} from "@zeiss/zui-themes"


registerTheme(themeZbdsBase)
registerTheme(themeZbdsLight)
registerTheme(themeZbdsDark)
registerTheme(themeZbdsTranslucent)

setAppTheme("zbds-light")

registerTypefaces("/fonts")

change the code to this:

import "@zeiss/zui"
import "@zeiss/zui-icons"
import { registerTypefaces } from "@zeiss/zui"

registerTypefaces("/fonts")

To set a theme for the application, you the <zui-theme-provider> component instead:

// somewhere at the top of your component tree
<zui-theme-provider theme="zbds-light">
   ...
</zui-theme-provider>

The old NPM packages @zeiss/zui-theme-* and @zeiss/zui-themes are deprecated and will not be updated anymore.

Already using build-time theming with >=2.11.1

If you have enabled build-time theming already, you had to set a feature-flag to enable build-time theming like this:

// somewhere at the start of your app javascript

window.sessionStorage.setItem(
  'zui.features',
  JSON.stringify({
    'feature-enable-builtin-themes': true
  })
);

You can entirely remove this code now starting with version 3.2.0. as this is enabled by default.

How to disable build-time theming?

If you do not want to use the new build-time theming, at the moment you can use a new feature-flag to get back the old behavior. However, as said before, we will likely remove this in one of the next updates. Please provide feedback on why you want to keep the old theming approach.

The setup for the old global theming has to be done like this:

// this has to be done before any component is imported
window.sessionStorage.setItem(
  'zui.features',
  JSON.stringify({
     'feature-disable-build-themes': true
  })
)

import "@zeiss/zui"
import "@zeiss/zui-icons"
import { 
    themeZbdsBase, 
    themeZbdsLight, 
    themeZbdsDark, 
    themeZbdsTranslucent,
    registerTheme, 
    registerTypefaces, 
    setAppTheme 
} from "@zeiss/zui"  // notice imported from normal zui package

registerTheme(themeZbdsBase)
registerTheme(themeZbdsLight)
registerTheme(themeZbdsDark)
registerTheme(themeZbdsTranslucent)

setAppTheme("light")

registerTypefaces("/fonts")

No translucent theme anymore

In the past, there was a separate "translucent" theme that was intended to be used for components that appear on other content elements like video or pictures, for example to implement video playback controls. The main requirements for translucent components came from the DMD (Device Mounted Display) styleguide which we don't reference in our ZUi Web component library. However, using the theming mechanism for this turned out to be not a good solution as the translucent theme was only available for a limited number of components and there were many edge-cases that weren't addresses by the Styleguide when it came to the question of how components with translucent theme should look together with normally dark/light themed components.

Instead of the translucent theme, please use the "dark" theme instead.

Affected components

• checkbox
• loader box
• radiobutton
• slider

CSS Layout

In the past, we had this global css setting in our themes:

* {
    box-sizing: border-box;
}

This was used to make sure that the layout is correct in cases where ZUi components are nested (e.g. ewiq-dialog). In retrospect, this was not a good idea as this will also influence other elements in the user's application as well and it breaks component encapsulation. With the introduction of build-time theming in 2.11.1, we wanted to remove this but noticed that some app's did break because of the removal. For that reason, to not break existing apps, we kept this setting in the code.
However, with version 3, this will be removed and maybe leads to layout issues in your app. Setting the box-sizing to border-box is still a good idea, but should be done by each app explicitly and not by the zui library.

ZUi Icons

With version 3, we updated the minimal version of ZUi icons that are used by our components. Before, @zeiss/zui was referencing @zeiss/zui-icons@2.28.0. Now we are using @zeiss/zui-icons@^3.5.1 as minimal version.

Most likely, this shouldn't be an issue for you. As before, you can always use a newer version of @zeiss/zui-icons if you need a new icon. The only situation where this might be an issue for you is if you cannot update to a >3 version of @zeiss/zui-icons for some reason. In this rare case it should be possible to technically enforce an older version of the icons with your package-manager but we will not be able to support you with any errors that come from this. In general, we encourage you to keep your icons up-to-date and talk with your designers if there are any issues with outdated icons.

Please notice: The versioning of @zeiss/zui-icons is independent from the normal zui packages. It's driven by the ZUI Design team which is managing a separate repository for the icon SVGs and we're simply following their versioning. So we also don't have an influence on major version changes and possible breaking changes in the icons packages.

I want to use @zeiss/zui-icons@>=3.5.1 but not update @zeiss/zui?

If you do not want to update to v3 of @zeiss/zui but stay on 2.x, you can still use newer versions of the @zeiss/zui-icons. However, with version 3.5.1 of @zeiss/zui-icons we had to do some changes to be compatible with v3 of @zeiss/zui. If you are already using the "build-theming" approach (see Build-time theming, everything should work out-of-the-box.

However, if you are still using the old global theming approach (registerTheme...), you will have to do some adjustments to your code. In this case, the icons will use the build-time theming while the rest of your app doesn't. The result will be that all icons will have theme="light" as default fallback and therefore will not look correct with a dark theme set in your app. To fix this, you will have to set the new feature-flag to disable the build-time theming explicitly by adding this to your app setup (also see How to disable build-time theming?:

// this has to be done before any component is imported
window.sessionStorage.setItem(
  'zui.features',
  JSON.stringify({
     'feature-disable-build-themes': true
  })
)

Deprecations in Components

A

<zui-action-split-button-option>

• attribute primary-action-emphasis was removed use instead the emphasis of <zui-action-button>

B

<zui-banner-notification>

• the banner notification now shows a drop shadow by default. This can be adjusted with the css property --zui-banner-notification-box-shadow (see MDN box-shadow. To get the old behavior, set this css property to none.
• The attribute state is removed. Use the new attribute emphasis instead:
  • state="warning" --> emphasis="attention"
  • state="error" --> emphasis="error"
  • state="check" --> emphasis="success"
  • state="question" --> emphasis="question"
  • state="info" --> emphasis="information"

<zui-box>

• The attribute hierarchy-level is renamed to hierarchy.
• The attribute no-bottom-line is removed. The box doesn't have a button line anymore.
• The attribute size values xs and xl aren't supported anymore. Only s, m, l are supported
  • only size m now shows a header text. s and l don't show a header.

C

<zui-checkbox>

• The JavaScript property tabindex had a deviating spelling compared to the native tabIndex (notice camelCase) and is not supported anymore. Use the native tabIndex with uppercase I. The attribute is still tabindex and is not affected.

<zui-combobox>

• New property emphasis - changes the style of the selected combobox option when the combobox is in non-multiple state.
• New property overflow - defines the overflow strategy of the combobox options if the width is not

sufficient to either be truncated with three dots or to be scrollable

<zui-content-tab-default-item>, <zui-content-tab-highlight-item>, <zui-content-tab-image-item>

• the zui-content-tab-default-item, zui-content-tab-highlight-item and zui-content-tab-image-item are removed. Instead, you have to use the new zui-content-tab-item instead, which combines the features of the old components in one single component.
• the new zui-content-tab-item has two emphasis values "default" and "highlight" to get the behavior of the old components:
  • <zui-content-tab-default-item> --> <zui-content-tab-item emphasis="default">
  • <zui-content-tab-highlight-item> --> <zui-content-tab-item emphasis="highlight">
• the old emphasis values default and selected are now handled with the boolean attribute selected
• the zui-content-tab-image-item is not part of the ZUi styleguide anymore and should not be used. If you still need to replace the zui-content-tab-image-item, set the theme to "dark" and set the new boolean attribute use-subtitle2. However, this will likely be deprecated in the future.

<zui-content-accordion>, <zui-content-accordion-details>

• the size s is not longer available

D

<zui-dialogbox>

• The attribute disabled is not supported anymore.
  • to disable the accept or cancel button, use disable-accept and disable-cancel instead.
• in general, we encourage you to consider switching to the zui-interaction-dialog or zui-ewiq-dialog if possible as those have a more concise and extendable API. At some point in the future, we will likely deprecate the zui-dialogbox in favor of the other two dialog components.

<zui-divider>

• The attribute emphasis for this component changed and two more emphasis were added:
  • default -> soft
  • highlight -> medium
  • accent-soft
  • accent-medium

<zui-drag-drop-area>

• The value "active-primary" of the emphasis attribute was removed.

• These CSS properties aren't supported anymore:

  • --zui-drag-drop-area-default-height --> use --zui-drag-drop-area-height instead
  • --zui-drag-drop-area-default-width --> use --zui-drag-drop-area-width instead
  • --zui-drag-drop-area-font-family --> no replacement. It's not intended to change the font
  • --zui-drag-drop-area-has-button-font-family --> no replacement. It's not intended to change the font

E

<zui-ewiq-dialog>

• The JavaScript property tabindex had a deviating spelling compared to the native tabIndex (notice camelCase) and is not supported anymore. Use the native tabIndex with uppercase I. The attribute is still tabindex and is not affected.

<zui-ewiq-dialog-description>

• The JavaScript property tabindex had a deviating spelling compared to the native tabIndex (notice camelCase) and is not supported anymore. Use the native tabIndex with uppercase I. The attribute is still tabindex and is not affected.

<zui-expander>

• The JavaScript property tabindex had a deviating spelling compared to the native tabIndex (notice camelCase) and is not supported anymore. Use the native tabIndex with uppercase I. The attribute is still tabindex and is not affected.

F

G

H

<zui-headerbar-icon-button>

• selected is no longer an emphasis, but a boolean attribute/property. When set, the emphasis of the Icon will be highlight

<zui-headerbar-notification-button>

• The attribute emphasis is removed. Use the new boolean attribute selected instead.

I

<zui-inline-message>

• slot "header-text" is removed. Use the attribute header-text instead.

<zui-interaction-dialog>

• When 3 buttons are shown in a column below each other (size s or m), the height of the buttons is now 64px instead of 48px.

J

K

L

<zui-list-item>

• The attribute emphasis was reworked. Before, there were 3 values supported: "default", "active" and "active-primary" and emphasis was used to mark an item as selected.

Now there is a new boolean attribute selected which is used for this purpose. If the selected attribute is set, the emphasis can be used to further control the visual appearance. It now supports two values "default" and "primary"

• emphasis="default" --> emphasis="default" (no change, this is the default)
• emphasis="active" --> selected=true and emphasis="default"
• emphasis="active-primary" --> selected=true and emphasis="primary"
• notice: the combination emphasis="primary" and selected=false is not supported and will look broken.

<zui-list-accordion>

• The attribute emphasis was reworked. It now only supports the values "default" and "primary". The emphasis is passed to the slotted zui-list-accordion-item or zui-list-accordion elements. The List Accordion component itself can not be selected anymore.
  • emphasis="default" --> emphasis="default" (no change, this is the default value)
  • emphasis="selected" --> not longer available, its not intended that these component can be selected
  • emphasis="selected-primary" -> emphasis="primary"
• before ZBDS we supported only two "levels" the List Accordion Component (first level) and the List Accordion Items inside (second level). The styling of these components was only made for these two levels. With ZBDS the hierarchy property was added with three possible "levels".
  • 3 levels are possible with nested List Accordions
  • the correct hierarchy is automatically set on the slotted elements in the correct order first -> second -> third
  • the indent is set according to the hierarchy (+16px every hierachy level) 32px -> 48px -> 64px (but it can be customized with the cssprops --zui-list-accordion-indent and --zui-list-accordion-item-indent)
• The following css custom property is not longer available
  • --zui-list-accordion-content-height The height will be automatically calculated.

<zui-list-accordion-item>

• The attribute emphasis was reworked. It now only supports the values "default" and "primary". By default the emphasis is propagated from the parent list accordion to the slotted items.
  • emphasis="default" --> emphasis="default" (no change, this is the default value)
  • emphasis="selected" --> emphasis="default" and selected=true
  • emphasis="selected-primary" -> emphasis="primary" and selected=true

M

<zui-menu>

• The attribute scrollable-hitarea and scrollable-background are not supported anymore.

• The attribute count is not supported anymore. To set the number of visible items before the menu is cut off, use the css property --zui-menu-item-count instead.

• The attribute emphasis was reworked. It now only supports the values "default" and "primary-hightlight". The emphasis is passed to the zui-menu-item elements. See and the visual appearance depends on the attribute selected.

  • emphasis="default" --> emphasis="default" (no change, this is the default value)
  • emphasis="selected" --> emphasis="default" and selected=true
  • emphasis="selected-primary" -> emphasis="primary-highlight" and selected=true
  • emphasis="active" --> emphasis="default" and selected=true
  • emphasis="active-primary" -> emphasis="primary-highlight" and selected=true

• These CSS properties aren't supported anymore:

  • --zui-menu-background
  • --zui-menu-border-color
  • --zui-menu-border-radius

• The value "l" of the attribute size was renamed to "m". Setting the size attribute will now influence the font being used.

• The JavaScript property tabindex had a deviating spelling compared to the native tabIndex (notice camelCase) and is not supported anymore. Use the native tabIndex with uppercase I. The attribute is still tabindex and is not affected.

<zui-menu-item>

• The custom property --zui-menu-item-font will not be available anymore. Please use font attribute on the component directly

• The attribute emphasis was reworked. It now only supports the values "default" and "primary-hightlight" and the visual appearance depends on the attribute selected.

  • emphasis="default" --> emphasis="default" (no change, this is the default value)
  • emphasis="selected" --> emphasis="default" and selected=true
  • emphasis="selected-primary" -> emphasis="primary-highlight" and selected=true
  • emphasis="active" --> emphasis="default" and selected=true
  • emphasis="active-primary" -> emphasis="primary-highlight" and selected=true

• the gap between text and description has changed from 24px to 8px.

• The JavaScript property tabindex had a deviating spelling compared to the native tabIndex (notice camelCase) and is not supported anymore. Use the native tabIndex with uppercase I. The attribute is still tabindex and is not affected.

<zui-menu-tab-icon-item>, <zui-menu-tab-text-item>

• The attribute emphasis doesn't exist anymore. Use the new attribute boolean selected instead.

<zui-menubar>, <zui-menubar-item>, <zui-menubar-nav-item>

• The values of the attribute variant were renamed to "main" and "alternative"
  • "primary" --> "main"
  • "secondary" --> "alternative"
• The attribute emphasis was reworked. It only supports the values "default" and "primary". Use the new boolean attribute selected to configure the visual appearance.
  • emphasis="default" --> emphasis="default" (no change, this is the default)
  • emphasis="selected" --> emphasis="default" and selected=true

<zui-menubar-nav-item>

• the following css props were removed because it was not intended to make all these css customizable
  • --zui-menubar-nav-item-background-color
  • --zui-menubar-nav-item-color
  • --zui-menubar-nav-item-disabled-
  • --zui-menubar-nav-item-height
  • --zui-menubar-nav-item-label-font
  • --zui-menubar-nav-item-label-opacity

<zui-menubar-divider>

• the component was removed. Use the group attribute of zui-menubar-item/zui-menubar-nav-item instead to group together items. The menubar will then take care for drawing a separator accordingly.

N

O

P

<zui-pagination-dot>

• The attribute emphasis is removed. Use the new boolean attribute selected instead.

<zui-picker-grid-cell>

• The attribute emphasis is removed. Use the new boolean attributes selected and out-of-range instead.
  • emphasis="default" --> nothing to do, it's the default behavior
  • emphasis="selected" --> selected=true
  • emphasis="subtle" --> out-of-range=true

<zui-progress-ring>

• The attribute emphasis was reworked.
  • emphasis="highlight" --> emphasis primary
  • emphasis="primary-highlight" --> emphasis on-color
• the following css props were removed becasuse it was not intended to set them
  • --zui-progress-ring-progress-color
  • --zui-progress-ring-rail-color
  • --zui-progress-ring-rail-opacity

<zui-progress-bar>

• emphasis and striped was reworked
  • emphasis="highlight" -> emphasis default
  • striped=true -> emphasis stripes

Q

<zui-quiet-link>

• The JavaScript property tabindex had a deviating spelling compared to the native tabIndex (notice camelCase) and is not supported anymore. Use the native tabIndex with uppercase I. The attribute is still tabindex and is not affected.

R

<zui-radio-button>

• The JavaScript property tabindex had a deviating spelling compared to the native tabIndex (notice camelCase) and is not supported anymore. Use the native tabIndex with uppercase I. The attribute is still tabindex and is not affected.

S

<zui-scrollable-directive> / <zui-scrollbar>

• The attribute hitarea and background are not supported anymore.
• The css custom properties --zui-scrollbar-background-color, --zui-scrollbar-background-opacity and --zui-scrollbar-hitarea-enlarge are not available anymore.

<zui-searchbar>

• The attribute showSearchMenu was renamed to show-search-menu to match API guidelines related to camelCase/kebab-case. The corresponding JavaScript property is still showSearchMenu
• The CSS property --zui-searchbar-results-menu-z to set the z-index of the menu is not supported anymore.

<zui-select>

• The values of the attribute emphasis were renamed:
  • "selected" --> "default"
  • "selected-primary" --> "primary-highlight"
• The value "l" of the attribute size was renamed to "m". Setting the size attribute will now influence the font being used.

<zui-select-button>

• The custom property --zui-select-button-font will not be available anymore. Please use font attribute on the component directly
• The attribute opened was renamed to open.
• The value "l" of the attribute size was renamed to "m". Setting the size attribute will now influence the font being used.

<zui-select-option>

• The attribute emphasis was reworked. It now only supports the values "default" and "primary-hightlight" and the visual appearance depends on the attribute selected.
  • emphasis="default" --> emphasis="default" (no change, this is the default value)
  • emphasis="selected" --> emphasis="default" and selected=true
  • emphasis="selected-primary" -> emphasis="primary-highlight" and selected=true
  • emphasis="active" --> emphasis="default" and selected=true
  • emphasis="active-primary" -> emphasis="primary-highlight" and selected=true

<zui-slider>

• The JavaScript property tabindex had a deviating spelling compared to the native tabIndex (notice camelCase) and is not supported anymore. Use the native tabIndex with uppercase I. The attribute is still tabindex and is not affected.

<zui-slider-custom>

• The JavaScript property tabindex had a deviating spelling compared to the native tabIndex (notice camelCase) and is not supported anymore. Use the native tabIndex with uppercase I. The attribute is still tabindex and is not affected.

<zui-slider-range>

• The JavaScript property tabindex had a deviating spelling compared to the native tabIndex (notice camelCase) and is not supported anymore. Use the native tabIndex with uppercase I. The attribute is still tabindex and is not affected.

<zui-state-dot>

• The attribute state is renamed to emphasis. The state value warning is now the emphasis value attention and info is now information. The other values are the same.

<zui-state-label>

• The attribute state is renamed to emphasis. The state value warning is now the emphasis value attention and info is now information. The other values are the same.

T

<zui-table>

• the class zui-table-cell-disable is not supported anymore. Use the attribute data-zui-disabled instead.
• The attribute emphasis was reworked.
  • new boolean attribute selected. If the selected attribute is set, the emphasis can be used to further control the visual appearance. It now supports two values default and primary
  • emphasis="default" --> emphasis="default" (no change, this is the default)
  • emphasis = "selected" --> emphasis="default" and selected="true"

<zui-thumbnail>

• The attribute emphasis was reworked. Before, there were 3 values supported: "default", "active" and "active-primary" and emphasis was used to mark the Thumbnail as selected.

Now there is a new boolean attribute selected which is used for this purpose. If the selected attribute is set, the emphasis can be used to further control the visual appearance. It now supports two values "default" and "primary"

• emphasis="default" --> emphasis="default" (no change, this is the default)

• emphasis="active" --> selected=true and emphasis="default"

• emphasis="active-primary" --> selected=true and emphasis="primary"

• notice: the combination emphasis="primary" and selected=false is not supported and will look broken.

• These CSS properties aren't supported anymore:

  • --zui-thumbnail-image-placeholder-bg-color - use --zui-thumbnail-bg-color instead
  • --zui-thumbnail-image-placeholder-border-color --> use --zui-thumbnail-border-color instead
  • --zui-thumbnail-image-placeholder-border-width --> use --zui-thumbnail-border-width instead
  • --zui-thumbnail-header-placeholder-bg-color --> no replacement. It's not intended to change the color of the placeholder background in the header
  • --zui-thumbnail-header-placeholder-border --> no replacement. It's not intended to change the border style of the header placeholder
  • --zui-thumbnail-image-placeholder-top-border-width - no replacement. It's not intended to change the top border width of the thumbnail image placeholder
  • --zui-thumbnail-top-line-display - use property show-indicator instead
  • --zui-thumbnail-top-line-height - no replacement. It's not intended to change the vertical size of the thumbnail top line

<zui-toast-notification>

• slot "header-text" is removed. Use the attribute header-text instead.

<zui-toggle-bar>, <zui-toggle-bar-button>

• emphasis values have changed:
  • selected --> default and selected=true
  • selected-primary --> primary and selected=true
• there is now a new attribute hierarchy which can be used to adjust the visual styling. However, this attribute is only supported for the emphasis "default".

<zui-toggle-switch>

• the emphasis attribute is not available anymore.
• added attribute filled which can be used to change the visual representation of the toggle switch
• removed several CSS properties as it's not intended to change these
  • --zui-toggle-switch-background-color
  • --zui-toggle-switch-border-color
  • --zui-toggle-switch-handle-size
  • --zui-toggle-switch-handle-spacing
  • --zui-toggle-switch-height
  • --zui-toggle-switch-width

U

<zui-user-menu-button>

• The attribute emphasis is removed. Use the new boolean attribute selected instead.

V

W

X

Y

Z

Styling changes in Components

<zui-button>

• emphasis highlight and primary-highlight has no border anymore
• emphasis default and highlight background-color has transparency

<zui-divider>

• we changed the positioning internall. This could cause 1px difference how the divider is positioned.

<zui-interaction-dialog>

• height of a 3-button version has changed to 64px

<zui-menu-item>

• the margin between text and description has changed from 24px to 8px
• changing size only impacts font now. (previously height was changed as well)

<zui-menubar>

• scrollbar will be only shown if the amount of menu-items inside "more menu" is higher than the value of --zui-menubar-more-menu-max-items

<zui-pill>

• background-color has transparency by default
• the position of the icon/state dots is now on the left side of the text

<zui-radio-button>

• no background color if not selected
• no borders if not selected

<zui-slider>, <zui-slider-range>

• the knobs don't have borders anymore

<zui-tag>

• background-color has transparency by default

<zui-thumbnail>

• header slot has 8px margin on the left and right side
• header slot has a default font and color
• overlay top / overlay bottom have default color and font
• the height of the header changed from 33px to 32px
• the top line/indicator overlaps image and does not shift or resize it

<zui-textarea>

• background-color does not change when hovering over the textarea

<zui-toggle-switch>

• before zbds there were two emphasis default and primary which influenced the styling of the toggle-switch when value="true"("on state" in figma).

In the new version we have two different styles for value="false" which can be controlled with the attribute filled.

• to match the styles in figma use:
  • on-primary -> value="true"
  • off-skeleton -> value="false" and filled="false"
  • off-filled -> value="false" and `filled="true"

New Features in Components

A

<zui-action-split-button>

• added attribute hierarchy with two values first and second
• added attribute emphasis with three values default, highlight and primary-highlight.

The emphasis changes the colors of the left action/toggle button part

B

<zui-banner-notification>

• added css property --zui-banner-notification-box-shadow to disable the box-shadow by setting this css property to none.

<zui-button>

• now automatically corrects the emphasis of a progress-ring inside the button.
• emphasis highlight and primary-highlight should have always a progress-ring with emphasis=on-color
• emphasis default can have a progress-ring with emphasis default or primary

C

<zui-checkbox>

• added attribute emphasis with two values default and primary

<zui-content-tab-default-item>

• added attribute emphasis with two values default and highlight
• added new boolean attribute use-subtitle2 for replacing the zui-content-tab-image-item

D

<zui-divider>

• added two more emphasis accent-soft and accent-medium

E

F

G

H

<zui-headerbar>, <zui-headerbar-icon-button>, <zui-headerbar-notification-button>, <zui-headerbar-product-name>

• theme="dark" is now available

I

<zui-inline-message>

• size="s" is now available with header and message text

<zui-interaction-dialog>

• When 3 buttons are shown in a column below each other (size s or m), the height of the buttons is now 64px instead of 48px.

<zui-interactive-icon>

• added two new emphasis primary-highlight and on-emphasis

J

K

L

<zui-list-accordion>

• added attribute hierachy with the values first, second and third. Hint: emphasis="primary" and selected=true have no visible hierarchies
• added attribute selection-highlightto display a blue highlight. This is only available when open=false
• second line text is now also available in size="m"
• added css prop --zui-list-accordion-indent to customize the indent

<zui-list-accordion-item>

• added property hierachy with the values first, second and third
• added boolean attribute non-interactive for disabling the interaction styles (mainly for the selected variants)
• size="l" is now properly implemented

M

<zui-menu>

• The emphasis is now passed to the zui-menu-item elements.

<zui-menu-item>

• the gap between text and description has changed from 24px to 8px.

N

O

P

Q

R

<zui-radio-button>, <zui-radio-button-group>

• added emphasis attribute with two values default and primary

S

T

<zui-table>

• added emphasis="primary" which changes the style of selected state

<zui-thumbnail>

• added boolean attribute show-indicator
• added css attribute --zui-thumbnail-indicator-color to change the color of the indicator

<zui-toggle-bar>, <zui-toggle-bar-button>

• added new attribute hierarchy with the values first and second. This attribute is only supported for the emphasis="default".

<zui-toggle-switch>

• the emphasis value "default" is not available anymore. The emphasis is always "primary" and is set by the component automatically.
• added attribute filled

U

V

W

X

Y

Z