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

list elements as React components – 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 elements to support more easily the Skeleton provider.

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

#v7.2

#New colors

#New components

#Updates to the language files

#New elements

#New helper functions

#Enhancements

#Install