Merge branch 'master' into TestCasesTimeZoneIssueFix

.devops/templates/deployE2E.yml

@@ -24,14 +24,20 @@ steps:
       yarn workspace @fluentui/pr-deploy-site generate:site
     displayName: generate PR Deploy Site
 
-  - task: AzureUpload@2
+  - task: AzureCLI@2
     displayName: Upload PR deploy site
     inputs:
       azureSubscription: $(azureSubscription)
-      BlobPrefix: $(deployBasePath)
-      ContainerName: '$web'
-      SourcePath: 'apps/pr-deploy-site/dist'
-      storage: $(azureStorage)
+      scriptType: 'bash'
+      scriptLocation: 'inlineScript'
+      inlineScript: |
+        az storage blob upload-batch \
+          --destination '$web' \
+          --source apps/pr-deploy-site/dist \
+          --account-name $(azureStorage) \
+          --destination-path $(deployBasePath) \
+          --auth-mode login \
+          --overwrite
 
   - task: GithubPRStatus@0
     displayName: 'Update PR deploy site github status'

.devops/templates/variables.yml

@@ -23,7 +23,7 @@ variables:
   deployUrl: 'https://$(deployHost)/$(deployBasePath)'
 
   # This service principal ("subscription" is a misleading name) only has access to the fluentuipr storage account
-  azureSubscription: Azure PR deploy
+  azureSubscription: Azure PR deploy - NEW
   azureStorage: fluentuipr
 
   ${{ if not(startsWith(variables['Build.SourceBranch'], 'refs/heads/')) }}:

.github/CODEOWNERS

@@ -237,7 +237,7 @@ packages/react-components/react-storybook-addon-export-to-sandbox @microsoft/flu
 packages/react-components/babel-preset-storybook-full-source @microsoft/fluentui-react-build
 packages/react-components/react-jsx-runtime @microsoft/teams-prg
 packages/react-components/react-toast @microsoft/teams-prg
-packages/react-components/react-search-preview @microsoft/cxe-red
+packages/react-components/react-search @microsoft/cxe-red @smhigley
 packages/react-components/react-colorpicker-compat @microsoft/cxe-red @sopranopillow
 packages/react-components/react-nav-preview @microsoft/cxe-red @mltejera
 packages/react-components/react-motion-preview @microsoft/cxe-prg @marcosmoura
@@ -248,10 +248,11 @@ packages/react-components/react-calendar-compat @microsoft/cxe-red @sopranopillo
 packages/react-components/react-infolabel @microsoft/cxe-red @sopranopillow
 packages/react-components/react-list-preview @microsoft/teams-prg
 packages/react-components/react-motions-preview @microsoft/teams-prg
-packages/react-components/react-teaching-popover-preview @microsoft/xc-uxe @Mitch-At-Work
+packages/react-components/react-teaching-popover @microsoft/xc-uxe @Mitch-At-Work
 packages/react-components/react-timepicker-compat @microsoft/teams-prg
 packages/react-components/react-icons-compat @microsoft/cxe-red @tomi-msft
 packages/react-components/react-tag-picker-preview @microsoft/teams-prg
+packages/react-components/react-carousel-preview @microsoft/xc-uxe @Mitch-At-Work
 # <%= NX-CODEOWNER-PLACEHOLDER %>
 
 ## Components

.storybook/docs-root.css

@@ -181,6 +181,7 @@
 
 #docs-root a.sbdocs-a {
   color: #0078d4;
+  text-decoration: underline;
 }
 
 /*  */

.vscode/extensions.json

@@ -4,6 +4,8 @@
   "recommendations": [
     // Extension identifier format: ${publisher}.${name}. Example: vscode.csharp
     "dbaeumer.vscode-eslint",
-    "esbenp.prettier-vscode"
+    "esbenp.prettier-vscode",
+    "streetsidesoftware.code-spell-checker",
+    "nrwl.angular-console"
   ]
 }

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

@@ -25,6 +25,7 @@
     "@fluentui/react-persona": "*",
     "@fluentui/react-provider": "*",
     "@fluentui/react-spinbutton": "*",
+    "@fluentui/react-swatch-picker-preview": "*",
     "@fluentui/react-theme": "*",
     "@griffel/core": "^1.14.1",
     "@microsoft/load-themed-styles": "^1.10.26",

apps/perf-test-react-components/src/scenarios/SwatchPicker.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { SwatchPicker, ColorSwatch, ImageSwatch, EmptySwatch } from '@fluentui/react-swatch-picker-preview';
+import { FluentProvider } from '@fluentui/react-provider';
+import { webLightTheme } from '@fluentui/react-theme';
+
+const Scenario = () => (
+  <SwatchPicker aria-label="SwatchPicker default" defaultSelectedValue="FF1921">
+    <ColorSwatch color="#FF1921" value="FF1921" aria-label="red" />
+    <ImageSwatch src="path/img.png" value="img" aria-label="img" />
+    <EmptySwatch />
+  </SwatchPicker>
+);
+
+Scenario.decorator = (props: { children: React.ReactNode }) => (
+  <FluentProvider theme={webLightTheme}>{props.children}</FluentProvider>
+);
+
+export default Scenario;

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

@@ -12,7 +12,11 @@ module.exports = /** @type {Omit<import('../../../.storybook/main'), 'typescript
     '../src/**/*.stories.mdx',
     '../src/**/*.stories.@(ts|tsx)',
     ...getPackageStoriesGlob({ packageName: '@fluentui/react-components', callerPath: __dirname }),
-    ...getPackageStoriesGlob({ packageName: '@fluentui/public-docsite-v9', callerPath: __dirname }),
+    ...getPackageStoriesGlob({
+      packageName: '@fluentui/public-docsite-v9',
+      callerPath: __dirname,
+      excludeStoriesInsertionFromPackages: ['@fluentui/react-storybook-addon', '@fluentui/theme-designer'],
+    }),
   ],
   staticDirs: ['../public'],
   addons: [...rootMain.addons],

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

@@ -46,6 +46,17 @@ export const parameters = {
           ],
         ],
         'Theme',
+        [
+          'Border Radii',
+          'Colors',
+          'Fonts',
+          'Motion',
+          'Shadows',
+          'Spacing',
+          'Stroke Widths',
+          'Typography',
+          'Theme Designer',
+        ],
         'Components',
         'Icons',
         ['Overview', 'Catalog'],

apps/public-docsite-v9/package.json

@@ -31,13 +31,13 @@
     "@fluentui/react-northstar": "*",
     "@fluentui/react-icons-northstar": "*",
     "@fluentui/react-components": "*",
+    "@fluentui/react-list-preview": "*",
     "@fluentui/react-storybook-addon": "*",
     "@fluentui/react-storybook-addon-export-to-sandbox": "*",
     "@fluentui/theme-designer": "*",
-    "@fluentui/react-search-preview": "*",
-    "@fluentui/react-motion-preview": "*",
+    "@fluentui/react-swatch-picker-preview": "*",
     "@fluentui/react-motions-preview": "*",
-    "@fluentui/react-teaching-popover-preview": "*",
+    "@fluentui/react-tag-picker-preview": "*",
     "@fluentui/react-timepicker-compat": "*",
     "@griffel/react": "^1.5.14",
     "@microsoft/applicationinsights-web": "^3",

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

@@ -34,15 +34,15 @@ You can check complete example at [CodeSandbox](https://codesandbox.io/s/fluentu
 
 ### Media Queries Sorting
 
-Fluent UI React v9 uses Griffel as CSS-in-JS to apply styles. To provide deterministic behavior, styles applied by Griffel [are sorted]((https://griffel.js.org/react/guides/atomic-css#lvfha-order-of-pseudo-classes), the same applies to media queries. Fluent UI does not provide an opinionated default to sort media queries as the order may vary depending on the specific needs of the application.
+Fluent UI React v9 uses Griffel as CSS-in-JS to apply styles. To provide deterministic behavior, styles applied by Griffel [are sorted](https://griffel.js.org/react/guides/atomic-css#lvfha-order-of-pseudo-classes), the same applies to media queries. Fluent UI does not provide an opinionated default to sort media queries as the order may vary depending on the specific needs of the application.
 
 To configure the sorting behavior, please pass `compareMediaQueries` function with the same signature as sort functions in e.g. `Array.prototype.sort`.
 
 ```js
 import { createDOMRenderer } from '@griffel/react';
 
 const mediaQueryOrder = [
-  'only screen and (min-width: 1366px)',
+  'only screen and (min-width: 1024px)',
   'only screen and (min-width: 1366px)',
   'only screen and (min-width: 1920px)',
 ];
@@ -52,7 +52,7 @@ function sortMediaQueries(a, b) {
 }
 
 const renderer = createDOMRenderer(document, {
-  compareMediaQueries,
+  compareMediaQueries: sortMediaQueries,
 });
 ```
 

apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/GroupedList.stories.mdx

@@ -0,0 +1,26 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Concepts/Migration/from v8/Components/GroupedList Migration" />
+
+# GroupedList Migration
+
+Fluent UI v8 provides the `GroupedList` component for grouping hierarchical grid data (the component has a [`treegrid` role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Treegrid_Role)).
+
+Fluent UI v9 does not have a one-to-one migration from v8's `GroupedList` so this guide will help you decide which v9 component makes the most sense for you to migrate to based on your usage of `GroupedList`.
+
+### I'm using `GroupedList` to display hierarchical data that expands and collapses
+
+In this case consider migrating to [Fluent UI v9's `Tree` component](?path=/docs/components-tree--default) which is a hierarchical list control for displaying expandable and collapsable data.
+
+### I'm using `GroupedList` to display a flat or nested list of items that does not expand or collapse
+
+For lists, look at migrating to [Fluent UI v9's `List` component](?path=/docs/preview-components-list--default) which renders vertically list elements that can be interactive or non-interactive.
+
+### I'm using `GroupedList` to display tabular data
+
+For tabular data (i.e., a grid), consider migrating to [Fluent UI v9's `Table` component](?path=/docs/components-table--default) or [`DataGrid` component](?path=/docs/components-datagrid--default).
+Both components are designed to render tabular data and support selection.
+
+### I'm using `GroupedList` in some other way
+
+Contact us on [Github](https://github.com/microsoft/fluentui) and we can talk about your situation.

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

@@ -16,15 +16,35 @@ Fluent UI components are styled using CSS in JS. This technique requires a style
 
 Place a `<FluentProvider />` at the root of your app and pass theme as a prop.
 
+### React 18
+
+```jsx
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import { FluentProvider, webLightTheme } from '@fluentui/react-components';
+
+import App from './App';
+
+const root = createRoot(document.getElementById('root'));
+
+root.render(
+  <FluentProvider theme={webLightTheme}>
+    <App />
+  </FluentProvider>,
+);
+```
+
+### React 17
+
 ```jsx
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { FluentProvider, teamsLightTheme } from '@fluentui/react-components';
+import { FluentProvider, webLightTheme } from '@fluentui/react-components';
 
 import App from './App';
 
 ReactDOM.render(
-  <FluentProvider theme={teamsLightTheme}>
+  <FluentProvider theme={webLightTheme}>
     <App />
   </FluentProvider>,
   document.getElementById('root'),

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

@@ -54,7 +54,7 @@ Later in this topic, you will find examples covering each of these scenarios.
 Some components conditionally render slots.
 
 For example, Avatar has a `label` slot that only renders when there is no image provided.
-t also defines an `icon` slot that only renders when neither an image nor a name are provided.
+It also defines an `icon` slot that only renders when neither an image nor a name are provided.
 
 ### What about children?
 

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

@@ -37,7 +37,7 @@ export const AppRoot = ({children}) => (
 Import `tokens` to style a component using `makeStyles`
 
 ```jsx
-import { tokens } from '@fluentui/react-theme';
+import { tokens } from '@fluentui/react-components';
 
 const useStyles = makeStyles({
   root: { display: 'flex' },