Skip to content
Home

v6

Migration

v6 contains a couple of breaking changes. As a migration process, you can simply search and replace:

  1. find --color-signal-yellow or --color-signal-yellow-30 and replace it with --color-accent-yellow and --color-accent-yellow-30
  2. find weight-book replace it with weight-regular
  3. find weight-default replace it with weight-basis
  4. find dnb-p--medium replace it with dnb-p--bold
  5. find weight-medium replace it with weight-bold
  6. find style_type="medium replace it with style_type="bold
  7. find dnb-p--demi replace it with dnb-p--medium
  8. find weight-demi replace it with weight-medium
  9. find style_type="demi replace it with style_type="medium
  10. find family-book replace it with family-default
  11. find family-medium replace it with family-default
  12. find dnb-typo-number remove it
  13. find dnb-typo-std remove it

New DNB font

We have now our very own DNB font. As this font behaves very differently than Fedra Sans, the DNB UX has specified how we will use the DNB font on digital medium. Therefore font-family, font-size, font-weight and line-height properties have changed.

In normal circumstances, you have to do nothing regarding to this change.

Font's and typography are handled out of the box

More info and details in the respective documentation on:

Adjustments

A lot of small layout adjustments are made in v6 to fix alignment regarding new font and positioning styles.

Color changes

  • Signal Yellow got replaced by Accent Yellow.
  • Signal Yellow 30% got replaced by Accent Yellow 30%.

You may check your application code and replace signal-yellow with accent-yellow.

/* New */
color: var(--color-accent-yellow);
color: var(--color-accent-yellow-30);


/* Deprecated */
color: var(--color-signal-yellow);
color: var(--color-signal-yellow-30);

New colors

/* New */
color: var(--color-lavender);
color: var(--color-sand-yellow);
color: var(--color-pistachio);
color: var(--color-success-green);

Section

The Section has reflected the color changes:

  • style_type="signal-yellow" is now deprecated.
  • style_type="cherry-red" got removed completely (v5 deprecation).

New types

  • style_type="lavender"
  • style_type="sand-yellow"
  • style_type="pistachio"

New Icons

// new primary icons
import {
  reset,
  arrow_top,
  arrow_right,
  arrow_bottom,
  arrow_left,
} from 'dnb-ui-lib/icons/primary'


// new secondary icons
import {
  home,
  login,
  logout,
  settings,
  refresh,
  add_file,
  view_on,
  view_off,
} from 'dnb-ui-lib/icons/secondary'

Localization

With v6 the dnb-ui-lib has it's own localization to be used both for component translation and your app strings. Read more about how to use localization.

Other changes

  • major change Input got sizes. The height medium is now 2.5rem and large is now 2.5rem

Other features

  • FormLabel got a new prop sr_only. This way you still can provide a label, but available only for screen readers.
  • Blockquote is now up to date dnb-blockquote--no-background to display a quote without the contrast background, but rather a transparent.
  • New helper class: dnb-responsive-component Makes some component form components, like Input react to mobile sized screens. But as this can have some negative effects to have this enabled by default, you can enable this optionally by using this helper class.
  • New helper class: dnb-sr-only--inline for using in inline text contexts, to make a better NVDA user experience.
  • New Table style / icons on sorting buttons. Icon change: from chevron to arrow.
  • All form components now have a suffix property e.g. Slider.
  • GlobalStatus now supports visual type of info: state="info".
  • FormStatus has now their own icons. You can import these icons separately.

Resources package

A new package only contains resources needed by the DNB DCE team. This package is provided as a tar file.

  • https://unpkg.com/browse/dnb-ui-lib@6/dist/dnb-ui-resources.tgz

Install

To upgrade to v6 with NPM, use:

$ npm i dnb-ui-lib@6

January, 30. 2020