v5#

Migration#

v5 contains a couple of breaking changes. As a migration process, you can simply search your application for:

find save_alt_01 and replace it with save
find --color-cherry-red or --color-cherry-red-8 and replace it with --color-fire-red and --color-fire-red-8
find dnb-ui-lib-icons.min.js and replace it with dnb-ui-icons.min.js

Typography preparations#

Soon we will have our own DNB font. This will have an impact on font-family, font-size, font-weight and line-height.

To prepare for these changes, you can already today (since v4.24) use the now exposed properties for both:

Previously, we had font-weight.

The benefits?#

If you are using only properties to change actively your application typography, then a future update with changes will "automatically" happen, so you don't need to make manual code changes later.

Properties as JS#

You can now also import all the main properties as a JavaScript Object:

import properties from 'dnb-ui-lib/style/properties

Number component#

The new Number component is a ready-to-use DNB number formatter. Use it wherever you have to display a number, a currency value, phone number, etc.

Good reasons for why we have this are to:

standardize the formatting of numbers for all DNB applications.
and make numbers accessible to screen readers.

Color changes#

Cherry Red will be replaced by Fire Red.
Cherry Red 8% will be replaced by Fire Red 8%.

You may check your application code and replace cherry-red with fire-red.

/* New */
color: var(--color-fire-red);
color: var(--color-fire-red-8);

/* Deprecated */
color: var(--color-cherry-red);
color: var(--color-cherry-red-8);

Icon changes#

/* New */
import { download } from 'dnb-ui-lib/icons/secondary'

/* Removed */
import { error } from 'dnb-ui-lib/icons/primary'
import { save_alt_01 } from 'dnb-ui-lib/icons/secondary'

ESM module format#

The dnb-ui-lib uses now ESM as the default module format. But every component is still compiled down to ES5.

Do I have to make changes?#

Most likely no. The majority of applications / projects does not have to make changes.

If you are in Node.js (SSR) land, read more about CJS.

What is ESM good for?#

Your project is most likely already using ESM (import / export). Now that the dnb-ui-lib uses ESM, tree shaking is much easier to handle and most likely be handled out of the box by your application bundler of choice (e.g. webpack (create-react-app), rollup.js and parcel.js).

UMD changes#

The UMD package for icons dnb-ui-lib-icons.min.js got a new naming:

dnb-ui-icons.min.js

Install#

To upgrade to v5 with NPM, use:

$ npm i dnb-ui-lib@5

October, 30. 2019

Suggest an edit