From f930418571e7a1d7db42817ba54027543c8162ca Mon Sep 17 00:00:00 2001 From: Suraj Karambe Date: Thu, 4 Jan 2024 20:14:21 +0530 Subject: [PATCH 1/6] Added migration guide for version 8 --- MIGRATION.md | 51 +++++++++++++++++++++++++++++++++++++++++++++++++++ README.md | 7 ++++--- 2 files changed, 55 insertions(+), 3 deletions(-) create mode 100644 MIGRATION.md diff --git a/MIGRATION.md b/MIGRATION.md new file mode 100644 index 00000000..d3c43cb7 --- /dev/null +++ b/MIGRATION.md @@ -0,0 +1,51 @@ + +# Upgrading to v8 + + +## Update Dependencies + +First, update your @brightlayer-ui/react-native-components dependency to the latest version. + +```shell +npm install --save @brightlayer-ui/react-native-components@^8.0.0 +// or +yarn upgrade @brightlayer-ui/react-native-components@^8.0.0 +``` + +You also need to update @brightlayer-ui/react-native-themes, @brightlayer-ui/colors react-native and react-native-paper. + +```shell +npm install --save @brightlayer-ui/react-native-themes@^7.0.0 @brightlayer-ui/colors@^4.0.0 react-native@0.72.3 react-native-paper@^5.0.0 + +// or + +yarn upgrade @brightlayer-ui/react-native-themes@^7.0.0 @brightlayer-ui/colors@^4.0.0 react-native@0.72.3 react-native-paper@^5.0.0 +``` + +## Themes Updates + + You need to update version 7+ of @brightlayer-ui/react-native-themes to make it work with @brightlayer-ui/react-native-components v8. To learn, please follow the [migration guide](https://github.com/etn-ccis/blui-react-native-themes/blob/master/README.md#upgrading-from-version-6---7). + +## Components Updates + +In version 8 of this library, following components have been added or removed: + +### Added + +- [Chip](./docs/Chip.md) +- [Grade](./docs/Grade.md) +- [Icon](./docs/Icon.md) +- [IconSwitch](./docs/IconSwitch.md) +- [Overline](./docs/Overline.md) + +### Removed + +- Typography +- IconWrapper + +All the themed components have been removed. + +## NOTES + + +There are few React Native Paper compnents which need additional styles. To learn more about style overrides, please follow [the guidelines](#). \ No newline at end of file diff --git a/README.md b/README.md index 01562d1b..22a2e1d8 100644 --- a/README.md +++ b/README.md @@ -73,6 +73,10 @@ to bring up a API documentation website (no interactive components). See the [documentation](https://brightlayer-ui-components.github.io/react-native) for information on using these components. +### Upgrading to version 8 + +See the [migration guide](./MIGRATION.md). + ### Upgrading from version 5 -> 6 Version 6 of this library is a major update with several breaking changes. Most notably, the `IconClass` prop found in most components has been replaced by `icon` and supports more icon formats. @@ -81,9 +85,6 @@ Versions 5.3.x -> 5.4.x have been updated to include warning messages if you are Version 6 also includes a new set of [wrappers](./components/src/themed) around a subset of [React Native Paper](https://callstack.github.io/react-native-paper/index.html) components to provide the correct styles. In order to get the correct appearance, you should use these themed wrapper components instead of the components directly from RNP. These wrapper components should be used in conjunction with version 6+ of [@brightlayer-ui/react-native-themes](https://www.npmjs.com/package/@brightlayer-ui/react-native-themes), which consolidated our blueDark and blueDarkAlt themes into a single theme for simpler usage. -### Upgrading from version 7 -> 8 - -Version 8 of this library is using [React Native Paper](https://callstack.github.io/react-native-paper/) v5 components, which is adopting Material Design 3. The components should be used in conjunction with version 7+ of [@brightlayer-ui/react-native-themes](https://www.npmjs.com/package/@brightlayer-ui/react-native-themes), which is using Material Design 3 themes. For more information about react native paper v5, please follow [the migration guide](https://callstack.github.io/react-native-paper/docs/guides/migration-guide-to-5.0/). ## NOTES From a20a83290a65bda29ea8efccfe2195e5efd1cbbf Mon Sep 17 00:00:00 2001 From: Suraj Karambe Date: Fri, 5 Jan 2024 14:39:31 +0530 Subject: [PATCH 2/6] Updated migration guide with details on removed components --- MIGRATION.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/MIGRATION.md b/MIGRATION.md index d3c43cb7..54b92357 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -34,14 +34,16 @@ In version 8 of this library, following components have been added or removed: - [Chip](./docs/Chip.md) - [Grade](./docs/Grade.md) -- [Icon](./docs/Icon.md) +- [Icon](./docs/Icons#icon-as-a-component.md) - [IconSwitch](./docs/IconSwitch.md) - [Overline](./docs/Overline.md) ### Removed - Typography + - This component has been removed from the library can be replaced by [Text](https://callstack.github.io/react-native-paper/docs/components/Text/) component from React Native Paper. - IconWrapper + - This component has been removed from the library. Icons can be used in Brightlayer UI React Native Components in various ways. Please refer [icons usage guidelines](./docs/Icons) for more info. All the themed components have been removed. From d3e11ec72aa234a83f759d667f5fef1073f3b142 Mon Sep 17 00:00:00 2001 From: Suraj Karambe Date: Fri, 5 Jan 2024 14:52:07 +0530 Subject: [PATCH 3/6] Added description of themed components removal --- MIGRATION.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/MIGRATION.md b/MIGRATION.md index 54b92357..0ba2254e 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -44,8 +44,8 @@ In version 8 of this library, following components have been added or removed: - This component has been removed from the library can be replaced by [Text](https://callstack.github.io/react-native-paper/docs/components/Text/) component from React Native Paper. - IconWrapper - This component has been removed from the library. Icons can be used in Brightlayer UI React Native Components in various ways. Please refer [icons usage guidelines](./docs/Icons) for more info. - -All the themed components have been removed. +- Themed Components + - All the themed components have been removed, as we have updated all the components with the Brightlayer UI's required styles and themes. ## NOTES From 1829fd5674638227fc649c8dbfdeb204abda2836 Mon Sep 17 00:00:00 2001 From: huayunh <96_mouse@sina.com> Date: Fri, 5 Jan 2024 18:48:30 -0500 Subject: [PATCH 4/6] Wordsmith MIGRATION.md --- MIGRATION.md | 34 ++++++++++++++++++---------------- 1 file changed, 18 insertions(+), 16 deletions(-) diff --git a/MIGRATION.md b/MIGRATION.md index 0ba2254e..5e44d627 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -1,10 +1,8 @@ +# Upgrading from v7 to v8 -# Upgrading to v8 +## Dependency Updates - -## Update Dependencies - -First, update your @brightlayer-ui/react-native-components dependency to the latest version. +First, update your `@brightlayer-ui/react-native-components` dependency to the latest version. ```shell npm install --save @brightlayer-ui/react-native-components@^8.0.0 @@ -12,7 +10,7 @@ npm install --save @brightlayer-ui/react-native-components@^8.0.0 yarn upgrade @brightlayer-ui/react-native-components@^8.0.0 ``` -You also need to update @brightlayer-ui/react-native-themes, @brightlayer-ui/colors react-native and react-native-paper. +You also need to update `@brightlayer-ui/react-native-themes`, `@brightlayer-ui/colors`, `react-native`, and `react-native-paper`. ```shell npm install --save @brightlayer-ui/react-native-themes@^7.0.0 @brightlayer-ui/colors@^4.0.0 react-native@0.72.3 react-native-paper@^5.0.0 @@ -22,32 +20,36 @@ npm install --save @brightlayer-ui/react-native-themes@^7.0.0 @brightlayer-ui/co yarn upgrade @brightlayer-ui/react-native-themes@^7.0.0 @brightlayer-ui/colors@^4.0.0 react-native@0.72.3 react-native-paper@^5.0.0 ``` +## Color Updates + +The Brightlayer UI color palette underwent major changes to reflect Material Design 3's new color structure. Please follow the [migration guide](https://en.wikipedia.org/wiki/First_solo_flight#Traditions) for more details. + ## Themes Updates - You need to update version 7+ of @brightlayer-ui/react-native-themes to make it work with @brightlayer-ui/react-native-components v8. To learn, please follow the [migration guide](https://github.com/etn-ccis/blui-react-native-themes/blob/master/README.md#upgrading-from-version-6---7). +You need to update `@brightlayer-ui/react-native-themes` to v7+ to make it work with `@brightlayer-ui/react-native-components` v8. Please follow the [migration guide](https://github.com/etn-ccis/blui-react-native-themes/blob/master/README.md#upgrading-from-version-6---7) for more details. ## Components Updates -In version 8 of this library, following components have been added or removed: +In version 8 of this library, the following components have been added or removed: ### Added -- [Chip](./docs/Chip.md) -- [Grade](./docs/Grade.md) -- [Icon](./docs/Icons#icon-as-a-component.md) -- [IconSwitch](./docs/IconSwitch.md) -- [Overline](./docs/Overline.md) +- [Chip](./docs/Chip.md), as a better alternative to React Native Paper's [Chip](https://callstack.github.io/react-native-paper/docs/components/Chip/) component. +- [Grade](./docs/Grade.md). +- [Icon](./docs/Icons#icon-as-a-component.md), as a replacement for IconWrapper. +- [IconSwitch](./docs/IconSwitch.md), as a better alternative to React Native Paper's [Switch](https://callstack.github.io/react-native-paper/docs/components/Switch/) component. +- [Overline](./docs/Overline.md), as a replacement for the overline variant in Typography, which was removed in Material Design 3. ### Removed - Typography - This component has been removed from the library can be replaced by [Text](https://callstack.github.io/react-native-paper/docs/components/Text/) component from React Native Paper. - IconWrapper - - This component has been removed from the library. Icons can be used in Brightlayer UI React Native Components in various ways. Please refer [icons usage guidelines](./docs/Icons) for more info. + - This component has been removed from the library. Icons can now be used in Brightlayer UI React Native Components in various ways. Please refer [icons usage guidelines](./docs/Icons) for more info. - Themed Components - All the themed components have been removed, as we have updated all the components with the Brightlayer UI's required styles and themes. -## NOTES +## Notes -There are few React Native Paper compnents which need additional styles. To learn more about style overrides, please follow [the guidelines](#). \ No newline at end of file +A few React Native Paper components require additional style overrides to match Brightlayer UI's design specifications. To learn more about these style overrides, please follow [the guidelines](#). From f97f3d5156ce4dea88cfd0b36ac51c7046a313bc Mon Sep 17 00:00:00 2001 From: huayunh <96_mouse@sina.com> Date: Fri, 5 Jan 2024 18:52:03 -0500 Subject: [PATCH 5/6] Update MIGRATION.md --- MIGRATION.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/MIGRATION.md b/MIGRATION.md index 5e44d627..3df66e8e 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -45,7 +45,7 @@ In version 8 of this library, the following components have been added or remove - Typography - This component has been removed from the library can be replaced by [Text](https://callstack.github.io/react-native-paper/docs/components/Text/) component from React Native Paper. - IconWrapper - - This component has been removed from the library. Icons can now be used in Brightlayer UI React Native Components in various ways. Please refer [icons usage guidelines](./docs/Icons) for more info. + - Icons no longer requires a wrapper function. Please refer to [icons usage guidelines](./docs/Icons) for more info. - Themed Components - All the themed components have been removed, as we have updated all the components with the Brightlayer UI's required styles and themes. From 7b0127f6573570b059fccea5555e96cb1ee41813 Mon Sep 17 00:00:00 2001 From: Suraj Karambe Date: Mon, 8 Jan 2024 15:33:58 +0530 Subject: [PATCH 6/6] Review changes - Removed colors package from dependencies, migration link --- MIGRATION.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/MIGRATION.md b/MIGRATION.md index 3df66e8e..c7137591 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -10,7 +10,7 @@ npm install --save @brightlayer-ui/react-native-components@^8.0.0 yarn upgrade @brightlayer-ui/react-native-components@^8.0.0 ``` -You also need to update `@brightlayer-ui/react-native-themes`, `@brightlayer-ui/colors`, `react-native`, and `react-native-paper`. +You also need to update `@brightlayer-ui/react-native-themes`, `react-native`, and `react-native-paper`. ```shell npm install --save @brightlayer-ui/react-native-themes@^7.0.0 @brightlayer-ui/colors@^4.0.0 react-native@0.72.3 react-native-paper@^5.0.0 @@ -22,7 +22,7 @@ yarn upgrade @brightlayer-ui/react-native-themes@^7.0.0 @brightlayer-ui/colors@^ ## Color Updates -The Brightlayer UI color palette underwent major changes to reflect Material Design 3's new color structure. Please follow the [migration guide](https://en.wikipedia.org/wiki/First_solo_flight#Traditions) for more details. +The Brightlayer UI color palette underwent major changes to reflect Material Design 3's new color structure. Please follow the [migration guide](https://github.com/etn-ccis/blui-colors/blob/master/README.md#migration-from-v3-to-v4) for more details. ## Themes Updates @@ -51,5 +51,5 @@ In version 8 of this library, the following components have been added or remove ## Notes - + A few React Native Paper components require additional style overrides to match Brightlayer UI's design specifications. To learn more about these style overrides, please follow [the guidelines](#).