Mastercopy4

.devops/templates/runpublishvrscreenshot.yml

@@ -0,0 +1,47 @@
+parameters:
+  - name: fluentVersion
+    type: string
+    default: v8
+  - name: storyPackageName
+    type: string
+    default: '@fluentui/vr-tests'
+  - name: storyPackagePath
+    type: string
+    default: 'apps/vr-tests'
+  - name: shouldbuildstorybookaddon
+    type: boolean
+    default: false
+
+steps:
+  - task: Bash@3
+    inputs:
+      filePath: yarn-ci.sh
+    displayName: yarn (install packages)
+
+  - script: |
+      yarn workspace ${{ parameters.storyPackageName }} convert
+    displayName: Convert screener component to storywright
+
+  - ${{ if eq(parameters.shouldbuildstorybookaddon, 'true') }}:
+      - script: |
+          yarn build --to @fluentui/react-storybook-addon
+        displayName: Build react-storybook-addon
+
+  - script: |
+      yarn workspace ${{ parameters.storyPackageName }} screener:build
+    displayName: Build VR tests components package
+
+  - script: |
+      yarn workspace ${{ parameters.storyPackageName }} test:component --verbose
+    displayName: 'Run VR tests'
+
+  - script: |
+      mkdir -p screenshots
+      cp -rf ${{ parameters.storyPackagePath }}/dist/screenshots/*.png screenshots/
+    displayName: Collate Artifacts
+
+  - task: PublishBuildArtifacts@1
+    inputs:
+      PathtoPublish: 'screenshots'
+      ArtifactName: 'vrscreenshot${{ parameters.fluentVersion }}'
+      publishLocation: 'Container'

.github/ISSUE_TEMPLATE/convergence_epic.md

@@ -1,48 +1,51 @@
 ---
-name: (internal) Component convergence epic
-about: (team member use only) Epic issue tracking convergence of a particular component
+name: (internal) Component implementation epic
+about: (team member use only) Epic issue tracking implementation of a particular component
 ---
 
 <!--
 These issues are used by core contributors to track the list of items that should be
-completed as part of converging a component. More info can be found here: https://github.com/microsoft/fluentui/wiki/Component-Convergence-Guide
+completed as part of creating a v9 component. More info can be found here: https://github.com/microsoft/fluentui/wiki/Component-Implementation-Guide
 -->
 
-## Preparation:
+💡 When you create a PR for any of the checklist items, add a link to this Epic under the PR's **Related Issues** section.
 
-- [ ] Open UI Research
+## Preparation
+
+- [ ] [Open UI Research](https://github.com/microsoft/fluentui/wiki/Component-Implementation-Guide#open-ui-research)
   - [link to https://open-ui.org/]
-- [ ] Open GitHub issues related to component
+- [ ] [Open GitHub issues related to component](https://github.com/microsoft/fluentui/wiki/Component-Implementation-Guide#find-open-issues-on-github)
   - [link to each issue]
-- [ ] react-\* package scaffolded with the right ownership in CODEOWNERS
-  - [link to package / PR]
-- [ ] Component Spec authored and reviewed
-  - [link to spec in component package / PR]
+- [ ] [Create react-\* package and component from template](https://github.com/microsoft/fluentui/wiki/Component-Implementation-Guide#component-package)
+  - [link to package: https://github.com/microsoft/fluentui/tree/master/packages/react-components/react-(your-component)]
+- [ ] (Optional) [Draft implementation](https://github.com/microsoft/fluentui/wiki/Component-Implementation-Guide#draft-implementation)
+  - [link to draft implementation, if applicable]
+- [ ] [Component Spec authored](https://github.com/microsoft/fluentui/wiki/Component-Implementation-Guide#component-spec) and [reviewed](https://github.com/microsoft/fluentui/wiki/Component-Implementation-Guide#spec-review)
 
 ## Implementation
 
-[link to react-* package folder]
-
-- [ ] Component implementation
-  - [link(s) to component implementation related PRs]
-- [ ] Storybook stories
-  - [link(s) to stories PRs]
-- [ ] Add tests: Conformance, Unit, and VR -- add PRs to all
-  - [ ] Bundle size fixtures
-  - [ ] Conformance tests
-  - [ ] Unit tests
-  - [ ] VR tests
-  - [ ] Accessibility behavior tests
-  - [ ] Create an issue and run [manual accessibility tests](https://github.com/microsoft/fluentui/wiki/Manual-Accessibility-Review-Checklist): (issue link)
-  - [ ] Performance test scenario
-- [ ] README.md covering basic usage
-- [ ] MIGRATION.md guide (include v8 and v0)
+- [ ] [Component implementation](https://github.com/microsoft/fluentui/wiki/Component-Implementation-Guide#implementation)
+- [ ] Initial conformance and unit tests (validate basic functionality)
+- [ ] [Initial documentation](https://github.com/microsoft/fluentui/wiki/Component-Implementation-Guide#documentation)
+  - [ ] [Storybook stories](https://github.com/microsoft/fluentui/wiki/Component-Implementation-Guide#storybook-stories)
+  - [ ] README.md covering basic usage
+  - [ ] MIGRATION.md guide (include v8 and v0)
+- [ ] [Component released as unstable](https://github.com/microsoft/fluentui/wiki/Component-Implementation-Guide#unstable-release) from `@fluentui/react-components/unstable`
 
 ## Validation
 
-- [ ] Add and validate in UI Builder
-- [ ] Add and validate in docs site
-- [ ] Validate with token pipeline
-- [ ] Validate in product
-- [ ] Finalize migration guide
-  - [ ] Author codemods
+- [ ] [Add tests](https://github.com/microsoft/fluentui/wiki/Component-Implementation-Guide#tests)
+  - [ ] Unit and conformance tests
+  - [ ] VR tests
+  - [ ] Bundle size fixtures
+  - [ ] Performance test scenario
+  - [ ] Accessibility behavior tests
+  - [ ] Create an issue and run [manual accessibility tests](https://github.com/microsoft/fluentui/wiki/Manual-Accessibility-Review-Checklist): [link to issue]
+- [ ] [Validate with partners](https://github.com/microsoft/fluentui/wiki/Component-Implementation-Guide#validation)
+- [ ] [Finalize documentation](https://github.com/microsoft/fluentui/wiki/Component-Implementation-Guide#finalize-documentation)
+  - [ ] Review and add any missing storybook stories
+  - [ ] Finalize migration guide
+- [ ] [Component released as stable](https://github.com/microsoft/fluentui/wiki/Component-Implementation-Guide#stable-release) from `@fluentui/react-components`
+  - [ ] Ensure exports are removed from from `@fluentui/react-components/unstable`
+  - [ ] In package.json: Remove the alpha/beta tag from the version number in package.json
+  - [ ] In package.json: Change beachball's `disallowedChangeTypes` to `"major", "prerelease"`

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

@@ -16,11 +16,11 @@
   },
   "dependencies": {
     "@griffel/core": "^1.8.1",
-    "@fluentui/react-avatar": "^9.2.5",
-    "@fluentui/react-button": "^9.1.7",
-    "@fluentui/react-provider": "^9.1.6",
-    "@fluentui/react-spinbutton": "^9.0.7",
-    "@fluentui/react-theme": "^9.1.1",
+    "@fluentui/react-avatar": "^9.2.6",
+    "@fluentui/react-button": "^9.1.8",
+    "@fluentui/react-provider": "^9.1.7",
+    "@fluentui/react-spinbutton": "^9.0.8",
+    "@fluentui/react-theme": "^9.1.2",
     "@fluentui/scripts": "^1.0.0",
     "@microsoft/load-themed-styles": "^1.10.26",
     "flamegrill": "0.2.0",

apps/perf-test/package.json

@@ -15,8 +15,8 @@
     "@fluentui/eslint-plugin": "*"
   },
   "dependencies": {
-    "@fluentui/example-data": "^8.4.2",
-    "@fluentui/react": "^8.100.0",
+    "@fluentui/example-data": "^8.4.3",
+    "@fluentui/react": "^8.101.0",
     "@fluentui/scripts": "^1.0.0",
     "@microsoft/load-themed-styles": "^1.10.26",
     "flamegrill": "0.2.0",

apps/public-docsite-resources/package.json

@@ -27,20 +27,20 @@
     "update-snapshots": "just-scripts jest -u"
   },
   "devDependencies": {
-    "@fluentui/api-docs": "^8.2.3",
+    "@fluentui/api-docs": "^8.2.4",
     "@fluentui/eslint-plugin": "*",
     "@fluentui/scripts": "^1.0.0"
   },
   "dependencies": {
-    "@fluentui/react": "^8.100.0",
+    "@fluentui/react": "^8.101.0",
     "@fluentui/react-examples": "^8.34.4",
     "@microsoft/load-themed-styles": "^1.10.26",
-    "@fluentui/azure-themes": "^8.5.22",
-    "@fluentui/react-docsite-components": "^8.10.22",
-    "@fluentui/font-icons-mdl2": "^8.5.2",
-    "@fluentui/set-version": "^8.2.2",
-    "@fluentui/theme-samples": "^8.7.22",
-    "@fluentui/react-monaco-editor": "^1.7.22",
+    "@fluentui/azure-themes": "^8.5.23",
+    "@fluentui/react-docsite-components": "^8.10.23",
+    "@fluentui/font-icons-mdl2": "^8.5.3",
+    "@fluentui/set-version": "^8.2.3",
+    "@fluentui/theme-samples": "^8.7.23",
+    "@fluentui/react-monaco-editor": "^1.7.23",
     "office-ui-fabric-core": "^11.0.0",
     "react": "17.0.2",
     "react-dom": "17.0.2",

apps/public-docsite-v9/package.json

@@ -21,14 +21,14 @@
     "@fluentui/scripts": "^1.0.0"
   },
   "dependencies": {
-    "@fluentui/react": "^8.100.0",
+    "@fluentui/react": "^8.101.0",
     "@fluentui/react-northstar": "^0.64.0",
     "@fluentui/react-icons-northstar": "^0.64.0",
     "@fluentui/scripts": "^1.0.0",
     "@fluentui/storybook": "^1.0.0",
-    "@fluentui/react-components": "^9.6.3",
+    "@fluentui/react-components": "^9.7.0",
     "@fluentui/react-storybook-addon": "^9.0.0-rc.1",
-    "@fluentui/react-theme": "^9.1.1",
+    "@fluentui/react-theme": "^9.1.2",
     "@griffel/react": "^1.4.2",
     "react": "17.0.2",
     "react-dom": "17.0.2",

apps/public-docsite-v9/src/Concepts/SSR/SSR.stories.mdx

@@ -7,6 +7,65 @@ import { SSRDefaultOpen } from './MenuSSRDefaultOpen.stories';
 
 Fluent UI React v9 fully supports Server-Side Rendering.
 
+### Basic setup
+
+For any setup using SSR, you need to provide a `RendererProvider`, `SSRProvider` and `ThemeProvider` in the root file of your app. If these providers are not added, there will be issues when hydrating. See the following example:
+
+```tsx
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/server';
+import {
+  createDOMRenderer,
+  FluentProvider,
+  makeStyles,
+  RendererProvider,
+  renderToStyleElements,
+  SSRProvider,
+  webLightTheme,
+} from '@fluentui/react-components';
+
+const useExampleStyles = makeStyles({
+  root: {
+    color: 'red',
+  },
+});
+
+const ExampleComponent: React.FC = () => {
+  const classes = useExampleStyles();
+
+  return <div className={classes.root}>Hello world</div>;
+};
+
+const server = express();
+
+server.get('/', (req, res) => {
+  const renderer = createDOMRenderer();
+
+  const html = ReactDOM.renderToString(
+    <RendererProvider renderer={renderer}>
+      <SSRProvider>
+        <FluentProvider theme={webLightTheme}>
+          <ExampleComponent />
+        </FluentProvider>
+      </SSRProvider>
+    </RendererProvider>,
+  );
+
+  res.send(`
+    <html>
+      <head>
+        ${renderToStyleElements(renderer)}
+      </head>
+      <body>
+        <div id="root">${html}</div>
+      </body>
+    </html>
+  `);
+});
+
+server.listen(3000, 'localhost');
+```
+
 ### Next.js
 
 For basic instructions on getting Next.js set up, see [Getting Started](https://nextjs.org/docs/getting-started).

apps/public-docsite-v9/src/DocsComponents/ThemePicker.stories.tsx

@@ -32,15 +32,18 @@ const useStyles = makeStyles({
  */
 export const ThemePicker: React.FC<{ selectedThemeId?: string }> = ({ selectedThemeId }) => {
   const styles = useStyles();
+  const [currentThemeId, setCurrentThemeId] = React.useState(selectedThemeId ?? null);
 
   const setGlobalTheme = (themeId: ThemeIds): void => {
     addons.getChannel().emit('updateGlobals', { globals: { [THEME_ID]: themeId } });
   };
   const onCheckedValueChange: MenuProps['onCheckedValueChange'] = (e, data) => {
-    setGlobalTheme(data.checkedItems[0] as ThemeIds);
+    const newThemeId = data.checkedItems[0] as ThemeIds;
+    setGlobalTheme(newThemeId);
+    setCurrentThemeId(newThemeId);
   };
 
-  const selectedTheme = themes.find(theme => theme.id === selectedThemeId);
+  const selectedTheme = themes.find(theme => theme.id === currentThemeId);
 
   return (
     <Menu

apps/public-docsite/package.json

@@ -23,27 +23,27 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@fluentui/common-styles": "^1.2.11",
+    "@fluentui/common-styles": "^1.2.12",
     "@fluentui/eslint-plugin": "*",
-    "@fluentui/react-monaco-editor": "^1.7.22",
+    "@fluentui/react-monaco-editor": "^1.7.23",
     "@fluentui/scripts": "^1.0.0",
     "write-file-webpack-plugin": "^4.1.0"
   },
   "dependencies": {
-    "@fluentui/font-icons-mdl2": "^8.5.2",
+    "@fluentui/font-icons-mdl2": "^8.5.3",
     "@fluentui/public-docsite-resources": "^8.1.41",
-    "@fluentui/public-docsite-setup": "^0.3.12",
-    "@fluentui/react": "^8.100.0",
-    "@fluentui/react-docsite-components": "^8.10.22",
+    "@fluentui/public-docsite-setup": "^0.3.13",
+    "@fluentui/react": "^8.101.0",
+    "@fluentui/react-docsite-components": "^8.10.23",
     "@fluentui/react-examples": "^8.34.4",
-    "@fluentui/react-experiments": "^8.14.17",
-    "@fluentui/react-file-type-icons": "^8.8.0",
-    "@fluentui/react-icons-mdl2": "^1.3.25",
-    "@fluentui/react-icons-mdl2-branded": "^1.2.26",
-    "@fluentui/set-version": "^8.2.2",
-    "@fluentui/theme": "^2.6.17",
-    "@fluentui/theme-samples": "^8.7.22",
-    "@fluentui/utilities": "^8.13.2",
+    "@fluentui/react-experiments": "^8.14.18",
+    "@fluentui/react-file-type-icons": "^8.8.1",
+    "@fluentui/react-icons-mdl2": "^1.3.26",
+    "@fluentui/react-icons-mdl2-branded": "^1.2.27",
+    "@fluentui/set-version": "^8.2.3",
+    "@fluentui/theme": "^2.6.18",
+    "@fluentui/theme-samples": "^8.7.23",
+    "@fluentui/utilities": "^8.13.3",
     "@microsoft/load-themed-styles": "^1.10.26",
     "office-ui-fabric-core": "^11.0.0",
     "react": "17.0.2",

apps/react-18-tests-v8/package.json

@@ -23,8 +23,8 @@
     "swc-loader": "^0.2.3"
   },
   "dependencies": {
-    "@fluentui/react": "^8.100.0",
-    "@fluentui/react-hooks": "^8.6.12",
+    "@fluentui/react": "^8.101.0",
+    "@fluentui/react-hooks": "^8.6.13",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "tslib": "^2.1.0"

apps/react-18-tests-v9/package.json

@@ -21,9 +21,9 @@
     "swc-loader": "^0.2.3"
   },
   "dependencies": {
-    "@fluentui/react-button": "^9.1.7",
-    "@fluentui/react-provider": "^9.1.6",
-    "@fluentui/react-theme": "^9.1.1",
+    "@fluentui/react-button": "^9.1.8",
+    "@fluentui/react-provider": "^9.1.7",
+    "@fluentui/react-theme": "^9.1.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "tslib": "^2.1.0"

apps/ssr-tests-v9/package.json

@@ -20,7 +20,7 @@
     "type-check": "tsc -b tsconfig.json"
   },
   "dependencies": {
-    "@fluentui/react-components": "^9.6.3"
+    "@fluentui/react-components": "^9.7.0"
   },
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",

apps/ssr-tests/package.json

@@ -13,7 +13,7 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@fluentui/react": "^8.100.0",
+    "@fluentui/react": "^8.101.0",
     "@microsoft/load-themed-styles": "^1.10.26",
     "@types/mocha": "^7.0.2",
     "@fluentui/scripts": "^1.0.0",

apps/stress-test/package.json

@@ -10,11 +10,12 @@
     "type-check": "tsc -b tsconfig.type.json"
   },
   "dependencies": {
-    "@fluentui/react": "^8.100.0",
-    "@fluentui/react-components": "^9.6.3",
+    "@fluentui/react": "^8.101.0",
+    "@fluentui/react-components": "^9.7.0",
     "@fluentui/react-icons": "^2.0.175",
     "@fluentui/web-components": "^2.5.8",
     "@microsoft/fast-element": "^1.10.4",
+    "afterframe": "1.0.2",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "random-seedable": "1.0.8"