# Migration guideline Component library version 6.x -> 7.0

## Breaking components:

### PageSelector

`<PageSelector/>` default wrapper changed from `div` to `nav` to improve its semantics. Users are still able to override it, if necessarily

### Divider

`<Divider/>` is not centered horizontally by default anymore to avoid breaking layout in some cases. It's a visual breaking change.

### Navigation

`<Navigation/>` API has changed a bit. `loggedIn` prop was renamed into `userMenu`. Additionally `loggedIn.loggedIntoLinkLabel` and `loggedIn.loggedIntoLinkPath` was substituted with `userMenu.UserMenuLinks` array of object allowing user to path multiple links.

| OLD                                                                                  | NEW                                                                              |
| ------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------- |
| `<Navigation loggedIn={loggedIntoLink: 'linkName', loggetIntoLinkPath: 'linkPath}/>` | `<Navigation userMenu={userMenuLinks: [{label: 'linkName, link: 'linkPath'}]}/>` |

Divider is not centered horizontally by default anymore to avoid breaking layout in some cases. It's a visual breaking change.

### Card

Old `<Card/>` component got deprecated, please use new `<ProductCard/>` component. You can find guidelines about the usage of the new component in the [Storybook](https://react.styleguide.telia.fi/?path=/story/molecules-productcard--guidelines).

### Checkbox

Backwards compability alias `CheckboxAttributes` for `<Checkbox/>` prop types has been removed. You can use component to access prop types.

| OLD                                                                   | NEW                                                                |
| --------------------------------------------------------------------- | ------------------------------------------------------------------ |
| `import { CheckboxAttributes } from "telia-react-component-library";` | `type CheckboxAttributes = React.ComponentProps<typeof Checkbox>;` |


### Radiobutton

Before this release `<Radiobutton />` added `disabled` attribute to input element, also when `readOnly` was true. After this change your HTML form will submit value if readOnly is set to true. If you hope not to send value on submit in future, please use `disabled` prop instead.

Using both `readOnly` and `disabled` props is discouraged. This is against accessibility.

### TextButton

TextButton has now been removed from library. Please use `<Button/>` component with text variant. When adding font styling, please use `textVariantProps` prop to add font styling.

| OLD                                                                                                  | NEW                                                                                                                                     |
| ---------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
| `<TextButton color="purpleCore" fontWeight="bold" hoverColor="purpleCoreLight">Content</TextButton>` | `<Button variant="text" textVariantProps={{ color: 'purpleCore', fontWeight: 'bold', hoverColor: 'purpleCoreLight' }}>Content</Button>` |


### BodyText
`BodyText` use to wrap contents in `span` element. To make it semantically correct, `BodyText` now wraps contents in `p` element. Since the paragraph element is a block level element, it can break the layout. Pass explicitly `<BodyText tagName="span" >` in order to fix layout.

| Old                                          | New                                                       |
| -------------------------------------------- | --------------------------------------------------------- |
| `<BodyText />` component renders `<span>` tag   | `<BodyText />` component renders `<p>` tag.     |


 

### Harmonizing event handler onChange

Harmonizing event handler onChange support for all input elements to (event, value) or (event, option) - format, depending on datatype that is passed in. Following components are affected on this change.

| OLD                                 | NEW                                   |
| ----------------------------------- | ------------------------------------- |
| `<Autocomplete onChange={(option, event)=>{}} onOptionSelect={(option, event)=>{}}/>`   | `<Autocomplete onChange={(event, option)=>{}} onOptionSelect={(event, option)=>{}}/>`   |
| `<Checkbox onChange={(checked)=>{}}/>` | `<Checkbox onChange={(event, checked)=>{}} />` |
| `<RadioButton onChange={()=>{}}/>` | `<RadioButton onChange={(event, checked)=>{}} />` |
| `<Combobox onChange={(value, event)=>{}}/>` | `<Combobox onChange={(event, value)=>{}} />` |
| `<Dropdown onChange={(option, event)=>{}} />` | `<Dropdown onChange={(event, option)=>{}} />` |
| `<DropdownMultiselect onChange={(option, event)=>{}} />` | `<DropdownMultiselect onChange={(event, option)=>{}} />` |
| `<FileUploader onChange={(files)=>{}}/>` | `<FileUploader onChange={(event, files)=>{}} />` |
| `<OptionList optionOnClick={(option, event)=>{}} />` | `<OptionList optionOnClick={(event, option)=>{}} />` |
| `<PhoneNumberInput onCountryCodeChange={(value, event)=>{}} onNumberChange={(option, event)=>{}}/>`   | `<PhoneNumberInput onCountryCodeChange={(event, value)=>{}} onNumberChange={(event, option)=>{}}/>`   |
| `<QuantitySelector onInputChange={(value)=>{}}/>` | `<QuantitySelector onInputChange={(event, value)=>{}} />` |
| `<SearchInputWithScope onSearchChange={(value, event)=>{}} onScopeChange={(option, event)=>{}} onSearchOptionSelect={(option, event)=>{}}/>` | `<SearchInputWithScope onSearchChange={(event, value)=>{}} onScopeChange={(event, option)=>{}} onSearchOptionSelect={(event, option)=>{}}/>` |
| `<Input onChange={(event)=>{}}/>` | `<Input onChange={(event, value)=>{}} />` |
| `<TextArea onChange={(event)=>{}}/>` | `<TextArea onChange={(event, value)=>{}} />` |