@purple/phoenix-components 4.36.0 → 5.0.0-alpha.0

package/CHANGELOG.md

@@ -2,47 +2,27 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
-## [4.36.0](https://github.com/purple-technology/phoenix-components/compare/v4.35.2...v4.36.0) (2023-01-09)
+## [5.0.0-alpha.0](https://github.com/purple-technology/phoenix-components/compare/v4.32.0...v5.0.0-alpha.0) (2023-01-10)
 
 
-### Features
-
-* **FileUpload:** handle multiple password protected PDFs ([86db270](https://github.com/purple-technology/phoenix-components/commit/86db270fde4e978060c577c967b7e6dda2dc2709))
-
-### [4.35.2](https://github.com/purple-technology/phoenix-components/compare/v4.35.1...v4.35.2) (2023-01-04)
-
-
-### Bug Fixes
-
-* **Modal:** stop propagation ([fc63c48](https://github.com/purple-technology/phoenix-components/commit/fc63c48da44b2862ff5d10ee9cea313fb223fcec))
-
-### [4.35.1](https://github.com/purple-technology/phoenix-components/compare/v4.35.0...v4.35.1) (2022-12-16)
-
-
-### Bug Fixes
-
-* **MultiSelect:** add missing export ([98d8704](https://github.com/purple-technology/phoenix-components/commit/98d8704010c03c534a4b67ffa5814fbcf71328ed))
-
-## [4.35.0](https://github.com/purple-technology/phoenix-components/compare/v4.34.0...v4.35.0) (2022-12-05)
-
-
-### Features
-
-* **FileUpload:** password protected PDFs ([8848161](https://github.com/purple-technology/phoenix-components/commit/8848161234473530b3ae3fa0cd6f23a130d794b8))
-
-## [4.34.0](https://github.com/purple-technology/phoenix-components/compare/v4.33.0...v4.34.0) (2022-11-10)
-
-
-### Features
-
-* **Tabs:** size prop ([d2d24bb](https://github.com/purple-technology/phoenix-components/commit/d2d24bb3aa8bfa5ca153694a19718139ac11a10d))
-
-## [4.33.0](https://github.com/purple-technology/phoenix-components/compare/v4.32.0...v4.33.0) (2022-10-26)
+### ⚠ BREAKING CHANGES
 
+* major dependencies update
+* **MenuDivider:** deprecated component removed
 
 ### Features
 
-* **DateInput:** new props ([44b066c](https://github.com/purple-technology/phoenix-components/commit/44b066cc3a99258d610a6e14ae48d9224f23b28a))
+* **Button:** outline style ([19c4536](https://github.com/purple-technology/phoenix-components/commit/19c453623464ac8a763f119cd88e808ca4897466))
+* fix input label alignment ([58de05a](https://github.com/purple-technology/phoenix-components/commit/58de05a6d34d33946a5916be8e0d32cf9906e7d6))
+* improved tokens ([4174cc4](https://github.com/purple-technology/phoenix-components/commit/4174cc4d0fdc1c71afdc8926e73dc76e5df9603d))
+* major dependencies update ([103da44](https://github.com/purple-technology/phoenix-components/commit/103da44a94862250cc8c18674e56883b2581f4b9))
+* **MenuDivider:** deprecated component removed ([821f0dc](https://github.com/purple-technology/phoenix-components/commit/821f0dcc2ff347de3aea3dc5a7271955536c8c83))
+* react-tabs reversed to version 4 ([96e8178](https://github.com/purple-technology/phoenix-components/commit/96e8178789d0784bacfb79aa5c72d08f6acc815a))
+* **Tag:** primary and outline style ([6b54b7a](https://github.com/purple-technology/phoenix-components/commit/6b54b7a2ae87a791fcaa65cfa60e5a14dff2d009))
+* update border tokens ([33d46c1](https://github.com/purple-technology/phoenix-components/commit/33d46c1e2596d003eee3822306e8b7bde69cb9e6))
+* update line height ([89e67d4](https://github.com/purple-technology/phoenix-components/commit/89e67d4ca742fc3a4d2e45dc49b362d1739276ca))
+* wip: design tokens ([504825f](https://github.com/purple-technology/phoenix-components/commit/504825ff92e73de81c1b35273fd959cc3d8b2b12))
+* wip: design tokens ([8f66cf2](https://github.com/purple-technology/phoenix-components/commit/8f66cf29f035f3eec74f816eb1f5838b78f44ff0))
 
 ## [4.32.0](https://github.com/purple-technology/phoenix-components/compare/v4.31.0...v4.32.0) (2022-09-05)
 

package/README.md

@@ -30,11 +30,11 @@ Phoenix Components takes advantage of some 3rd party libraries to create consist
 
 ## Usage
 
-1. Phoenix components use by default Roboto font with weights 400 and 500. If you want to use this default font, please add it to your project, using for example Google Fonts. (If you want to use different font family and/or different font weights, please refer to the section Customization.)
+1. Phoenix components use by default Mulish font with weights 400 and 600. If you want to use this default font, please add it to your project, using for example Google Fonts. (If you want to use different font family and/or different font weights, please refer to the section Customization.)
 
   ```html
   <link rel="preconnect" href="https://fonts.gstatic.com">
-  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Mulish:wght@400;600&display=swap" rel="stylesheet">
   ```
 
 2. Import `Theme` from Phoenix Components and wrap the app in `<ThemeProvider>` from `styled-components` providing the `Theme` object. If your repository already contains custom `styled-components` theme, merge both themes together. If you're going to use overrides inside `$pc` key (see the Customization section), you need to use deep merge (e.g. `merge` from `lodash`).
@@ -105,6 +105,112 @@ export const Theme = {
 
 For more information about what's possible to customize please refer directly to the file `src/theme.tsx`.
 
+## 🔼 Migration guide from v4 to v5
+
+Phoenix Components ver. 5 transitioned to using Design tokens. This change affected namings of several entities.
+
+### Sizes
+
+Sizes of the components have been updated to be more consistent with other sizing and spacing units.
+
+| Previous size | **Current size** |
+| -- | -- |
+| tiny | **xs** |
+| small | **sm** |
+| medium | **md** |
+| large | **lg** |
+
+These changes affect components `Button`, `ButtonGroup`, `DateInput`, `Heading`, `LinkButton`, `List`, `Modal`, `MultiSelect`, `Pagination`, `Paragraph`, `Tag` and `Text`.
+
+> #### What to do?
+> 
+> Find all instances of `size="tiny"` and replace with `size="xs"`. Similarly for other sizes. Don't forget that a value can be written also for example `size={'tiny'}` or that value can be calculated so you won't be able to look these instances so easily.
+
+Also sizing types have been renamed.
+
+| Previous size type | **Current size type** |
+| -- | -- |
+| ComponentSize | **Sizing** |
+| ComponentSizeSmallMedium | **SizingSmMd** |
+| ComponentSizeMediumLarge | **SizingMdLg** |
+| ComponentSizeSmallMediumLarge | **SizingSmMdLg** |
+
+> #### What to do?
+> 
+> Replace all previous size types with the new ones.
+
+### Colors
+
+Text colors were renamed
+
+| Previous color | **Current color** |
+| -- | -- |
+| darkest | **primary** |
+| dark | **secondary** |
+| light | **tertiary** |
+| lightest | **quaternary** |
+
+These changes affect components `Heading`, `Paragraph` and `Text`.
+
+For the `ColorTheme` enum and `colorTheme` props, the color `primary` has been renamed to color **`brand`**. Other colors (`success`, `warning`, `error`, `info`, `neutral`) remain the same.
+
+> #### What to do?
+> - Search for all `colorTheme="primary"` and replace with `colorTheme="brand"`
+> - Search for all `color="darkest"` and replace with `color="primary"`. Same for dark, light and lightest.
+
+### Spacings
+
+Spacings were also updated to be more consistent with other units. **However, these changes are backwards compatible.** Old values have been deprecated and will be removed in the next major version.
+
+| Previous value | **Current value** |
+| -- | -- |
+| xxxs | **3xs** |
+| xxs | **2xs** |
+| xs | **xs** |
+| s | **sm** |
+| m | **md** |
+| l | **lg** |
+| xl | **xl** |
+| xxl | **2xl** |
+| xxxl | **3xl** |
+
+> #### What to do?
+> Since these changes are backwards-compatible, you don't have to do anything right now.
+
+### Button and Link Button
+
+Both components have now a new style available - outline. This style can be enabled by the prop named `outline`.
+
+Minimal style is now available in all color themes. Default style for minimal is now `brand`, instead of `neutral`.
+
+> #### What to do?
+> If you want to keep the same styling, add `colorTheme="neutral"` to Buttons with `minimal` prop.
+
+### Checkbox and Radio
+
+Components `Checkbox` and `Radio` have now only a single size and prop `size` has been removed.
+
+### Tag
+
+Previously, this component had only a single style. Currently, there are 3 styles available that correpond with the styles of the button - primary, secondary and outline. **Default style is now `primary`. Previous style is currently `secondary` and must be explicitly enabled by the prop `secondary`.** 
+
+> #### What to do?
+> Search for all instances of `Tag` component and add `secondary` prop.
+
+### Heading, Paragraph and Text
+
+Prop `colorTheme` has been removed and there's only `color` prop now excepting all text colors (primary, secondary, tertiary, quaternary), color theme colors (brand, success, warning, error, info, neutral) and any valid CSS value.
+
+> #### What to do?
+> Search all instances of Text, Paragraph and Heading and replace `colorTheme` with `color`.
+
+### List and ListItem
+
+Prop `colorTheme` has been removed and there's only `color` prop now excepting all text colors (primary, secondary, tertiary, quaternary), color theme colors (brand, success, warning, error, info, neutral) and any valid CSS value. Also, `color` prop now affects only text. To change color of the bullet, use `bulletColor` which accepts the same values.
+
+> #### What to do?
+> - Search all instances of List and ListItem and replace `colorTheme` with `bulletColor`.
+> - Search for all `bulletColor` props and change `darkest` to `primary`, `dark` to `secondary` etc. (see the section Colors)
 
 ## 🔼 Migration guide from v3 to v4