# Migration guideline Component library version 8.x -> 9.0

This breaking release concerns only projects using `telia-react-component-library` package.

## GrowlNotification

Prop `variant`'s `alert` option is now `error`.

| OLD                                     | NEW                                     |
| --------------------------------------- | --------------------------------------- |
| `<GrowlNotification variant="alert" />` | `<GrowlNotification variant="error" />` |

## InlineNotification

Prop `hasGreyBackground` is removed. Before this property was optional, but introducing it will now trigger TypeScript warning.

| OLD                                             | NEW                           |
| ----------------------------------------------- | ----------------------------- |
| `<InlineNotificationProps hasGreyBackground />` | `<InlineNotificationProps />` |

Prop `variant`'s `alert` option is now `error`.

| OLD                                           | NEW                                           |
| --------------------------------------------- | --------------------------------------------- |
| `<InlineNotificationProps variant="alert" />` | `<InlineNotificationProps variant="error" />` |

## ProgressBar

Optional `color` prop now only takes limited amount of colors.
Now the only supported colors are:

- purple500
- green700
- orange500

## Divider

Prop `backgroundColor` is now `color`.

| OLD                                       | NEW                             |
| ----------------------------------------- | ------------------------------- |
| `<Divider backgroundColor="purple500" />` | `<Divider color="purple500" />` |

## ProductCard

ProductCard's tag colors have now been unified with Tag component. Valid color options for `tagColor` prop are:

- gray400
- black
- red600
- purple500
- blue600
- orange400

## Color deprecation

Brand color palettes got updated. All color variable names need change. This concerns CSS variables, SCSS variables and prop color values. Some colors were removed without replacement color. In those cases please check by use case with designer what to use.

You can see full new color scale from [DS website, Color foundation](https://designsystem.telia.fi/Foundation/Colors/).

### CSS variable design tokens

| OLD                                           | NEW                                          |
| --------------------------------------------- | -------------------------------------------- |
| --gaia-color-purple-core                      | --gaia-color-purple-500                      |
| --gaia-color-purple-core-light                | --gaia-color-purple-400                      |
| --gaia-color-purple-2                         | --gaia-color-purple-500                      |
| --gaia-color-purple-3                         | --gaia-color-purple-400                      |
| --gaia-color-purple-4                         | --gaia-color-purple-700                      |
| --gaia-color-purple-5                         | Removed                                      |
| --gaia-color-purple-6                         | --gaia-color-purple-300                      |
| --gaia-color-grey-10                          | --gaia-color-gray-100                        |
| --gaia-color-grey-15                          | --gaia-color-gray-200                        |
| --gaia-color-grey-20                          | --gaia-color-gray-200                        |
| --gaia-color-grey-30                          | --gaia-color-gray-300                        |
| --gaia-color-grey-40                          | --gaia-color-gray-300                        |
| --gaia-color-grey-50                          | --gaia-color-gray-400                        |
| --gaia-color-grey-70                          | --gaia-color-gray-500                        |
| --gaia-color-grey-100                         | --gaia-color-gray-800                        |
| --gaia-color-red                              | --gaia-color-red-400                         |
| --gaia-color-red-dark                         | --gaia-color-red-600                         |
| --gaia-color-red-light                        | Removed                                      |
| --gaia-color-pink                             | Removed                                      |
| --gaia-color-pink-dark                        | Removed                                      |
| --gaia-color-pink-light                       | Removed                                      |
| --gaia-color-blue                             | --gaia-color-blue-400                        |
| --gaia-color-blue-dark                        | --gaia-color-blue-500                        |
| --gaia-color-blue-light                       | Removed                                      |
| --gaia-color-green                            | --gaia-color-green-500                       |
| --gaia-color-green-dark                       | --gaia-color-green-700                       |
| --gaia-color-green-light                      | Removed                                      |
| --gaia-color-green-bright                     | Removed                                      |
| --gaia-color-orange                           | --gaia-color-orange-400                      |
| --gaia-color-orange-dark                      | --gaia-color-orange-500                      |
| --gaia-color-orange-light                     | --gaia-color-orange-300                      |
| --gaia-color-teal                             | Removed                                      |
| --gaia-color-teal-dark                        | Removed                                      |
| --gaia-color-teal-light                       | Removed                                      |
| --gaia-color-turquoise                        | Removed                                      |
| --gaia-color-turquoise-light                  | Removed                                      |
| --gaia-color-typography-headline-purple-core  | --gaia-color-typography-headline-purple-500  |
| --gaia-color-typography-ingress-grey-50       | --gaia-color-typography-ingress-gray-400     |
| --gaia-color-typography-ingress-grey-70       | --gaia-color-typography-ingress-gray-500     |
| --gaia-color-typography-ingress-grey-100      | --gaia-color-typography-ingress-gray-800     |
| --gaia-color-typography-link-text-grey-50     | --gaia-color-typography-link-text-gray-400   |
| --gaia-color-typography-link-text-purple-core | --gaia-color-typography-link-text-purple-500 |

### SCSS variable design tokens

| OLD                                           | NEW                                          |
| --------------------------------------------- | -------------------------------------------- |
| \$gaia-color-purple-core                      | \$gaia-color-purple-500                      |
| \$gaia-color-purple-core-light                | \$gaia-color-purple-400                      |
| \$gaia-color-purple-2                         | \$gaia-color-purple-500                      |
| \$gaia-color-purple-3                         | \$gaia-color-purple-400                      |
| \$gaia-color-purple-4                         | \$gaia-color-purple-700                      |
| \$gaia-color-purple-5                         | Removed                                      |
| \$gaia-color-purple-6                         | \$gaia-color-purple-300                      |
| \$gaia-color-grey-10                          | \$gaia-color-gray-100                        |
| \$gaia-color-grey-15                          | \$gaia-color-gray-200                        |
| \$gaia-color-grey-20                          | \$gaia-color-gray-200                        |
| \$gaia-color-grey-30                          | \$gaia-color-gray-300                        |
| \$gaia-color-grey-40                          | \$gaia-color-gray-300                        |
| \$gaia-color-grey-50                          | \$gaia-color-gray-400                        |
| \$gaia-color-grey-70                          | \$gaia-color-gray-500                        |
| \$gaia-color-grey-100                         | \$gaia-color-gray-800                        |
| \$gaia-color-red                              | \$gaia-color-red-400                         |
| \$gaia-color-red-dark                         | \$gaia-color-red-600                         |
| \$gaia-color-red-light                        | Removed                                      |
| \$gaia-color-pink                             | Removed                                      |
| \$gaia-color-pink-dark                        | Removed                                      |
| \$gaia-color-pink-light                       | Removed                                      |
| \$gaia-color-blue                             | \$gaia-color-blue-400                        |
| \$gaia-color-blue-dark                        | \$gaia-color-blue-500                        |
| \$gaia-color-blue-light                       | Removed                                      |
| \$gaia-color-green                            | \$gaia-color-green-500                       |
| \$gaia-color-green-dark                       | \$gaia-color-green-700                       |
| \$gaia-color-green-light                      | Removed                                      |
| \$gaia-color-green-bright                     | Removed                                      |
| \$gaia-color-orange                           | \$gaia-color-orange-400                      |
| \$gaia-color-orange-dark                      | \$gaia-color-orange-500                      |
| \$gaia-color-orange-light                     | \$gaia-color-orange-300                      |
| \$gaia-color-teal                             | Removed                                      |
| \$gaia-color-teal-dark                        | Removed                                      |
| \$gaia-color-teal-light                       | Removed                                      |
| \$gaia-color-turquoise                        | Removed                                      |
| \$gaia-color-turquoise-light                  | Removed                                      |
| \$gaia-color-typography-headline-purple-core  | \$gaia-color-typography-headline-purple-500  |
| \$gaia-color-typography-ingress-grey-50       | \$gaia-color-typography-ingress-gray-400     |
| \$gaia-color-typography-ingress-grey-70       | \$gaia-color-typography-ingress-gray-500     |
| \$gaia-color-typography-ingress-grey-100      | \$gaia-color-typography-ingress-gray-800     |
| \$gaia-color-typography-link-text-grey-50     | \$gaia-color-typography-link-text-gray-400   |
| \$gaia-color-typography-link-text-purple-core | \$gaia-color-typography-link-text-purple-500 |

### Component prop values

| OLD             | NEW       |
| --------------- | --------- |
| grey100         | gray800   |
| grey70          | gray500   |
| grey50          | gray400   |
| grey40          | gray300   |
| grey30          | gray300   |
| grey20          | gray200   |
| grey15          | gray200   |
| grey10          | gray100   |
| purpleCore      | purple500 |
| purpleCoreLight | purple400 |
| purple2         | purple500 |
| purple3         | purple400 |
| purple4         | purple700 |
| purple5         | Removed   |
| purple6         | purple300 |
| red             | red400    |
| redDark         | red600    |
| redLight        | Removed   |
| pink            | Removed   |
| pinkDark        | Removed   |
| pinkLight       | Removed   |
| green           | green500  |
| greenDark       | green700  |
| greenLight      | Removed   |
| greenBright     | Removed   |
| blue            | blue400   |
| blueDark        | blue500   |
| blueLight       | Removed   |
| orange          | orange400 |
| orangeDark      | orange500 |
| orangeLight     | orange300 |
| teal            | Removed   |
| tealDark        | Removed   |
| tealLight       | Removed   |
| turquoise       | Removed   |
| turquoiseLight  | Removed   |