diff --git a/apps/public-docsite-v9/.storybook/preview.js b/apps/public-docsite-v9/.storybook/preview.js index 46bf91f54aff9..93c8712239c74 100644 --- a/apps/public-docsite-v9/.storybook/preview.js +++ b/apps/public-docsite-v9/.storybook/preview.js @@ -26,7 +26,7 @@ export const parameters = { 'Introduction', 'Developer', ['Quick Start', 'Styling Components', 'Positioning Components', 'Component Poster'], - 'Upgrading', + 'Migration', [ 'Overview', 'Important changes', diff --git a/apps/public-docsite-v9/package.json b/apps/public-docsite-v9/package.json index b6430e8d24745..e7f89ed3097c5 100644 --- a/apps/public-docsite-v9/package.json +++ b/apps/public-docsite-v9/package.json @@ -2,7 +2,7 @@ "name": "@fluentui/public-docsite-v9", "version": "1.0.0", "private": true, - "description": "A collection of examples demonstrating how to upgrade from v8 to v9", + "description": "Fluent UI React v9 documentation", "scripts": { "build": "just-scripts build", "build-storybook": "build-storybook -o ./dist/storybook --docs && node ./.storybook/fix-title.js 'Fluent UI React v9' ../dist", diff --git a/apps/public-docsite-v9/src/Concepts/Upgrade/FromV0/Components/Avatar.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Avatar.stories.mdx similarity index 95% rename from apps/public-docsite-v9/src/Concepts/Upgrade/FromV0/Components/Avatar.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Avatar.stories.mdx index 4e69002ddd7a6..fdc1c6af04b35 100644 --- a/apps/public-docsite-v9/src/Concepts/Upgrade/FromV0/Components/Avatar.stories.mdx +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Avatar.stories.mdx @@ -1,8 +1,8 @@ import { Meta } from '@storybook/addon-docs'; - + -# Avatar Upgrade +# Avatar Migration ## Overview: @@ -26,7 +26,7 @@ const Component = () => ; | ------------------------- | -------------------------------------------------------------------------------------------------------- | | as, className | keep it as is | | variables, design, styles | see Migrate style overrides in this document | -| accessibility | see [migrate-custom-accessibility.md](?path=/docs/concepts-upgrading-from-v0-custom-accessibility--page) | +| accessibility | see [migrate-custom-accessibility.md](?path=/docs/concepts-migrating-from-v0-custom-accessibility--page) | | key, ref | keep it as is | | getInitials | use `initials` prop instead | | icon | keep it as is | @@ -41,7 +41,7 @@ const Component = () => ; ## Migrate style overrides -⚠️ **If this is your first migration**, please read [the general guide on how to migrate styles](?path=/docs/concepts-upgrading-from-v0-custom-style-overrides--page). +⚠️ **If this is your first migration**, please read [the general guide on how to migrate styles](?path=/docs/concepts-migrating-from-v0-custom-style-overrides--page). ### Example for migrate boolean `variables`: diff --git a/apps/public-docsite-v9/src/Concepts/Upgrade/FromV0/Components/Button.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Button.stories.mdx similarity index 97% rename from apps/public-docsite-v9/src/Concepts/Upgrade/FromV0/Components/Button.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Button.stories.mdx index 51d5ec14feb58..70ae8f979e030 100644 --- a/apps/public-docsite-v9/src/Concepts/Upgrade/FromV0/Components/Button.stories.mdx +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Button.stories.mdx @@ -1,8 +1,8 @@ import { Meta } from '@storybook/addon-docs'; - + -# Button Upgrade +# Button Migration ## Overview: @@ -27,7 +27,7 @@ const Component = () => ; | as, className | keep it as is | | content | see Migrate content prop in this document | | variables, styles | see Migrate style overrides in this document | -| accessibility | see [migrate-custom-accessibility.md](?path=/docs/concepts-upgrading-from-v0-custom-accessibility--page) | +| accessibility | see [migrate-custom-accessibility.md](?path=/docs/concepts-migrating-from-v0-custom-accessibility--page) | | circular | replace with `shape="circular"` | | disabled | keep it as is | | disabledFocusable | keep it as is | @@ -69,7 +69,7 @@ const Component = () => ; ## Migrate style overrides -⚠️ **If this is your first migration**, please read [the general guide on how to migrate styles](?path=/docs/concepts-upgrading-from-v0-custom-style-overrides--page). +⚠️ **If this is your first migration**, please read [the general guide on how to migrate styles](?path=/docs/concepts-migrating-from-v0-custom-style-overrides--page). ### Example for migrate boolean `variables`: diff --git a/apps/public-docsite-v9/src/Concepts/Upgrade/FromV0/Components/Checkbox.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Checkbox.stories.mdx similarity index 96% rename from apps/public-docsite-v9/src/Concepts/Upgrade/FromV0/Components/Checkbox.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Checkbox.stories.mdx index 3bce057b9e1b3..6d814bd8e3a01 100644 --- a/apps/public-docsite-v9/src/Concepts/Upgrade/FromV0/Components/Checkbox.stories.mdx +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Checkbox.stories.mdx @@ -1,8 +1,8 @@ import { Meta } from '@storybook/addon-docs'; - + -# Checkbox Upgrade +# Checkbox Migration Fluent UI Northstar (v0) provides the `Checkbox` control to make a choice between two mutually exclusive options. Fluent UI v9 provides a `Checkbox` control, but has a different API. @@ -10,7 +10,7 @@ The main difference between v0 and v9 `Checkbox` is that v9 offers a circular va ## Examples -### Basic Upgrade +### Basic Migration Basic usage of `Checkbox` v0 diff --git a/apps/public-docsite-v9/src/Concepts/Upgrade/FromV0/Components/Divider.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Divider.stories.mdx similarity index 95% rename from apps/public-docsite-v9/src/Concepts/Upgrade/FromV0/Components/Divider.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Divider.stories.mdx index 4566e4b40e303..618f8c1c5a647 100644 --- a/apps/public-docsite-v9/src/Concepts/Upgrade/FromV0/Components/Divider.stories.mdx +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Divider.stories.mdx @@ -1,8 +1,8 @@ import { Meta } from '@storybook/addon-docs'; - + -# Divider Upgrade +# Divider Migration ## Overview: @@ -34,7 +34,7 @@ To add paddings on v9 Divider to match v0, please see style overrides in this [c | fitted | simply remove it | | content | see Migrate content prop in this document | | variables, styles | see Migrate style overrides in this document | -| accessibility | see [migrate-custom-accessibility.md](?path=/docs/concepts-upgrading-from-v0-custom-accessibility--page) | +| accessibility | see [migrate-custom-accessibility.md](?path=/docs/concepts-migrating-from-v0-custom-accessibility--page) | | important | see Migrate important prop in this document | | size | see Migrate size prop in this document | | color | replace `color="brand"` with `appearance="brand"`. For other color value, add style override with makeStyles and color tokens | @@ -74,7 +74,7 @@ See [codesandbox](https://codesandbox.io/s/divider-migration-88ws6u?file=/SizedD ## Migrate style overrides -⚠️ **If this is your first migration**, please read [the general guide on how to migrate styles](?path=/docs/concepts-upgrading-from-v0-custom-style-overrides--page). +⚠️ **If this is your first migration**, please read [the general guide on how to migrate styles](?path=/docs/concepts-migrating-from-v0-custom-style-overrides--page). ### Example for migrate boolean `variables`: diff --git a/apps/public-docsite-v9/src/Concepts/Upgrade/FromV0/Components/Header.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Header.stories.mdx similarity index 95% rename from apps/public-docsite-v9/src/Concepts/Upgrade/FromV0/Components/Header.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Header.stories.mdx index 09f6b72b7a03a..15f8458955a6c 100644 --- a/apps/public-docsite-v9/src/Concepts/Upgrade/FromV0/Components/Header.stories.mdx +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Header.stories.mdx @@ -1,8 +1,8 @@ import { Meta } from '@storybook/addon-docs'; - + -# Header Upgrade +# Header Migration ## Overview: @@ -68,7 +68,7 @@ const Component = () => ( | className | keep it as is | | content | see Migrate content prop in this document | | variables, design, styles | see Migrate style overrides in this document | -| accessibility | see [migrate-custom-accessibility.md](?path=/docs/concepts-upgrading-from-v0-custom-accessibility--page) | +| accessibility | see [migrate-custom-accessibility.md](?path=/docs/concepts-migrating-from-v0-custom-accessibility--page) | | color | REMOVED: use styles and color tokens to set the color | | ref, key | keep it as is | @@ -96,7 +96,7 @@ const Component = () => Header content; ## Migrate style overrides -⚠️ **If this is your first migration**, please read [the general guide on how to migrate styles](?path=/docs/concepts-upgrading-from-v0-custom-style-overrides--page). +⚠️ **If this is your first migration**, please read [the general guide on how to migrate styles](?path=/docs/concepts-migrating-from-v0-custom-style-overrides--page). ### Example for migrate boolean `variables`: diff --git a/apps/public-docsite-v9/src/Concepts/Upgrade/FromV0/Components/Image.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Image.stories.mdx similarity index 94% rename from apps/public-docsite-v9/src/Concepts/Upgrade/FromV0/Components/Image.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Image.stories.mdx index 12f0bafc5a81f..41500c1a045f4 100644 --- a/apps/public-docsite-v9/src/Concepts/Upgrade/FromV0/Components/Image.stories.mdx +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Image.stories.mdx @@ -1,8 +1,8 @@ import { Meta } from '@storybook/addon-docs'; - + -# Image Upgrade +# Image Migration ## Overview: @@ -28,7 +28,7 @@ const Component = () => ; | src, alt, aria-label, key, ref | keep it as is | | aria-hidden | if `alt` property is empty and image is illustrative or not relevant for screen reader users, it's **required** to add `aria-hidden="true"` attribute (in v0 it was applied bt default) | | variables, design, styles | see Migrate style overrides in this document | -| accessibility | see [migrate-custom-accessibility.md](?path=/docs/concepts-upgrading-from-v0-custom-accessibility--page) | +| accessibility | see [migrate-custom-accessibility.md](?path=/docs/concepts-migrating-from-v0-custom-accessibility--page) | | fluid | replace with `fit="contain"` | | circular | replace with `shape="circular"` | | avatar | see Migrate avatar prop in this document | @@ -37,7 +37,7 @@ const Component = () => ; ## Migrate style overrides -⚠️ **If this is your first migration**, please read [the general guide on how to migrate styles](?path=/docs/concepts-upgrading-from-v0-custom-style-overrides--page). +⚠️ **If this is your first migration**, please read [the general guide on how to migrate styles](?path=/docs/concepts-migrating-from-v0-custom-style-overrides--page). ### Example for migrate boolean `variables`: diff --git a/apps/public-docsite-v9/src/Concepts/Upgrade/FromV0/Components/Input.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Input.stories.mdx similarity index 98% rename from apps/public-docsite-v9/src/Concepts/Upgrade/FromV0/Components/Input.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Input.stories.mdx index d56a3681b94ca..542280e241e2a 100644 --- a/apps/public-docsite-v9/src/Concepts/Upgrade/FromV0/Components/Input.stories.mdx +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Input.stories.mdx @@ -1,14 +1,14 @@ import { Meta } from '@storybook/addon-docs'; - + -# Input Upgrade +# Input Migration Fluent UI Northstar (v0) provides the `Input` control to elicit input from users. Fluent UI v9 also provides an `Input` control but with a different API and feature set. ## Examples -### Basic Upgrade +### Basic Migration Basic usage of `Input` v0 looks like diff --git a/apps/public-docsite-v9/src/Concepts/Upgrade/FromV0/Components/Label.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Label.stories.mdx similarity index 95% rename from apps/public-docsite-v9/src/Concepts/Upgrade/FromV0/Components/Label.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Label.stories.mdx index f7df4eb3634a5..cfe17cf5cec40 100644 --- a/apps/public-docsite-v9/src/Concepts/Upgrade/FromV0/Components/Label.stories.mdx +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Label.stories.mdx @@ -1,8 +1,8 @@ import { Meta } from '@storybook/addon-docs'; - + -# Label Upgrade +# Label Migration Fluent UI Northstar (v0) provides the `Label` control to allow users to classify content. Fluent UI v9 also provides a `Label`, but has a different API. @@ -10,7 +10,7 @@ The main difference with v0's and v9's `Label` is that v9 doesn't provide an ima ## Examples -### Basic Upgrade +### Basic Migration Basic usage of `Label` v0 diff --git a/apps/public-docsite-v9/src/Concepts/Upgrade/FromV0/Components/Popup.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Popup.stories.mdx similarity index 96% rename from apps/public-docsite-v9/src/Concepts/Upgrade/FromV0/Components/Popup.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Popup.stories.mdx index 454bc9be1669c..fe78e4865745c 100644 --- a/apps/public-docsite-v9/src/Concepts/Upgrade/FromV0/Components/Popup.stories.mdx +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Popup.stories.mdx @@ -1,8 +1,8 @@ import { Meta } from '@storybook/addon-docs'; - + -# Popup Upgrade +# Popup Migration ## Overview: @@ -45,7 +45,7 @@ const Component = () => ( v9 positioning shorthand is recommended when only `positon` or/and `align` is used: `` can be migrate to a string like ``. -See [Migrate positioning props](?path=/docs/concepts-upgrading-from-v0-positioning--page) for more. +See [Migrate positioning props](?path=/docs/concepts-migrating-from-v0-positioning--page) for more. #### Removed props: @@ -125,4 +125,4 @@ export const useStyles = makeStyles({ }); ``` -⚠️ **If this is your first time migrating style overrides**, please read [the general guide on how to migrate styles](?path=/docs/concepts-upgrading-from-v0-custom-style-overrides--page). +⚠️ **If this is your first time migrating style overrides**, please read [the general guide on how to migrate styles](?path=/docs/concepts-migrating-from-v0-custom-style-overrides--page). diff --git a/apps/public-docsite-v9/src/Concepts/Upgrade/FromV0/Components/RadioGroup.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/RadioGroup.stories.mdx similarity index 98% rename from apps/public-docsite-v9/src/Concepts/Upgrade/FromV0/Components/RadioGroup.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/RadioGroup.stories.mdx index 14b5c9eaf3a76..8957e6049486d 100644 --- a/apps/public-docsite-v9/src/Concepts/Upgrade/FromV0/Components/RadioGroup.stories.mdx +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/RadioGroup.stories.mdx @@ -1,8 +1,8 @@ import { Meta } from '@storybook/addon-docs'; - + -# RadioGroup Upgrade +# RadioGroup Migration Fluent UI Northstar (v0) provides the `RadioGroup` control for presenting a list of radio options. Fluent UI v9 also provides a `RadioGroup` control but with a different API. @@ -10,7 +10,7 @@ While there are several differences between these controls, the primary change i ## Examples -### Basic Upgrade +### Basic Migration Basic usage of `RadioGroup` v0 looks like diff --git a/apps/public-docsite-v9/src/Concepts/Upgrade/FromV0/Components/Spinner.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Spinner.stories.mdx similarity index 94% rename from apps/public-docsite-v9/src/Concepts/Upgrade/FromV0/Components/Spinner.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Spinner.stories.mdx index 8ea8d152ece51..6ab797045af17 100644 --- a/apps/public-docsite-v9/src/Concepts/Upgrade/FromV0/Components/Spinner.stories.mdx +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Spinner.stories.mdx @@ -1,15 +1,15 @@ import { Meta } from '@storybook/addon-docs'; - + -# Loader Upgrade +# Loader Migration Fluent UI Northstar (v0) provides the `Loader` control to allow users to indicate that content is being loaded on the screen. Fluent UI v9 provides a `Spinner` control with a different API. ## Examples -### Basic Upgrade +### Basic Migration Basic usage of `Loader` v0 diff --git a/apps/public-docsite-v9/src/Concepts/Upgrade/FromV0/Components/Textarea.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Textarea.stories.mdx similarity index 96% rename from apps/public-docsite-v9/src/Concepts/Upgrade/FromV0/Components/Textarea.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Textarea.stories.mdx index c0026866d7fd0..9a73784c38652 100644 --- a/apps/public-docsite-v9/src/Concepts/Upgrade/FromV0/Components/Textarea.stories.mdx +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Textarea.stories.mdx @@ -1,14 +1,14 @@ import { Meta } from '@storybook/addon-docs'; - + -# Textarea Upgrade +# Textarea Migration Fluent UI Northstar (v0) provides the `TextArea` control to allow users to enter and edit multi-line text. Fluent UI v9 provides a `Textarea` control, but has a different API. ## Examples -### Basic Upgrade +### Basic Migration Basic usage of `TextArea` v0 diff --git a/apps/public-docsite-v9/src/Concepts/Upgrade/FromV0/Components/Tooltip.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Tooltip.stories.mdx similarity index 96% rename from apps/public-docsite-v9/src/Concepts/Upgrade/FromV0/Components/Tooltip.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Tooltip.stories.mdx index 51ed922edee58..04af366807006 100644 --- a/apps/public-docsite-v9/src/Concepts/Upgrade/FromV0/Components/Tooltip.stories.mdx +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Tooltip.stories.mdx @@ -1,8 +1,8 @@ import { Meta } from '@storybook/addon-docs'; - + -# Tooltip Upgrade +# Tooltip Migration ## Overview: @@ -46,7 +46,7 @@ const Component = () => ( Postioning props: `align`, `autoSize`, `flipBoundary`, `offset`,`overflowBoundary`,`popperRef`,`position`,`positionFixed`,`target`, `unstable_disableTether`, `unstable_pinned` are now attributes of the `positioning` prop. v9 positioning shorthand is recommended when only `positon` or/and `align` is used: `` can be migrate to a string like ``. -See [Migrate positioning props](?path=/docs/concepts-upgrading-from-v0-positioning--page) for more. +See [Migrate positioning props](?path=/docs/concepts-migrating-from-v0-positioning--page) for more. Here's a [codesandbox](https://codesandbox.io/s/tooltip-migration-2gy8r1?file=/example.js) comparing v0 and v9 Tooltip. @@ -119,7 +119,7 @@ export const useStyles = makeStyles({ }); ``` -⚠️ **If this is your first time migrating style overrides**, please read [the general guide on how to migrate styles](?path=/docs/concepts-upgrading-from-v0-custom-style-overrides--page). +⚠️ **If this is your first time migrating style overrides**, please read [the general guide on how to migrate styles](?path=/docs/concepts-migrating-from-v0-custom-style-overrides--page). ## Migrate accessibility diff --git a/apps/public-docsite-v9/src/Concepts/Upgrade/FromV0/migrate-custom-accessibility.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/migrate-custom-accessibility.stories.mdx similarity index 97% rename from apps/public-docsite-v9/src/Concepts/Upgrade/FromV0/migrate-custom-accessibility.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Migration/FromV0/migrate-custom-accessibility.stories.mdx index f25ebccb0d682..1d4030492cbfa 100755 --- a/apps/public-docsite-v9/src/Concepts/Upgrade/FromV0/migrate-custom-accessibility.stories.mdx +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/migrate-custom-accessibility.stories.mdx @@ -1,6 +1,6 @@ import { Meta } from '@storybook/addon-docs'; - + # Migrate Custom Accessibility diff --git a/apps/public-docsite-v9/src/Concepts/Upgrade/FromV0/migrate-positioning.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/migrate-positioning.stories.mdx similarity index 96% rename from apps/public-docsite-v9/src/Concepts/Upgrade/FromV0/migrate-positioning.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Migration/FromV0/migrate-positioning.stories.mdx index 09d7916adcc54..6cf1149e8e1f2 100644 --- a/apps/public-docsite-v9/src/Concepts/Upgrade/FromV0/migrate-positioning.stories.mdx +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/migrate-positioning.stories.mdx @@ -1,6 +1,6 @@ import { Meta } from '@storybook/addon-docs'; - + # Migrate Positioning Props diff --git a/apps/public-docsite-v9/src/Concepts/Upgrade/FromV0/migrate-styles.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/migrate-styles.stories.mdx similarity index 73% rename from apps/public-docsite-v9/src/Concepts/Upgrade/FromV0/migrate-styles.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Migration/FromV0/migrate-styles.stories.mdx index a383c6a2ca577..0162f90f040d2 100755 --- a/apps/public-docsite-v9/src/Concepts/Upgrade/FromV0/migrate-styles.stories.mdx +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/migrate-styles.stories.mdx @@ -1,12 +1,12 @@ import { Meta } from '@storybook/addon-docs'; - + # Migrate Custom Style Overrides This guide provides instructions for migrate style overrides on react-northstar (v0) components to v9 components. -React-northstar provides a flexible styling and theming infrastructure and different consumers might have built their own way of adjusting the styles based on it. The component upgrade guides provide abstracted examples that show how to migrate one of the approaches used with v0 components to the v9 standardized `makeStyles` approach. +React-northstar provides a flexible styling and theming infrastructure and different consumers might have built their own way of adjusting the styles based on it. The component migration guides provide abstracted examples that show how to migrate one of the approaches used with v0 components to the v9 standardized `makeStyles` approach. ## Overview diff --git a/apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/ComponentMapping.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/ComponentMapping.stories.mdx similarity index 98% rename from apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/ComponentMapping.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Migration/FromV8/ComponentMapping.stories.mdx index a9afd9c4cd1a7..05f6fd9fc2108 100644 --- a/apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/ComponentMapping.stories.mdx +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/ComponentMapping.stories.mdx @@ -1,8 +1,8 @@ import { Meta } from '@storybook/addon-docs'; - + -# Component Upgrade +# Component Migration Here is the mapping of v8 components to their v9 component replacement or equivalent. diff --git a/apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/Components/AvatarGroup.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/AvatarGroup.stories.mdx similarity index 97% rename from apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/Components/AvatarGroup.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/AvatarGroup.stories.mdx index 9afee006cc935..f4c19fdc7f302 100644 --- a/apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/Components/AvatarGroup.stories.mdx +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/AvatarGroup.stories.mdx @@ -1,8 +1,8 @@ import { Meta } from '@storybook/addon-docs'; - + -# AvatarGroup Upgrade +# AvatarGroup Migration Fluent UI v8 provides the `Facepile` control to allow users to display a list of `Personas`. Fluent UI v9 provides an `AvatarGroup` control, but has a different API. @@ -17,7 +17,7 @@ v9 also provides a function `partitionAvatarGroupItems` that will split the item ## Examples -### Basic Upgrade +### Basic Migration Basic usage of `FacePile` in v8 diff --git a/apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/Components/Button/ActionButtonShimExample.tsx b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Button/ActionButtonShimExample.tsx similarity index 100% rename from apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/Components/Button/ActionButtonShimExample.tsx rename to apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Button/ActionButtonShimExample.tsx diff --git a/apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/Components/Button/Button.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Button/Button.stories.mdx similarity index 96% rename from apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/Components/Button/Button.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Button/Button.stories.mdx index 5d563560a2192..27b042c520531 100644 --- a/apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/Components/Button/Button.stories.mdx +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Button/Button.stories.mdx @@ -1,15 +1,15 @@ import { Meta } from '@storybook/addon-docs'; import { ButtonShimExamples } from './ButtonShimExamples.tsx'; - + -# Button Upgrade +# Button Migration The v8 button variants share the IButtonProps. When using ButtonBase the resulting variant is rendered based on the buttonType (normal, primary, hero, compound, command, icon, or default) and when using a variant directly then props like primary and split change how the button is rendered. In v9, there is not a shared button type. Variants have their own props although they may extend ButtonProps. There are not variants for primary and action buttons. This is controlled through the appearance prop. -To upgrade a button replace the v8 usage with the corresponding v9 button variant. Use the property mapping to pass the right properties to the v9 button. +To migrate a button replace the v8 usage with the corresponding v9 button variant. Use the property mapping to pass the right properties to the v9 button. ## Button Variant Mapping @@ -78,7 +78,7 @@ The button shim components accept v8 `IButtonProps` and render v9 buttons. Shims are useful when you have a large number of usage instances, want to render v9 components, and do not have time or resources to update every instance. -Prefer to upgrade your code to use v9 buttons if possible rather than take a use shims. +Prefer to migrate your code to use v9 buttons if possible rather than take a use shims. Shim depend on both v8 and v9 so may prevent bundle size optimizations. You can find the button shims in the Fluent UI React repository here [apps/public-docsite-v9/src/shims/ButtonShim.tsx](https://github.com/microsoft/fluentui/blob/master/apps/public-docsite-v9/src/shims/ButtonShim.tsx) diff --git a/apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/Components/Button/ButtonShimExamples.tsx b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Button/ButtonShimExamples.tsx similarity index 100% rename from apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/Components/Button/ButtonShimExamples.tsx rename to apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Button/ButtonShimExamples.tsx diff --git a/apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/Components/Button/CommandButtonShimExample.tsx b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Button/CommandButtonShimExample.tsx similarity index 100% rename from apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/Components/Button/CommandButtonShimExample.tsx rename to apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Button/CommandButtonShimExample.tsx diff --git a/apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/Components/Button/CompoundButtonShimExample.tsx b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Button/CompoundButtonShimExample.tsx similarity index 100% rename from apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/Components/Button/CompoundButtonShimExample.tsx rename to apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Button/CompoundButtonShimExample.tsx diff --git a/apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/Components/Button/DefaultButtonShimExample.tsx b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Button/DefaultButtonShimExample.tsx similarity index 100% rename from apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/Components/Button/DefaultButtonShimExample.tsx rename to apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Button/DefaultButtonShimExample.tsx diff --git a/apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/Components/Button/MenuButtonShimExample.tsx b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Button/MenuButtonShimExample.tsx similarity index 100% rename from apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/Components/Button/MenuButtonShimExample.tsx rename to apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Button/MenuButtonShimExample.tsx diff --git a/apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/Components/Button/PrimaryButtonShimExample.tsx b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Button/PrimaryButtonShimExample.tsx similarity index 100% rename from apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/Components/Button/PrimaryButtonShimExample.tsx rename to apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Button/PrimaryButtonShimExample.tsx diff --git a/apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/Components/Button/ToggleButtonShimExample.tsx b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Button/ToggleButtonShimExample.tsx similarity index 100% rename from apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/Components/Button/ToggleButtonShimExample.tsx rename to apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Button/ToggleButtonShimExample.tsx diff --git a/apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/Components/Checkbox.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Checkbox.stories.mdx similarity index 96% rename from apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/Components/Checkbox.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Checkbox.stories.mdx index 378e767510a0f..adc164dff3ae9 100644 --- a/apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/Components/Checkbox.stories.mdx +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Checkbox.stories.mdx @@ -1,8 +1,8 @@ import { Meta } from '@storybook/addon-docs'; - + -# Checkbox Upgrade +# Checkbox Migration Fluent UI v8 provides the `Checkbox` control to give people a way to select one or more items from a group, or switch between two mutually exclusive options. Fluent UI v9 provides a `Checkbox` control, but has a different API. @@ -10,7 +10,7 @@ The main difference between v8 and v9 `Checkbox` is that v9 offers a circular va ## Examples -### Basic Upgrade +### Basic Migration Basic usage of `Checkbox` v8 diff --git a/apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/Components/Divider.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Divider.stories.mdx similarity index 83% rename from apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/Components/Divider.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Divider.stories.mdx index c16a858f1423a..7e745b0045cd0 100644 --- a/apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/Components/Divider.stories.mdx +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Divider.stories.mdx @@ -1,12 +1,12 @@ import { Meta } from '@storybook/addon-docs'; - + -# Separator to Divider Upgrade +# Separator to Divider Migration The v8 `Separator` component is called `Divider` in v9. -Upgrade should be a straightforward name change of the component. +Migration should be a straightforward name change of the component. v9 `Divider` supports the same `alignContent`, `children` and `vertical` props. If you custom styled `Separator` then use `makeStyles` to set a `className` with `Divider`. diff --git a/apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/Components/Input.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Input.stories.mdx similarity index 98% rename from apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/Components/Input.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Input.stories.mdx index 27cbac7aaa160..5ba737a328324 100644 --- a/apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/Components/Input.stories.mdx +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Input.stories.mdx @@ -1,8 +1,8 @@ import { Meta } from '@storybook/addon-docs'; - + -# TextField to Input Upgrade +# TextField to Input Migration Fluent UI v8 provides the `TextField` control for entering and editing text. In Fluent UI v9 `TextField` is replaced with `Input`. @@ -10,7 +10,7 @@ While basic usage is largely the same, `Input` omits some features found in `Tex ## Examples -### Basic Upgrade +### Basic Migration Basic usage of `TextField` looks like diff --git a/apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/Components/Label.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Label.stories.mdx similarity index 94% rename from apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/Components/Label.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Label.stories.mdx index c341cf92c6296..2af877d3724fa 100644 --- a/apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/Components/Label.stories.mdx +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Label.stories.mdx @@ -1,8 +1,8 @@ import { Meta } from '@storybook/addon-docs'; - + -# Label Upgrade +# Label Migration Fluent UI v8 provides the `Label` control that gives a name or title to a control or group of controls. Fluent UI v9 also provides a `Label` with a slightly different API. @@ -10,7 +10,7 @@ The main difference with v8's and v9's `Label` is that v9 allows the user to use ## Examples -### Basic Upgrade +### Basic Migration Basic usage of `Label` v8 diff --git a/apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/Components/Menu.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Menu.stories.mdx similarity index 99% rename from apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/Components/Menu.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Menu.stories.mdx index ea46e4002abdc..2f888ffffe359 100644 --- a/apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/Components/Menu.stories.mdx +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Menu.stories.mdx @@ -1,8 +1,8 @@ import { Meta } from '@storybook/addon-docs'; - + -# Menu Upgrade +# Menu Migration **v8** diff --git a/apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/Components/RadioGroup.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/RadioGroup.stories.mdx similarity index 98% rename from apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/Components/RadioGroup.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/RadioGroup.stories.mdx index 4bc88741e6fe2..853118f0467f3 100644 --- a/apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/Components/RadioGroup.stories.mdx +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/RadioGroup.stories.mdx @@ -1,8 +1,8 @@ import { Meta } from '@storybook/addon-docs'; - + -# ChoiceGroup to RadioGroup Upgrade +# ChoiceGroup to RadioGroup Migration Fluent UI v8 provides the `ChoiceGroup` control for presenting a list of radio options. In Fluent UI v9 `ChoiceGroup` is replaced with `RadioGroup`. @@ -12,7 +12,7 @@ its options as child `Radio` components while `ChoiceGroup` accepts options via ## Examples -### Basic Upgrarde +### Basic Migration Basic usage of `ChoiceGroup` looks like @@ -58,7 +58,7 @@ const RadioGroupBasicExample = () => { }; ``` -### Custom Option Rendering Upgrade +### Custom Option Rendering Migration Since `RadioGroup` accepts options as children, options may be directly customized without the use of v8's `onRenderField` callback. diff --git a/apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/Components/Slider/Slider.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Slider/Slider.stories.mdx similarity index 96% rename from apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/Components/Slider/Slider.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Slider/Slider.stories.mdx index d24f4bf44bfa6..41e5233222ae8 100644 --- a/apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/Components/Slider/Slider.stories.mdx +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Slider/Slider.stories.mdx @@ -16,16 +16,16 @@ import { V9FormattedValueExample, } from './Sliderv9Examples.stories'; - + -# Slider Upgrade +# Slider Migration Fluent UI V8 provides the `Slider` control to represents an input that allows user to choose a value from within a specific range. Fluent UI v9 provides a `Slider` control with a different API. ## Examples -### Basic Upgrade +### Basic Migration Basic usage of `Slider` V8 diff --git a/apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/Components/Slider/Sliderv8Examples.stories.tsx b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Slider/Sliderv8Examples.stories.tsx similarity index 100% rename from apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/Components/Slider/Sliderv8Examples.stories.tsx rename to apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Slider/Sliderv8Examples.stories.tsx diff --git a/apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/Components/Slider/Sliderv9Examples.stories.tsx b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Slider/Sliderv9Examples.stories.tsx similarity index 100% rename from apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/Components/Slider/Sliderv9Examples.stories.tsx rename to apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Slider/Sliderv9Examples.stories.tsx diff --git a/apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/Components/SpinButton.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/SpinButton.stories.mdx similarity index 98% rename from apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/Components/SpinButton.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/SpinButton.stories.mdx index 132049203339e..0b8366925585f 100644 --- a/apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/Components/SpinButton.stories.mdx +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/SpinButton.stories.mdx @@ -1,14 +1,14 @@ import { Meta } from '@storybook/addon-docs'; - + -# SpinButton Upgrade +# SpinButton Migration -Both Fluent UI v8 and v9 provide `SpinButton` controls. The controls are largely similar and this guide provides some examples of how to upgrade areas that differ. +Both Fluent UI v8 and v9 provide `SpinButton` controls. The controls are largely similar and this guide provides some examples of how to migrate areas that differ. ## Examples -### Basic Upgrade +### Basic Migration Basic usage of `SpinButton` v8 looks like @@ -104,7 +104,7 @@ const SpinButtonV9BasicExample = () => { }; ``` -### Custom Suffixes Upgrade +### Custom Suffixes Migration Basic usage of `SpinButton` v8 custom suffixes looks like diff --git a/apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/Components/Spinner.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Spinner.stories.mdx similarity index 93% rename from apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/Components/Spinner.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Spinner.stories.mdx index e3dfafcbee066..9385daca73ca3 100644 --- a/apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/Components/Spinner.stories.mdx +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Spinner.stories.mdx @@ -1,15 +1,15 @@ import { Meta } from '@storybook/addon-docs'; - + -# Spinner Upgrade +# Spinner Migration Fluent UI V8 provides the `Spinner` control to allow users to indicate that content is being loaded on the screen. Fluent UI v9 provides a `Spinner` control with a different API. ## Examples -### Basic Upgrade +### Basic Migration Basic usage of `Spinner` V8 diff --git a/apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/Components/Tabs.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Tabs.stories.mdx similarity index 94% rename from apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/Components/Tabs.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Tabs.stories.mdx index 628e6de236e7c..481d65689afa3 100644 --- a/apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/Components/Tabs.stories.mdx +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Tabs.stories.mdx @@ -1,8 +1,8 @@ import { Meta } from '@storybook/addon-docs'; - + -# Tabs (Pivot) Upgrade +# Tabs (Pivot) Migration ## v8 Pivot & PivotItem @@ -38,9 +38,9 @@ The key difference is the `Tab` children are rendered as the label of the tab. - This allows for much richer tab label, for the associated content to be placed anywhere in the DOM, and for more control over when and how associated content is rendered. -### Upgrade Steps +### Migration Steps -To upgrade from `Pivot` to `TabList` +To migrate from `Pivot` to `TabList` - replace `Pivot` with `TabList` and `PivotItem` with `Tab` - move all the `PivotItem` content under a sibling element of `TabList` @@ -48,7 +48,7 @@ To upgrade from `Pivot` to `TabList` - add the `onTabSelect` event handler to set the selected tab value as state - update the content element to render the selected tabs content. -For example, here is the previous `Pivot` example upgraded to use `TabList` +For example, here is the previous `Pivot` example migrated to use `TabList` ```tsx const [selectedValue, setSelectedValue] = React.useState(); diff --git a/apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/Components/Textarea.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Textarea.stories.mdx similarity index 98% rename from apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/Components/Textarea.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Textarea.stories.mdx index 8366ae3f1faff..60f9667c16b0c 100644 --- a/apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/Components/Textarea.stories.mdx +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Textarea.stories.mdx @@ -1,8 +1,8 @@ import { Meta } from '@storybook/addon-docs'; - + -# Textarea Upgrade +# Textarea Migration Fluent UI v8 provides the `TextField` control to allow users to enter and edit text. Fluent UI v9 provides a `Textarea` control, but has a different API. @@ -10,7 +10,7 @@ v9 takes a different approach than v8 with respect to text inputs, and instead o ## Examples -### Basic Upgrade +### Basic Migration Basic usage of `TextField` v8 diff --git a/apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/Components/Theme.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Theme.stories.mdx similarity index 96% rename from apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/Components/Theme.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Theme.stories.mdx index e6f60573c2db9..851a9c7412db4 100644 --- a/apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/Components/Theme.stories.mdx +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Theme.stories.mdx @@ -1,11 +1,11 @@ import { Meta } from '@storybook/addon-docs'; - + -# Theme Upgrade +# Theme Migration There are several important differences between v8 and v9 in how style and theme are managed. -During the upgrade process, you will likely have components from both versions side-by-side. +During the migration process, you will likely have components from both versions side-by-side. You may decide you want components to all look like v8, all look like like v9, or be OK with a mixture but from the same color palette. diff --git a/apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/ThemeColors/BrandColors.stories.tsx b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/ThemeColors/BrandColors.stories.tsx similarity index 100% rename from apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/ThemeColors/BrandColors.stories.tsx rename to apps/public-docsite-v9/src/Concepts/Migration/FromV8/ThemeColors/BrandColors.stories.tsx diff --git a/apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/ThemeColors/ColorBlock.tsx b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/ThemeColors/ColorBlock.tsx similarity index 100% rename from apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/ThemeColors/ColorBlock.tsx rename to apps/public-docsite-v9/src/Concepts/Migration/FromV8/ThemeColors/ColorBlock.tsx diff --git a/apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/ThemeColors/ColorCompare.tsx b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/ThemeColors/ColorCompare.tsx similarity index 100% rename from apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/ThemeColors/ColorCompare.tsx rename to apps/public-docsite-v9/src/Concepts/Migration/FromV8/ThemeColors/ColorCompare.tsx diff --git a/apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/ThemeColors/ColorMapping.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/ThemeColors/ColorMapping.stories.mdx similarity index 96% rename from apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/ThemeColors/ColorMapping.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Migration/FromV8/ThemeColors/ColorMapping.stories.mdx index a0bc0c70278da..e11db12ed557c 100644 --- a/apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/ThemeColors/ColorMapping.stories.mdx +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/ThemeColors/ColorMapping.stories.mdx @@ -4,7 +4,7 @@ import { NamedColors } from './NamedColors.stories'; import { BrandColors } from './BrandColors.stories'; import { SemanticColors } from './SemanticColors.stories'; - + # Color Mapping diff --git a/apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/ThemeColors/NamedColors.stories.tsx b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/ThemeColors/NamedColors.stories.tsx similarity index 100% rename from apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/ThemeColors/NamedColors.stories.tsx rename to apps/public-docsite-v9/src/Concepts/Migration/FromV8/ThemeColors/NamedColors.stories.tsx diff --git a/apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/ThemeColors/NeutralColors.stories.tsx b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/ThemeColors/NeutralColors.stories.tsx similarity index 100% rename from apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/ThemeColors/NeutralColors.stories.tsx rename to apps/public-docsite-v9/src/Concepts/Migration/FromV8/ThemeColors/NeutralColors.stories.tsx diff --git a/apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/ThemeColors/SemanticColors.stories.tsx b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/ThemeColors/SemanticColors.stories.tsx similarity index 100% rename from apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/ThemeColors/SemanticColors.stories.tsx rename to apps/public-docsite-v9/src/Concepts/Migration/FromV8/ThemeColors/SemanticColors.stories.tsx diff --git a/apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/ThemeColors/colorMap.ts b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/ThemeColors/colorMap.ts similarity index 100% rename from apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/ThemeColors/colorMap.ts rename to apps/public-docsite-v9/src/Concepts/Migration/FromV8/ThemeColors/colorMap.ts diff --git a/apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/ThemeColors/colorUtils.ts b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/ThemeColors/colorUtils.ts similarity index 100% rename from apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/ThemeColors/colorUtils.ts rename to apps/public-docsite-v9/src/Concepts/Migration/FromV8/ThemeColors/colorUtils.ts diff --git a/apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/ThemeColors/themeMap.ts b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/ThemeColors/themeMap.ts similarity index 100% rename from apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/ThemeColors/themeMap.ts rename to apps/public-docsite-v9/src/Concepts/Migration/FromV8/ThemeColors/themeMap.ts diff --git a/apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/ThemeColors/types.ts b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/ThemeColors/types.ts similarity index 100% rename from apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/ThemeColors/types.ts rename to apps/public-docsite-v9/src/Concepts/Migration/FromV8/ThemeColors/types.ts diff --git a/apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/Troubleshooting.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Troubleshooting.stories.mdx similarity index 97% rename from apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/Troubleshooting.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Migration/FromV8/Troubleshooting.stories.mdx index 6478453c058e4..fed5b9c9cc21e 100644 --- a/apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/Troubleshooting.stories.mdx +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Troubleshooting.stories.mdx @@ -1,6 +1,6 @@ import { Meta } from '@storybook/addon-docs'; - + ## "I tried using the new components but there does not seem to be any styling applied to them. Am I doing something wrong?" diff --git a/apps/public-docsite-v9/src/Concepts/Upgrade/ImportantChanges.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/ImportantChanges.stories.mdx similarity index 99% rename from apps/public-docsite-v9/src/Concepts/Upgrade/ImportantChanges.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Migration/ImportantChanges.stories.mdx index 6a78ce27fb693..bba2de6cb427a 100644 --- a/apps/public-docsite-v9/src/Concepts/Upgrade/ImportantChanges.stories.mdx +++ b/apps/public-docsite-v9/src/Concepts/Migration/ImportantChanges.stories.mdx @@ -1,11 +1,11 @@ import { Meta } from '@storybook/addon-docs'; - + # Important changes you should know about v9 introduces several paradigm shifts that were necessary to improve performance, ease development, and reduce bundle size. -This resulted in some breaking changes you will need to handle as you upgrade. +This resulted in some breaking changes you will need to handle as you migrate. ## Props vs. Children diff --git a/apps/public-docsite-v9/src/Concepts/Upgrade/Overview.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/Overview.stories.mdx similarity index 72% rename from apps/public-docsite-v9/src/Concepts/Upgrade/Overview.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Migration/Overview.stories.mdx index 20dbac3a0ed96..1d814202443f1 100644 --- a/apps/public-docsite-v9/src/Concepts/Upgrade/Overview.stories.mdx +++ b/apps/public-docsite-v9/src/Concepts/Migration/Overview.stories.mdx @@ -1,27 +1,27 @@ import { Meta } from '@storybook/addon-docs'; - + -# Upgrading from v8 or v0 to v9 +# Migrating from v8 or v0 to v9 -If you or your team are currently using version 8 of `@fluentui/react` or version 0.x of `@fluentui/react-northstar` and are thinking of upgrading to version 9 +If you or your team are currently using version 8 of `@fluentui/react` or version 0.x of `@fluentui/react-northstar` and are thinking of migrating to version 9 then we would first like to **_thank you_** for making the jump and tell you how excited we are for you to experience all the improvements and features we have been working on. -There are several things to keep in mind when upgrading, so we have created these uprade guide topics explaining: +There are several things to keep in mind when migrating, so we have created these uprade guide topics explaining: - the new concepts you will encounter and how they map to concepts in previous versions -- things to consider when planning upgrade work -- detailed guidance on upgrading components -- examples and helper code to make upgrading easier +- things to consider when planning migration work +- detailed guidance on migrating components +- examples and helper code to make migrating easier We highly recommend reading through the v9 concepts for developers and the component documentation. -Knowing how v9 works will provide needed context for upgrading. +Knowing how v9 works will provide needed context for migrating. -## Why should I upgrade from v8 or v0 to v9? +## Why should I migrate from v8 or v0 to v9? Fluent UI React v9 provides significant improvements to components over both v8 and v0. -Some reasons to upgrade to v9: +Some reasons to migrate to v9: - New and improved visual styling, rendering performance, and accessibility - Easier to use and more consistent component props @@ -31,15 +31,15 @@ Some reasons to upgrade to v9: - Component composition and re-use leveraging React hooks - Reduced bundle size with tree shaking -## Do I have to upgrade all at once? +## Do I have to migrate all at once? -Absolutely not! **You can upgrade incrementally**. +Absolutely not! **You can migrate incrementally**. Fluent UI v9 was built as separate libraries with the intention of support incremental adoption of v9 components alongside v8 and v0 components. ## What if I'm on v7 right now? -We recommend first upgrading v7 to v8. The upgrade is mostly fixing a few breaking changes and replacing some deprecated components or props with newer versions. +We recommend first migrating v7 to v8. The migration is mostly fixing a few breaking changes and replacing some deprecated components or props with newer versions. ## What is available in v9? @@ -54,13 +54,13 @@ However, **all published components are production ready**. The v9 RC provides the following v8 equivalents: Avatar (previously Persona), Buttons, Divider, Image, Link, Portal and Popover (previously Layer/Overlay), Text, and Tooltip. There are also new components: Accordion, Badges, and Menu. -See the [Component Mapping](/docs/concepts-upgrading-from-v8-component-mapping--page) for a complete list. +See the [Component Mapping](/docs/concepts-migrating-from-v8-component-mapping--page) for a complete list. The v9 RC provides the following v0 equivalents: Accordion, Avatar, Badge (previously Status), Buttons, Divider, Image, Menu, Portal and Popover (previously Popup), Text, and Tooltip. ## How much effort is required? -We won't sugarcoat it; upgrading from v8 to v9 is more involved than the previous v7 to v8 upgrade. +We won't sugarcoat it; migrating from v8 to v9 is more involved than the previous v7 to v8 migration. There are breaking changes, component differences, and paradigm shifts. -The good news is that you can upgrade incrementally and take it one step at a time. +The good news is that you can migrate incrementally and take it one step at a time. diff --git a/apps/public-docsite-v9/src/Concepts/Upgrade/Planning.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/Planning.stories.mdx similarity index 72% rename from apps/public-docsite-v9/src/Concepts/Upgrade/Planning.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Migration/Planning.stories.mdx index c51f5d3a8ee32..f8ff4c9cfbbc0 100644 --- a/apps/public-docsite-v9/src/Concepts/Upgrade/Planning.stories.mdx +++ b/apps/public-docsite-v9/src/Concepts/Migration/Planning.stories.mdx @@ -1,14 +1,14 @@ import { Meta } from '@storybook/addon-docs'; - + # Planning your journey -As mentioned before, Fluent UI React v9 was designed to allow you to incrementally upgrade. +As mentioned before, Fluent UI React v9 was designed to allow you to incrementally migrate. You have a lot of flexibility on how you approach, plan, and execute moving to v9. This part of the guide will help you assess your project, choose your approach, -and plan out an iterative cycle for a successful upgrade. +and plan out an iterative cycle for a successful migration. ## Assessing your application @@ -23,8 +23,8 @@ Basic usage means you use the component with minimal customization. You pass typical props and bind data from your components or application state. ```tsx - ``` @@ -32,52 +32,52 @@ Advanced usage includes things like passing complex custom styles objects, callb ## Considerations -There are lots of ways to upgrade. Here are are some different options to consider. +There are lots of ways to migrate. Here are are some different options to consider. ### Incremental or All-at-once -_Incremental_: upgrade a few components and ship, often by flighting the upgraded components to a subset of users. +_Incremental_: migrate a few components and ship, often by flighting the migrated components to a subset of users. The benefits of the incremental approach are that you get v9 improvements sooner, find issues earlier, -and can iteratively get faster upgrading components. +and can iteratively get faster migrating components. -Since v9 does not have all the components offered in previous versions yet, incrementally upgrading allows you to gradually introduce v9 +Since v9 does not have all the components offered in previous versions yet, incrementally migrating allows you to gradually introduce v9 side-by-side with v8 or v0. You can more closely monitor the changes to bundle size and performance improvements with a gradual approach. -_All-at-once_: upgrade every v8/v0 component to their v9 equivalent. -You can still flight the upgraded experience to a subset of users. +_All-at-once_: migrate every v8/v0 component to their v9 equivalent. +You can still flight the migrated experience to a subset of users. You get the benefit that you could A/B route to different web application servers when flighting and keep the -previous untouched version running independent of the upgraded version. +previous untouched version running independent of the migrated version. You also get the maximum benefits of v9 including a new consistent style, tree-shaking out v8 components from the bundles, build-time CSS optimizations, and render performance improvements. ### Horizontal or Vertical -_Horizontal_: upgrading one component across your entire application. -For example, upgrading Button from previous version to v9 everywhere. +_Horizontal_: migrating one component across your entire application. +For example, migrating Button from previous version to v9 everywhere. This has the benefit that your code will end up only depending on v9 Button and the v8 Button won't be included in the downloaded bundle. Your buttons will look and behave the same across your app. -_Vertical_: upgrading all the components in one part of your application. -For example, upgrading Button, Divider, Persona, and Link on a contact status side bar. -This has the benefit that you can upgrade one part of your application in isolation leaving the rest of the app unaffected. +_Vertical_: migrating all the components in one part of your application. +For example, migrating Button, Divider, Persona, and Link on a contact status side bar. +This has the benefit that you can migrate one part of your application in isolation leaving the rest of the app unaffected. You can choose a non-critical part of your application to reduce risk of app-wide issues. -It makes it easier to trace any issues caused by upgrade. +It makes it easier to trace any issues caused by migration. Vertical may allow you to find integration issues earlier as you are using multiple new components. -You can also choose to upgrade one component in one part of your application. +You can also choose to migrate one component in one part of your application. You lose some of the benefits of each individual approach, but can try things out more slowly. ### Deep or Shallow -_Deep_: upgrading components that are core to your application and re-used in many places. -For example, upgrading a main toolbar to use the v9 Button and Menu components. +_Deep_: migrating components that are core to your application and re-used in many places. +For example, migrating a main toolbar to use the v9 Button and Menu components. You get the benefits of v9 across the entire application. -You will get more usage of the upgraded components and can gather feedback earlier. +You will get more usage of the migrated components and can gather feedback earlier. -_Shallow_: upgrading components that appear only in one non-critical place in your application. -For example, upgrading an optional edit profile screen. +_Shallow_: migrating components that appear only in one non-critical place in your application. +For example, migrating an optional edit profile screen. You get the benefit of limiting risk, but decrease the usage and may not find issues right away. ### New v9 or Old v8 style @@ -96,16 +96,16 @@ v0 will to some extent gradually converge its appearance. However, you might sti ### Manual changes, code mod scripts, or shims _Manual_: update each usage of Fluent React by hand. -This is the brute force approach to upgrade. +This is the brute force approach to migration. It may be the best option especially for smaller projects. You may have a lot of variety in how you use components that preclude a search/replace or automated option. -You may also have an existing wrapper around a component that allows you to upgrade at a single code location. +You may also have an existing wrapper around a component that allows you to migrate at a single code location. The benefits include you can call v9 components as intended, the opportunity to simplify and improve how your code uses Fluent, and you can make incremental check-ins ensuring existing tests pass. _Code mod_: author a script to update multiple locations in your code at once. -You may be able to leverage existing scripts from previous upgrades, from others who have upgraded, or from the Fluent React team. -If your codebase is very consistent in how it uses Fluent, this option can save a lot of extra effort over manual upgrade. +You may be able to leverage existing scripts from previous migrations, from others who have migrated, or from the Fluent React team. +If your codebase is very consistent in how it uses Fluent, this option can save a lot of extra effort over manual migration. You can have code mods that add flighting logic around usage to have both v8/v0 and v9 available. The downside is that if your usage is complex or highly varied, authoring a code mod that covers all cases may be impractical. @@ -122,11 +122,11 @@ content is not compatible with the v9 component. ### Small projects -If you have a small project and can commit the effort, we recommend upgrading everything and modifying the code directly. +If you have a small project and can commit the effort, we recommend migrating everything and modifying the code directly. This gives you the maximum benefit of rendering performance, build time style bundling, and tree-shaking out v8 components that are no longer used. You'll be able to refactor any advanced usage cases in the newer v9 paradigms and end up with cleaner code. -You should still consider flighting the upgraded experience, but you can A/B the entire application rather than if/then flighting per component in the code. +You should still consider flighting the migrated experience, but you can A/B the entire application rather than if/then flighting per component in the code. ### Medium or larger with advanced usage @@ -134,44 +134,44 @@ If you have a medium to large project, significant advanced usage of components, You can replace all the usages of a component like Button with ShimButton and get a v9 Button rendered. You get the benefits of v9 components and can crawl over the code to update to use v9 directly at your leisure. -Warning! Shims aren't free. You'll still need to modify code to upgrade custom styles, renderprops callbacks, and ref usage. Shims take a dependency on the v8 types and v9 components, so tree-shaking may be limited. Shims introduce mapping logic (although it shouldn't signficantly impact render performance). +Warning! Shims aren't free. You'll still need to modify code to migrate custom styles, renderprops callbacks, and ref usage. Shims take a dependency on the v8 types and v9 components, so tree-shaking may be limited. Shims introduce mapping logic (although it shouldn't signficantly impact render performance). ### Medium or larger apps with basic usage -If you have a large project with hundreds to thousands of Fluent component usages, we strongly recommend upgrading horizontally. The Button component is a typical choice to upgrade across the application. +If you have a large project with hundreds to thousands of Fluent component usages, we strongly recommend migrating horizontally. The Button component is a typical choice to migrate across the application. -If your usage is mostly basic, we recommend authoring a code-mod to handle what would be too tedious with search & replace. Consider running code-mods to handle most cases and then do some manual upgrade work to cover the rest. +If your usage is mostly basic, we recommend authoring a code-mod to handle what would be too tedious with search & replace. Consider running code-mods to handle most cases and then do some manual migration work to cover the rest. ### Large with advanced usage If you have a large projects with thousands of Fluent component usages, a lot of advanced usage, and several resource constraints, we recommend creating an application-specific shim and permanent abstraction around the Fluent component. -A permanent abstraction will give you a place to adapt for compatibility as you move from v8 props to v9 props. It will also be valuable with future upgrades. v9 has a new hook-based composition model you can leverage to create a shim without introducing the extra virtual DOM elements of a wrapper. You can also introduce the flighting logic within your shim to be able to toggle the upgrade on/off. +A permanent abstraction will give you a place to adapt for compatibility as you move from v8 props to v9 props. It will also be valuable with future migrations. v9 has a new hook-based composition model you can leverage to create a shim without introducing the extra virtual DOM elements of a wrapper. You can also introduce the flighting logic within your shim to be able to toggle the migration on/off. -You can consider code-mods to upgrade the more basic usage, but will likely find too much variance to handle all the cases across your code. +You can consider code-mods to migrate the more basic usage, but will likely find too much variance to handle all the cases across your code. -We recommend you upgrade horizontally, but you may want to upgrade horizontally within one portion of your application at a time. For example, all the buttons in a toolbar or on a related set of pages in your application. This lets you upgrade in stages without destabilizing then entire application. +We recommend you migrate horizontally, but you may want to migrate horizontally within one portion of your application at a time. For example, all the buttons in a toolbar or on a related set of pages in your application. This lets you migrate in stages without destabilizing then entire application. -If you have a subsystem of your application that is independent and similar to a small/medium application, you may choose to upgrade it vertically. You can have a cohesive improvement to one part of the application and flight it independent of the rest of the application. +If you have a subsystem of your application that is independent and similar to a small/medium application, you may choose to migrate it vertically. You can have a cohesive improvement to one part of the application and flight it independent of the rest of the application. ## Creating a plan -We strongly recommend using a work item tracking system or Excel spreadsheet to plan out your upgrade tasks. +We strongly recommend using a work item tracking system or Excel spreadsheet to plan out your migration tasks. ### A plan for a plan You should create and complete a set of planning tasks: 1. Measure the current bundle size, render performance, and other metrics for later comparison. -2. Determine the mechanism for how you will flight the upgraded components to a subset of users. -3. Decide on any pre-upgrade improvements that you will make first to reduce upgrade effort. +2. Determine the mechanism for how you will flight the migrated components to a subset of users. +3. Decide on any pre-migration improvements that you will make first to reduce migration effort. 4. Determine what other constraints you have - maximum bundle size, performance bars, allowed style inconsistencies, etc. 5. Assess the application and choose your approach. -6. Choose a target deadline or milestone date for each phase of upgrade. +6. Choose a target deadline or milestone date for each phase of migration. ### Getting started tasks -You should plan a set of getting started tasks for upgrading one component in one location. +You should plan a set of getting started tasks for migrating one component in one location. 1. Update project to reference Fluent React v9. 2. Add FluentProvider with a theme to the root of the app @@ -180,7 +180,7 @@ You should plan a set of getting started tasks for upgrading one component in on ### Iterative planning -Plan a task or set of tasks to be able to 'rinse and repeat' each usage upgrade. +Plan a task or set of tasks to be able to 'rinse and repeat' each usage migration. - The type of tasks and their granularity will vary depending on your approach. -- After upgrading some instances, review how long each took and plan out the next set of tasks. +- After migrating some instances, review how long each took and plan out the next set of tasks. diff --git a/apps/public-docsite-v9/src/stories/StackShim.stories.tsx b/apps/public-docsite-v9/src/stories/StackShim.stories.tsx index 16a21d7de597a..ecc37b3a5e8df 100644 --- a/apps/public-docsite-v9/src/stories/StackShim.stories.tsx +++ b/apps/public-docsite-v9/src/stories/StackShim.stories.tsx @@ -209,7 +209,7 @@ export const StackShimStory = () => { }; export default { - title: 'Concepts/Upgrading/from v8/Shims/Stack', + title: 'Concepts/Migration/from v8/Shims/Stack', component: Button, decorators: [ Story => ( diff --git a/change/@fluentui-react-components-e349e408-4be5-4669-a75b-4e9191d6e7d1.json b/change/@fluentui-react-components-e349e408-4be5-4669-a75b-4e9191d6e7d1.json new file mode 100644 index 0000000000000..85c70da2680f6 --- /dev/null +++ b/change/@fluentui-react-components-e349e408-4be5-4669-a75b-4e9191d6e7d1.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Changed from upgrade to migrate terminology", + "packageName": "@fluentui/react-components", + "email": "gcox@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-components/src/Migrations/Flex.Flex.stories.mdx b/packages/react-components/react-components/src/Migrations/Flex.Flex.stories.mdx index 04d108983ebf5..20e0da1e7315e 100644 --- a/packages/react-components/react-components/src/Migrations/Flex.Flex.stories.mdx +++ b/packages/react-components/react-components/src/Migrations/Flex.Flex.stories.mdx @@ -1,7 +1,7 @@ import { Meta } from '@storybook/addon-docs'; import { CodeComparison, CodeExample } from './utils.stories'; - + # @fluentui/react-northstar - Flex diff --git a/packages/react-components/react-components/src/Migrations/Flex.FlexItem.stories.mdx b/packages/react-components/react-components/src/Migrations/Flex.FlexItem.stories.mdx index 42e9296849e71..5ec20891d2694 100644 --- a/packages/react-components/react-components/src/Migrations/Flex.FlexItem.stories.mdx +++ b/packages/react-components/react-components/src/Migrations/Flex.FlexItem.stories.mdx @@ -1,7 +1,7 @@ import { Meta } from '@storybook/addon-docs'; import { CodeComparison, CodeExample } from './utils.stories'; - + # @fluentui/react-northstar - Flex.Item diff --git a/packages/react-components/react-components/src/Migrations/Flex.Overview.stories.mdx b/packages/react-components/react-components/src/Migrations/Flex.Overview.stories.mdx index 8f4f58d26231a..f6863a0feef9f 100644 --- a/packages/react-components/react-components/src/Migrations/Flex.Overview.stories.mdx +++ b/packages/react-components/react-components/src/Migrations/Flex.Overview.stories.mdx @@ -1,6 +1,6 @@ import { Meta } from '@storybook/addon-docs'; - + # Flex diff --git a/packages/react-components/react-components/src/Migrations/Flex.Stack.stories.mdx b/packages/react-components/react-components/src/Migrations/Flex.Stack.stories.mdx index 5624c1571c3a1..86bec0399d5b7 100644 --- a/packages/react-components/react-components/src/Migrations/Flex.Stack.stories.mdx +++ b/packages/react-components/react-components/src/Migrations/Flex.Stack.stories.mdx @@ -1,7 +1,7 @@ import { Meta } from '@storybook/addon-docs'; import { CodeComparison, CodeExample } from './utils.stories'; - + # @fluentui/react - Stack diff --git a/packages/react-components/react-components/src/Migrations/Flex.StackItem.stories.mdx b/packages/react-components/react-components/src/Migrations/Flex.StackItem.stories.mdx index eca4ebfe84635..bb6e2663fe10b 100644 --- a/packages/react-components/react-components/src/Migrations/Flex.StackItem.stories.mdx +++ b/packages/react-components/react-components/src/Migrations/Flex.StackItem.stories.mdx @@ -1,7 +1,7 @@ import { Meta } from '@storybook/addon-docs'; import { CodeComparison, CodeExample } from './utils.stories'; - + # @fluentui/react - Stack.Item