#v7

• Migration
• New components
• New icons
• New features
• Font fixes
• How to Install

#Migration

v7 contains a couple of breaking changes. As a migration process, you can simply search and replace:

1. Find sea-green-alt-30 and replace it with sea-green-30
2. Find sea-green-alt and replace it with sea-green
3. Find #B3DADA and replace it with #B3D5D5
4. Find #008484 and replace it with #007272
5. Find ['data-is-touch'] and replace it with [data-whatintent='touch']
6. Find isIE11 and replace it with IS_IE11
7. Find isEdge and replace it with IS_EDGE
8. Find dnb-h1--small and replace it with dnb-h--x-large
9. Find dnb-h1 and replace it with dnb-h--xx-large
10. Find dnb-h2 and replace it with dnb-h--large
11. Find dnb-h3 and replace it with dnb-h--medium
12. Find dnb-h4 and replace it with dnb-h--basis
13. Find dnb-h5 and replace it with dnb-h--small
14. Find dnb-h6 and replace it with dnb-h--x-small
15. Find prevent_selection and replace it with more_menu (you may have to define a different icon as well)
16. If you used style_type, like <H1 style_type="small"> before, use rather <H1 size="x-large"> and the same applies to <P style_type="small">, so use the modifier prop here <P modifier="small">
17. For UMD usage only find dnb-ui-lib.min.js replace it with dnb-ui-web-components.min.js
18. The Anchor (Text link) has now also the default font-size of 18px (basis) - this means, you may have places where you would rather inherit the font-size by: .dnb-anchor { font-size: inherit; }
19. New strings where added to the language files nb-NO.js and en-US.js. If you have a customized localization (changes or addition), then make sure you maintain these new groups of strings:
    • Autocomplete
    • Pagination
    • ProgressIndicator
    • StepIndicator
20. The Dropdown uses now by default React Portal. This can have negative effects on scrollable views. Therefore, use the new ScrollView fragment as the scrollable element.
21. For a custom Dropdown list width .dnb-dropdown__list, use .dnb-dropdown .dnb-drawer-list__root instead.
22. All events called on_state_update are now deprecated and will be removed in a future major version.
23. The property default_state in Checkbox and Switch is now deprecated and will be removed in a future major version.

#Heading changes

The new naming of h1, h2, etc. is to make it more clear that semantic use of headings don't have to do anything the actual styling. Developers still too often don't care about the correct leveling of headings, because of the visual prioritization.

We hope with that change we embrace better accessibility.

#New components

• Heading component to automated semantic headings.
• Autocomplete component.
• Pagination component including infinity scroller.
• New element Horizontal Rule (Hr), called hr-line in Figma.
• New fragment ScrollView, used in Modal to fulfill the new Portal mode in the DrawerList scroll dependency inside of a Modal / Drawer.

#New features

• Icons inside of Input fields.
• Number got more useful properties, like decimals="0" and currency_position="after" and also a neat copy & paste feature, where a unformatted number gets copied, instead of the visual number. Also, Norwegian organization numbers (org) are now supported.
• Buttons now supports overflow text to wrap (break-word) by using wrap="true".
• Modal has now a Drawer mode inside the Modal component mode="drawer".
• Also, the Modal has now a dark background color and both open and close animation
• Expose new helper functions like, isSafari, isiOS, isMac, isWin and isLinux (beside isIE11,isEdge) in the shared helpers file: import { isLinux } from 'dnb-ui-lib/shared/helpers'. They are available as constants as well: IS_IE11, IS_EDGE, IS_IOS, IS_MAC, IS_WIN and IS_LINUX.

<Dropdown
  data={{
    a: 'AA',
    b: 'BB',
  }}
/>

• Dropdown now also works fine inside of a Modal, taking the height of the Modal as the viewport reference.
• ESM (mjs) bundles to load directly in to modern browsers.

#Table (new features)

• Sticky Table header.
• Sortable table header buttons supports now word-wrap by using wrap="true".
• Table headers supports now small font-size (.dnb-table--small) as well as right and center aligned headers.

#New icons

• New secondary icons: pay_from, transfer_to

#Font fixes

• The DNB Font got updates on the bold weight. The changes affect these characters: i?!.

#Install

To upgrade to v7 with NPM, use:

$ npm i dnb-ui-lib@7

June, 4. 2020