From 45ad08cadd809328ccf7bdbe4804b42bfb4ec288 Mon Sep 17 00:00:00 2001 From: Esteban Munoz Date: Thu, 29 Sep 2022 14:14:59 -0600 Subject: [PATCH 1/8] adding migration guide --- .../react-persona/MIGRATION.md | 41 +++++++++++++++++++ 1 file changed, 41 insertions(+) create mode 100644 packages/react-components/react-persona/MIGRATION.md diff --git a/packages/react-components/react-persona/MIGRATION.md b/packages/react-components/react-persona/MIGRATION.md new file mode 100644 index 0000000000000..45e24276070c5 --- /dev/null +++ b/packages/react-components/react-persona/MIGRATION.md @@ -0,0 +1,41 @@ +# Badge Migration + +## Migration from v8 + +v8 offers a component equivalent to v9's `Persona`. However, the API is slightly different. The main difference is that v9's `Persona` does not handle the functionality of the `presence` and `avatar`. Instead, the `presence` and `avatar` are separate components that can be used in conjunction with `Persona`. + +Here's how the API of v8's `Persona` compares to the one from v9's `Persona` component: + +- `className` => `className` +- `coinProps` => Use `avatar`'s or `presence`'s slot props +- `componentRef` => NOT SUPPORTED - use `ref` instead +- `isOutOfOffice` => Use `status` in `presence` slot props +- `presence` => `presence` +- `presenceTitle` => NOT SUPPORTED +- `styles` => Use style customization through `className` instead +- `hidePersonaDetails` => NOT SUPPORTED +- `imageShouldFadeIn` => NOT SUPPORTED +- `showOverflowTooltip` => NOT SUPPORTED +- `showUnknownPersonaCoin` => NOT SUPPORTED + +## Property Mapping + +| v8 `Persona` | v9 `Persona` | +| ------------------------ | -------------------------------------- | +| `coinProps` | `avatar` or `badge` slot props | +| `coinSize` | `size` in the `badge` or `avatar` slot | +| `className` | `className` | +| `componentRef` | `ref` | +| `optionalText` | `quaternaryText` | +| `primaryText` | `primaryText` | +| `secondaryText` | `secondaryText` | +| `styles` | `className` | +| `tertiaryText` | `tertiaryText` | +| `text` | `name` | +| `isOutOfOffice` | `status` in `presence` slot props | +| `presence` | `presence` | +| `presenceTitle` | NOT SUPPORTED | +| `hidePersonaDetails` | NOT SUPPORTED | +| `imageShouldFadeIn` | NOT SUPPORTED | +| `showOverflowTooltip` | NOT SUPPORTED | +| `showUnknownPersonaCoin` | NOT SUPPORTED | From 667a963a2eae2bc2e5582c3d9146b64856dd86f5 Mon Sep 17 00:00:00 2001 From: Esteban Munoz Date: Thu, 29 Sep 2022 14:20:36 -0600 Subject: [PATCH 2/8] reordering --- .../react-persona/MIGRATION.md | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/packages/react-components/react-persona/MIGRATION.md b/packages/react-components/react-persona/MIGRATION.md index 45e24276070c5..f3d3a1ee70ea0 100644 --- a/packages/react-components/react-persona/MIGRATION.md +++ b/packages/react-components/react-persona/MIGRATION.md @@ -9,14 +9,14 @@ Here's how the API of v8's `Persona` compares to the one from v9's `Persona` com - `className` => `className` - `coinProps` => Use `avatar`'s or `presence`'s slot props - `componentRef` => NOT SUPPORTED - use `ref` instead +- `hidePersonaDetails` => NOT SUPPORTED +- `imageShouldFadeIn` => NOT SUPPORTED - `isOutOfOffice` => Use `status` in `presence` slot props - `presence` => `presence` - `presenceTitle` => NOT SUPPORTED -- `styles` => Use style customization through `className` instead -- `hidePersonaDetails` => NOT SUPPORTED -- `imageShouldFadeIn` => NOT SUPPORTED - `showOverflowTooltip` => NOT SUPPORTED - `showUnknownPersonaCoin` => NOT SUPPORTED +- `styles` => Use style customization through `className` instead ## Property Mapping @@ -26,16 +26,16 @@ Here's how the API of v8's `Persona` compares to the one from v9's `Persona` com | `coinSize` | `size` in the `badge` or `avatar` slot | | `className` | `className` | | `componentRef` | `ref` | +| `hidePersonaDetails` | NOT SUPPORTED | +| `imageShouldFadeIn` | NOT SUPPORTED | +| `isOutOfOffice` | `status` in `presence` slot props | | `optionalText` | `quaternaryText` | +| `presence` | `presence` | +| `presenceTitle` | NOT SUPPORTED | | `primaryText` | `primaryText` | | `secondaryText` | `secondaryText` | +| `showOverflowTooltip` | NOT SUPPORTED | +| `showUnknownPersonaCoin` | NOT SUPPORTED | | `styles` | `className` | | `tertiaryText` | `tertiaryText` | | `text` | `name` | -| `isOutOfOffice` | `status` in `presence` slot props | -| `presence` | `presence` | -| `presenceTitle` | NOT SUPPORTED | -| `hidePersonaDetails` | NOT SUPPORTED | -| `imageShouldFadeIn` | NOT SUPPORTED | -| `showOverflowTooltip` | NOT SUPPORTED | -| `showUnknownPersonaCoin` | NOT SUPPORTED | From c2fc851d2c2a64c388a3b2d6609c5ca9feb3af9a Mon Sep 17 00:00:00 2001 From: Esteban Munoz Date: Thu, 29 Sep 2022 15:04:15 -0600 Subject: [PATCH 3/8] removing NOT SUPPORTED from mapping table --- packages/react-components/react-persona/MIGRATION.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/react-components/react-persona/MIGRATION.md b/packages/react-components/react-persona/MIGRATION.md index f3d3a1ee70ea0..8c058c522ebaa 100644 --- a/packages/react-components/react-persona/MIGRATION.md +++ b/packages/react-components/react-persona/MIGRATION.md @@ -26,16 +26,16 @@ Here's how the API of v8's `Persona` compares to the one from v9's `Persona` com | `coinSize` | `size` in the `badge` or `avatar` slot | | `className` | `className` | | `componentRef` | `ref` | -| `hidePersonaDetails` | NOT SUPPORTED | -| `imageShouldFadeIn` | NOT SUPPORTED | +| `hidePersonaDetails` | - | +| `imageShouldFadeIn` | - | | `isOutOfOffice` | `status` in `presence` slot props | | `optionalText` | `quaternaryText` | | `presence` | `presence` | -| `presenceTitle` | NOT SUPPORTED | +| `presenceTitle` | | | `primaryText` | `primaryText` | | `secondaryText` | `secondaryText` | -| `showOverflowTooltip` | NOT SUPPORTED | -| `showUnknownPersonaCoin` | NOT SUPPORTED | +| `showOverflowTooltip` | - | +| `showUnknownPersonaCoin` | - | | `styles` | `className` | | `tertiaryText` | `tertiaryText` | | `text` | `name` | From 31a903530dd43816bded0675b752343801a96a95 Mon Sep 17 00:00:00 2001 From: Esteban Munoz Facusse Date: Fri, 30 Sep 2022 11:22:15 -0600 Subject: [PATCH 4/8] Update packages/react-components/react-persona/MIGRATION.md Co-authored-by: Ben Howell <48106640+behowell@users.noreply.github.com> --- packages/react-components/react-persona/MIGRATION.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-components/react-persona/MIGRATION.md b/packages/react-components/react-persona/MIGRATION.md index 8c058c522ebaa..5823afb978ba2 100644 --- a/packages/react-components/react-persona/MIGRATION.md +++ b/packages/react-components/react-persona/MIGRATION.md @@ -31,7 +31,7 @@ Here's how the API of v8's `Persona` compares to the one from v9's `Persona` com | `isOutOfOffice` | `status` in `presence` slot props | | `optionalText` | `quaternaryText` | | `presence` | `presence` | -| `presenceTitle` | | +| `presenceTitle` | - | | `primaryText` | `primaryText` | | `secondaryText` | `secondaryText` | | `showOverflowTooltip` | - | From 0d89548102e281ce2d0cb09afe7c04b843651bcc Mon Sep 17 00:00:00 2001 From: Esteban Munoz Facusse Date: Fri, 30 Sep 2022 11:22:29 -0600 Subject: [PATCH 5/8] Update packages/react-components/react-persona/MIGRATION.md Co-authored-by: Ben Howell <48106640+behowell@users.noreply.github.com> --- packages/react-components/react-persona/MIGRATION.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/react-components/react-persona/MIGRATION.md b/packages/react-components/react-persona/MIGRATION.md index 5823afb978ba2..8076ee12c4acc 100644 --- a/packages/react-components/react-persona/MIGRATION.md +++ b/packages/react-components/react-persona/MIGRATION.md @@ -9,7 +9,8 @@ Here's how the API of v8's `Persona` compares to the one from v9's `Persona` com - `className` => `className` - `coinProps` => Use `avatar`'s or `presence`'s slot props - `componentRef` => NOT SUPPORTED - use `ref` instead -- `hidePersonaDetails` => NOT SUPPORTED +- `hidePersonaDetails` => Use the `Avatar` component for this case +- ``` - `imageShouldFadeIn` => NOT SUPPORTED - `isOutOfOffice` => Use `status` in `presence` slot props - `presence` => `presence` From 0f141e417453b4587e4c80bea386a14a8116f4fb Mon Sep 17 00:00:00 2001 From: Esteban Munoz Facusse Date: Fri, 30 Sep 2022 11:22:36 -0600 Subject: [PATCH 6/8] Update packages/react-components/react-persona/MIGRATION.md Co-authored-by: Ben Howell <48106640+behowell@users.noreply.github.com> --- packages/react-components/react-persona/MIGRATION.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-components/react-persona/MIGRATION.md b/packages/react-components/react-persona/MIGRATION.md index 8076ee12c4acc..08ca6d7fbe21d 100644 --- a/packages/react-components/react-persona/MIGRATION.md +++ b/packages/react-components/react-persona/MIGRATION.md @@ -13,7 +13,7 @@ Here's how the API of v8's `Persona` compares to the one from v9's `Persona` com - ``` - `imageShouldFadeIn` => NOT SUPPORTED - `isOutOfOffice` => Use `status` in `presence` slot props -- `presence` => `presence` +- `presence` => Use the `status` prop of the `presence` slot. E.g.: `presence={{ status: 'away' }}` - `presenceTitle` => NOT SUPPORTED - `showOverflowTooltip` => NOT SUPPORTED - `showUnknownPersonaCoin` => NOT SUPPORTED From 79ad3bd017061d7a3da96829662d83030ad15a12 Mon Sep 17 00:00:00 2001 From: Esteban Munoz Facusse Date: Fri, 30 Sep 2022 11:22:44 -0600 Subject: [PATCH 7/8] Update packages/react-components/react-persona/MIGRATION.md Co-authored-by: Ben Howell <48106640+behowell@users.noreply.github.com> --- packages/react-components/react-persona/MIGRATION.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-components/react-persona/MIGRATION.md b/packages/react-components/react-persona/MIGRATION.md index 08ca6d7fbe21d..9be6d7586b2ec 100644 --- a/packages/react-components/react-persona/MIGRATION.md +++ b/packages/react-components/react-persona/MIGRATION.md @@ -12,7 +12,7 @@ Here's how the API of v8's `Persona` compares to the one from v9's `Persona` com - `hidePersonaDetails` => Use the `Avatar` component for this case - ``` - `imageShouldFadeIn` => NOT SUPPORTED -- `isOutOfOffice` => Use `status` in `presence` slot props +- `isOutOfOffice` => Use the `outOfOffice` prop of the `presence` slot. E.g.: `presence={{ outOfOffice: true }}` - `presence` => Use the `status` prop of the `presence` slot. E.g.: `presence={{ status: 'away' }}` - `presenceTitle` => NOT SUPPORTED - `showOverflowTooltip` => NOT SUPPORTED From 80922fa6a3a7a5dad8e6556a66ac5c2ba42413f1 Mon Sep 17 00:00:00 2001 From: Esteban Munoz Date: Fri, 30 Sep 2022 22:13:55 -0600 Subject: [PATCH 8/8] change file --- ...react-persona-7470d036-2f82-454b-86fc-bd8282e46c2f.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-persona-7470d036-2f82-454b-86fc-bd8282e46c2f.json diff --git a/change/@fluentui-react-persona-7470d036-2f82-454b-86fc-bd8282e46c2f.json b/change/@fluentui-react-persona-7470d036-2f82-454b-86fc-bd8282e46c2f.json new file mode 100644 index 0000000000000..cf7343a82e1ab --- /dev/null +++ b/change/@fluentui-react-persona-7470d036-2f82-454b-86fc-bd8282e46c2f.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "docs: Add migration guide.", + "packageName": "@fluentui/react-persona", + "email": "esteban.230@hotmail.com", + "dependentChangeType": "patch" +}