migrationGuide.adoc

Migration Guides

As with every release you’re recommended to do a visual regression testing for your application.

Especially the following aspects have changed through the various different releases and would need your review and probably adaptions within your code base.

DB UI Core 3.0.0 Migration Guide

Using SCSS/SASS sources

Compiler

We’ve removed the following files, that we already deprecated within the previous major version: - @db-ui/core/sources/css/enterprise/db-ui-core-include.scss - @db-ui/core/sources/css/enterprise/db-ui-core-rollup.scss - @db-ui/core/sources/css/enterprise/db-ui-core-webpack.scss

button

• The large size has been removed; it became obsolete mainly due to our tonality introduction

• And renamed regular size to medium

• Made some changes regarding the variants:

• Brand primary becomes the regular Primary button

• Primary becomes Secondary Inverted

• Secondary Outline becomes Secondary

• Secondary Solid becomes Tertiary

• Tertiary Plain becomes Ghost

progress

We’ve remove the deprecated previous HTML implementation of the label by an output element and replaced it by an actual label element. Necessary changes:

• replaced output element by label element

• especially for screenreader optimization added the following two attributes to this label element: id="{{ id }}-label" aria-hidden="true"

• The id-attributes value on that label element needs to match the following attributes values that needs to get added onto the progress HTML tag itself: aria-describedby="{{ id }}-label"

input

• The input background style variations semitransparent, solid, white and outline have been removed. Input fields have only one background style left.

• Introducing 3 different sizes of input fields according to our tonality introduction: functional, regular, `expressive

• Integration of data-icon-before and data-icon-after property for enabling use of custom icons in input fields

• Introducing new variations: error, warning, success and information following the new guidelines 3.0 color system

link

• Removed the ability for custom icons according to guidelines 3.0

• Added primary as variant for highlighting links

• Changed use of data-variant to use with primary and used data-content attribute for differentiation between internal and external

• Font-size definition has moved to DB UI Base due to our tonality introduction (default and for data-size=small)

DB UI Core 2.2.0 Migration Guide

progress element

We’ve replaced the previous HTML implementation of the label / an actual label element by an output element. Necessary changes:

• replaced output element by label element

• especially for screenreader optimization added the following two attributes to this label element: id="{{ id }}-label" aria-hidden="true"

• The id-attributes value on that label element needs to match the following attributes values that needs to get added onto the progress HTML tag itself: aria-describedby="{{ id }}-label"

DB UI Core 2.0.0 Migration Guide

Using SCSS/SASS sources

Compiler

Please note that we’ve switched from the deprecated node-sass compiler to its successor sass. As sass doesn’t support the tilde (~) reference to your node_modules folder out of the box and there even also doesn’t seem to be a general solution out there, we’ve removed that one, so that in case you’re using our SCSS sources directly, you would need to provide your node_modules folder as a load path or include path (e.g. --load-path=node_modules on the sass CLI usage).

You need to set the load path / include path depending on your SCSS compiler as described within our getting started

Additionally we’ve deprecated the @db-ui/core/sources/css/enterprise/db-ui-core-include SCSS endpoint – please either @import the file @db-ui/core/sources/css/rollup.assets-paths or @db-ui/core/sources/css/webpack.assets-paths depending on your bundler, previous to @import`ing `@db-ui/core/sources/css/enterprise/db-ui-core directly from now on.

SCSS Helper functions

to-rem and to-em parameter values by type number

We’ve changed the parameter value to expect a number, which should be in pixels anyhow as we’re performing this transformation from pixels to either em or rem value.

Design Tokens (SCSS, CSS, etc.)

All Design Tokens are now being rendered with a db- prefix.

Colors

All remaining brand colors have been removed from DB UI Core and will be used from the consumed DB UI Base product. That for we even also needed to align the variable names, both SCSS variables and well as the CSS Varibles / Custom Properties. The main changes are:

Primary Colors

• $color-red has been changed to $db-color-red

• $color-white has been changed to $db-color-white

Secondary Colors

All secondary colors as well have been changed to include db- at the front, so e.g. $color-red-500 is now $db-color-red-500.

Transporation

• All transportation colors have gotten their specific category removed, so $color-transport-ice becomes $db-color-ice.

POI and feedback

• Those have been just removed and are now consumed from DB UI Base.

Deprecated colors

We’ve removed the two older and already deprecated color values $red-500 and $DBred, please use $db-color-red instead.

Icons

The already deprecated enterprise specific as well as the seperate transporation iconsets have been removed. These have been integrated into the general DBUX iconset. Please use those new ones listed in the DB Icons section, especially the ones in the specific Transporation category.

And we’ve moved all icon assets from dist/images/icons to dist/icons and even a better subfolder structure in there, and as well retrieving those by [DB UI Base](https://db-ui.github.io/base/?p=viewall-icons-all) package, path node_modules/@db-ui/base/build/assets/icons/.

If you’ve used the undocumented --icon-margin-left and --icon-margin-right CSS Variables: They now became --icon-margin-before and --icon-margin-after for easier i18n.

Buttons

Some variants have changed or been removed:

• primary-alternative-1, primary-alternative-2 and primary-alternative-green have been removed

• secondary and secondary-text have been replaced by secondary-solid and tertiary-plain

• ghost and ghost-alternative have been replaced by secondary-outline

Some sizes have changed or been removed:

• medium has been replaced by regular

• xlarge has been removed

Radio

The two colors variants have been removed. Therefor the $radio-alternative* SCSS variables aren’t being provided any further.

Checkbox

The seven colors variants have been removed. Therefor the $checkbox-alternative* SCSS variables aren’t being provided any further.

Toggle

The two colors variants have been removed. Therefor the $toggle-alternative-* SCSS variables aren’t being provided any further.

Progress

The variant for a thiner height has been removed. Therefor the $progress-thiner—​height SCSS variables isn’t being provided any further.

Notification

• The two neutral variants and their classes .is-neutral-light and .is-neutral-dark have been removed.

• The notification types have been changed from .is-* classes (like e.g. .is-danger) to data-type= attributes like e.g. data-type=error

  • The danger variant and its class .is-danger has been renamed to data-type=error.

  • The info variant and its class .is-info has been renamed to data-type=informative.

Dialog

The classes .is-abort and .is-continue on the button elements have been removed – please use the variants / data-variant attributes instead.

Cards

The previous version of the EDS guidelines only included a rudimentary defined component, which has been totally reworked and will receive further variants. The main changes in the HTML source code have been made in the figcaption HTML part.

Tags

The stateful tag types (a.elm-tag and input.elm-tag) have been moved to a new pattern, as defined within the DB UX Design System specification: chips

Please use this one instead either for the Filter Chips or Selection/Auswahl Chips types defined in the specificiation.

DB UI Core 2.0.0-0 Migration Guide

• We’ve renamed our package to @db-ui/core. The old version will still get maintained, but @db-ui/core includes our work regarding the DB UX Design System styles, and is thatfor the successor.

And we’re still hosting the CHANGELOG for any changes up until version 2.0.0 within our internal Git: https://db.de/lwfv2o (you need to be logged in to our Deutsche Bahn VPN for these informations)