Skip to content

Latest commit

 

History

History
140 lines (76 loc) · 7.31 KB

migrationGuide.adoc

File metadata and controls

140 lines (76 loc) · 7.31 KB
Raw

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

Chip

We needed to modify the chip elements HTML slightly due to digital accessibility reasons, which results in the following changes you’ll need to make in your HTML code: remove role="button", tabindex="0" and aria-hidden="true" from the label HTML element

Header and tabs

We’ve visually adapted the specification regarding header area and its included components as well as the tabs component. This leads to visually breaking changes, which might result in necessary changes within your implementation for customization.

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 importing our main CSS via @import @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)