microsoft · GeoffCoxMSFT · Sep 7, 2022 · Sep 7, 2022 · Sep 7, 2022 · Sep 7, 2022
@@ -26,7 +26,7 @@ export const parameters = {
           'Introduction',
           'Developer',
           ['Quick Start', 'Styling Components', 'Positioning Components', 'Component Poster'],
-          'Upgrading',
+          'Migration',
           [
             'Overview',
             'Important changes',

@@ -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",

@@ -1,8 +1,8 @@
 import { Meta } from '@storybook/addon-docs';
 
-<Meta title="Concepts/Upgrading/from v0/Components/Avatar Upgrade" />
+<Meta title="Concepts/Migration/from v0/Components/Avatar Migration" />
 
-# Avatar Upgrade
+# Avatar Migration
 
 ## Overview:
 
@@ -26,7 +26,7 @@ const Component = () => <Avatar />;
 | ------------------------- | -------------------------------------------------------------------------------------------------------- |
 | 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 = () => <Avatar />;
 
 ## 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`:
 

@@ -1,8 +1,8 @@
 import { Meta } from '@storybook/addon-docs';
 
-<Meta title="Concepts/Upgrading/from v0/Components/Button Upgrade" />
+<Meta title="Concepts/Migration/from v0/Components/Button Migration" />
 
-# Button Upgrade
+# Button Migration
 
 ## Overview:
 
@@ -27,7 +27,7 @@ const Component = () => <Button>Here is Button</Button>;
 | 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 = () => <Button>Button content</Button>;
 
 ## 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`:
 

@@ -1,16 +1,16 @@
 import { Meta } from '@storybook/addon-docs';
 
-<Meta title="Concepts/Upgrading/from v0/Components/Checkbox Upgrade" />
+<Meta title="Concepts/Migration/from v0/Components/Checkbox Migration" />
 
-# 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.
 
 The main difference between v0 and v9 `Checkbox` is that v9 offers a circular variant and does not provide a toggle prop.
 
 ## Examples
 
-### Basic Upgrade
+### Basic Migration
 
 Basic usage of `Checkbox` v0
 

@@ -1,8 +1,8 @@
 import { Meta } from '@storybook/addon-docs';
 
-<Meta title="Concepts/Upgrading/from v0/Components/Divider Upgrade" />
+<Meta title="Concepts/Migration/from v0/Components/Divider Migration" />
 
-# 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`:
 

@@ -1,8 +1,8 @@
 import { Meta } from '@storybook/addon-docs';
 
-<Meta title="Concepts/Upgrading/from v0/Components/Header Upgrade" />
+<Meta title="Concepts/Migration/from v0/Components/Header Migration" />
 
-# 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 = () => <Text as="h1">Header content</Text>;
 
 ## 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`:
 

@@ -1,8 +1,8 @@
 import { Meta } from '@storybook/addon-docs';
 
-<Meta title="Concepts/Upgrading/from v0/Components/Image Upgrade" />
+<Meta title="Concepts/Migration/from v0/Components/Image Migration" />
 
-# Image Upgrade
+# Image Migration
 
 ## Overview:
 
@@ -28,7 +28,7 @@ const Component = () => <Image />;
 | 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 = () => <Image />;
 
 ## 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`:
 

@@ -1,14 +1,14 @@
 import { Meta } from '@storybook/addon-docs';
 
-<Meta title="Concepts/Upgrading/from v0/Components/Input Upgrade" />
+<Meta title="Concepts/Migration/from v0/Components/Input Migration" />
 
-# 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
 

@@ -1,16 +1,16 @@
 import { Meta } from '@storybook/addon-docs';
 
-<Meta title="Concepts/Upgrading/from v0/Components/Label Upgrade" />
+<Meta title="Concepts/Migration/from v0/Components/Label Migration" />
 
-# 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.
 
 The main difference with v0's and v9's `Label` is that v9 doesn't provide an image and icon prop. v9 also accepts a custom required indicator that can be a string or JSX element.
 
 ## Examples
 
-### Basic Upgrade
+### Basic Migration
 
 Basic usage of `Label` v0
 

@@ -1,8 +1,8 @@
 import { Meta } from '@storybook/addon-docs';
 
-<Meta title="Concepts/Upgrading/from v0/Components/Popup Upgrade" />
+<Meta title="Concepts/Migration/from v0/Components/Popup Migration" />
 
-# Popup Upgrade
+# Popup Migration
 
 ## Overview:
 
@@ -45,7 +45,7 @@ const Component = () => (
 
 v9 positioning shorthand is recommended when only `positon` or/and `align` is used: `<Popup position="below" align="end" />` can be migrate to a string like `<Popover positioning="below-end" />`.
 
-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).
@@ -1,16 +1,16 @@
 import { Meta } from '@storybook/addon-docs';
 
-<Meta title="Concepts/Upgrading/from v0/Components/RadioGroup Upgrade" />
+<Meta title="Concepts/Migration/from v0/Components/RadioGroup Migration" />
 
-# 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.
 
 While there are several differences between these controls, the primary change is that `RadioGroup` v9 accepts its options as child `Radio` components while `RadioGroup` v0 accepts options via its `items` prop.
 
 ## Examples
 
-### Basic Upgrade
+### Basic Migration
 
 Basic usage of `RadioGroup` v0 looks like
 

@@ -1,15 +1,15 @@
 import { Meta } from '@storybook/addon-docs';
 
-<Meta title="Concepts/Upgrading/from v0/Components/Loader to Spinner Upgrade" />
+<Meta title="Concepts/Migration/from v0/Components/Loader to Spinner Migration" />
 
-# 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
 

@@ -1,14 +1,14 @@
 import { Meta } from '@storybook/addon-docs';
 
-<Meta title="Concepts/Upgrading/from v0/Components/Textarea Upgrade" />
+<Meta title="Concepts/Migration/from v0/Components/Textarea Migration" />
 
-# 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
 

@@ -1,8 +1,8 @@
 import { Meta } from '@storybook/addon-docs';
 
-<Meta title="Concepts/Upgrading/from v0/Components/Tooltip Upgrade" />
+<Meta title="Concepts/Migration/from v0/Components/Tooltip Migration" />
 
-# 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: `<Tooltip position="below" align="end" />` can be migrate to a string like `<Tooltip positioning="below-end" />`.
-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
 

@@ -1,6 +1,6 @@
 import { Meta } from '@storybook/addon-docs';
 
-<Meta title="Concepts/Upgrading/from v0/Custom Accessibility" />
+<Meta title="Concepts/Migration/from v0/Custom Accessibility" />
 
 # Migrate Custom Accessibility
 

@@ -1,6 +1,6 @@
 import { Meta } from '@storybook/addon-docs';
 
-<Meta title="Concepts/Upgrading/from v0/Positioning" />
+<Meta title="Concepts/Migration/from v0/Positioning" />
 
 # Migrate Positioning Props
 

@@ -1,12 +1,12 @@
 import { Meta } from '@storybook/addon-docs';
 
-<Meta title="Concepts/Upgrading/from v0/Custom Style Overrides" />
+<Meta title="Concepts/Migration/from v0/Custom Style Overrides" />
 
 # 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
 

@@ -1,8 +1,8 @@
 import { Meta } from '@storybook/addon-docs';
 
-<Meta title="Concepts/Upgrading/from v8/Component Mapping" />
+<Meta title="Concepts/Migration/from v8/Component Mapping" />
 
-# Component Upgrade
+# Component Migration
 
 Here is the mapping of v8 components to their v9 component replacement or equivalent.
 

@@ -1,8 +1,8 @@
 import { Meta } from '@storybook/addon-docs';
 
-<Meta title="Concepts/Upgrading/from v8/Components/AvatarGroup Upgrade" />
+<Meta title="Concepts/Migration/from v8/Components/AvatarGroup Migration" />
 
-# 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