#v7.2

• New colors
• New components
• New elements
• New helper functions
• How to Install

#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 property 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 properties 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 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 got a separate show/hide password component.

#Install

To upgrade to v7 with NPM, use:

$ npm i dnb-ui-lib@7

November, 8. 2020