# Migration guideline Component library version 5.x -> 6.0

## Changing the Bundler and refactoring the Icons

### Bundler from Webpack to Rollup

We switched our bundler tool from Webpack to Rollup in order to support treeshakable bundle. Now you can treeshake away the components which you are not using in your app.

The bundle should work as it used to and no actions are required from you. If you want to configure the treeshaking in your project, our bundle supports it now. Styles are still imported as one file as before.

We will continue optimizing our package still. We also removed big chunk of unused icons which hopefully reduced the bundle size.

### Icon refactoring

We refactored Icon component, but kept the same API as before. **We still recommend you to pay extra attention to the Icons in your application** because we added a wrapping `<Div>` around each icon and that additional `<Div>` might cause some side effects in custom icon styles for example in paddings.

We also removed a chunk of old unused icons. See the full list [below](#icons).

## Breaking components:

### SearchInput

Label has been removed from SearchInput component. If space which label took is still needed for alignin inputs, please use `showCustomLabel` prop. Setting prop to false makes input to still have label space.

### Breadcrumb

Breadcrumb has a new improved API. Instead of passing Breadcrumb.Items as a list of react nodes, one should send a list of objects using `items` props of `<Breadcrumb/>`. Breadcrumb items have onClick events and full keyboard support and truncation behaviour. More information is available in the storybook. Breadcrumb.Item is removed.

| OLD                                                                  | NEW                                               |
| -------------------------------------------------------------------- | ------------------------------------------------- |
| `<Breadcrumb> <Breadcrumb.Item /> <Breadcrumb.Item /> </Breadcrumb>` | `<Breadcrumb items=[{label, onClick, value ...}]` |

### Headline

We changed the naming of size `xl` to `xlg`, so it corresponds to the library naming convention.

| OLD                     | NEW                       |
| ----------------------- | ------------------------- |
| `<Headline size="xl"/>` | `<Headline size="xlg" />` |

### Page padding

We removed default vertical padding from Page component. If you need vertical padding on top and bottom of your Page, you can add it with `<Page padding = { vertical: 'lg' }/>`.

### SelectionButtonGroup

Options given to the SelectionButtonGroup now follow the same props as SelectionButton. We changed the previous `SelectionButtonGroup.options.node` to be `SelectionButtonGroup.options.children`.

| OLD                                                                              | NEW                                                                                  |
| -------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------ |
| `options: [{ ..., node: PropTypes.oneOfType([PropTypes.func, PropTypes.node])}]` | `options: [{ ..., children: PropTypes.oneOfType([PropTypes.func, PropTypes.node])}]` |

### Buttons

We changed the naming of buttons for the dark background.

| OLD                                 | NEW                                   |
| ----------------------------------- | ------------------------------------- |
| `<Button variant="primaryDark"/>`   | `<Button variant="primaryWhite" />`   |
| `<Button variant="secondaryDark"/>` | `<Button variant="secondaryWhite" />` |

### <a id="icons"></a> Icon renaming and removal

We renamed following icons

| OLD              | NEW            |
| ---------------- | -------------- |
| `cost-control-2` | `cost-control` |
| `server-2`       | `server`       |
| `invoice-1`      | `invoice`      |

and **removed** following icons

| OLD                      | REMOVED |
| ------------------------ | ------- |
| business-intelligence    | -       |
| chat-app                 | -       |
| cost-control             | -       |
| cpe                      | -       |
| default-image            | -       |
| doc                      | -       |
| edge-router              | -       |
| five                     | -       |
| folder                   | -       |
| health-services          | -       |
| imei                     | -       |
| inactivity-alarm         | -       |
| inventory-status-1       | -       |
| inventory-status-2       | -       |
| inventory-status-3       | -       |
| invoice-2                | -       |
| invoice-3                | -       |
| jpg                      | -       |
| manage-users             | -       |
| my-organization-invoices | -       |
| money-back               | -       |
| new-address-book         | -       |
| new-folder               | -       |
| norway-net-signal        | -       |
| org-chart                | -       |
| pause                    | -       |
| pdf                      | -       |
| phone-setting            | -       |
| peering-01               | -       |
| peering-02               | -       |
| peering-03               | -       |
| play-1                   | -       |
| plus-and-minus           | -       |
| png                      | -       |
| ppt                      | -       |
| queue                    | -       |
| radio                    | -       |
| rename-folder            | -       |
| resize                   | -       |
| restaraunt               | -       |
| reverse                  | -       |
| roaming                  | -       |
| rss                      | -       |
| services-app             | -       |
| server-1                 | -       |
| server-3                 | -       |
| send                     | -       |
| silent                   | -       |
| six                      | -       |
| skip-backward            | -       |
| skip-forward             | -       |
| snowflake                | -       |
| speed                    | -       |
| stop                     | -       |
| telia-health             | -       |
| transfer                 | -       |
| upload                   | -       |
| vcard-download           | -       |
| voicemail-play           | -       |
| weight                   | -       |