@dnb/eufemia/docs/uilib/about-the-lib/releases/dnb-ui-lib/v7.2-info.md

DNB Eufemia Design System UI Library

---
title: 'v7.2'
description: 'November, 8. 2020'
version: 11.8.2
generatedAt: 2026-07-03T14:39:18.353Z
checksum: 090b7d977ba4be5e2c4c04d199a30a4048416c59f443a56985df2f80629d9c40
---

# v7.2

- [New colors](#new-colors)
- [New components](#new-components)
- [New elements](#new-elements)
- [New helper functions](#new-helper-functions)
- [How to Install](#install)

### New colors

```css
/* New */
color: var(--color-black-55);
color: var(--color-black-20);
color: var(--color-black-8);
color: var(--color-black-3);
```

## New components

- [Skeleton](/uilib/components/skeleton) to show the DNB skeleton preset. Skeletons are also built into every component and element.
- [ActionMenu](/uilib/components/dropdown/demos#actionmenu) – this menu is extended from the Dropdown.
- [Dropdown.HorizontalItem](/uilib/components/dropdown/demos#dropdown-with-different-item-content-directions) – to more easily place items content in a horizontal direction (same applies to `Autocomplete.HorizontalItem`).
- [PaymentCard](/uilib/extensions/payment-card) – a component to imitate a physical payment card.
- [HelpButton](/uilib/components/help-button) – a help button with a custom semantic, helping screen readers determine the meaning of that button.

With the new [HelpButton](/uilib/components/help-button), you can simply use it like you used to with the Modal.

```
<Input
    label="Input"
    placeholder="Placeholder ..."
    suffix={<HelpButton>Help text</HelpButton>}
/>
```

**NB:** Use the new `trigger_attributes` to send along HTML attributes, if you still use the [Modal/Drawer](/uilib/components/modal) `<Modal trigger_attributes={{ 'aria-label': }} ...`.

### Updates to the language files

The new default locale for English is: `en-GB` – but will be backward compatible to `en-US`.

Strings were changed/removed and added to the [language files](/uilib/usage/customisation/localization) `nb-NO.js` and `en-GB.js`:

- Skeleton (added)
- HelpButton (added)
- Slider (added)
- Input (added)
- GlobalStatus (updated string `Gå til %s` / `Go to %s`)
- Modal (removed string `more_info`)

## New elements

- [list elements as React components](/uilib/elements/lists) – `Li`, `Dt` and `Dd`. **Ol Lists** do now also support the `type` HTML attribute in order to use like _letters_ and _roman numerals_.
- [Image, span and div](/uilib/elements) elements to support more easily the [Skeleton](/uilib/components/skeleton) provider.

## New helper functions

- [useTranslation](/uilib/usage/customisation/localization#provide-your-own-translations) hook to consume your own translation strings.
- [InteractionInvalidation](/uilib/helpers/functions) method – used by the Modal to invalidate everything outside of the modal to be accessible for keyboard and screen readers.
- [debounce](/uilib/helpers/functions) method – used by AutoComplete to delay asynchronous typed searches.

## Enhancements

- **DNB Medium** font got an enhancement regarding readability on Windows.
- [DatePicker](/uilib/components/date-picker) got an internal overhauling, new styles and an `on_days_render` render property as well as `on_type` event because of the new UX. Now it is possible to invalidate a part of a date in the input.
- [GlobalStatus](/uilib/components/global-status) got `GlobalStatus.create` to use instead of `GlobalStatus.AddStatus` and `GlobalStatus.Set` alongside with an overall more stable internal architecture for live updated data and better height animation.
- [FormStatus](/uilib/components/form-status) now updates its statuses and sends it along to [GlobalStatus](/uilib/components/global-status).
- [Modal & Drawer](/uilib/components/modal) new UX styles and properties like `spacing` and a helper wrapper called `Modal.Inner`.
- [Tabs](/uilib/components/tabs) do not wrap anymore in mobile view (`< 40em`), but will rather be scrollable with helper buttons for navigation.
- [Slider](/uilib/components/slider) got a new property `number_format`. This let's you define the values of the slider to be formatted a given way (`number_format={{ currency: true, decimals: 0 }}`).
- [InputPassword](/uilib/components/input#input-password-type) got a separate show/hide password component.

## Install

To upgrade to v7 with NPM, use:

```bash
$ npm i dnb-ui-lib@7
```

_November, 8. 2020_