Skip to content

v7.2

New colors

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

New components

  • Skeleton to show the DNB skeleton preset. Skeletons are also built into every component and element.
  • ActionMenu – this menu is extended from the Dropdown.
  • Dropdown.HorizontalItem – to more easily place items content in a horizontal direction (same applies to Autocomplete.HorizontalItem).
  • PaymentCard – a component to imitate a physical payment card.
  • HelpButton – a help button with a custom semantic, helping screen readers determine the meaning of that button.

With the new HelpButton, 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 <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 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

New helper functions

  • useTranslation hook to consume your own translation strings.
  • InteractionInvalidation method – used by the Modal to invalidate everything outside of the modal to be accessible for keyboard and screen readers.
  • debounce method – used by AutoComplete to delay asynchronous typed searches.

Enhancements

  • DNB Medium font got an enhancement regarding readability on Windows.
  • DatePicker got an internal overhauling, new styles and an on_days_render render prop as well as on_type event because of the new UX. Now it is possible to invalidate a part of a in the input.
  • GlobalStatus got GlobalStatus.create to use instead of GlobalStatus.AddStatus and GlobalStatus.Set alongside with a an overall more stable internal architecture for live updated data and better height animation.
  • FormStatus now updates it's statuses and send it along to GlobalStatus.
  • Modal & Drawer new UX styles and props like spacing and an helper wrapper called Modal.Inner.
  • Tabs do not wrap anymore in mobile view (< 40em), but will rather be scrollable with helper buttons for navigation.
  • Slider got a new prop 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 got a separate show/hide password component.

Install

To upgrade to v7 with NPM, use:

$ npm i dnb-ui-lib@7

November, 8. 2020