Merge branch 'master' into feat/react-drawer/move-scroll-to-context

* master: (416 commits) fix: remove relative imports within stories which are invalid for creating 'show docs' and circular dep imports from cypress files (microsoft#31087) Fix overlapping bars on continuous axes (microsoft#31035) feat(scripts-tasks): implement ~36% faster type-check task (microsoft#31116) feat(workspace-plugin): implement split-library-in-two migration generator (microsoft#31086) applying package updates Sankey diagram: Support number formatting (microsoft#31113) Fix wrong position of hover callout in case of single data AreaChart (microsoft#30256) Combobox filtering bug fix (microsoft#31141) chore(react-tag-picker): adds text elliptical clipping example (microsoft#31114) docs: command cheat sheet (microsoft#30685) chore: refactor tests for createPresenceComponent() (microsoft#31137) Stable Release: TeachingPopover (microsoft#31112) applying package updates fix: SpinButton buttons now show correct visuals at bounds (microsoft#31126) feat: add accessibility docs to Link about color/underlines (microsoft#31121) fix: Table and DataGrid should not remove cells from the accessibility tree (microsoft#31068) Add shadow DOM support to `@fluentui/react` (Fluent v8) (microsoft#30689) fix(react-swatch-picker): fixes after bug bash (microsoft#31097) feat: unify v9 babel preset in all packages (microsoft#31088) applying package updates ...
marcosmoura · Apr 23, 2024 · 033678b · 033678b
2 parents 4a32eaa + ff79ac8
commit 033678b
Show file tree

Hide file tree

Showing 2,414 changed files with 143,699 additions and 27,845 deletions.
diff --git a/.devops/templates/deployE2E.yml b/.devops/templates/deployE2E.yml
@@ -6,6 +6,10 @@ steps:
       filePath: yarn-ci.sh
     displayName: yarn
 
+  - script: |
+      yarn cypress verify
+    displayName: verify cypress install
+
   # this also builds FUI N* docs if appropriate
   - script: |
       yarn bundle  $(sinceArg)
@@ -20,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'

diff --git a/.devops/templates/tools.yml b/.devops/templates/tools.yml
@@ -35,5 +35,6 @@ steps:
       echo 'deployUrl "$(deployUrl)"'
       echo 'isPR "$(isPR)"'
       echo 'targetBranch "$(targetBranch)"'
+      echo number of CPUs "$(getconf _NPROCESSORS_ONLN)"
     displayName: Log environment variables (Linux)
     condition: eq(variables['Agent.OS'], 'Linux')
diff --git a/.devops/templates/variables.yml b/.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/')) }}:

diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
@@ -54,9 +54,7 @@
 /jest.preset.ts @microsoft/fluentui-react-build
 /jest.config.js @microsoft/fluentui-react-build
 /jest.config.ts @microsoft/fluentui-react-build
-/lerna.json @microsoft/fluentui-react-build
 /package.json @microsoft/fluentui-react-build
-/sizeauditor.json @microsoft/fluentui-react-build
 /tsconfig.json @microsoft/fluentui-react-build
 /tsconfig.*.json @microsoft/fluentui-react-build
 /tsconfig.base.json @microsoft/fluentui-react-build
@@ -103,7 +101,6 @@ scripts/update-release-notes @microsoft/fluentui-react-build
 scripts/utils @microsoft/fluentui-react-build
 scripts/webpack @microsoft/fluentui-react-build
 scripts/perf-test-flamegrill @microsoft/fluentui-react-build
-scripts/bundle-size-auditor @microsoft/fluentui-react-build
 
 #### Fluent UI N*
 packages/a11y-rules @microsoft/fluentui-northstar
@@ -240,20 +237,21 @@ 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
 packages/react-components/react-message-bar @microsoft/teams-prg
-packages/react-components/react-rating-preview @microsoft/cxe-red @tomi-msft
+packages/react-components/react-rating @microsoft/cxe-red @tomi-msft
 packages/react-components/react-swatch-picker-preview @microsoft/cxe-prg
 packages/react-components/react-calendar-compat @microsoft/cxe-red @sopranopillow
 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
 # <%= NX-CODEOWNER-PLACEHOLDER %>
 
 ## Components
@@ -325,3 +323,8 @@ packages/react-experiments/src/components/TileList @ThomasMichon
 **/api-extractor.json @microsoft/fluentui-react-build
 **/api-extractor.unstable.json @microsoft/fluentui-react-build
 **/.swcrc @microsoft/fluentui-react-build
+
+## Docs
+/rfcs/ @microsoft/cxe-red @microsoft/cxe-prg @microsoft/teams-prg
+/rfcs/shared/build-system/ @microsoft/fluentui-react-build
+/docs/ @microsoft/cxe-red @microsoft/cxe-prg @microsoft/teams-prg
diff --git a/.github/workflows/create-milestone.yml b/.github/workflows/create-milestone.yml
@@ -21,7 +21,7 @@ jobs:
           year=$(date +"%Y")
           title="${month} Project Cycle Q${quarter} ${year}"
           due_on=$(date -d "$(date -d "next month" +%Y-%m-01) -1 day" +"%Y-%m-%dT%H:%M:%S%z")
-          echo "Using title '${title}' and setting due date: '${due-on}'"
-          gh api --method POST repos/microsoft/fluentui/milestones -f title="${title} -f due_on="${due_on}"
+          echo "Using title '${title}' and setting due date: '${due_on}'"
+          gh api --method POST repos/microsoft/fluentui/milestones -f title="${title}" -f due_on="${due_on}"
         env:
           GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
diff --git a/.gitignore b/.gitignore
@@ -17,6 +17,8 @@ stats/
 # northstar README lives in packages/fluentui and is automatically copied to react-northstar during build
 packages/fluentui/react-northstar/README.md
 
+monosize-report.md
+
 # Windows image file caches
 Thumbs.db
 ehthumbs.db
@@ -59,6 +61,7 @@ dist.stats.json
 bower_components
 node_modules
 temp
+tmp
 lib
 lib-amd
 lib-commonjs

diff --git a/.nxignore b/.nxignore
@@ -7,7 +7,6 @@ packages/fluentui/setup-local-development.md
 packages/fluentui/CHANGELOG.md
 packages/fluentui/CONTRIBUTING.md
 packages/fluentui/README.md
-packages/fluentui/lerna.json
-packages/fluentui/package.json
+packages/fluentui/.browserslistrc
 
 **/dist/**
diff --git a/.storybook/docs-root.css b/.storybook/docs-root.css
@@ -181,6 +181,7 @@
 
 #docs-root a.sbdocs-a {
   color: #0078d4;
+  text-decoration: underline;
 }
 
 /*  */

diff --git a/.storybook/main.js b/.storybook/main.js
@@ -88,7 +88,7 @@ module.exports = /** @type {Omit<StorybookConfig,'typescript'|'babel'>} */ ({
 
     if ((process.env.CI || process.env.TF_BUILD || process.env.LAGE_PACKAGE_NAME) && config.plugins) {
       // Disable ProgressPlugin in PR/CI builds to reduce log verbosity (warnings and errors are still logged)
-      config.plugins = config.plugins.filter(({ constructor }) => constructor.name !== 'ProgressPlugin');
+      config.plugins = config.plugins.filter(value => value && value.constructor.name !== 'ProgressPlugin');
     }
 
     return config;

diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -41,12 +41,12 @@ export const parameters = {
     },
   },
   exportToSandbox: {
-    provider: 'codesandbox-browser',
-    bundler: 'cra',
+    provider: 'stackblitz-cloud',
+    bundler: 'vite',
     requiredDependencies: {
       // for React
-      react: '^17',
-      'react-dom': '^17',
+      react: '^18',
+      'react-dom': '^18',
       // necessary for FluentProvider:
       '@fluentui/react-components': '^9.0.0',
     },

diff --git a/.verdaccio/config.yml b/.verdaccio/config.yml
@@ -0,0 +1,37 @@
+# path to a directory with all packages
+storage: ../tmp/local-registry/storage
+
+# a list of other known repositories we can talk to
+uplinks:
+  npmjs:
+    url: https://registry.npmjs.org/
+    maxage: 60m
+
+packages:
+  # scoped packages
+  '@*/*':
+    access: $all
+    publish: $all
+    unpublish: $all
+
+    # if package is not available locally, proxy requests to npm registry
+    proxy: npmjs
+
+  '**':
+    # give all users (including non-authenticated users) full access
+    # because it is a local registry
+    access: $all
+    publish: $all
+    unpublish: $all
+
+    # if package is not available locally, proxy requests to npm registry
+    proxy: npmjs
+
+# log settings
+log:
+  type: stdout
+  format: pretty
+  level: warn
+
+publish:
+  allow_offline: true # set offline to true to allow publish offline
diff --git a/.vscode/extensions.json b/.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"
   ]
 }
diff --git a/CredScanSuppressions.json b/CredScanSuppressions.json
@@ -32,6 +32,10 @@
     {
       "file": "node_modules/rollup-plugin-filesize/node_modules/node-gyp/test/fixtures/server.key",
       "_justification": "External dependency rollup-plugin-filesize has dependency node-gyp with test certs, not shipping these files"
+    },
+    {
+      "file": "node_modules/node-gyp/test/fixtures/server.key",
+      "_justification": "External dependency node-gyp, not shipping these files"
     }
   ]
 }
diff --git a/apps/perf-test-react-components/package.json b/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",

diff --git a/apps/perf-test-react-components/src/scenarios/SwatchPicker.tsx b/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;
diff --git a/apps/public-docsite-v9/.storybook/main.js b/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],

diff --git a/apps/public-docsite-v9/.storybook/preview.js b/apps/public-docsite-v9/.storybook/preview.js
@@ -46,7 +46,20 @@ export const parameters = {
           ],
         ],
         'Theme',
+        [
+          'Border Radii',
+          'Colors',
+          'Fonts',
+          'Motion',
+          'Shadows',
+          'Spacing',
+          'Stroke Widths',
+          'Typography',
+          'Theme Designer',
+        ],
         'Components',
+        'Icons',
+        ['Overview', 'Catalog'],
       ],
     },
   },

diff --git a/apps/public-docsite-v9/package.json b/apps/public-docsite-v9/package.json
@@ -31,14 +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-rating-preview": "*",
-    "@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",

diff --git a/apps/public-docsite-v9/public/fluent-trainings-ep03.webp b/apps/public-docsite-v9/public/fluent-trainings-ep03.webp
diff --git a/apps/public-docsite-v9/public/social/fluent-trainings-ep03.webp b/apps/public-docsite-v9/public/social/fluent-trainings-ep03.webp
diff --git a/apps/public-docsite-v9/src/Concepts/AdvancedConfiguration.stories.mdx b/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,
 });
 ```
 

diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Avatar.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Avatar.stories.mdx
@@ -26,7 +26,7 @@ const Component = () => <Avatar />;
 | ------------------------- | -------------------------------------------------------------------------------------------------------- |
 | as, className             | keep it as is                                                                                            |
 | variables, design, styles | see Migrate style overrides in this document                                                             |
-| accessibility             | see [migrate-custom-accessibility.md](?path=/docs/concepts-migrating-from-v0-custom-accessibility--page) |
+| accessibility             | see [migrate-custom-accessibility.md](?path=/docs/concepts-migration-from-v0-custom-accessibility--page) |
 | key, ref                  | keep it as is                                                                                            |
 | getInitials               | use `initials` prop instead                                                                              |
 | icon                      | keep it as is                                                                                            |
@@ -41,7 +41,7 @@ const Component = () => <Avatar />;
 
 ## Migrate style overrides
 
-⚠️ **If this is your first migration**, please read [the general guide on how to migrate styles](?path=/docs/concepts-migrating-from-v0-custom-style-overrides--page).
+⚠️ **If this is your first migration**, please read [the general guide on how to migrate styles](?path=/docs/concepts-migration-from-v0-custom-style-overrides--page).
 
 ### Example for migrate boolean `variables`:
 

diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Box.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Box.stories.mdx
@@ -27,8 +27,8 @@ const Component = () => <Primitive />;
 | Box props                 | migrate guide                                                                                            |
 | ------------------------- | -------------------------------------------------------------------------------------------------------- |
 | as, className             | keep it as is                                                                                            |
-| content                   | see [Migrate content prop](#./Migrate-`content`-prop) in this document                                   |
-| variables, design, styles | see [Migrate style overrides](#./Migrate-style-overrides) in this document                               |
+| content                   | see [Migrate content prop](##migrate-content-prop) in this document                                      |
+| variables, design, styles | see [Migrate style overrides](#migrate-style-overrides) in this document                                 |
 | accessibility             | see [migrate-custom-accessibility.md](?path=/docs/concepts-migration-from-v0-custom-accessibility--page) |
 
 ---

diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Button.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Button.stories.mdx
@@ -29,7 +29,7 @@ const Component = () => <Button>Here is Button</Button>;
 | as, className     | keep it as is                                                                                            |
 | content           | see Migrate content prop in this document                                                                |
 | variables, styles | see Migrate style overrides in this document                                                             |
-| accessibility     | see [migrate-custom-accessibility.md](?path=/docs/concepts-migrating-from-v0-custom-accessibility--page) |
+| accessibility     | see [migrate-custom-accessibility.md](?path=/docs/concepts-migration-from-v0-custom-accessibility--page) |
 | circular          | replace with `shape="circular"`                                                                          |
 | disabled          | keep it as is                                                                                            |
 | disabledFocusable | keep it as is                                                                                            |
@@ -71,7 +71,7 @@ const Component = () => <Button>Button content</Button>;
 
 ## Migrate style overrides
 
-⚠️ **If this is your first migration**, please read [the general guide on how to migrate styles](?path=/docs/concepts-migrating-from-v0-custom-style-overrides--page).
+⚠️ **If this is your first migration**, please read [the general guide on how to migrate styles](?path=/docs/concepts-migration-from-v0-custom-style-overrides--page).
 
 ### Example for migrate boolean `variables`:
-Original file line number
+Diff line change
@@ Expand Up / @@ -181,6 +181,7 @@ @@
     #docs-root a.sbdocs-a {
       color: #0078d4;
+      text-decoration: underline;
     }
     /*  */
@@ Expand Down @@