Skip to content
Home

v10

How to migrate

v10 of @dnb/eufemia contains breaking changes. As a migration process from v9, you should follow all of the guides below.

Install

To upgrade to @dnb/eufemia v10 with Yarn, run:

yarn workspace <your-workspace> add @dnb/eufemia@10
# or
yarn add @dnb/eufemia@10

Deprecations

  1. Helper class .dnb-sr-only--inline and SCSS mixin srOnlyInline was removed.
  2. Helper class .dnb-not-sr-only and SCSS mixin notSrOnly was removed.
  3. import { SpacingHelper } from '@dnb/eufemia/shared' was removed due to low usage. Use one of the other exported helpers.
  4. Stylis plugin, import stylisPlugin from '@dnb/eufemia/style/stylis', has been removed.

TypeScript

  1. Updated multiple types from string | boolean to boolean, as there was a lot of properties who should only support boolean values and not strings. Examples of changes to do would be to find Eufemia components using "false" or "true", and replace it with boolean values. i.e., vertical="false" to vertical={false} or selectall="true" to selectall={true}. Following is a non-exhaustive list of affected properties:
    • vertical
    • prevent_selection
    • show_label
    • stretch
    • no_scroll_animation
    • disable_filter
    • more_menu
    • inherit
  2. import { LocaleProps, DataAttributeTypes, DynamicElement } from '@dnb/eufemia/shared/interfaces' was removed, and moved to @dnb/eufemia/shared/types.

Discontinued Internet Explorer (IE) support

The support for Internet Explorer (IE) was removed, as Microsoft formally ended support for IE in June, 2022. Have a look at the supported browsers and platforms.

With that change, Eufemia will support modern browsers that supports ES6.

  1. The helpers isIE11 and IS_IE11 was removed.

Web Components support

The support for Web Components, Vue and Angular was discontinued and removed.

Breakpoints

Some breakpoints sizes have changed:

  • xx-large: 1280 is now 1440 – and 80em is now 90em
  • x-large: 1152 is now 1280 – and 72em is now 80em
  • large: 960 is now 1152 – and 60em is now 72em
  • medium: 800 is now 960 – and 50em is now 60em
  1. Find $layout-x-large and replace with $layout-large
  2. Find $layout-xx-large and replace with $layout-x-large
  3. Find --layout-x-large and replace with --layout-large
  4. Find --layout-xx-large and replace with --layout-x-large

NB: Import and use the Eufemia breakpoints directly in your code:

// breakpoints.scss
@import '@dnb/eufemia/style/core/utilities';
$layout-small: map-get($breakpoints, 'small');
$layout-medium: map-get($breakpoints, 'medium');
$layout-large: map-get($breakpoints, 'large');

Breaking changes to CSS packages and imports

Find the place where you import the Eufemia styles.

  1. If you did import them as so:
import '@dnb/eufemia/style'

then you don't need to make any changes.

  1. If you did import /core etc. – then you have to change it to the the import above(see 1.):
import '@dnb/eufemia/style/core'
import '@dnb/eufemia/style/themes/ui'
  1. If you did import the styles as CSS files, then you have to change it to the the import above(see 1.):
import '@dnb/eufemia/style/dnb-ui-core.min.css'
import '@dnb/eufemia/style/themes/theme-ui/ui-theme-components.min.css'
import '@dnb/eufemia/style/themes/theme-ui/ui-theme-basis.min.css'
  1. If you did import /basis, /components, and themes/ui like so(commonly done in EufemiaStyleImporter files):
import '@dnb/eufemia/style/basis'
import '@dnb/eufemia/style/components'
import '@dnb/eufemia/style/themes/ui'

Change to:

import '@dnb/eufemia/style/basis'
import '@dnb/eufemia/style/themes/ui'

More details about the change:

  • The package dnb-theme-ui was renamed to ui-theme-basis.
  • The package dnb-ui-components was renamed and moved inside a theme /style/themes/theme-ui/ui-theme-components.*.
  • dnb-ui-tags was renamed and moved from /style/dnb-ui-tags.* to /style/themes/theme-ui/ui-theme-tags.*.
  • NB: When using the eiendom theme, the same applies as with ui, just use eiendom instead.

Properties

The DNB properties.scss and properties.js files were moved inside a theme folder /style/themes/theme-ui/properties.*.

Packages such as:

  • dnb-ui-basis
  • dnb-ui-core

do not contain the properties anymore. Properties are only a part of a theme file, such as: /style/themes/theme-ui/ui-theme-basis.*.

As long as you don't import them in your application, you don't need to make any changes in your codebase.

Following is a non-exhaustive list of examples of changes that could be relevant for your application:

  1. Find references to @dnb/eufemia/style/properties and replace it with @dnb/eufemia/style/themes/theme-ui/properties.

    From:

    import properties from '@dnb/eufemia/style/properties'

    To:

    import properties from '@dnb/eufemia/style/themes/theme-ui/properties'

  2. Find references to @dnb/eufemia/cjs/style/properties and replace it with @dnb/eufemia/cjs/style/themes/theme-ui/properties.

    From:

    import properties from '@dnb/eufemia/style/properties'

    To:

    import properties from '@dnb/eufemia/cjs/style/themes/theme-ui/properties'

  3. Find references to @dnb/eufemia/style/dnb-ui-properties.min.css and replace it with @dnb/eufemia/style/themes/theme-ui/ui-theme-properties.min.css.

Removal of data-testid in components

You may use other methods to select and test the inner parts of Eufemia components. You could use e.g. screen.queryByRole, screen.queryByRole or document.querySelector. All of the following components are effected by the change:

  1. Avatar.
  2. Badge.
  3. Breadcrumb.
  4. InfoCard.
  5. Tag.
  6. Timeline.
  7. Upload.

SCSS mixins

Find the SCSS @mixin fakeFocus and replace it with focusRing. Find the SCSS @mixin removeFakeFocus and replace it with removeFocusRing.

Fonts assets

The DNB font is moved inside a subfolder in /assets/fonts/dnb/....

The CSS package dnb-ui-fonts is moved inside a theme folder /themes/theme-ui.

CSS Packages such as:

  • dnb-ui-basis
  • dnb-ui-core

do not contain the fonts anymore. Fonts are now only a part of a theme file, such as: /style/themes/theme-ui/ui-theme-basis.*.

As long as you don't import them manually, you don't need to make any changes in your codebase.

Find references to @dnb/eufemia/assets/fonts/ and replace it with @dnb/eufemia/assets/fonts/dnb/. For instance, changing from:

import exampleFont from '@dnb/eufemia/assets/fonts/exampleFont.woff2'

To:

import exampleFont from '@dnb/eufemia/assets/fonts/dnb/exampleFont.woff2'

SVG assets

All svg icon files were moved inside a subfolder in /assets/icons/dnb/....

Browser assets

  1. DNB browser assets (assets/browser) have been moved inside a subfolder: assets/browser/dnb.

Component changes

StepIndicator

  1. Find the active_item property and replace it with current_step.
  2. Find use_navigation and remove it or replace it with mode="strict" or mode="loose".
  3. URL support has been removed – so props like active_url, url, url_future, and url_passed are not supported anymore. You have to handle it by yourself from inside your application. Here is an example.

Table

  1. Find the sticky_offset property and replace it with stickyOffset.
  2. Find the /elements/Table property and replace it with /components/Table.
  3. Alignment classes are removed (.dnb-table--left, .dnb-table--right and .dnb-table--center). Use the align attribute instead.
  4. Font-sizing classes are removed (.dnb-table--small and .dnb-table--x-small). Use the size property instead.
  5. Find and remove Table.StickyHelper.
  6. Consider to add a CSS Class to each sub element or import it from the package:
    1. tr => .dnb-table__tr or import { Tr } from '@dnb/eufemia'.
    2. th => .dnb-table__th or import { Th } from '@dnb/eufemia'.
    3. td => .dnb-table__td or import { Td } from '@dnb/eufemia'.

Slider

  1. Find the thump_title property and replace it with thumbTitle.
  2. Find the snake_case add_title property and replace it with addTitle.
  3. Find the snake_case subtract_title property and replace it with subtractTitle.
  4. Remove @dnb/eufemia/components/slider/style/dnb-range.min.css and use the Eufemia Slider component instead.
  5. use_scrollwheel and on_init properties, as well as the raw_value event value from Slider was removed in order to support multiple buttons.

Timeline

  1. Find the name property in your Timeline JSX syntax and replace it with title.
  2. Find the date property in your Timeline JSX syntax and replace it with subtitle.

Anchor

The Anchor was moved form /elements to /components.

  1. Find imports like from '@dnb/eufemia/elements' or from '@dnb/eufemia/elements/anchor', and change the import to import { Anchor } from '@dnb/eufemia'.
  2. Find the target_blank_title property and replace it with targetBlankTitle.

NB: ESM and UMD packages: The Anchor is now also a part if dnb-ui-components instead of dnb-ui-elements.

Button

  1. The padding of the tertiary button is removed. Please, check your application and add back the padding of 0.5rem if needed.

Pagination and InfinityScroller

  1. Replace the deprecated event return parameter page with pageNumber.

Tooltip

  1. Find the target_element property and replace it with targetElement.
  2. Find the target_selector property and replace it with targetSelector.
  3. Find the animate_position property and replace it with animatePosition.
  4. Find the fixed_position property and replace it with fixedPosition.
  5. Find the skip_portal property and replace it with skipPortal.
  6. Find the no_animation property and replace it with noAnimation.
  7. Find the show_delay property and replace it with showDelay.
  8. Find the hide_delay property and replace it with hideDelay.

Icon

  1. Find the data-test-id property and replace it with data-testid. The usage of data-test-id will most likely be found in your tests.

Modal, Dialog and Drawer

1.closeButtonAttributes of Modal, Dialog, and Drawer is deprecated and no longer supported.

  1. Modal's mode property is now deprecated and removed. <Modal /> now behaves as <Modal mode="custom" /> did previously.

    When you convert from <Modal mode="custom" /> simply change to <Modal />.

    When you convert from <Modal mode="drawer" /> to <Drawer /> – follow these steps:

    1. All trigger_* props are not supported for Drawer, use triggerAttributes instead to pass in props for the trigger button.

      • Change prop trigger_hidden to omitTriggerButton to omit the default trigger button from Modal.

    2. Only camelCase props are supported for Drawer, so you will need to update the prop names.

    3. Modal.Inner or Modal.Content converts to Drawer.Body.

    4. Modal.Bar converts to Drawer.Navigaton.

    5. Modal was a class component and Drawer is a functional component.

    When you convert from <Modal /> or <Modal mode="dialog" /> to <Dialog /> – follow these steps:

    1. All trigger_* props are not supported for Dialog, use triggerAttributes instead to pass in props for the trigger button.

      • Change prop trigger_hidden to omitTriggerButton to omit the default trigger button from Modal.

    2. Only camelCase props are supported for Dialog, so you will need to update the prop names.

    3. Modal.Inner or Modal.Content converts to Dialog.Body.

    4. Modal.Bar converts to Dialog.Navigaton.

    5. Modal was a class component and Dialog is a functional component.

Lists

  1. New Definition List layout direction: direction="horizontal" including Dl.Item demo.

InputMasked

  1. In v10, InputMasked allows leading zeros. To prevent that behavior, the property allowLeadingZeroes has changed to disallowLeadingZeroes.

FormRow

  1. The FormRow properties indent and indent_offset were removed.

FormStatus

  1. The FormStatus property status was renamed to state. Find the status property and replace it with state.

Switch

  1. type SwitchChecked was removed. Use boolean instead.

HelpButton

  1. The properties modal_props and modal_content where removed. You may replace these props with the new render property. See this example.

Element changes

Paragraph

  1. Removed small as prop. Use size="small" instead.

  2. Removed deprecated style_type prop. Use medium, bold or modifier instead.

Img

Changed img_class prop to be imgClass.

  1. Find all instances of img_class and change it to imgClass

Extension changes

PaymentCard

  1. Type's DNB value/option Metalic was removed.
  2. Type's Saga value/option VisaPlatinum was removed.
  3. Type's PB value/option Platinum was removed.
  4. Type's Mastercard value/option DefaultWhite was removed.
  5. Type's Mastercard value/option Metalic was removed.
  6. Type's Mastercard value/option BlackMetalic was removed.
  7. Type's Visa value/option Metalic was removed.
  8. CardDesign's value/option white was removed. If used as a default design, consider replacing it with defaultDesign.
  9. CardDesign's value/option silver was removed.
  10. ProductType's value/option BankAxept was removed.

April, 20. 2023