add strings prop to PresenceBadge and update demos to support new default strings

.github/CODEOWNERS

@@ -95,25 +95,25 @@ packages/foundation-legacy @microsoft/cxe-red @khmakoto
 packages/merge-styles @dzearing
 packages/monaco-editor @microsoft/fluentui-v8-website
 packages/public-docsite-setup @microsoft/fluentui-v8-website
-packages/priority-overflow @microsoft/teams-prg
+packages/react-components/priority-overflow @microsoft/teams-prg
 packages/react-components/react-aria @microsoft/teams-prg
 packages/react-cards @microsoft/cxe-red @khmakoto
 packages/react-charting @microsoft/charting-team
-packages/react-conformance-griffel @microsoft/teams-prg
-packages/react-context-selector @microsoft/teams-prg
+packages/react-components/react-conformance-griffel @microsoft/teams-prg
+packages/react-components/react-context-selector @microsoft/teams-prg
 packages/react-date-time @microsoft/fluent-date-time
 packages/react-docsite-components @microsoft/fluentui-v8-website
 packages/react-file-type-icons @jahnp @bigbadcapers
 packages/react-hooks @microsoft/cxe-red
 packages/react-monaco-editor @microsoft/fluentui-v8-website
-packages/react-positioning @microsoft/teams-prg
-packages/react-overflow @microsoft/teams-prg
+packages/react-components/react-positioning @microsoft/teams-prg
+packages/react-components/react-overflow @microsoft/teams-prg
 packages/react-shared-contexts @microsoft/teams-prg
 packages/react-components/react-storybook @microsoft/cxe-prg @microsoft/teams-prg
 packages/react-components/react-storybook-addon @microsoft/cxe-prg
 packages/react-components/react-tabster @microsoft/teams-prg
-packages/react-theme @microsoft/teams-prg
-packages/react-utilities @microsoft/teams-prg
+packages/react-components/react-theme @microsoft/teams-prg
+packages/react-components/react-utilities @microsoft/teams-prg
 packages/storybook @microsoft/cxe-prg @microsoft/teams-prg
 packages/style-utilities @dzearing
 packages/style-utilities/src/interfaces @phkuo @dzearing
@@ -129,7 +129,7 @@ common/_themeOverrides.scss @microsoft/cxe-red @phkuo
 common/_common.scss @microsoft/cxe-red @phkuo
 
 ## vNext packages
-packages/keyboard-keys @microsoft/teams-prg
+packages/react-components/keyboard-keys @microsoft/teams-prg
 packages/react-accordion @microsoft/teams-prg @microsoft/cxe-coastal
 packages/react-components/react-avatar @microsoft/cxe-red @behowell @khmakoto
 packages/react-badge @microsoft/teams-prg @microsoft/cxe-red @behowell
@@ -143,27 +143,27 @@ packages/react-divider @microsoft/cxe-coastal
 packages/react-focus @microsoft/cxe-red @khmakoto
 packages/react-components/react-image @microsoft/cxe-prg
 packages/react-components/react-input @microsoft/cxe-red
-packages/react-components/react-label @microsoft/cxe-red
+packages/react-components/react-label @microsoft/cxe-red @sopranopillow @micahgodbolt
 packages/react-components/react-link @microsoft/cxe-red @khmakoto @microsoft/cxe-coastal
 packages/react-components/react-menu @microsoft/teams-prg
 packages/react-components/react-popover @microsoft/teams-prg
 packages/react-components/react-portal @microsoft/teams-prg
 packages/react-components/react-provider @microsoft/teams-prg
-packages/react-radio @microsoft/cxe-red @behowell @spmonahan
+packages/react-components/react-radio @microsoft/cxe-red @behowell @spmonahan
 packages/react-components/react-select @microsoft/cxe-coastal @smhigley
 packages/react-components/react-slider @microsoft/cxe-coastal @micahgodbolt
-packages/react-spinbutton @microsoft/cxe-red @spmonahan
-packages/react-spinner @microsoft/cxe-red @tomi-msft
-packages/react-switch @microsoft/cxe-red @behowell @khmakoto
+packages/react-components/react-spinbutton @microsoft/cxe-red @spmonahan
+packages/react-components/react-spinner @microsoft/cxe-red @tomi-msft
+packages/react-components/react-switch @microsoft/cxe-red @behowell @khmakoto
 packages/react-components/react-tabs @microsoft/cxe-coastal @geoffcoxmsft
 packages/react-components/react-text @microsoft/cxe-prg
-packages/react-textarea @microsoft/cxe-red @sopranopillow
-packages/react-tooltip @microsoft/cxe-red @behowell @khmakoto
+packages/react-components/react-textarea @microsoft/cxe-red @sopranopillow
+packages/react-components/react-tooltip @microsoft/cxe-red @behowell @khmakoto
 packages/react-components/react-list @microsoft/teams-prg
 packages/react-components/react-toolbar @microsoft/teams-prg @chpalac @ling1726
-packages/react-portal-compat @microsoft/teams-prg
+packages/react-components/react-portal-compat @microsoft/teams-prg
 packages/react-components/react-alert @microsoft/teams-prg
-packages/react-portal-compat-context @microsoft/teams-prg
+packages/react-components/react-portal-compat-context @microsoft/teams-prg
 ## <%= NX-CODEOWNER-PLACEHOLDER %>
 
 

.storybook/docs-root.css

@@ -67,7 +67,7 @@
     sans-serif;
   font-size: 18px;
   line-height: 24px;
-  margin: 15px 0 0 0 !important;
+  margin: 25px 0 0 0 !important;
   letter-spacing: -0.01em;
   color: #000000;
 }
@@ -76,8 +76,8 @@
 #docs-root [id] > .sbdocs-h3:before {
   content: '';
   display: block;
-  height: 60px;
-  margin: -60px 0 0;
+  height: 40px;
+  margin: -40px 0 0;
 }
 
 #docs-root .sbdocs-li {
@@ -131,6 +131,12 @@
   display: none;
 }
 
+/* Remove z-index from "show code" button container */
+/* https://github.com/microsoft/fluentui/issues/22773 */
+.docs-story > div:nth-child(2) {
+  z-index: auto;
+}
+
 #docs-root .docblock-code-toggle,
 .docs-story > a:last-child {
   font-family: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue',

apps/perf-test-react-components/CHANGELOG.json

@@ -1,6 +1,39 @@
 {
   "name": "@fluentui/perf-test-react-components",
   "entries": [
+    {
+      "date": "Wed, 04 May 2022 13:26:54 GMT",
+      "tag": "@fluentui/perf-test-react-components_v9.0.0-rc.0",
+      "version": "9.0.0-rc.0",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/perf-test-react-components",
+            "comment": "Bump @fluentui/react-avatar to v9.0.0-rc.7",
+            "commit": "65f94192ed3b2cde7e52b9c7e12d6f38b81965dd"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/perf-test-react-components",
+            "comment": "Bump @fluentui/react-button to v9.0.0-rc.8",
+            "commit": "65f94192ed3b2cde7e52b9c7e12d6f38b81965dd"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/perf-test-react-components",
+            "comment": "Bump @fluentui/react-provider to v9.0.0-rc.8",
+            "commit": "65f94192ed3b2cde7e52b9c7e12d6f38b81965dd"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/perf-test-react-components",
+            "comment": "Bump @fluentui/react-theme to v9.0.0-rc.6",
+            "commit": "65f94192ed3b2cde7e52b9c7e12d6f38b81965dd"
+          }
+        ]
+      }
+    },
     {
       "date": "Mon, 25 Apr 2022 09:32:19 GMT",
       "tag": "@fluentui/perf-test-react-components_v9.0.0-rc.0",

apps/perf-test-react-components/CHANGELOG.md

@@ -1,11 +1,23 @@
 # Change Log - @fluentui/perf-test-react-components
 
-This log was last generated on Mon, 25 Apr 2022 09:32:19 GMT and should not be manually modified.
+This log was last generated on Wed, 04 May 2022 13:26:54 GMT and should not be manually modified.
 
 <!-- Start content -->
 
 ## [9.0.0-rc.0](https://github.com/microsoft/fluentui/tree/@fluentui/perf-test-react-components_v9.0.0-rc.0)
 
+Wed, 04 May 2022 13:26:54 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/perf-test-react-components_v9.0.0-rc.0..@fluentui/perf-test-react-components_v9.0.0-rc.0)
+
+### Patches
+
+- Bump @fluentui/react-avatar to v9.0.0-rc.7 ([PR #22786](https://github.com/microsoft/fluentui/pull/22786) by beachball)
+- Bump @fluentui/react-button to v9.0.0-rc.8 ([PR #22786](https://github.com/microsoft/fluentui/pull/22786) by beachball)
+- Bump @fluentui/react-provider to v9.0.0-rc.8 ([PR #22786](https://github.com/microsoft/fluentui/pull/22786) by beachball)
+- Bump @fluentui/react-theme to v9.0.0-rc.6 ([PR #22786](https://github.com/microsoft/fluentui/pull/22786) by beachball)
+
+## [9.0.0-rc.0](https://github.com/microsoft/fluentui/tree/@fluentui/perf-test-react-components_v9.0.0-rc.0)
+
 Mon, 25 Apr 2022 09:32:19 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/perf-test-react-components_v9.0.0-rc.0..@fluentui/perf-test-react-components_v9.0.0-rc.0)
 

apps/perf-test-react-components/package.json

@@ -16,10 +16,10 @@
   },
   "dependencies": {
     "@griffel/core": "1.2.0",
-    "@fluentui/react-avatar": "9.0.0-rc.6",
-    "@fluentui/react-button": "9.0.0-rc.7",
-    "@fluentui/react-provider": "9.0.0-rc.7",
-    "@fluentui/react-theme": "9.0.0-rc.5",
+    "@fluentui/react-avatar": "9.0.0-rc.7",
+    "@fluentui/react-button": "9.0.0-rc.8",
+    "@fluentui/react-provider": "9.0.0-rc.8",
+    "@fluentui/react-theme": "9.0.0-rc.6",
     "@fluentui/scripts": "^1.0.0",
     "@microsoft/load-themed-styles": "^1.10.26",
     "flamegrill": "0.2.0",

apps/public-docsite-v9/.storybook/preview.js

@@ -28,7 +28,14 @@ export const parameters = {
           'Upgrading',
           [
             'from v8',
-            ['Overview', 'Important changes', 'Planning your journey', 'Component Mapping', 'Troubleshooting'],
+            [
+              'Overview',
+              'Important changes',
+              'Planning your journey',
+              'Component Mapping',
+              'Color Mapping',
+              'Troubleshooting',
+            ],
           ],
         ],
         'Theme',

apps/public-docsite-v9/package.json

@@ -23,9 +23,9 @@
     "@fluentui/react": "^8.67.2",
     "@fluentui/scripts": "^1.0.0",
     "@fluentui/storybook": "^1.0.0",
-    "@fluentui/react-components": "^9.0.0-rc.8",
+    "@fluentui/react-components": "^9.0.0-rc.9",
     "@fluentui/react-storybook-addon": "9.0.0-rc.1",
-    "@fluentui/react-theme": "9.0.0-rc.5",
+    "@fluentui/react-theme": "9.0.0-rc.6",
     "@griffel/react": "1.0.3",
     "react": "16.14.0",
     "react-dom": "16.14.0",

apps/public-docsite-v9/src/Concepts/Upgrade/FromV0/Components/Input.stories.mdx

@@ -0,0 +1,81 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Concepts/Upgrading/from v0/Components/Input Upgrade" />
+
+# Input Upgrade
+
+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 usage of `Input` v0 looks like
+
+```tsx
+import * as React from 'react';
+import { Input, Text, Flex } from '@fluentui/react-northstar';
+
+const InputV0BasicExample = () => {
+  return <Input label="Search" />;
+};
+```
+
+An equivalent `Input` v9 usage is
+
+```tsx
+import * as React from 'react';
+import { Label, Input } from '@fluentui/react-components/unstable';
+import { useId } from '@fluentui/react-utilities';
+import { makeStyles } from '@griffel/react';
+
+const useLayoutStyles = makeStyles({
+  root: {
+    maxWidth: '300px',
+    display: 'flex',
+    flexDirection: 'column',
+  },
+});
+
+const InputV9BasicExample = () => {
+  const layoutStyles = useLayoutStyles();
+  const inputId = useId('input');
+  return (
+    <div className={layoutStyles.root}>
+      <Label htmlFor={inputId}>Search</Label>
+      <Input id={inputId} />
+    </div>
+  );
+};
+```
+
+## Prop Mapping
+
+This table maps v0 `Input` props to the v9 `Input` equivalent.
+
+| v0                     | v9                                          | Notes                                                                                                       |
+| ---------------------- | ------------------------------------------- | ----------------------------------------------------------------------------------------------------------- |
+| `accessibility`        | n/a                                         |                                                                                                             |
+| `as`                   | n/a                                         |                                                                                                             |
+| `className`            | `className`                                 |                                                                                                             |
+| `clearable`            | n/a                                         | Use `contentBefore` or `contentAfter` slots to add a `Button` to implement this behavior                    |
+| `defaultValue`         | `defaultValue`                              | Mutually exclusive with `value`                                                                             |
+| `design`               | n/a                                         |                                                                                                             |
+| `error`                | n/a                                         | v9 `Input` does not handle error states                                                                     |
+| `errorIndicator`       | n/a                                         | Use `contentBefore` or `contentAfter` slots to insert custom indicators                                     |
+| `fluid`                | n/a                                         |                                                                                                             |
+| `icon`                 | Use `contentBefore` or `contentAfter` slots |                                                                                                             |
+| `iconPosition`         | n/a                                         |                                                                                                             |
+| `inline`               | n/a                                         |                                                                                                             |
+| `input`                | `input`                                     | This is a slot                                                                                              |
+| `inputRef`             | Pass a `ref` to the `input` slot            |                                                                                                             |
+| `inverted`             | `appearance`                                |                                                                                                             |
+| `label`                | Use `Label` component                       | Be sure to associate `Label` with `Input` via `htmlFor`                                                     |
+| `labelPosition`        | n/a                                         |                                                                                                             |
+| `onChange`             | `onChange`                                  |                                                                                                             |
+| `required`             | `required`                                  | This is the native HTML prop                                                                                |
+| `showSuccessIndicator` | n/a                                         | Use `contentBefore` or `contentAfter` slots to insert custom indicators                                     |
+| `type`                 | `type`                                      | Non text types like 'button' and 'checkbox' are not supported. Use `Button` or `Checkbox` component instead |
+| `value`                | `value`                                     | Mutually exclusive with `defaultValue`                                                                      |
+| `variables`            | n/a                                         | Use `FluentProvider` to customize themes                                                                    |
+| `wrapper`              | `root`                                      | This is a slot                                                                                              |

apps/public-docsite-v9/src/Concepts/Upgrade/FromV0/Components/Label.stories.mdx

@@ -0,0 +1,58 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Concepts/Upgrading/from v0/Components/Label Upgrade" />
+
+# Label Upgrade
+
+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 usage of `Label` v0
+
+```tsx
+import * as React from 'react';
+import { Label } from '@fluentui/react-northstar';
+
+const LabelV0BasicExample = () => {
+  return <Label content="You have 23 emails" />;
+};
+```
+
+An equivalent `Label` in v9 is
+
+```tsx
+import * as React from 'react';
+import { Label } from '@fluentui/react-components/unstable';
+
+const LabelV9BasicExample = () => {
+  return <Label>You have 23 emails</Label>;
+};
+```
+
+## Prop Mapping
+
+This table maps `Label` v0 props to the `Label` v9 equivalent.
+
+| v0              | v9          | Notes                                          |
+| --------------- | ----------- | ---------------------------------------------- |
+| `accessibility` | n/a         |                                                |
+| `as`            | n/a         |                                                |
+| `circular`      | n/a         |                                                |
+| `className`     | `className` |                                                |
+| `color`         | `className` | use `className` to customize color             |
+| `content`       | `children`  | v9 uses React `children` instead of data props |
+| `design`        | n/a         |                                                |
+| `fluid`         | n/a         |                                                |
+| `icon`          | n/a         |                                                |
+| `iconPosition`  | n/a         |                                                |
+| `image`         | n/a         |                                                |
+| `imagePosition` | n/a         |                                                |
+| `key`           | `key`       | v9 uses the intrinsic React prop               |
+| `ref`           | `ref`       |                                                |
+| `styles`        | `className` |                                                |
+| `variables`     | n/a         | Use `FluentProvider` to customize themes       |

apps/public-docsite-v9/src/Concepts/Upgrade/FromV0/Components/RadioGroup.stories.mdx

@@ -1,6 +1,6 @@
 import { Meta } from '@storybook/addon-docs';
 
-<Meta title="Concepts/Upgrading/from v9/Components/RadioGroup Upgrade" />
+<Meta title="Concepts/Upgrading/from v0/Components/RadioGroup Upgrade" />
 
 # RadioGroup Upgrade
 
@@ -38,7 +38,7 @@ An equivalent `RadioGroup` v9 usage is
 
 ```tsx
 import * as React from 'react';
-import { Label, Radio, RadioGroup } from '@fluentui/react-components/unstable';
+import { Label, Radio, RadioGroup } from '@fluentui/react-components';
 import { useId } from '@fluentui/react-utilities';
 
 const RadioGroupV9BasicExample = () => {