@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
487 lines (333 loc) • 21.8 kB
Markdown
---
title: 'v10'
description: 'May, 31. 2023'
version: 11.8.3
generatedAt: 2026-07-29T16:51:35.599Z
checksum: 090b7d977ba4be5e2c4c04d199a30a4048416c59f443a56985df2f80629d9c40
---
# v10
<Accordion title="Table of Content">
- [v10](#v10)
- [How to migrate](#how-to-migrate)
- [Install](#install)
- [Deprecations](#deprecations)
- [TypeScript](#typescript)
- [Discontinued Internet Explorer (IE) support](#discontinued-internet-explorer-ie-support)
- [Web Components support](#web-components-support)
- [Breakpoints](#breakpoints)
- [Breaking changes to CSS packages and imports](#breaking-changes-to-css-packages-and-imports)
- [Properties](#properties)
- [Removal of `data-testid` in components](#removal-of-data-testid-in-components)
- [SCSS mixins](#scss-mixins)
- [Fonts assets](#fonts-assets)
- [SVG assets](#svg-assets)
- [Browser assets](#browser-assets)
- [Component changes](#component-changes)
- [StepIndicator](#stepindicator)
- [Table](#table)
- [Slider](#slider)
- [Timeline](#timeline)
- [Anchor](#anchor)
- [Button](#button)
- [Pagination and InfinityScroller](#pagination-and-infinityscroller)
- [Tooltip](#tooltip)
- [Icon](#icon)
- [Modal, Dialog and Drawer](#modal-dialog-and-drawer)
- [Lists](#lists)
- [InputMasked](#inputmasked)
- [FormRow](#formrow)
- [FormStatus](#formstatus)
- [Switch](#switch)
- [HelpButton](#helpbutton)
- [Autocomplete](#autocomplete)
- [Checkbox](#checkbox)
- [DatePicker](#datepicker)
- [Dropdown](#dropdown)
- [Input](#input)
- [Radio](#radio)
- [Textarea](#textarea)
- [ToggleButton](#togglebutton)
- [GlobalError](#globalerror)
- [Element changes](#element-changes)
- [Paragraph](#paragraph)
- [Img](#img)
- [Extension changes](#extension-changes)
- [PaymentCard](#paymentcard)
</Accordion>
## How to migrate
v10 of [@dnb/eufemia](https://www.npmjs.com/package/@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:
```bash
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.
1. Helper class `.dnb-not-sr-only` and SCSS mixin `notSrOnly` was removed.
1. `import { SpacingHelper } from '@dnb/eufemia/shared'` was removed due to low usage. Use one of the [other exported helpers](/uilib/layout/spacing).
1. 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. E.g., `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](/uilib/usage/#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](/uilib/layout/media-queries) 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`
1. Find `$layout-xx-large` and replace with `$layout-x-large`
1. Find `--layout-x-large` and replace with `--layout-large`
1. Find `--layout-xx-large` and replace with `--layout-x-large`
**NB:** Import and use the Eufemia breakpoints directly in your code:
```scss
// 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:
```js
import '@dnb/eufemia/style'
```
then you don't need to make any changes.
2. If you did import `/core` etc. – then you have to change it to the import above(see 1.):
```js
import '@dnb/eufemia/style/core'
import '@dnb/eufemia/style/themes/ui'
```
3. If you did import the styles as CSS files, then you have to change it to the import above(see 1.):
```js
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'
```
4. If you did import `/basis`, `/components`, and `themes/ui` like so (commonly done in `EufemiaStyleImporter` files):
```js
import '@dnb/eufemia/style/basis'
import '@dnb/eufemia/style/components'
import '@dnb/eufemia/style/themes/ui'
```
Change to:
```js
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:
```js
```
To:
```js
```
1. Find references to `@dnb/eufemia/cjs/style/properties` and replace it with `@dnb/eufemia/cjs/style/themes/theme-ui/properties`.
From:
```js
```
To:
```js
```
1. 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](/uilib/usage/best-practices/for-testing/) 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 affected by the change:
1. [Avatar](/uilib/components/avatar).
1. [Badge](/uilib/components/badge).
1. [Breadcrumb](/uilib/components/breadcrumb).
1. [InfoCard](/uilib/components/info-card).
1. [Tag](/uilib/components/tag).
1. [Timeline](/uilib/components/timeline).
1. [Upload](/uilib/components/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:
```js
import exampleFont from '@dnb/eufemia/assets/fonts/exampleFont.woff2'
```
To:
```js
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
DNB browser assets (`assets/browser`) have been moved inside a subfolder: `assets/browser/dnb`.
Find references to `assets/browser` and replace it with `assets/browser/dnb`.
## Component changes
### [StepIndicator](/uilib/components/step-indicator)
1. Find the `active_item` property and replace it with `current_step`.
1. Find `use_navigation` and remove it or replace it with `mode="strict"` or `mode="loose"`.
1. URL support has been removed – so properties 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](/uilib/components/step-indicator/#stepindicator-with-a-router).
### [Table](/uilib/components/table)
1. Find the `sticky_offset` property and replace it with `stickyOffset`.
1. Find the `/elements/Table` property and replace it with `/components/Table`.
1. Alignment classes are removed (`.dnb-table--left`, `.dnb-table--right` and `.dnb-table--center`). Use the `align` attribute instead.
1. Font-sizing classes are removed (`.dnb-table--small` and `.dnb-table--x-small`). Use the `size` property instead.
1. Find and remove `Table.StickyHelper`.
1. 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'`.
1. `th` => `.dnb-table__th` or `import { Th } from '@dnb/eufemia'`.
1. `td` => `.dnb-table__td` or `import { Td } from '@dnb/eufemia'`.
### [Slider](/uilib/components/slider)
1. Find the `thump_title` property and replace it with `thumbTitle`.
1. Find the snake_case `add_title` property and replace it with `addTitle`.
1. Find the snake_case `subtract_title` property and replace it with `subtractTitle`.
1. Remove `@dnb/eufemia/components/slider/style/dnb-range.min.css` and use the Eufemia Slider component instead.
1. `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](/uilib/components/timeline)
1. Find the `name` property in your Timeline JSX syntax and replace it with `title`.
1. Find the `date` property in your Timeline JSX syntax and replace it with `subtitle`.
### [Anchor](/uilib/components/anchor)
The Anchor was moved from `/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'`.
1. 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](/uilib/components/button)
1. The padding of the `tertiary` button is removed. Please, check your application and add back the padding of `0.5rem` if needed.
1. The property `global_status_id` is deprecated, and replaced with the new `globalStatus` property. Read more about `globalStatus` [here](/uilib/components/global-status/properties/#configuration-object).
Find occurrences of `global_status_id`, like `global_status_id="my-id"`, and replace it with `globalStatus={{id: "my-id"}}`.
### [Pagination](/uilib/components/pagination) and [InfinityScroller](/uilib/components/pagination/infinity-scroller)
1. Replace the deprecated event return parameter `page` with `pageNumber`.
### [Tooltip](/uilib/components/tooltip)
1. Find the `target_element` property and replace it with `targetElement`.
1. Find the `target_selector` property and replace it with `targetSelector`.
1. Find the `fixed_position` property and replace it with `fixedPosition`.
1. Find the `skip_portal` property and replace it with `skipPortal`.
1. Find the `no_animation` property and replace it with `noAnimation`.
1. Find the `show_delay` property and replace it with `showDelay`.
1. Find the `hide_delay` property and replace it with `hideDelay`.
1. Find the `animate_position` property and remove it.
1. Find the `group` property and remove it.
### [Icon](/uilib/components/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](/uilib/components/modal), [Dialog](/uilib/components/dialog) and [Drawer](/uilib/components/drawer)
1. `closeButtonAttributes` of Modal, Dialog, and Drawer is deprecated and no longer supported.
2. Modal's `mode` property is now deprecated and removed.
In earlier versions, the `mode` property defaulted to `dialog`. So if you've used `<Modal />` without the `mode` property, which would default to `mode="dialog"`, please convert from `<Modal />` to `<Dialog />` as of v10.
`<Modal />` now(as of v10) behaves as `<Modal mode="custom" />` did in previous versions of eufemia.
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_*` properties are not supported for Drawer, use `triggerAttributes` instead to pass in properties for the trigger button.
- Change property `trigger_hidden` to `omitTriggerButton` to omit the default trigger button from Modal.
2. Only camelCase properties are supported for Drawer, so you will need to update the property names.
3. `Modal.Inner` or `Modal.Content` converts to `Drawer.Body`.
4. `Modal.Bar` converts to `Drawer.Navigation`.
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_*` properties are not supported for Dialog, use `triggerAttributes` instead to pass in properties for the trigger button.
- Change property `trigger_hidden` to `omitTriggerButton` to omit the default trigger button from Modal.
2. Only camelCase properties are supported for Dialog, so you will need to update the property names.
3. `Modal.Inner` or `Modal.Content` converts to `Dialog.Body`.
4. `Modal.Bar` converts to `Dialog.Navigation`.
5. `Modal` was a class component and `Dialog` is a functional component.
### [Lists](/uilib/elements/lists)
1. New **Definition List** layout direction: `direction="horizontal"` including `Dl.Item` [demo](/uilib/elements/lists/#definition-list-in-horizontal-direction).
### [InputMasked](/uilib/components/input-masked)
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](/uilib/components/form-status)
1. The FormStatus property `status` was renamed to `state`. Find the `status` property and replace it with `state`.
1. The property `global_status_id` is deprecated, and replaced with the new `globalStatus` property. Read more about `globalStatus` [here](/uilib/components/global-status/properties/#configuration-object).
Find occurrences of `global_status_id`, like `global_status_id="my-id"`, and replace it with `globalStatus={{id: "my-id"}}`.
### [Switch](/uilib/components/switch)
1. type `SwitchChecked` was removed. Use `boolean` instead.
1. The property `global_status_id` is deprecated, and replaced with the new `globalStatus` property. Read more about `globalStatus` [here](/uilib/components/global-status/properties/#configuration-object).
Find occurrences of `global_status_id`, like `global_status_id="my-id"`, and replace it with `globalStatus={{id: "my-id"}}`.
### [HelpButton](/uilib/components/help-button)
1. The properties `modal_props` and `modal_content` was removed. You may replace these properties with the new `render` property. See [this example](/uilib/components/help-button/properties/).
### [Autocomplete](/uilib/components/autocomplete)
1. The property `global_status_id` is deprecated, and replaced with the new `globalStatus` property. Read more about `globalStatus` [here](/uilib/components/global-status/properties/#configuration-object).
Find occurrences of `global_status_id`, like `global_status_id="my-id"`, and replace it with `globalStatus={{id: "my-id"}}`.
### [Checkbox](/uilib/components/checkbox)
1. The property `global_status_id` is deprecated, and replaced with the new `globalStatus` property. Read more about `globalStatus` [here](/uilib/components/global-status/properties/#configuration-object).
Find occurrences of `global_status_id`, like `global_status_id="my-id"`, and replace it with `globalStatus={{id: "my-id"}}`.
### [DatePicker](/uilib/components/date-picker)
1. The property `global_status_id` is deprecated, and replaced with the new `globalStatus` property. Read more about `globalStatus` [here](/uilib/components/global-status/properties/#configuration-object).
Find occurrences of `global_status_id`, like `global_status_id="my-id"`, and replace it with `globalStatus={{id: "my-id"}}`.
### [Dropdown](/uilib/components/dropdown)
1. The property `global_status_id` is deprecated, and replaced with the new `globalStatus` property. Read more about `globalStatus` [here](/uilib/components/global-status/properties/#configuration-object).
Find occurrences of `global_status_id`, like `global_status_id="my-id"`, and replace it with `globalStatus={{id: "my-id"}}`.
### [Input](/uilib/components/input)
1. The property `global_status_id` is deprecated, and replaced with the new `globalStatus` property. Read more about `globalStatus` [here](/uilib/components/global-status/properties/#configuration-object).
Find occurrences of `global_status_id`, like `global_status_id="my-id"`, and replace it with `globalStatus={{id: "my-id"}}`.
### [Radio](/uilib/components/radio)
1. The property `global_status_id` is deprecated, and replaced with the new `globalStatus` property. Read more about `globalStatus` [here](/uilib/components/global-status/properties/#configuration-object).
Find occurrences of `global_status_id`, like `global_status_id="my-id"`, and replace it with `globalStatus={{id: "my-id"}}`.
### [Textarea](/uilib/components/textarea)
1. The property `global_status_id` is deprecated, and replaced with the new `globalStatus` property. Read more about `globalStatus` [here](/uilib/components/global-status/properties/#configuration-object).
Find occurrences of `global_status_id`, like `global_status_id="my-id"`, and replace it with `globalStatus={{id: "my-id"}}`.
### [ToggleButton](/uilib/components/toggle-button)
1. The property `global_status_id` is deprecated, and replaced with the new `globalStatus` property. Read more about `globalStatus` [here](/uilib/components/global-status/properties/#configuration-object).
Find occurrences of `global_status_id`, like `global_status_id="my-id"`, and replace it with `globalStatus={{id: "my-id"}}`.
### [GlobalError](/uilib/components/global-error)
- Removed the `href`, `back`, `status_content` properties as well as the SVG illustrations.
## Element changes
### [Paragraph](/uilib/elements/paragraph/)
1. Removed `small` as property. Use `size="small"` instead.
2. Removed deprecated `style_type` property. Use `medium`, `bold` or `modifier` instead.
### [Img](/uilib/elements/image/)
Changed `img_class` property to be `imgClass`.
1. Find all instances of `img_class` and change it to `imgClass`
## Extension changes
### [PaymentCard](/uilib/extensions/payment-card/)
1. `PaymentCard`'s size(height & width), proportions, and unit(from `mm` to `px`) was changed.
1. `Type`'s `DNB` value/option `Metalic` was removed.
1. `Type`'s `Saga` value/option `VisaPlatinum` was removed.
1. `Type`'s `PB` value/option `Platinum` was removed.
1. `Type`'s `Mastercard` value/option `DefaultWhite` was removed.
1. `Type`'s `Mastercard` value/option `Metalic` was removed.
1. `Type`'s `Mastercard` value/option `BlackMetalic` was removed.
1. `Type`'s `Visa` value/option `Metalic` was removed.
1. `CardDesign`'s value/option `white` was removed. If used as a default design, consider replacing it with `defaultDesign`.
1. `CardDesign`'s value/option `silver` was removed.
1. `ProductType`'s value/option `BankAxept` was removed.
1. For better TypeScript support, import `CardType` from `/payment-card` instead of from `/payment-card/utils/Types`.
1. Find `import { CardType } from '@dnb/eufemia/extensions/payment-card/utils/Types'`, and replace with `import { CardType } from '@dnb/eufemia/extensions/payment-card'`
1. For better TypeScript support, import `ProductType` from `/payment-card` instead of from `/payment-card/utils/Types`.
1. Find `import { ProductType } from '@dnb/eufemia/extensions/payment-card/utils/Types'`, and replace with `import { ProductType } from '@dnb/eufemia/extensions/payment-card'`
_May, 31. 2023_