# Migration guideline Component library version 2.x -> 3.0 ## Deprecated components: | Deprecated | Replace it with | | --------------- | -------------------------------- | | A | Link | | Focusable | Link | | New Accordion | Accordion | | PebbleHeading | Headline | | PebbleText | Headline | | Heading | Title | | MainHeading | Page.Headline, Headline or Title | | Page.Heading | Page.Headline | | Page.Subheading | Page.Title | ## Breaking components: | Component | What's breaking | | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Accordion | Accordion has been deleted and NewAccordion became Accordion. The current Accordion does not support same features as old Accordion. For replacing the old Accordion, use the current Accordion component and rethink the UI. | | Typography | See notes below. | | Colors | See notes below. | ## Typography changes: | Old component | New component | | Additional description | | ----------------- | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | | **PebbleHeading** | **Headline** | | | | | Old size | New size | | | | 3xlg | xl | The biggest size variations are not supported anymore. | | | 2xlg | xl | | | | xlg | xl | | | | lg | lg | | | | | md | | | | | sm | | | | | xs | | | **Heading** | **Title** | | | | | Old size | New size | Old sizes correspond to the new ones, however breakpoints are different, so pay attention to phone/tablet viewports when migrating | | | lg | lg | | | | md | md | | | | sm | sm | | | | xs | xs | | | | xxs | xxs | | | NEW | **Ingress** | | | | | | New size | | | | | lg | | | | | md | | | | | sm | | | **BodyText** | | | | | | Old size | New size | | | | xxs | md | | | | 3xs | sm | | | | | xs | | | | `useDefaultBottomMargin` prop is no longer supported by any Typography component, use margin={{ bottom: 'sm' }}, margin={{ bottom: 'md' }} or | | | | **PricingText** | | | | | | Old size | New size | | | | md | lg | | | | sm | md | | | | xxs | sm | | | | 4xs | xs | | | **SmallText** | | | | | | Old size | New size | | | | 4xs | md | | | | 5xs | sm | | ### Font weight vs. bold Old boolean prop `bold` is deprecated. You should use `fontWeight: 'bold'` from now on. `fontWeight` prop supports weights 'normal', 'medium' and 'bold', and it is taken care by Element. Notice that all the typography elements are not supposed to be be used in different font weights. Titles are now using font-weight: medium and it's not supposed to be overwritten. So if you have fontWeight="bold" or similar in your code, it's not going to work. Also Pebble texts won't render any other font weight. Refer to the Typography documentation to see the font weight support. Also for consistency the default font weight is now called "normal", when it used to be in some cases called "regular". | Old font weight | New font weight | | ---------------------- | --------------------- | | `bold={true}` | `fontWeight="bold"` | | `fontWeight="regular"` | `fontWeight="normal"` | ### MainHeading, Page.Heading and Page.Subheading MainHeading is no longer exported as an individual component. Also the Page's subcomponents Page.Heading and Page.Subheading are renamed to match new typography elements. | OLD | NEW | | -------------- | --------------------------------------------- | | MainHeading | Replace with Page.Headline, Headline or Title | | Page.Heading | Page.Headline | | Page.Subeading | Page.Title | ## Colors Colors are changed to match the latest designs. The color names are updated and the functionality related to hover colors has changed. From now on if you pass hoverColor prop for the component, it doesn't map to the correct color tone automatically, but it will render the exact color that is given. You have to make sure you choose the correct color tone from the supported colors list. ### New colors vs. old | NEW | OLD | | --------------- | -------------- | | white | white | | overlay | NEW | | black | black, grey200 | | purpleCore | purple | | purpleCoreLight | NEW | | purple2 | NEW | | purple3 | NEW | | purple4 | NEW | | purple5 | NEW | | purple6 | NEW | | grey10 | grey10 | | grey15 | NEW | | grey20 | grey20 | | grey30 | grey30 | | grey40 | NEW TONE | | grey50 | grey50 | | grey70 | grey70 | | grey100 | grey100 | | redDark | NEW | | red | red | | redLight | NEW | | pinkDark | NEW | | pink | NEW | | pinkLight | NEW | | blueDark | blue | | blue | NEW TONE | | blueLight | NEW | | greenDark | NEW | | green | darkGreen | | greenLight | NEW | | greenBright | NEW | | orangeDark | NEW | | orange | NEW TONE | | orangeLight | NEW | | tealDark | NEW | | teal | NEW | | tealLight | NEW | | turquoise | NEW | | turquoiseLight | NEW | ### Old vs new | Old | New | | ---------- | --------------------------------------------- | | white | no change | | black | no change | | grey200 | DEPRECATED, replace with black | | grey100 | no change | | grey70 | no change | | grey50 | no change | | grey40 | NEW TONE | | grey30 | no change | | grey20 | no change | | grey15 | NEW COLOR | | grey10 | no change | | purple | purpleCore | | red | no change | | darkGreen | green | | blue | NEW TONE | | orange | NEW TONE | | brightBlue | DEPRECATED | | coolGrey | DEPRECATED, replace with other shades of grey | | coolBlack | grey100 |