#v4

All the major edge cases as listed below:

• Component wrappers (major change)
• Dropdown event handling (major change)
• Switch label position (minor change)
• Layout/Spacing components (new)
• How to Install

#Component wrappers

Every component that provides a label property is now wrapping the FormLabel inside itself.

Note: This is not a breaking change, but if You have made CSS styling to the component, then this can cause some issues.

To select and change the component inside with CSS, You can use now the *__inner wrapper. But - for sure, it depends on Your customization made with v3.

Before (v3):

<Input label="Label" className="my-input" />

// Will result in:
<label>Label</label>
<span class="dnb-input my-input">
  <input class="dnb-input__input" />
  ...
</span>

After (v4):

<Input label="Label" className="my-input" />

// Will result in:
<span class="dnb-input my-input">
  <label>Label</label>
  <span class="dnb-input__inner">
    <input class="dnb-input__input" />
    ...
  </span>
</span>

#Dropdown event handling

Did You use on_select before? Then make sure You double-check that You really want on_select. In most cases, You will only need on_change. Read more about the difference between on_change and on_select.

#Switch label position

Now the Switch component has right as the default label_position in contrast to what it was in v3. The reason is to make it consistent with both the Radio button and the Checkbox.

#Layout and Spacing

Spacing is an important part of Eufemia, that's why there are now three new helper components to make it easy and fast to build forms and layouts with proper spacing.

• FormSet provides by default the <form> tag and sends some FormRow properties along down.
• FormRow provides by default the <fieldset> tag and <legend> tag. FormRow is meant to help You achieve easily common DNB layout patterns and setups. Also, FormRow is supporting the Spacing component.
• Space is made to achieve the Eufemia spacing patterns. In other words; margin within the provided spacing blocks.

#Components and Spacing

In v4, all components have the properties top, right, bottom and left available to define spacing directly.

E.g. this right="small" will give You a spacing of 8rem to the left side.

<Input label="My Input" right="small" />

#Install

To upgrade to v4 with NPM, use:

$ npm i dnb-ui-lib@4

July, 21. 2019