#v10

• v10
  • Migration
  • Features
  • Web Components
    • Breakpoints
    • StepIndicator
    • Table
    • Slider
    • Timeline
    • Anchor
    • Button
    • Tooltip
    • Icon
    • Modal, Dialog and Drawer
    • Lists
    • InputMasked
    • FormRow
    • Removal of data-testid in components
    • Stopped supporting Internet Explorer (IE)
    • Deprecations
  • TypeScript
  • Install

#Migration

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

#Features

1. Browser support has been updated to support modern browsers only (es6).

#Web Components

1. The support for Web Components, Vue and Angular was 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

Example imports of the new style structure:

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

Or as CSS imports:

import '@dnb/eufemia/style/dnb-ui-core.min.css'
import '@dnb/eufemia/style/themes/theme-ui/dnb-theme-components.min.css'
import '@dnb/eufemia/style/themes/theme-ui/dnb-theme-basis.min.css'

In detail:

• The package dnb-theme-ui was renamed to dnb-theme-basis.
• The package dnb-ui-components was renamed and moved inside a theme /style/themes/theme-ui/dnb-theme-components.*.
• dnb-ui-tags was renamed and moved form /style/dnb-ui-tags.* to /style/themes/theme-ui/dnb-theme-tags.*.

#Font

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/dnb-theme-basis.*.

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

#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/dnb-theme-basis.*.

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

#SVG assets

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

#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. Ensure all table sub elements have a CSS Class:
   1. tr => .dnb-table__tr
   2. th => .dnb-table__th
   3. td => .dnb-table__td
2. Find the sticky_offset property and replace it with stickyOffset.
3. Find the /elements/Table property and replace it with /components/Table.
4. Alignment classes are removed (.dnb-table--left, .dnb-table--right and .dnb-table--center). Use the align attribute instead.
5. Font-sizing classes are removed (.dnb-table--small and .dnb-table--x-small). Use the size property instead.
6. Find and remove Table.StickyHelper.

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

1. Find the target_blank_title property and replace it with targetBlankTitle.

Button

1. The padding of the teriary 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

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:

• 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.
• Only camelCase props are supported for Drawer, so you will need to update the prop names.
• Modal.Inner or Modal.Content converts to Drawer.Body.
• Modal.Bar converts to Drawer.Navigaton.
• 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:

• 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.
• Only camelCase props are supported for Dialog, so you will need to update the prop names.
• Modal.Inner or Modal.Content converts to Dialog.Body.
• Modal.Bar converts to Dialog.Navigaton.
• 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.

#Removal of data-testid in components

• Avatar.
• Badge.
• Breadcrumb.
• InfoCard.
• Tag.
• Upload.
• Timeline.

Stopped supporting Internet Explorer (IE)

Stopped supporting Internet Explorer (IE), as Microsoft formally ended support for IE in June, 2022.

#TypeScript

• 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}.

#SCSS

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

#Deprecations

• Helper class .dnb-sr-only--inline and SCSS mixin srOnlyInline was removed.
• Helper class .dnb-not-sr-only and SCSS mixin notSrOnly was removed.
• import { SpacingHelper } from '@dnb/eufemia/shared' was removed due to low usage. Use one of the other exported helpers.
• import { LocaleProps, DataAttributeTypes, DynamicElement } from '@dnb/eufemia/shared/interfaces' was removed, and moved to @dnb/eufemia/shared/types.
• isIE11 and IS_IE11 is deprecated as we have stopped supporting Internet Explorer (IE).
• Stylis plugin, import stylisPlugin from '@dnb/eufemia/style/stylis', has been removed.

#Install

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

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

April, 20. 2023