ZUi version 1.x

Components

Avatar <zui-avatar>

The attribute imageUrl is deprecated, image-url should be used instead.

Box <zui-box>

Closing Behavior

The existing closing behavior of the box is unfavorable and will be reworked. Previously, the closing worked like this: When the attribute closable is set, the box shows a close button. When this button is clicked the attribute closed is set and the box will be hidden. However, the box is still part of the DOM tree. The same happens when the closed attribute is set programmatically.

This behavior has several drawbacks:

• from a UI/UX perspective it's a inconsistent because you cannot get the box back to open.
• it's unintuitive from a SPA developer perspective.

The more natural approach (and this is also the recommended approach from now on) is this:

• when the close-icon is clicked, a close event is dispatched
• besides this event, the box does nothing and stays the way it is
• an SPA developer can react to this event and remove the box from the DOM/not render it anymore.

For this reason the closing behavior the way it was before is now deprecated. As an escape hatch if you need the previous behavior, you can set the new attribute use-deprecated-close-behavior to get back the old closing mechanism. Setting the closed attribute will then also work. However: In a future release this functionality will be dropped.

Emphasis

• The emphasis active was renamed to selected. The old emphasis will still be available in the upcoming releases but will be removed from the bundle in the next major version.

Button <zui-button>

The emphasis active and active-primary were renamed to highlight and primary-highlight the old emphasis will still be available in the upcoming releases but will be removed from the bundle in the next major version.

Date Picker components

Events in CamelCase style are depricated, instead the events with kebab-case style should be used.

<date-picker>

• The event datePickerDateSelected is deprecated. Use date-picker-date-selected instead.

<date-picker-day-picker>

• The event dayPickerDaySelected is deprecated. Use day-picker-day-selected instead.
• The event dayPickerMonthSelected is deprecated. Use day-picker-month-selected instead.
• The event dayPickerNextMonthSelected is deprecated. Use day-picker-next-month-selected instead.
• The event dayPickerPreviousMonthSelected is deprecated. Use day-picker-previous-month-selected instead.
• The event dayPickerWeekdaySelected is deprecated. Use day-picker-weekday-selected instead.

<date-picker-input>

• The event datePickerInputCalendarSelected is deprecated. Use date-picker-input-calendar-selected instead.

<zui-date-picker-month-picker>

• The event monthPickerMonthSelected is deprecated. Use month-picker-month-selected instead.
• The event monthPickerNextYearSelected is deprecated. Use month-picker-next-year-selected instead.
• The event monthPickerPreviousYearSelected is deprecated. Use month-picker-previous-year-selected instead.
• The event monthPickerYearSelected is deprecated. Use month-picker-year-selected instead.

<zui-date-picker-year-picker>

• The event yearPickerDecadeSelected is deprecated. Use year-picker-decade-selected instead.
• The event yearPickerNextDecadeSelected is deprecated. Use year-picker-next-decade-selected instead.
• The event yearPickerPreviousDecadeSelected is deprecated. Use year-picker-previous-decade-selected instead.
• The event yearPickerYearSelected is deprecated. Use year-picker-year-selected instead.

<zui-textfield-date-picker>

• The event textfieldDatePickerDateSelected is deprecated. Use textfield-date-picker-date-selected instead.

<zui-picker-grid>

• The event pickerGridCellSelected is deprecated. Use picker-grid-cell-selected instead.
• The event pickerHeaderCellSelected is deprecated. Use picker-header-cell-selected instead.

<zui-picker-header>

• The event pickerHeaderPreviousSelected is deprecated. Use picker-header-previous-selected instead.
• The event pickerHeaderCurrentSelected is deprecated. Use picker-header-current-selected instead.
• The event pickerHeaderNextSelected is deprecated. Use picker-header-next-selected instead.

Dialog Button <zui-dialog-button>

The emphasis primary-active was renamed to primary-highlight the old emphasis will still be available in the upcoming releases but will be removed from the bundle in the next major version.

Divider <zui-divider>

The emphasis moderate was renamed to default the old emphasis will still be available in the upcoming releases but will be removed from the bundle in the next major version.

Ewi Dialog Light <zui-ewi-dialog-light>

The component is drepicated. Use <zui-ewiq-dialog> instead.

Interactive Icon <zui-interactive-icon>

The emphasis muted and moderate were renamed to to subtle and default the old emphasis will still be available in the upcoming releases but will be removed from the bundle in the next major version.

The attribute useDepricatedHitArea will be removed from the bundle in the next major version. The new Attribute for the same behavior is actually smallHitArea.

List <zui-list>

The automatic skeleton creating mechanic is deprecated, because it didn't worked very well and could only be used imperatively. It will get removed in version 2.

We are currently working on skeleton components which can be used with ZUi components. For now create yourself custom skeletons and put them as normal items into the zui-list.

Menu components

<zui-menu>

• The emphasis active and active-primary were renamed to selected and selected-primary the old emphasis will still be available in the upcoming releases but will be removed from the bundle in the next major version.

<zui-menu-item>

• The emphasis active and active-primary were renamed to selected and selected-primary the old emphasis will still be available in the upcoming releases but will be removed from the bundle in the next major version.

Menubar components

The naming of the HTML-Tags from the Menu Bar and the Menu Bar Item was not consistent, so they got renamed.

Menubar

• <zui-menu-bar> is deprecated, use <zui-menubar> instead.
• The emphasis active and active-primary were renamed to selected and selected-primary the old emphasis will still be available in the upcoming releases but will be removed from the bundle in the next major version.

Menubar Item

• <zui-menu-bar-item> is deprecated, use <zui-menubar-item> instead.
• The emphasis active and active-primary were renamed to selected and selected-primary the old emphasis will still be available in the upcoming releases but will be removed from the bundle in the next major version.

<zui-menubar-nav-item>

• The event menubarItemSelected is deprecated. Use menubar-item-selected instead.
• The emphasis active and active-primary were renamed to selected and selected-primary the old emphasis will still be available in the upcoming releases but will be removed from the bundle in the next major version.

Progress Ring <zui-progress-ring>

The emphasis active and active-primary were renamed to to highlight and primary-highlight the old emphasis will still be available in the upcoming releases but will be removed from the bundle in the next major version.

Select <zui-select>

The emphasis active and active-primary were renamed to selected and selected-primary the old emphasis will still be available in the upcoming releases but will be removed from the bundle in the next major version.

Title Stack zui-title-stack

The attribute wrapping will be deprecated after version 1.19.0. Use disable-wrapping with the inverted value instead.