v9

Migration

v9 of @dnb/eufemia contains breaking changes. As a migration process, you can simply search and replace:

General

  1. Uninstall dnb-ui-lib and install @dnb/eufemia.
  2. Rename with Regex ("|')dnb-ui-lib and replace with $1@dnb/eufemia.
  3. Rename node_modules/dnb-ui-lib/ and replace with node_modules/dnb/eufemia/.
  4. Find formRow inside a (e.g. <Provider formRow= ...) and replace it with FormRow (PascalCase).

Number to NumberFormat

  1. Find the Number component and rename it with NumberFormat.
  2. Find the dnb-number and replace it with dnb-number-format.
  3. In case you import it from components/number/Number, it has to be components/number-format/NumberFormat.
  4. In case you use format or cleanNumber from either /components/Number or /components/number/Number, replace the import path to be /components/number-format/NumberUtils.
  5. You can also use Regex: Find Number([^F)]|$) and replace it with NumberFormat$1.

Tabs props

Tabs has changed two property names.

  1. Find section_style in <Tabs section_style="..." /> and replace with tabs_style.
  2. Find section_spacing in <Tabs section_spacing="..." /> and replace with tabs_spacing.

Helper classes

  1. Removed dnb-nudge
  2. Removed dnb-belt
  3. Removed dnb-hide-on-mobile
  4. Removed dnb-mobile-exclusive
  5. Removed dnb-width-limit

Patterns to Extensions

Most of the Eufemia "patterns" got removed in favor of calling this part as extensions.

  1. Find dnb-ui-lib/patterns or @dnb/eufemia/patterns and replace with @dnb/eufemia/extensions
  2. Find dnb-ui-patterns and replace with dnb-ui-extensions

The following patterns/extensions/components are removed:

  • ActionNav
  • DescriptionList
  • Footer
  • Form
  • Grid
  • MainMenu
  • SummaryTable
  • FieldsetDescription
  • FormSummaryPage
  • RangeSlider
  • ViewTitle
  • LineTitle
  • Notification

Properties

Removed already depreciated CSS properties (vars):

  • --color-sea-green-alt-30
  • --color-signal-yellow-30
  • --color-black-30
  • --color-sea-green-alt
  • --color-signal-yellow
  • --font-weight-book
  • --font-weight-demi
  • --font-family-book
  • --font-family-demi

Textarea

  • Removed support of style only for Textarea. You have to use the component now.

StepIndicator

  • Has now a deprecation warning when props like use_navigation, active_item, active_url, url, url_future and url_passed are used.

Changes

  • The visual appearance of a couple of components has been changed (e.g. border-radius).
  • The color success-green has changed its HEX value

Updates to the language files

Strings where changed/removed and added to the language files nb-NO.js and en-GB.js:

  • NumberFormat (added)

Features

  • New useful props added to <Tabs content_style="..." /> to define a section style.

  • Added stretch support for Autocomplete, Dropdown and DatePicker.

  • Enhance Webpack v5 compatibility

  • Enhance React v17 compatibility

  • Linear ProgressIndicator

  • Release of Tooltip inclusive integration into Button, Anchor and NumberFormat

  • Tertiary Button with top placed icon

  • The Eufemia Provider can send along global component properties:

    <Provider
      value={{
        Button: { size: 'large' },
      }}
    >
      ...
      <Button text="Large button" />
    </Provider>

Install

To upgrade to @dnb/eufemia v9 with NPM, use:

$ npm i @dnb/eufemia@9
# or
$ yarn add @dnb/eufemia@9

March, 3. 2021