# Migration guideline Component library version 4.x -> 5.0

## Breaking features:

| OLD                        | NEW                                   | Description                                                                                                           |
| -------------------------- | ------------------------------------- | --------------------------------------------------------------------------------------------------------------------- |
| borderRadius="elliptical"  | borderRadius="rounded"                | We removed `borderRadius = "elliptical"`. Use `borderRadius="rounded"` instead                                        |
| AccordionContent           | Deprecated                            | No need for AccordionContent wrapper for Accordion's children anymore. Just pass wanted content straight to Accordion |
| Tooltip placement renaming | [See migration notes below](#tooltip) |                                                                                                                       |

### <a id="tootip"></a> Tooltip

Some of tooltip's placement props got renamed for better readability.

| OLD                                  | NEW                                    |
| ------------------------------------ | -------------------------------------- |
| `<Tooltip placement="top"/>`         | `<Tooltip placement="topCenter" />`    |
| `<Tooltip placement="bottom"/>`      | `<Tooltip placement="bottomCenter" />` |
| `<Tooltip placement="topLeft"/>`     | `<Tooltip placement="topStart" />`     |
| `<Tooltip placement="topRight"/>`    | `<Tooltip placement="topEnd" />`       |
| `<Tooltip placement="bottomLeft"/>`  | `<Tooltip placement="bottomStart" />`  |
| `<Tooltip placement="bottomRight"/>` | `<Tooltip placement="bottomEnd" />`    |

Placement options `right` and `left` stayed same.

## Breaking components:

| OLD                                 | NEW                                                           | Description                                                                                                                    |
| ----------------------------------- | ------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
| `<IconLink/>`                       | Deprecated                                                    |                                                                                                                                |
| `<TileBag/>`                        | Deprecated                                                    |                                                                                                                                |
| `<ComponentArray/>`                 | Deprecated                                                    |                                                                                                                                |
| `<Quantity />`                      | `<QuantitySelector />`                                        | Quantity was renamed into QuantitySelector. Component API stayed the same                                                      |
| `<HeroBanner/>`                     | `<HeroBannerLayout />`                                        | HeroBanner was deprecated. Use HeroBannerLayout instead, it's quite similar.                                                   |
| `<DynamicHtml/>`                    | Deprecated                                                    |                                                                                                                                |
| `<NavigationDropdown/>`             | Deprecated                                                    |                                                                                                                                |
| `<DefinitionList/>`                 | Deprecated                                                    |                                                                                                                                |
| `<ErrorMessage>text</ErrorMessage>` | `<InlineNotification text="text" variant="warning"/>`         |                                                                                                                                |
| `<Label/>`                          | `<label> or <Element tagName="label">`                        |                                                                                                                                |
| `<Li/>`                             | `<li> or <Element tagName="li">`                              |                                                                                                                                |
| `<Ul/>`                             | `<ul> or <Element tagName="ul">`                              |                                                                                                                                |
| `<Ol/>`                             | `<ol> or <Element tagName="ol">`                              |                                                                                                                                |
| `<Th/>`                             | `<th> or <Element tagName="th">`                              |                                                                                                                                |
| `<Td/>`                             | `<td> or <Element tagName="td">`                              |                                                                                                                                |
| `<Form/>`                           | `<form>` with event.preventDefault() functionality                                                     |                                                                                                                                |
| `<ImageAndContentSplit/>`           | Deprecated                                                    |                                                                                                                                |
| `<GenericTable />`                  | Deprecated                                                    | `Table` component got deprecated and `GenericTable` is renamed to `Table`. Functionality of `GenericTable` stayed same.        |
| `<GenericTable />`                  | `<Table />`                                                   |                                                                                                                                |
|                                     | `<Table.MobileHeadingCell />`                                 | `Table.MobileHeadingCell` subcomponent is added to support mobile styles which wasn't the part of `(Generic)Table` previously. |
| `<RadioButtonGroup>`                | Array of RadioButtons separated with a `<Gutter size="sm" />` |                                                                                                                                |
| `<AutoComplete />`                  | [See migration guidelines below](#optionListComps)            |                                                                                                                                |
| `<Dropdown />`                      | [See migration guidelines below](#optionListComps)            |                                                                                                                                |
| `<Combobox />`                      | [See migration guidelines below](#optionListComps)            |                                                                                                                                |
| `<PhoneNumberInput />`              | [See migration guidelines below](#optionListComps)            |                                                                                                                                |
| `<OptionList />`                    | [See migration guidelines below](#optionListComps)            |                                                                                                                                |

### <a id="optionListComps"></a>Autocomplete, Dropdown, PhoneNumberInput and OptionList API change

OptionList options consist now on objects which have `value` and `label`, where the `label` is the visible label shown in the opening list and `value` being the unique definer. This change effects on Autocomplete, Dropdown and PhoneNumberInput.

The Dropdown and PhoneNumberInput got another API change as well. Previously they were expecting to receive a `value` or `countryCodeValue` to indicate the selected option. Now they are expecting to receive the whole selected object so either `selectedOption` (Dropdown) or `selectedCountryCode`. They also now return the whole selected object back when user selects an item from the list, instead of the previous selected value.

PhoneNumberInput was previously calling `onCountryCodeChange` when the component mounted first time and there was an initial country value added. This behaviour is now removed and `onCountryCodeChange` is triggered only when user interacts with the dropdown.

| Component            | Old Props                                                                            | New props                                                                                                                                                                                                                                                                     |
| -------------------- | ------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Autocomplete**     | `options: [{`<br/>`value: 'visible in the list',`<br/> `id: 'unique value'`<br/>`}]` | `options: [{`<br/>`label: 'visible in the list',`<br/>`value: 'unique value'`<br/>`}]`                                                                                                                                                                                        |
| **Dropdown**         | `options: [{`<br/>`value: 'visible in the list',`<br/> `id: 'unique value'`<br/>`}]` | `options: [{` <br/>`label: 'visible in the list',` <br/>`value: 'unique value'` <br/>`}]`                                                                                                                                                                                     |
|                      | `value: selected value`                                                              | `selectedOption: {`<br/>`label: 'The whole selected option as an object',`<br/>`value: 'unique value',`<br/>`disabled`<br/>`}`                                                                                                                                                |
|                      | `countryCodeValue: selected value`                                                   | `selectedCountryCode: {`<br/>`label: 'The whole selected option as an object',`<br/>`value: 'unique value',`<br/>`disabled`<br/>`}`                                                                                                                                           |
|                      | `onChange(value))`<br/>value = selected value as a string                            | `onChange(option, e)`<br/>Returns selected option as an object and native HTML event <br/>`= {`<br/>`label: 'The whole selected option as an object',`<br/>`value: 'unique value', disabled`<br/>`}, event`                                                                   |
| **PhoneNumberInput** | `countryCodes: [{` <br/>`countryName: '',`<br/>`id: '',`<br/>`code: ''` <br/>`}]`    | `countryCodes: [{` <br/>`countryName: '',`<br/>`value: '',` <br/>`code: ''` <br/>`}]`                                                                                                                                                                                         |
|                      | `countryCodeValue: selected value`                                                   | `selectedCountryCode: {`<br/>`label: 'The whole selected option as an object',`<br/>`value: 'unique value', disabled`<br/>`}`                                                                                                                                                 |
|                      | `onCountryCodeChange(value))`<br/>value = selected value as a string                 | `onCountryCodeChange(option, e)`<br/>Returns selected option as an object and native HTML event <br/>`= {`<br/>`label: 'The whole selected option as an object',`<br/>`value: 'unique value', disabled`<br/>`}, event`                                                        |
|                      | `onCountryCodeChange()`                                                              | Previously onCountryCodeChange was triggered when the component mounted first time if there was an initial country value added for the PhoneNumberInput. Now the function is triggered only when user interacts with the dropdown.                                            |
| **Combobox**         | `options: [{`<br/>`value: 'visible in the list',`<br/> `id: 'unique value'`<br/>`}]` | `options: [{` <br/>`label: 'visible in the list',` <br/>`value: 'unique value'` <br/>`}]`                                                                                                                                                                                     |
|                      | `onChange(value)`<br/>value = selected value as a string                             | Returns now value and native HTML event<br/>`onChange(value, e)`                                                                                                                                                                                                              |
|                      | New callback                                                                         | Triggered when user selects option from the list <br/>`onOptionSelect(option, e)`<br/>Returns selected option as an object and native HTML event <br/>`option= {`<br/>`label: 'The whole selected option as an object',`<br/>`value: 'unique value', disabled`<br/>`}, event` |
| **OptionList**       | `options: [ { value: 'visible in the list', id: 'unique value'}]`                    | `options: [{`<br/>`label: 'visible in the list',`<br/>`value: 'unique value'`<br/>`}]`                                                                                                                                                                                        |