Merge branch 'feat/drawer-base-component' into marcosmoura/feat/drawe…

…r-component * feat/drawer-base-component: (141 commits) remove DrawerContainer feat: WIP add initial draft for Drawer and DrawerContainer chore: migrate to jest 27 (microsoft#26835) chore: make lint task run without need of build (microsoft#26872) chore(react-table): exports UseTableSelectionOptions (microsoft#26892) applying package updates fix(react-card): allow elements to grow to fill the available space (microsoft#26616) fix: Popover without focus trap should not be aria-hidden (microsoft#26932) applying package updates applying package updates fix(react-combobox): Remove _getAriaActiveDescendantValue, compute aria-activedescendantvalue in state, and update currentPendingValue when the options change (microsoft#26574) fix: v8 Combobox role and accname for non-hidden icon button (microsoft#26905) fix: Removing possible recursive loop in Coachmark (microsoft#26934) Combobox: Fix cursor jumping to the end of input (microsoft#26931) Fix missing icons on website (microsoft#26797) fix: Fix the width of Input's focus border with appearance=underline (microsoft#26881) chore: Clean up Input's interactive styles (microsoft#26865) Remove codeowners from change files (microsoft#26935) chore: add splitbutton error warning to docs, remove button ariaDescription example (microsoft#26904) docs: Remove testing code from MenuList example (microsoft#26929) ...
marcosmoura · Mar 15, 2023 · 05a6c99 · 05a6c99
2 parents f12bf4a + c97b405
commit 05a6c99
Show file tree

Hide file tree

Showing 993 changed files with 36,569 additions and 6,165 deletions.
diff --git a/.devops/templates/cleanup.yml b/.devops/templates/cleanup.yml
@@ -12,7 +12,7 @@ steps:
   # In theory the "workspace: clean: all" setting should handle this, but it doesn't always seem to work.
   # ReallyClean is a custom task from our internal UI Fabric azure-devops-tasks repo which attempts to
   # delete the given directory with multiple retries.
-  - task: ReallyClean@0
-    inputs:
-      directory: $(Agent.BuildDirectory)
-    condition: always()
+  # - task: ReallyClean@0
+  #   inputs:
+  #     directory: $(Agent.BuildDirectory)
+  #   condition: always()
diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
@@ -15,11 +15,18 @@
 # users just like we do for commit author emails.
 # docs/  [email protected]
 
+##### Catch All Rule ######
+#### Later rules will override this, if you are hitting this rule often add a rule to a sub-folder
+* @microsoft/fluentui-admins
+
 ###### Build Section ######
 #### Repo-wide build files - Note these will only be applied if another rule below does not apply
 *.sh @microsoft/fluentui-react-build
 *.yml @microsoft/fluentui-react-build
 
+#### Change files (no owner)
+/change
+
 #### Build folders
 /.codesandbox @microsoft/fluentui-react-build
 /.devcontainer @microsoft/fluentui-react-build
@@ -209,7 +216,10 @@ packages/react-components/react-data-grid-react-window @microsoft/teams-prg
 packages/react-components/react-migration-v0-v9 @microsoft/teams-prg
 packages/react-components/react-datepicker @microsoft/cxe-red @sopranopillow @khmakoto
 packages/react-components/react-migration-v8-v9 @microsoft/cxe-red @microsoft/cxe-coastal @geoffcoxmsft
+packages/react-components/react-breadcrumb @microsoft/cxe-prg
 packages/react-components/react-drawer @microsoft/cxe-prg
+packages/react-components/react-storybook-addon-codesandbox @microsoft/fluentui-react-build
+packages/react-components/babel-preset-storybook-full-source @microsoft/fluentui-react-build
 # <%= NX-CODEOWNER-PLACEHOLDER %>
 
 ## Components

diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
@@ -24,4 +24,4 @@ PR flow tips:
 
 <!-- Please link the issue being fixed so it gets closed when this is merged. -->
 
-* Fixes #
+- Fixes #
diff --git a/.github/workflows/actions-mention-to-teams.yml b/.github/workflows/actions-mention-to-teams.yml
diff --git a/.github/workflows/pr-housekeeping.yml b/.github/workflows/pr-housekeeping.yml
@@ -18,7 +18,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Assign to latest milestone
-        uses: andrefcdias/add-to-milestone@v1.2.4
+        uses: andrefcdias/add-to-milestone@v1.3.0
         with:
           repo-token: '${{ secrets.GITHUB_TOKEN }}'
           use-expression: true

diff --git a/.prettierignore b/.prettierignore
@@ -17,6 +17,7 @@ lib-amd
 lib-esm
 lib-commonjs
 dist
+temp
 common/changes
 common/scripts
 coverage

diff --git a/.storybook/docs-root.css b/.storybook/docs-root.css
@@ -174,7 +174,7 @@
   }
 }
 
-/* Make storybook-addon-export-to-codesandbox button match Figma design */
+/* Make storybook codesandbox export button match Figma design */
 .docs-story .with-code-sandbox-button {
   right: 105px !important;
 }

diff --git a/.storybook/main.js b/.storybook/main.js
@@ -1,8 +1,7 @@
 const path = require('path');
 const fs = require('fs');
-const exportToCodesandboxAddon = require('storybook-addon-export-to-codesandbox');
 
-const { loadWorkspaceAddon, getCodesandboxBabelOptions, registerTsPaths } = require('@fluentui/scripts-storybook');
+const { loadWorkspaceAddon, registerTsPaths, registerRules, rules } = require('@fluentui/scripts-storybook');
 
 const tsConfigPath = path.resolve(__dirname, '../tsconfig.base.json');
 
@@ -20,14 +19,6 @@ const tsConfigPath = path.resolve(__dirname, '../tsconfig.base.json');
  * } StorybookConfig
  */
 
-/**
- * @typedef  {{loader: string; options: { [index: string]: any }}} LoaderObjectDef
- */
-
-/**
- * @typedef {import('@babel/core').TransformOptions & Partial<{customize: string | null}>} BabelLoaderOptions
- */
-
 const previewHeadTemplate = fs.readFileSync(path.resolve(__dirname, 'preview-head-template.html'), 'utf8');
 
 module.exports = /** @type {Omit<StorybookConfig,'typescript'|'babel'>} */ ({
@@ -37,6 +28,30 @@ module.exports = /** @type {Omit<StorybookConfig,'typescript'|'babel'>} */ ({
   },
   stories: [],
   addons: [
+    {
+      name: 'storybook-addon-swc',
+      options: /** @type {import('storybook-addon-swc').StoryBookAddonSwcOptions} */ ({
+        swcLoaderOptions: {
+          jsc: {
+            target: 'es2019',
+            parser: {
+              syntax: 'typescript',
+              tsx: true,
+              decorators: true,
+              dynamicImport: true,
+            },
+            transform: {
+              decoratorMetadata: true,
+              legacyDecorator: true,
+            },
+            keepClassNames: true,
+            externalHelpers: true,
+            loose: true,
+          },
+        },
+        swcMinifyOptions: { mangle: false },
+      }),
+    },
     '@storybook/addon-essentials',
     '@storybook/addon-a11y',
     '@storybook/addon-links',
@@ -45,42 +60,15 @@ module.exports = /** @type {Omit<StorybookConfig,'typescript'|'babel'>} */ ({
 
     // external custom addons
 
-    /**  @see https://github.com/microsoft/fluentui-storybook-addons */
-    'storybook-addon-export-to-codesandbox',
-
     // internal monorepo custom addons
 
     /**  @see ../packages/react-components/react-storybook-addon */
     loadWorkspaceAddon('@fluentui/react-storybook-addon', { tsConfigPath }),
+    loadWorkspaceAddon('@fluentui/react-storybook-addon-codesandbox', { tsConfigPath }),
   ],
   webpackFinal: config => {
-    registerTsPaths({ config, tsConfigPath });
-
-    if (config.module && config.module.rules) {
-      /**
-       * @type {import("webpack").RuleSetRule}
-       */
-      const codesandboxRule = {
-        /**
-         * why the usage of 'post' ? - we need to run this loader after all storybook webpack rules/loaders have been executed.
-         * while we can use Array.prototype.unshift to "override" the indexes this approach is more declarative without additional hacks.
-         */
-        enforce: 'post',
-        test: /\.stories\.tsx$/,
-        include: /stories/,
-        exclude: /node_modules/,
-        use: {
-          loader: 'babel-loader',
-          options: processBabelLoaderOptions({
-            plugins: [[exportToCodesandboxAddon.babelPlugin, getCodesandboxBabelOptions()]],
-          }),
-        },
-      };
-
-      config.module.rules.push(codesandboxRule);
-
-      overrideDefaultBabelLoader(/** @type {import("webpack").RuleSetRule[]} */ (config.module.rules));
-    }
+    registerTsPaths({ config, configFile: tsConfigPath });
+    registerRules({ config, rules: [rules.codesandboxRule] });
 
     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)
@@ -100,62 +88,3 @@ module.exports = /** @type {Omit<StorybookConfig,'typescript'|'babel'>} */ ({
    */
   previewHead: head => head + previewHeadTemplate,
 });
-
-/**
- * Adds custom config to any `babel-loader` usage. Needs to be used on all manually added rules with babel-loader to webpack configuration.
- *
- * Why is this needed:
- *  - `options.babelrc` is ignored by `babel-loader` thus we need to use `customize` api to exclude specific babel presets/plugins
- *
- * @param {BabelLoaderOptions} loaderConfig
- */
-function processBabelLoaderOptions(loaderConfig) {
-  const customLoaderPath = path.resolve(__dirname, './custom-loader.js');
-  const customOptions = { customize: customLoaderPath };
-  Object.assign(loaderConfig, customOptions);
-
-  return loaderConfig;
-}
-
-/**
- * Overrides storybooks babel-loader setup
- *
- * We might remove this once we'll came up with robust solution (or proper behaviors will be added to babel-loader). For more context @see https://github.com/microsoft/fluentui/issues/18775
- *
- * Note:
- * - this function mutates `rules` argument which is a reference to `modules.rules` webpack config property
- * - to print used babel-loader config run: `yarn start-storybook --no-manager-cache --debug-webpack` and look for
- * webpack rule set containing both:
- *  - `test: /\.(mjs|tsx?|jsx?)$/`
- *  - `node_modules/babel-loader/lib/index.js` as `loader` within module.rules
- *
- * @param {import("webpack").RuleSetRule[]} rules
- */
-function overrideDefaultBabelLoader(rules) {
-  const loader = getBabelLoader();
-  processBabelLoaderOptions(loader.options);
-
-  function getBabelLoader() {
-    const ruleIdx = rules.findIndex(rule => {
-      return String(/** @type {import("webpack").RuleSetRule}*/ (rule).test) === '/\\.(mjs|tsx?|jsx?)$/';
-    });
-
-    const rule = /** @type {import("webpack").RuleSetRule}*/ (rules[ruleIdx]);
-
-    if (!Array.isArray(rule.use)) {
-      throw new Error('storybook webpack rules changed');
-    }
-
-    const loaderIdx = rule.use.findIndex(loaderConfig => {
-      return /** @type {LoaderObjectDef} */ (loaderConfig).loader.includes('babel-loader');
-    });
-
-    const loader = /** @type {LoaderObjectDef}*/ (rule.use[loaderIdx]);
-
-    if (!Object.prototype.hasOwnProperty.call(loader, 'options')) {
-      throw new Error('storybook webpack #module.rules changed!');
-    }
-
-    return loader;
-  }
-}
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -37,7 +37,8 @@ export const parameters = {
       excludeDecorators: true,
       type: 'source',
     },
-    // This config reuses sources generated for CodeSandbox export feature (storybook-addon-export-to-codesandbox).
+    // This config reuses sources generated for CodeSandbox export feature
+    // (@fluentui/babel-preset-storybook-full-source).
     transformSource: (snippet, story) => story.parameters.fullSource,
   },
   exportToCodeSandbox: {

diff --git a/README.md b/README.md
@@ -35,8 +35,8 @@ The following table will help you navigate the 3 projects and understand their d
 | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
 | <a href="https://learn.microsoft.com/en-us/shows/fluent-ui-insights/fluent-ui-insights-positioning?utm_source=github" target="_blank"><img src="ghdocs/medias/fluentui-ep01-preview.gif" alt="Watch EP01: Positioning" width="240" /></a> | <a href="https://learn.microsoft.com/en-us/shows/fluent-ui-insights/fluent-ui-insights-styling?utm_source=github" target="_blank"><img src="ghdocs/medias/fluentui-ep02-preview.gif" alt="Watch EP02: Styling" width="240" /></a> | <a href="https://learn.microsoft.com/en-us/shows/fluent-ui-insights/fluent-ui-insights-griffel?utm_source=github" target="_blank"><img src="ghdocs/medias/fluentui-ep03-preview.gif" alt="Watch EP03: Griffel" width="240" /></a> |
 
-|                                                                              EP04: Foundational APIs                                                                               |
-| :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
+|                                                                                                                          EP04: Foundational APIs                                                                                                                           |
+| :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
 | <a href="https://learn.microsoft.com/en-us/shows/fluent-ui-insights/fluent-ui-insights-apis-in-v9-slots-jsx-children-triggers?utm_source=github" target="_blank"><img src="ghdocs/medias/fluentui-ep04-preview.gif" alt="Watch EP04: Foundational APIs" width="240" /></a> |
 
 ## Licenses

diff --git a/apps/perf-test-react-components/package.json b/apps/perf-test-react-components/package.json
@@ -18,12 +18,13 @@
   },
   "dependencies": {
     "@griffel/core": "^1.9.0",
-    "@fluentui/react-avatar": "^9.3.1",
-    "@fluentui/react-button": "^9.2.1",
-    "@fluentui/react-infobutton": "9.0.0-beta.11",
-    "@fluentui/react-persona": "^9.1.7",
-    "@fluentui/react-provider": "^9.3.1",
-    "@fluentui/react-spinbutton": "^9.1.1",
+    "@fluentui/react-avatar": "^9.3.7",
+    "@fluentui/react-button": "^9.2.5",
+    "@fluentui/react-field": "9.0.0-alpha.21",
+    "@fluentui/react-infobutton": "9.0.0-beta.17",
+    "@fluentui/react-persona": "^9.1.13",
+    "@fluentui/react-provider": "^9.3.5",
+    "@fluentui/react-spinbutton": "^9.1.7",
     "@fluentui/react-theme": "^9.1.5",
     "@microsoft/load-themed-styles": "^1.10.26",
     "flamegrill": "0.2.0",

diff --git a/apps/perf-test-react-components/src/scenarios/Field.tsx b/apps/perf-test-react-components/src/scenarios/Field.tsx
@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { Field } from '@fluentui/react-field';
+import { FluentProvider } from '@fluentui/react-provider';
+import { webLightTheme } from '@fluentui/react-theme';
+
+const Scenario = () => (
+  <Field label="Example Field" validationMessage="Example error message." hint="Example hint.">
+    <input />
+  </Field>
+);
+
+Scenario.decorator = (props: { children: React.ReactNode }) => (
+  <FluentProvider theme={webLightTheme}>{props.children}</FluentProvider>
+);
+
+export default Scenario;
diff --git a/apps/perf-test/package.json b/apps/perf-test/package.json
@@ -17,8 +17,8 @@
     "@fluentui/scripts-webpack": "*"
   },
   "dependencies": {
-    "@fluentui/example-data": "^8.4.5",
-    "@fluentui/react": "^8.105.1",
+    "@fluentui/example-data": "^8.4.6",
+    "@fluentui/react": "^8.106.1",
     "@microsoft/load-themed-styles": "^1.10.26",
     "flamegrill": "0.2.0",
     "lodash": "^4.17.15",

diff --git a/apps/public-docsite-resources/just.config.ts b/apps/public-docsite-resources/just.config.ts
@@ -6,5 +6,5 @@ preset();
 task('generate-json', () => generatePageJsonFiles(require('./config/api-docs')));
 
 // copied from scripts/just.config.js with addition of generate-json
-task('build', series('clean', 'copy', 'sass', 'generate-json', 'ts')).cached!();
+task('build', series('clean', 'copy', 'sass', 'generate-json', 'ts', 'lint-imports:all')).cached!();
 task('dev', series('copy', 'sass', 'generate-json', 'webpack-dev-server'));
diff --git a/apps/public-docsite-resources/package.json b/apps/public-docsite-resources/package.json
@@ -19,30 +19,30 @@
   "scripts": {
     "build": "just-scripts build",
     "bundle": "just-scripts bundle",
-    "lint": "just-scripts lint",
+    "lint": "eslint --ext .js,.ts,.tsx ./src",
     "just": "just-scripts",
     "clean": "just-scripts clean",
     "code-style": "just-scripts code-style",
     "start": "just-scripts dev",
     "update-snapshots": "just-scripts jest -u"
   },
   "devDependencies": {
-    "@fluentui/api-docs": "^8.2.5",
+    "@fluentui/api-docs": "^8.2.6",
     "@fluentui/eslint-plugin": "*",
     "@fluentui/scripts-monorepo": "*",
     "@fluentui/scripts-tasks": "*",
     "@fluentui/scripts-webpack": "*"
   },
   "dependencies": {
-    "@fluentui/react": "^8.105.1",
+    "@fluentui/react": "^8.106.1",
     "@fluentui/react-examples": "^8.34.4",
     "@microsoft/load-themed-styles": "^1.10.26",
-    "@fluentui/azure-themes": "^8.5.52",
-    "@fluentui/react-docsite-components": "^8.11.13",
-    "@fluentui/font-icons-mdl2": "^8.5.7",
-    "@fluentui/set-version": "^8.2.4",
-    "@fluentui/theme-samples": "^8.7.48",
-    "@fluentui/react-monaco-editor": "^1.7.48",
+    "@fluentui/azure-themes": "^8.5.64",
+    "@fluentui/react-docsite-components": "^8.11.25",
+    "@fluentui/font-icons-mdl2": "^8.5.9",
+    "@fluentui/set-version": "^8.2.5",
+    "@fluentui/theme-samples": "^8.7.60",
+    "@fluentui/react-monaco-editor": "^1.7.60",
     "office-ui-fabric-core": "^11.0.0",
     "react": "17.0.2",
     "react-dom": "17.0.2",
Original file line number	Diff line number	Diff line change
Expand Up		@@ -24,4 +24,4 @@ PR flow tips:

		<!-- Please link the issue being fixed so it gets closed when this is merged. -->

		* Fixes #
		- Fixes #