Merge branch 'master' into migrate-to-swc

microsoft · Mar 11, 2023 · c020213 · c020213
2 parents eccd2a3 + 746ca11
commit c020213
Show file tree

Hide file tree

Showing 94 changed files with 2,043 additions and 232 deletions.
diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
@@ -116,6 +116,8 @@ apps/public-docsite-v9 @microsoft/cxe-red @microsoft/cxe-coastal @microsoft/flue
 apps/theming-designer @microsoft/fluentui-react
 apps/ssr-tests-v9 @microsoft/fluentui-react-build
 apps/stress-test @microsoft/cxe-red @spmonahan @micahgodbolt
+apps/react-18-tests-v8 @microsoft/cxe-red @microsoft/cxe-coastal @micahgodbolt
+apps/react-18-tests-v9 @microsoft/cxe-red @microsoft/cxe-coastal @micahgodbolt
 apps/recipes-react-components @microsoft/cxe-red @microsoft/cxe-coastal @microsoft/fluentui-react @sopranopillow
 
 #### Packages
@@ -138,7 +140,7 @@ packages/react-components/react-conformance-griffel @microsoft/teams-prg
 packages/react-components/react-context-selector @microsoft/teams-prg
 packages/react-date-time @microsoft/cxe-red
 packages/react-docsite-components @microsoft/fluentui-v8-website
-packages/react-file-type-icons @jahnp @bigbadcapers
+packages/react-file-type-icons @microsoft/cxe-red @jahnp @bigbadcapers
 packages/react-hooks @microsoft/cxe-red
 packages/react-icons-mdl2 @microsoft/cxe-red @microsoft/cxe-coastal
 packages/react-monaco-editor @microsoft/fluentui-v8-website

diff --git a/apps/perf-test/package.json b/apps/perf-test/package.json
@@ -18,7 +18,7 @@
   },
   "dependencies": {
     "@fluentui/example-data": "^8.4.6",
-    "@fluentui/react": "^8.106.5",
+    "@fluentui/react": "^8.106.6",
     "@microsoft/load-themed-styles": "^1.10.26",
     "flamegrill": "0.2.0",
     "lodash": "^4.17.15",

diff --git a/apps/public-docsite-resources/package.json b/apps/public-docsite-resources/package.json
@@ -34,15 +34,15 @@
     "@fluentui/scripts-webpack": "*"
   },
   "dependencies": {
-    "@fluentui/react": "^8.106.5",
+    "@fluentui/react": "^8.106.6",
     "@fluentui/react-examples": "^8.34.4",
     "@microsoft/load-themed-styles": "^1.10.26",
-    "@fluentui/azure-themes": "^8.5.68",
-    "@fluentui/react-docsite-components": "^8.11.29",
+    "@fluentui/azure-themes": "^8.5.69",
+    "@fluentui/react-docsite-components": "^8.11.30",
     "@fluentui/font-icons-mdl2": "^8.5.12",
     "@fluentui/set-version": "^8.2.5",
-    "@fluentui/theme-samples": "^8.7.64",
-    "@fluentui/react-monaco-editor": "^1.7.64",
+    "@fluentui/theme-samples": "^8.7.65",
+    "@fluentui/react-monaco-editor": "^1.7.65",
     "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
@@ -24,7 +24,7 @@
   "dependencies": {
     "@fluentui/react-migration-v8-v9": "^9.1.13",
     "@fluentui/react-migration-v0-v9": "9.0.0-alpha.0",
-    "@fluentui/react": "^8.106.5",
+    "@fluentui/react": "^8.106.6",
     "@fluentui/react-northstar": "^0.66.3",
     "@fluentui/react-icons-northstar": "^0.66.3",
     "@fluentui/react-components": "^9.18.0",

diff --git a/apps/public-docsite-v9/src/Concepts/Migration/KeepingDesignConsistent.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/KeepingDesignConsistent.stories.mdx
@@ -102,7 +102,7 @@ As detailed in the _/Concepts/Developer/Styling Components_ topic, you can creat
 If you do create custom styles, we strongly recommend using design tokens.
 This ensures styles update with theme changes.
 
-## You can recompose components with custom styles
+## You can recompose components with different styles
 
 Fluent v9 has a powerful composition model using React hooks.
 Each component is separated into a hook that maps props to state, a hook that uses state to set className styles on each slot, and a render function that outputs each slot with applied props.
@@ -145,3 +145,43 @@ export const MyButton: ForwardRefComponent<ButtonProps> = React.forwardRef((prop
 ```
 
 This is the most advanced form of customization in Fluent UI React v9, but provides you complete control over components.
+
+## You can set custom style hooks per component type
+
+**⚠ Avoid custom style hooks**
+
+Prefer creating custom themes, setting className, replacing slots, extending theme tokens, and component recomposition.
+This approach is meant as an escape-hatch when all other customizations are not enough for your use case.
+
+**⚠ Be careful **
+
+- Never change any state properties other than `className`.
+- Never dynamically change hooks at runtime. This will lead to unstable hook calls.
+- Custom style hooks are called from within the component and receive the component state.
+- Be judicious with creating styles and making `mergeClasses` call as you may affect the performance.
+
+You can pass `FluentProvider.customStyleHooks_unstable` a set of custom style hooks. The custom style hooks are considered unstable and the API may change at any time.
+Each custom style hook can update root or slot class names.
+
+```tsx
+const myButtonStyles = makeStyles({
+  root: {
+    //...
+  },
+});
+
+const myCustomStyles: FluentProviderCustomStyleHooks = {
+  useButtonStyles_unstable: state => {
+    const myButtonStyles = useMyButtonStyles();
+    const buttonState = state as ButtonState;
+    buttonState.root.className = mergeClasses(buttonState.root.className, myButtonStyles.root);
+  },
+};
+
+<FluentProvider customStyleHooks_unstable={myCustomStyles}></FluentProvider>;
+```
+
+To override existing styles, use `makeStyles` to create your custom styles and then call `mergeClasses` with state `className` and the your new styles.
+To completely replace existing styles, overwrite the state `className`.
+
+When `FluentProvider` are nested, custom style hooks will be shallow merged.
diff --git a/apps/public-docsite/package.json b/apps/public-docsite/package.json
@@ -25,7 +25,7 @@
   "devDependencies": {
     "@fluentui/common-styles": "^1.2.21",
     "@fluentui/eslint-plugin": "*",
-    "@fluentui/react-monaco-editor": "^1.7.64",
+    "@fluentui/react-monaco-editor": "^1.7.65",
     "write-file-webpack-plugin": "^4.1.0",
     "@fluentui/scripts-tasks": "*",
     "@fluentui/scripts-webpack": "*"
@@ -34,17 +34,17 @@
     "@fluentui/font-icons-mdl2": "^8.5.12",
     "@fluentui/public-docsite-resources": "^8.1.41",
     "@fluentui/public-docsite-setup": "^0.3.17",
-    "@fluentui/react": "^8.106.5",
-    "@fluentui/react-docsite-components": "^8.11.29",
+    "@fluentui/react": "^8.106.6",
+    "@fluentui/react-docsite-components": "^8.11.30",
     "@fluentui/react-examples": "^8.34.4",
-    "@fluentui/react-experiments": "^8.14.59",
-    "@fluentui/fluent2-theme": "^8.106.0",
+    "@fluentui/react-experiments": "^8.14.60",
+    "@fluentui/fluent2-theme": "^8.106.1",
     "@fluentui/react-file-type-icons": "^8.8.12",
     "@fluentui/react-icons-mdl2": "^1.3.36",
     "@fluentui/react-icons-mdl2-branded": "^1.2.37",
     "@fluentui/set-version": "^8.2.5",
     "@fluentui/theme": "^2.6.24",
-    "@fluentui/theme-samples": "^8.7.64",
+    "@fluentui/theme-samples": "^8.7.65",
     "@fluentui/utilities": "^8.13.8",
     "@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
@@ -21,7 +21,7 @@
     "@fluentui/scripts-webpack": "*"
   },
   "dependencies": {
-    "@fluentui/react": "^8.106.5",
+    "@fluentui/react": "^8.106.6",
     "@fluentui/react-hooks": "^8.6.19",
     "@types/react": "18.0.14",
     "@types/react-dom": "18.0.6",

diff --git a/apps/react-18-tests-v8/src/components/Panel.Basic.Example.tsx b/apps/react-18-tests-v8/src/components/Panel.Basic.Example.tsx
@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { Panel } from '@fluentui/react/lib/Panel';
+import { useBoolean } from '@fluentui/react-hooks';
+
+const handleOpen = () => console.log('onOpen');
+const handleOpened = () => console.log('onOpened');
+
+export const PanelBasicExample: React.FunctionComponent = () => {
+  const [isOpen, { setTrue: openPanel, setFalse: dismissPanel }] = useBoolean(false);
+
+  return (
+    <div>
+      <button onClick={openPanel}> Open panel </button>
+      <Panel
+        onOpen={handleOpen}
+        onOpened={handleOpened}
+        headerText="Sample panel"
+        isOpen={isOpen}
+        onDismiss={dismissPanel}
+        // You MUST provide this prop! Otherwise screen readers will just say "button" with no label.
+        closeButtonAriaLabel="Close"
+      >
+        <p>Content goes here.</p>
+      </Panel>
+    </div>
+  );
+};
diff --git a/apps/ssr-tests/package.json b/apps/ssr-tests/package.json
@@ -13,7 +13,7 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@fluentui/react": "^8.106.5",
+    "@fluentui/react": "^8.106.6",
     "@microsoft/load-themed-styles": "^1.10.26",
     "@types/mocha": "7.0.2",
     "@fluentui/public-docsite-resources": "^8.1.41",

diff --git a/apps/stress-test/package.json b/apps/stress-test/package.json
@@ -10,7 +10,7 @@
     "type-check": "tsc -b tsconfig.type.json"
   },
   "dependencies": {
-    "@fluentui/react": "^8.106.5",
+    "@fluentui/react": "^8.106.6",
     "@fluentui/react-components": "^9.18.0",
     "@fluentui/react-icons": "^2.0.175",
     "@fluentui/web-components": "^2.5.12",

diff --git a/apps/theming-designer/package.json b/apps/theming-designer/package.json
@@ -19,9 +19,9 @@
     "@fluentui/scripts-webpack": "*"
   },
   "dependencies": {
-    "@fluentui/react": "^8.106.5",
+    "@fluentui/react": "^8.106.6",
     "@fluentui/merge-styles": "^8.5.6",
-    "@fluentui/react-docsite-components": "^8.11.29",
+    "@fluentui/react-docsite-components": "^8.11.30",
     "@fluentui/foundation-legacy": "^8.2.32",
     "@fluentui/scheme-utilities": "^8.3.25",
     "@fluentui/set-version": "^8.2.5",

diff --git a/apps/ts-minbar-test-react/package.json b/apps/ts-minbar-test-react/package.json
@@ -5,7 +5,7 @@
   "description": "Testing Fluent UI React compatibility with Typescript 3.9",
   "license": "MIT",
   "dependencies": {
-    "@fluentui/react": "^8.106.5"
+    "@fluentui/react": "^8.106.6"
   },
   "scripts": {
     "type-check": "tsc -p .",

diff --git a/apps/vr-tests/package.json b/apps/vr-tests/package.json
@@ -22,8 +22,8 @@
   "dependencies": {
     "@fluentui/example-data": "^8.4.6",
     "@fluentui/font-icons-mdl2": "^8.5.12",
-    "@fluentui/react": "^8.106.5",
-    "@fluentui/react-experiments": "^8.14.59",
+    "@fluentui/react": "^8.106.6",
+    "@fluentui/react-experiments": "^8.14.60",
     "@fluentui/react-hooks": "^8.6.19",
     "@fluentui/react-icons-mdl2": "^1.3.36",
     "@fluentui/storybook": "^1.0.0",

diff --git a/change/@fluentui-react-card-0a817d2d-d46b-4895-b3bb-29566bf747fa.json b/change/@fluentui-react-card-0a817d2d-d46b-4895-b3bb-29566bf747fa.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "docs: improve readme description",
+  "packageName": "@fluentui/react-card",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-image-8d658a2f-4b6b-49a2-9dbc-3d36b80f40b9.json b/change/@fluentui-react-image-8d658a2f-4b6b-49a2-9dbc-3d36b80f40b9.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: Adding calls to custom style hooks derived from context.",
+  "packageName": "@fluentui/react-image",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-portal-d5ac98ba-22cc-41a1-939d-77041a362442.json b/change/@fluentui-react-portal-d5ac98ba-22cc-41a1-939d-77041a362442.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: accept a className in mountNode in Portal",
+  "packageName": "@fluentui/react-portal",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-progress-f5145f44-c47b-4c22-a051-e884f22b88ce.json b/change/@fluentui-react-progress-f5145f44-c47b-4c22-a051-e884f22b88ce.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: Smooth out animation of indeterminate progress bar",
+  "packageName": "@fluentui/react-progress",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-tabster-c7f8c111-451a-4f17-bb36-8e8aa2fe1e8a.json b/change/@fluentui-react-tabster-c7f8c111-451a-4f17-bb36-8e8aa2fe1e8a.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Add JSDoc for tabster focus indicator selector",
+  "packageName": "@fluentui/react-tabster",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-text-4ec8a8d0-658f-4318-9259-eb36057dbf99.json b/change/@fluentui-react-text-4ec8a8d0-658f-4318-9259-eb36057dbf99.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: Adding calls to custom style hooks derived from context.",
+  "packageName": "@fluentui/react-text",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/azure-themes/CHANGELOG.json b/packages/azure-themes/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@fluentui/azure-themes",
   "entries": [
+    {
+      "date": "Tue, 14 Mar 2023 07:38:49 GMT",
+      "tag": "@fluentui/azure-themes_v8.5.69",
+      "version": "8.5.69",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/azure-themes",
+            "comment": "Bump @fluentui/react to v8.106.6",
+            "commit": "56f81e3cd545ee3c307825335d4643b06a877ce5"
+          }
+        ]
+      }
+    },
     {
       "date": "Fri, 10 Mar 2023 07:38:25 GMT",
       "tag": "@fluentui/azure-themes_v8.5.68",

diff --git a/packages/azure-themes/CHANGELOG.md b/packages/azure-themes/CHANGELOG.md
@@ -1,9 +1,18 @@
 # Change Log - @fluentui/azure-themes
 
-This log was last generated on Fri, 10 Mar 2023 07:38:25 GMT and should not be manually modified.
+This log was last generated on Tue, 14 Mar 2023 07:38:49 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [8.5.69](https://github.com/microsoft/fluentui/tree/@fluentui/azure-themes_v8.5.69)
+
+Tue, 14 Mar 2023 07:38:49 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/azure-themes_v8.5.68..@fluentui/azure-themes_v8.5.69)
+
+### Patches
+
+- Bump @fluentui/react to v8.106.6 ([PR #26749](https://github.com/microsoft/fluentui/pull/26749) by beachball)
+
 ## [8.5.68](https://github.com/microsoft/fluentui/tree/@fluentui/azure-themes_v8.5.68)
 
 Fri, 10 Mar 2023 07:38:25 GMT 

diff --git a/packages/azure-themes/package.json b/packages/azure-themes/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/azure-themes",
-  "version": "8.5.68",
+  "version": "8.5.69",
   "description": "Azure themes for Fluent UI React",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -28,7 +28,7 @@
     "@fluentui/scripts-webpack": "*"
   },
   "dependencies": {
-    "@fluentui/react": "^8.106.5",
+    "@fluentui/react": "^8.106.6",
     "@fluentui/set-version": "^8.2.5",
     "tslib": "^2.1.0"
   }

diff --git a/packages/cra-template/CHANGELOG.json b/packages/cra-template/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@fluentui/cra-template",
   "entries": [
+    {
+      "date": "Tue, 14 Mar 2023 07:38:49 GMT",
+      "tag": "@fluentui/cra-template_v8.4.66",
+      "version": "8.4.66",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/cra-template",
+            "comment": "Bump @fluentui/react to v8.106.6",
+            "commit": "56f81e3cd545ee3c307825335d4643b06a877ce5"
+          }
+        ]
+      }
+    },
     {
       "date": "Fri, 10 Mar 2023 07:38:25 GMT",
       "tag": "@fluentui/cra-template_v8.4.65",

diff --git a/packages/cra-template/CHANGELOG.md b/packages/cra-template/CHANGELOG.md
@@ -1,9 +1,18 @@
 # Change Log - @fluentui/cra-template
 
-This log was last generated on Fri, 10 Mar 2023 07:38:25 GMT and should not be manually modified.
+This log was last generated on Tue, 14 Mar 2023 07:38:49 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [8.4.66](https://github.com/microsoft/fluentui/tree/@fluentui/cra-template_v8.4.66)
+
+Tue, 14 Mar 2023 07:38:49 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/cra-template_v8.4.65..@fluentui/cra-template_v8.4.66)
+
+### Patches
+
+- Bump @fluentui/react to v8.106.6 ([PR #26749](https://github.com/microsoft/fluentui/pull/26749) by beachball)
+
 ## [8.4.65](https://github.com/microsoft/fluentui/tree/@fluentui/cra-template_v8.4.65)
 
 Fri, 10 Mar 2023 07:38:25 GMT 

diff --git a/packages/cra-template/package.json b/packages/cra-template/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/cra-template",
-  "version": "8.4.65",
+  "version": "8.4.66",
   "description": "Create React App template for Fluent UI React (@fluentui/react)",
   "repository": {
     "type": "git",
@@ -18,7 +18,7 @@
     "template.json"
   ],
   "devDependencies": {
-    "@fluentui/react": "^8.106.5",
+    "@fluentui/react": "^8.106.6",
     "@fluentui/scripts-projects-test": "*",
     "@fluentui/scripts-monorepo": "*"
   }