# Migration guideline Component library version 3.x -> 4.0

## Breaking components:

### Inputs

Inputs don't have wrapper components such as `<EmailInput/>, <PasswordInput/>` etc anymore, one should use type prop such as `<Input type="email"/>` and `<Input type="password"/>` instead. Inputs support custom id, name and classname from now on. Some inputs can be disabled, confirmed, required or support error message. Additionally, you can add a custom icon with custom color to basic type of inputs. Check the input specific API in Storybook.

| OLD                              | NEW                         |
| -------------------------------- | --------------------------- |
| `<EmailInput/>`                  | `<Input type="email" />`    |
| `<PasswordInput/>`               | `<Input type="password" />` |
| `<PhoneNumberInput/>`            | `<Input type="tel" />`      |
| `<PhoneNumberInput/>`            | `<PhoneNumberInput />`      |
| `<TextInput/>`                   | `<Input type="text" />`     |
| `<TextInput multiline={true} />` | `<TextArea />`              |
| `<SelectInput />`                | `<Dropdown />`              |
| `<SearchInput />`                | `<SearchInput />`           |
| `<DatePicker />`                 | `<DatePicker />`            |
| `<AutoComplete />`               | `<AutoComplete />`          |
| `<AutoCompleteContainer />`      | Deprecated                  |
| `<Dropdown />`                   | `<NavigationDropdown />`    |

### Dropdown vs. SelectInput

We did some renaming related to our dropdowntype of elements. We decided to call our `SelectInput` is now called as `Dropdown`. Check the new API in Storybook. Also our old `Dropdown` component got a new name `NavigationDropdown`, in this case the API remained the same.

| OLD               | NEW                      |
| ----------------- | ------------------------ |
| `<SelectInput />` | `<Dropdown />`           | x |
| `<Dropdown />`    | `<NavigationDropdown />` |

### Buttons

Buttons got new variant names and new styles. Possibility of having the icon on the right side of the button is deprecated, icon can be attached only to `variant="primary"` button. There is no 'enabled' prop anymore, use 'disabled' prop instead. Also, buttons don't take all available width in mobile view anymore by default, if you want to enable this behavior send `expandWhenMobile` prop. Check buttons overview page in the Storybook for more info.

| Deprecated feature      | Replacement                      |
| ----------------------- | -------------------------------- |
| variant="purple"        | variant="primary"                |
| variant="green"         | variant="purchase"               |
| variant="purple-border" | variant="secondary"              |
| `<PrimaryButton />`     | `<Button variant="primary" />`   |
| `<SecondaryButton />`   | `<Button variant="secondary" />` |
| `<PurchaseButton />`    | `<Button variant="purchase" />`  |
| variant="black-border"  | DEPRECATED                       |
| variant="green-border"  | DEPRECATED                       |
| iconleft                | DEPRECATED                       |
| enabled                 | DEPRECATED                       |

### Quantity

`allowDecreseToZero` prop has been removed. If you want to allow Quantity selector to decrease to the zero, you can send `minValue = 0` as a prop to the component. Otherwise, minValue is 1 by default. Quantity component has own size now and does not take all available width anymore.

| Deprecated feature  | Replacement  |
| ------------------- | ------------ |
| allowDecreaseToZero | minValue = 0 |

### Title

Size "xxs" has been removed. Don't use it, it's way too small for title!

### Loader

Loader size names have been changed. Actual sizes are the same.

| Deprecated feature | Replacement |
| ------------------ | ----------- |
| size="sm"          | size="md"   |
| size="xs"          | size="sm"   |

### Modal

Modal has been updated and renamed into ModalDialog. Clicking/tapping outside the ModalDialog, pressing Esc on the keyboard and/or click on close button fires `onCloseClick` callback. Clicking accept button fires `onAcceptClick` callback. If `closeButtonText` or `acceptButtonText` aren't passed, buttons won't be rendered. ModalDialog disables focus and scroll of its background. This component accepts children as props.

| Deprecated feature     | Replacement                                              |
| ---------------------- | -------------------------------------------------------- |
| `<Modal/>`             | `<ModalDialog/>`                                         |
| `<Modal text="test"/>` | `<ModalDialog><BodyText>`test`<BodyText/><ModalDialog/>` |

### ProfileDropdown

ProfileDropdown is deprecated and replaced with **UserDropdown**, which has the new UI and slightly modifed API. See the documentation in Storybook.

| Deprecated feature   | Replacement       |
| -------------------- | ----------------- |
| `<ProfileDropdown/>` | `<UserDropdown/>` |

### Image

Image was renamed into BackgroundImage. Behaviour is the same.