Skip to content
Home

v4.10

Since last release info

  • Dropdown got several new properties like prevent_selection (Popup Menu), size (small), align_options (right) and more_menu. For the more_menu, have a look at the Demos and also take a look on Popup Menu.
  • DatePicker is now using v2 of date-fns and with this more east to translate to English (including new props submit_button_text and cancel_button_text), as Norwegian (nb) is the default locale. But also align_picker is a nice feature to have.
  • Also mostly every "from" component now supports HTML data-* attributes in event returns.

GlobalStatus

This component is made to be used for mainly three UX situations:

  • Global application error messages
  • User-generated error messages
  • User input correction advices

The component has to be placed directly under a header bar (UX principles). From there it will expand / slide down once a message is appearing.

Every "form" component, like Input will automatically connect and update the GlobalStatus once an error status is show to the form component:

import { Input } from 'dnb-ui-lib/components'


// 1. Place it under the header bar
<GlobalStatus />


// 2. Else where in your app - input with error status
<Input label="My Input" status="Error message" />

But you can also manually update / show as many messages as you want:

import { GlobalStatus } from 'dnb-ui-lib/components'


// 1. Place it under the header bar
<GlobalStatus />


// 2. Else where in you app and later on, you can show a message
<GlobalStatus.Add
  status_id="custom-id-1"
  title="New title"
  text="First long info text ..."
  item="Item from status #1"
/>


// 3. and remove it again whenever you want
<GlobalStatus.Remove status_id="custom-id-1" />

Install

To upgrade to v4.10 with NPM, use:

$ npm i dnb-ui-lib@4.10


# In case the NPM mirroring is not up to date
$ npm i https://github.com/dnbexperience/eufemia/releases/download/v4.10.0/dnb-ui-lib-4.10.0.tgz

August, 24. 2019