Merge branch 'master' into marcosmoura/feat/selectable-cards

* master: (62 commits) chore(migrate-converged): add functionality to execute various v9 package file restructuring tasks (microsoft#24458) chore(react-dialog): updates stories (microsoft#25070) refactor Progress to remove label and description slots (microsoft#25067) fix(SplitButton): Remove borders from hover and pressed state in primary split buttons (microsoft#25059) chore(react-persona): Add vr, conformance, and unit tests (microsoft#25007) (docs): update Icon docs with examples (microsoft#24768) Split button/primary hc fix (microsoft#25066) chore(react-utilities): restricts trigger API types (microsoft#25044) Add utilities export @fluentui/style-utilities v8 (microsoft#25065) chore: migrate whole repo to webpack 5 (microsoft#24542) applying package updates BREAKING: refactor `useTable` to be composable (microsoft#24947) Added shims to shim packages (microsoft#25048) Add Progress SPEC (microsoft#24418) applying package updates chore(react-persona): Add bundle-size command for bundle-size fixtures (microsoft#25055) fix(Button): Remove margin added to buttons by Safari (microsoft#25052) fix: Menu triggers no longer take focus when they are mounted (microsoft#25016) chore: deletes react-trigger package (microsoft#25042) Fixed a minor typo: immmediately => immediately (microsoft#25036) ...
marcosmoura · Oct 5, 2022 · 3e5d385 · 3e5d385
2 parents cdf941a + ff55fc0
commit 3e5d385
Show file tree

Hide file tree

Showing 585 changed files with 12,111 additions and 2,875 deletions.
diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
@@ -176,7 +176,6 @@ packages/react-components-migration/react-button-shim-v8-v9 @microsoft/cxe-coast
 packages/react-components-migration/react-menu-shim-v8-v9 @microsoft/cxe-coastal
 packages/react-components-migration/react-stack-shim-v8-v9 @microsoft/cxe-coastal
 packages/react-components-migration/react-theme-shim-v8-v9 @microsoft/cxe-coastal
-packages/react-components/react-trigger @microsoft/teams-prg
 packages/react-components/react-avatar-context @microsoft/teams-prg
 # <%= NX-CODEOWNER-PLACEHOLDER %>
 

diff --git a/.github/actions/build-to/action.yml b/.github/actions/build-to/action.yml
@@ -0,0 +1,35 @@
+name: 'Build workspaces'
+description: 'Runs the build command for specific workspaces.'
+inputs:
+  # Because Github Actions doesn't support arrays as inputs we need to pass the workspaces as a string and split them
+  # by spaces https://github.com/community/community/discussions/11692
+  workspaces:
+    required: true
+    description: 'The workspaces you want to build. This parameter accepts multiple workspaces separated by a space.'
+  # This is based on the backfill cache provider options: https://github.com/microsoft/backfill#set-up-remote-cache
+  backfill-cache-provider:
+    required: false
+    description: 'The backfill cache provider'
+    default: 'azure-blob'
+  # Depending on the chosen cache provider there are multiple types of available options. In our case we use Azure Blob
+  # Storage. https://github.com/microsoft/backfill#microsoft-azure-blob-storage
+  backfill-cache-provider-options:
+    required: false
+    description: 'The backfill cache provider options'
+  # Flag to toggle backfill remote caching on / off
+  lage-write-remote-cache:
+    required: true
+    description: 'Whether to write to the remote cache'
+    default: 'true'
+
+runs:
+  using: 'composite'
+  steps:
+    - name: build package dependency tree (scripts:build)
+      working-directory: .
+      shell: bash
+      run: yarn build --to ${{ inputs.workspaces }}
+      env:
+        BACKFILL_CACHE_PROVIDER: ${{ inputs.backfill-cache-provider }}
+        BACKFILL_CACHE_PROVIDER_OPTIONS: ${{ inputs.backfill-cache-provider-options }}
+        LAGE_WRITE_REMOTE_CACHE: ${{ inputs.lage-write-remote-cache }}
diff --git a/.github/workflows/docsite-publish-chromatic.yml b/.github/workflows/docsite-publish-chromatic.yml
@@ -44,7 +44,10 @@ jobs:
         run: yarn install --frozen-lockfile
 
       - name: Build dependencies
-        run: yarn build --to @fluentui/public-docsite-v9
+        uses: ./.github/actions/build-to
+        with:
+          workspaces: '@fluentui/public-docsite-v9'
+          backfill-cache-provider-options: ${{ secrets.BACKFILL_CACHE_PROVIDER_OPTIONS }}
 
       - name: Publish to Chromatic
         run: yarn workspace @fluentui/public-docsite-v9 chromatic

diff --git a/.github/workflows/docsite-publish-ghpages.yml b/.github/workflows/docsite-publish-ghpages.yml
@@ -44,7 +44,10 @@ jobs:
         run: yarn install --frozen-lockfile
 
       - name: Build dependencies
-        run: yarn build --to @fluentui/public-docsite-v9
+        uses: ./.github/actions/build-to
+        with:
+          workspaces: '@fluentui/public-docsite-v9'
+          backfill-cache-provider-options: ${{ secrets.BACKFILL_CACHE_PROVIDER_OPTIONS }}
 
       - name: Build storybook
         run: yarn workspace @fluentui/public-docsite-v9 build-storybook

diff --git a/apps/perf-test-react-components/package.json b/apps/perf-test-react-components/package.json
@@ -16,10 +16,10 @@
   },
   "dependencies": {
     "@griffel/core": "^1.5.1",
-    "@fluentui/react-avatar": "^9.1.1",
-    "@fluentui/react-button": "^9.1.2",
-    "@fluentui/react-provider": "^9.1.2",
-    "@fluentui/react-spinbutton": "^9.0.2",
+    "@fluentui/react-avatar": "^9.2.0",
+    "@fluentui/react-button": "^9.1.3",
+    "@fluentui/react-provider": "^9.1.3",
+    "@fluentui/react-spinbutton": "^9.0.3",
     "@fluentui/react-theme": "^9.1.0",
     "@fluentui/scripts": "^1.0.0",
     "@microsoft/load-themed-styles": "^1.10.26",

diff --git a/apps/perf-test/package.json b/apps/perf-test/package.json
@@ -16,7 +16,7 @@
   },
   "dependencies": {
     "@fluentui/example-data": "^8.4.2",
-    "@fluentui/react": "^8.96.2",
+    "@fluentui/react": "^8.97.2",
     "@fluentui/scripts": "^1.0.0",
     "@microsoft/load-themed-styles": "^1.10.26",
     "flamegrill": "0.2.0",

diff --git a/apps/public-docsite-resources/package.json b/apps/public-docsite-resources/package.json
@@ -32,15 +32,15 @@
     "@fluentui/scripts": "^1.0.0"
   },
   "dependencies": {
-    "@fluentui/react": "^8.96.2",
+    "@fluentui/react": "^8.97.2",
     "@fluentui/react-examples": "^8.34.4",
     "@microsoft/load-themed-styles": "^1.10.26",
-    "@fluentui/azure-themes": "^8.5.4",
-    "@fluentui/react-docsite-components": "^8.10.4",
-    "@fluentui/font-icons-mdl2": "^8.4.13",
+    "@fluentui/azure-themes": "^8.5.8",
+    "@fluentui/react-docsite-components": "^8.10.8",
+    "@fluentui/font-icons-mdl2": "^8.5.0",
     "@fluentui/set-version": "^8.2.2",
-    "@fluentui/theme-samples": "^8.7.4",
-    "@fluentui/react-monaco-editor": "^1.7.4",
+    "@fluentui/theme-samples": "^8.7.8",
+    "@fluentui/react-monaco-editor": "^1.7.8",
     "office-ui-fabric-core": "^11.0.0",
     "react": "17.0.2",
     "react-dom": "17.0.2",

diff --git a/apps/public-docsite-v9/package.json b/apps/public-docsite-v9/package.json
@@ -21,10 +21,10 @@
     "@fluentui/scripts": "^1.0.0"
   },
   "dependencies": {
-    "@fluentui/react": "^8.96.2",
+    "@fluentui/react": "^8.97.2",
     "@fluentui/scripts": "^1.0.0",
     "@fluentui/storybook": "^1.0.0",
-    "@fluentui/react-components": "^9.3.2",
+    "@fluentui/react-components": "^9.4.0",
     "@fluentui/react-storybook-addon": "^9.0.0-rc.1",
     "@fluentui/react-theme": "^9.1.0",
     "@griffel/react": "^1.3.0",

diff --git a/apps/public-docsite-v9/src/Concepts/BuildTimeStyles.stories.mdx b/apps/public-docsite-v9/src/Concepts/BuildTimeStyles.stories.mdx
@@ -32,38 +32,44 @@ In your Webpack config, simply add the `@griffel/webpack-loader` to the list of
 
 ```js
 // webpack.config.js
-module: {
-  rules: [
-    {
-      test: /\.(ts|tsx)$/,
-      exclude: /node_modules/,
-      use: {
-        loader: '@griffel/webpack-loader',
-        options: {
-          // see https://github.com/microsoft/griffel/tree/main/packages/webpack-loader#configuring-babel-settings
-          babelOptions: {
-            presets: ['@babel/preset-typescript'],
+module.exports = {
+  module: {
+    rules: [
+      // 💡 We recommend adding the Griffel webpack loader after `babel-loader`, `ts-loader`, etc.
+      //
+      //    The underlying Babel transforms used by the Webpack loader are configured by default to use
+      //    the most basic language features. Therefore, to avoid extra configuration or parsing errors,
+      //    using the Webpack loader after compilation is the required approach.
+      {
+        test: /\.(ts|tsx)$/,
+        exclude: /node_modules/,
+        use: {
+          loader: '@griffel/webpack-loader',
+          options: {
+            // see https://github.com/microsoft/griffel/tree/main/packages/webpack-loader#configuring-babel-settings
+            babelOptions: {
+              presets: ['@babel/preset-typescript'],
+            },
           },
         },
       },
-    },
-    {
-      test: /\.(ts|tsx)$/,
-      exclude: /node_modules/,
-      use: {
-        // or 'ts-loader'
-        loader: 'babel-loader',
+      {
+        test: /\.(ts|tsx)$/,
+        exclude: /node_modules/,
+        use: {
+          // or 'ts-loader'
+          loader: 'babel-loader',
+        },
       },
-    },
-  ];
-}
+    ],
+  },
+};
 ```
 
-**💡 NOTE: we recommend adding the Griffel webpack loader after babel-loader or ts-loader.**. The underlying babel transforms
-used by the webpack loader are configured by default to use the most basic language features. Therefore to avoid
-extra configuration or parsing errors, using the webpack loader after transpilation is the required approach.
+> ℹ️ **Note**: A chain of webpack loaders is executed in reverse order
+> [https://webpack.js.org/concepts/loaders/#loader-features](https://webpack.js.org/concepts/loaders/#loader-features)
 
-#### Typescript (and additional transpilation) support
+#### Typescript (and additional compilation) support
 
 The Webpack loader [evaluate styles at runtime](#build-time-style-evaluation). For typescript
 it's necessary to install `@babel/preset-typescript` and configure it in the [babelOptions](https://github.com/microsoft/griffel/tree/main/packages/webpack-loader#configuring-babel-settings) of the loader. Similarly

diff --git a/apps/public-docsite-v9/src/Concepts/ChildWindow.stories.mdx b/apps/public-docsite-v9/src/Concepts/ChildWindow.stories.mdx
@@ -10,7 +10,7 @@ In these cases, the target element is hosted in a different context, and thus ha
 
 ### Configuring rendering
 
-We need to configure a renderer for `makeStyles()` and pass a `targetDocument` to `FluentProvider`:
+We need to configure a renderer for `makeStyles()` and pass a `targetDocument` to `RendererProvider` & `FluentProvider`:
 
 ```js
 import { createDOMRenderer, FluentProvider, RendererProvider } from '@fluentui/react-components';
@@ -21,7 +21,7 @@ function MyComponent(props) {
   const renderer = React.useMemo(() => createDOMRenderer(targetDocument), [targetDocument]);
 
   return (
-    <RendererProvider renderer={renderer}>
+    <RendererProvider renderer={renderer} targetDocument={targetDocument}>
       <FluentProvider targetDocument={targetDocument}>{children}</FluentProvider>
     </RendererProvider>
   );

diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Theme.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Theme.stories.mdx
@@ -7,7 +7,7 @@ import { Meta } from '@storybook/addon-docs';
 There are several important differences between v8 and v9 in how style and theme are managed.
 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.
+You may decide you want components to all look like v8, all look like v9, or be OK with a mixture but from the same color palette.
 
 ## Approach differences
 
@@ -17,7 +17,11 @@ ThemeProvider sets theme values on the React context for use in CSS-in-JS.
 FluentProvider applies theme values as CSS variables.
 
 This change from CSS-in-JS themes to CSS variable themes is the biggest difference between v8 and v9 themes and styles.
-Beyond consistency with the latest Fluent Design system, this change provides significant perfomance improvements and reduction of bundle sizes.
+Beyond consistency with the latest Fluent Design system, this change provides significant performance improvements and reduction of bundle sizes.
+
+#### Portals
+
+To be use v9 components inside v8 components like `Panel` & `Callout`, please enable [portal compatibility](?path=/docs/concepts-migration-from-v8-troubleshooting--page).
 
 ### Theme (v8) => Theme (v9)
 
@@ -55,7 +59,7 @@ The makeStyles function returns a hook that can be used during component render.
 
 ### mergeStyles -> mergeClasses
 
-In v8, mergeStyles combines an set of style objects to return a merged style object.
+In v8, mergeStyles combines a set of style objects to return a merged style object.
 The ordering of the parameters determines which styles overwrote preceding styles.
 
 In v9, mergeClasses takes a list of class names from makeStyles and returns the class names optimized for de-duping and minimal bundle size.
@@ -81,7 +85,7 @@ If you are using the default light or dark theme from v8, you can use the v9 `we
 This will give you pretty close consistency especially if you have moved to v9 for all of one component type.
 
 For example, if all your buttons are v9 buttons then users likely won't notice small color differences between button and input components.
-If you have a mixture of v8 and v9 buttons then the differences are more noticable.
+If you have a mixture of v8 and v9 buttons then the differences are more noticeable.
 
 ### Custom themes
 

diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Troubleshooting.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Troubleshooting.stories.mdx
@@ -24,6 +24,25 @@ ReactDOM.render(
 );
 ```
 
+## "I tried using the new components inside v8 Callouts, Panels, etc. but there does not seem to be any styling applied to them. Am I doing something wrong?"
+
+Components in version v9 use CSS variables for styling, v9 components that are using [React Portals](https://reactjs.org/docs/portals.html) handle this by default. Components like `Callout` & `Panel` in v8 don't do it, but this can be enabled with a compatibility package called `@fluentui/react-portal-compat`.
+
+`PortalCompatProvider` should be an inner child of FluentProvider, no additional configuration is required for `@fluentui/react`.
+
+```jsx
+import { FluentProvider } from '@fluentui/react-components';
+import { PortalCompatProvider } from '@fluentui/react-portal-compat';
+
+function App() {
+  return (
+    <FluentProvider>
+      <PortalCompatProvider>{/* your components */}</PortalCompatProvider>
+    </FluentProvider>
+  );
+}
+```
+
 ## "I managed to get the theme working but the components look different than they did previously, why is that?"
 
 We are modernizing our components in version 9 to adhere to the latest guidelines in the Fluent Design Language. That is the reason for any visual differences you might notice.

diff --git a/apps/public-docsite/package.json b/apps/public-docsite/package.json
@@ -25,24 +25,24 @@
   "devDependencies": {
     "@fluentui/common-styles": "^1.2.9",
     "@fluentui/eslint-plugin": "*",
-    "@fluentui/react-monaco-editor": "^1.7.4",
+    "@fluentui/react-monaco-editor": "^1.7.8",
     "@fluentui/scripts": "^1.0.0",
     "write-file-webpack-plugin": "^4.1.0"
   },
   "dependencies": {
-    "@fluentui/font-icons-mdl2": "^8.4.13",
+    "@fluentui/font-icons-mdl2": "^8.5.0",
     "@fluentui/public-docsite-resources": "^8.1.41",
     "@fluentui/public-docsite-setup": "^0.3.12",
-    "@fluentui/react": "^8.96.2",
-    "@fluentui/react-docsite-components": "^8.10.4",
+    "@fluentui/react": "^8.97.2",
+    "@fluentui/react-docsite-components": "^8.10.8",
     "@fluentui/react-examples": "^8.34.4",
-    "@fluentui/react-experiments": "^8.13.4",
+    "@fluentui/react-experiments": "^8.14.3",
     "@fluentui/react-file-type-icons": "^8.7.8",
     "@fluentui/react-icons-mdl2": "^1.3.22",
     "@fluentui/react-icons-mdl2-branded": "^1.2.23",
     "@fluentui/set-version": "^8.2.2",
     "@fluentui/theme": "^2.6.16",
-    "@fluentui/theme-samples": "^8.7.4",
+    "@fluentui/theme-samples": "^8.7.8",
     "@fluentui/utilities": "^8.13.1",
     "@microsoft/load-themed-styles": "^1.10.26",
     "office-ui-fabric-core": "^11.0.0",

diff --git a/apps/react-18-tests-v8/package.json b/apps/react-18-tests-v8/package.json
@@ -12,7 +12,8 @@
     "lint": "just-scripts lint",
     "test": "just-scripts test",
     "just": "just-scripts",
-    "start": "webpack-dev-server --mode=development --config=webpack.config.js"
+    "start": "webpack-dev-server --mode=development --config=webpack.config.js",
+    "type-check": "tsc -b tsconfig.json"
   },
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
@@ -22,7 +23,7 @@
     "swc-loader": "^0.2.3"
   },
   "dependencies": {
-    "@fluentui/react": "^8.96.2",
+    "@fluentui/react": "^8.97.2",
     "@fluentui/react-hooks": "^8.6.11",
     "react": "18.2.0",
     "react-dom": "18.2.0",

diff --git a/apps/react-18-tests-v9/package.json b/apps/react-18-tests-v9/package.json
@@ -21,8 +21,8 @@
     "swc-loader": "^0.2.3"
   },
   "dependencies": {
-    "@fluentui/react-button": "^9.1.2",
-    "@fluentui/react-provider": "^9.1.2",
+    "@fluentui/react-button": "^9.1.3",
+    "@fluentui/react-provider": "^9.1.3",
     "@fluentui/react-theme": "^9.1.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",

diff --git a/apps/ssr-tests-v9/package.json b/apps/ssr-tests-v9/package.json
@@ -20,7 +20,7 @@
     "type-check": "tsc -b tsconfig.json"
   },
   "dependencies": {
-    "@fluentui/react-components": "^9.3.2"
+    "@fluentui/react-components": "^9.4.0"
   },
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",

diff --git a/apps/ssr-tests/package.json b/apps/ssr-tests/package.json
@@ -13,7 +13,7 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@fluentui/react": "^8.96.2",
+    "@fluentui/react": "^8.97.2",
     "@microsoft/load-themed-styles": "^1.10.26",
     "@types/mocha": "^7.0.2",
     "@fluentui/scripts": "^1.0.0",

diff --git a/apps/stress-test/package.json b/apps/stress-test/package.json
@@ -10,8 +10,8 @@
     "type-check": "tsc -b tsconfig.type.json"
   },
   "dependencies": {
-    "@fluentui/react": "^8.96.2",
-    "@fluentui/react-components": "^9.3.2",
+    "@fluentui/react": "^8.97.2",
+    "@fluentui/react-components": "^9.4.0",
     "@fluentui/react-icons": "^2.0.175",
     "@fluentui/web-components": "^2.5.6",
     "@microsoft/fast-element": "^1.10.4",

diff --git a/apps/theming-designer/package.json b/apps/theming-designer/package.json
@@ -18,13 +18,13 @@
     "@fluentui/scripts": "^1.0.0"
   },
   "dependencies": {
-    "@fluentui/react": "^8.96.2",
+    "@fluentui/react": "^8.97.2",
     "@fluentui/merge-styles": "^8.5.3",
-    "@fluentui/react-docsite-components": "^8.10.4",
+    "@fluentui/react-docsite-components": "^8.10.8",
     "@fluentui/foundation-legacy": "^8.2.20",
     "@fluentui/scheme-utilities": "^8.3.17",
     "@fluentui/set-version": "^8.2.2",
-    "@fluentui/font-icons-mdl2": "^8.4.13",
+    "@fluentui/font-icons-mdl2": "^8.5.0",
     "@microsoft/load-themed-styles": "^1.10.26",
     "react": "17.0.2",
     "react-dom": "17.0.2",

diff --git a/apps/ts-minbar-test-react-components/package.json b/apps/ts-minbar-test-react-components/package.json
@@ -5,7 +5,7 @@
   "description": "Testing Fluent UI React Components compatibility with Typescript 3.9",
   "license": "MIT",
   "dependencies": {
-    "@fluentui/react-components": "^9.3.2"
+    "@fluentui/react-components": "^9.4.0"
   },
   "scripts": {
     "build": "just-scripts build",