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

* master: (23 commits) fix(docsite-v9): move theme picker under component title so it can be visible on embedded pages (microsoft#25385) applying package updates feat: Implement child render function for DataGrid rows (microsoft#25476) fix(useTable): sort should adapt to enhanced row types (microsoft#25487) applying package updates feat: positioning should happen out of React lifecycle (microsoft#25456) applying package updates chore(react-link): migrate to new package structure (microsoft#25471) chore(react-input): migrate to new package structure (microsoft#25469) fix glob pattern for syncpack (microsoft#25465) chore(react-label): migrate to new package structure (microsoft#25470) chore: bump Griffel to latest (microsoft#25412) chore: add few small toolbar improvements (microsoft#25468) docs: fix small typos (microsoft#25464) chore: fix dependencies in @fluentui/react-toolbar (microsoft#25466) feat: v0 menu style migration from v9 (microsoft#25012) applying package updates Update List to render children on first render() call (microsoft#25331) Scaffold react-skeleton package (microsoft#25435) fix(public-docsite): Changing crossplatform urls to use 'cross' instead of 'crossplatform' (microsoft#25437) ...
marcosmoura · Nov 2, 2022 · 27dfa3c · 27dfa3c
2 parents 13a51c1 + cd78876
commit 27dfa3c
Show file tree

Hide file tree

Showing 408 changed files with 6,166 additions and 1,079 deletions.
diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
@@ -177,6 +177,7 @@ packages/react-components/react-avatar-context @microsoft/teams-prg
 packages/react-components/react-infobutton @microsoft/cxe-red @sopranopillow
 packages/react-migration-v8-v9 @microsoft/cxe-coastal @geoffcoxmsft
 packages/react-components/react-tree @microsoft/teams-prg
+packages/react-components/react-skeleton @microsoft/cxe-red
 # <%= NX-CODEOWNER-PLACEHOLDER %>
 
 

diff --git a/apps/perf-test-react-components/package.json b/apps/perf-test-react-components/package.json
@@ -15,11 +15,11 @@
  "@fluentui/eslint-plugin": "*"
  },
  "dependencies": {
- "@griffel/core": "^1.8.0",
- "@fluentui/react-avatar": "^9.2.4",
- "@fluentui/react-button": "^9.1.6",
- "@fluentui/react-provider": "^9.1.5",
- "@fluentui/react-spinbutton": "^9.0.6",
+ "@griffel/core": "^1.8.1",
+ "@fluentui/react-avatar": "^9.2.5",
+ "@fluentui/react-button": "^9.1.7",
+ "@fluentui/react-provider": "^9.1.6",
+ "@fluentui/react-spinbutton": "^9.0.7",
  "@fluentui/react-theme": "^9.1.1",
  "@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.99.1",
+ "@fluentui/react": "^8.99.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.99.1",
+ "@fluentui/react": "^8.99.2",
  "@fluentui/react-examples": "^8.34.4",
  "@microsoft/load-themed-styles": "^1.10.26",
- "@fluentui/azure-themes": "^8.5.19",
- "@fluentui/react-docsite-components": "^8.10.19",
+ "@fluentui/azure-themes": "^8.5.20",
+ "@fluentui/react-docsite-components": "^8.10.20",
  "@fluentui/font-icons-mdl2": "^8.5.2",
  "@fluentui/set-version": "^8.2.2",
- "@fluentui/theme-samples": "^8.7.19",
- "@fluentui/react-monaco-editor": "^1.7.19",
+ "@fluentui/theme-samples": "^8.7.20",
+ "@fluentui/react-monaco-editor": "^1.7.20",
  "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,15 +21,15 @@
  "@fluentui/scripts": "^1.0.0"
  },
  "dependencies": {
- "@fluentui/react": "^8.99.1",
+ "@fluentui/react": "^8.99.2",
  "@fluentui/react-northstar": "^0.64.0",
  "@fluentui/react-icons-northstar": "^0.64.0",
  "@fluentui/scripts": "^1.0.0",
  "@fluentui/storybook": "^1.0.0",
- "@fluentui/react-components": "^9.6.1",
+ "@fluentui/react-components": "^9.6.3",
  "@fluentui/react-storybook-addon": "^9.0.0-rc.1",
  "@fluentui/react-theme": "^9.1.1",
- "@griffel/react": "^1.4.1",
+ "@griffel/react": "^1.4.2",
  "react": "17.0.2",
  "react-dom": "17.0.2",
  "react-window": "^1.8.6",

diff --git a/apps/public-docsite-v9/src/DocsComponents/FluentDocsContainer.stories.tsx b/apps/public-docsite-v9/src/DocsComponents/FluentDocsContainer.stories.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { DocsContainer, DocsContextProps } from '@storybook/addon-docs';
-import { FluentStoryContext, THEME_ID, themes } from '@fluentui/react-storybook-addon';
-import { FluentDocsHeader } from './FluentDocsHeader.stories';
+import { FluentStoryContext } from '@fluentui/react-storybook-addon';
 import { webLightTheme, FluentProvider } from '@fluentui/react-components';
 
 interface IFluentDocsContainerProps {
@@ -12,17 +11,8 @@ interface IFluentDocsContainerProps {
  * A container that wraps storybook's native docs container to add extra components to the docs experience
  */
 export const FluentDocsContainer: React.FC<IFluentDocsContainerProps> = ({ children, context }) => {
- // eslint-disable-next-line deprecation/deprecation
- const selectedTheme = themes.find(theme => theme.id === context.globals[THEME_ID]);
  return (
  <>
- <FluentProvider style={{ backgroundColor: 'transparent' }} theme={selectedTheme?.theme ?? webLightTheme}>
- <FluentDocsHeader
- // eslint-disable-next-line deprecation/deprecation
- storybookGlobals={context.globals}
- />
- </FluentProvider>
-
  {/** TODO add table of contents */}
  <FluentProvider style={{ backgroundColor: 'transparent' }} theme={webLightTheme}>
  <DocsContainer context={context}>{children}</DocsContainer>

diff --git a/apps/public-docsite-v9/src/DocsComponents/FluentDocsHeader.stories.tsx b/apps/public-docsite-v9/src/DocsComponents/FluentDocsHeader.stories.tsx
diff --git a/apps/public-docsite-v9/src/DocsComponents/FluentDocsPage.stories.tsx b/apps/public-docsite-v9/src/DocsComponents/FluentDocsPage.stories.tsx
@@ -12,6 +12,8 @@ import {
 } from '@storybook/addon-docs';
 import { makeStyles, shorthands } from '@griffel/react';
 import { Toc, nameToHash } from './Toc.stories';
+import { THEME_ID, themes } from '@fluentui/react-storybook-addon';
+import { ThemePicker } from './ThemePicker.stories';
 
 const useStyles = makeStyles({
  divider: {
@@ -40,6 +42,8 @@ const useStyles = makeStyles({
 
 export const FluentDocsPage = () => {
  const context = React.useContext(DocsContext);
+ // eslint-disable-next-line deprecation/deprecation
+ const selectedTheme = themes.find(theme => theme.id === context.globals![THEME_ID]);
  const stories = context.componentStories();
  const primaryStory = stories[0];
  const styles = useStyles();
@@ -61,6 +65,7 @@ export const FluentDocsPage = () => {
 
  <div className={styles.wrapper}>
  <div className={styles.container}>
+ <ThemePicker selectedThemeId={selectedTheme?.id} />
  <Subtitle />
  <Description />
  <hr className={styles.divider} />

diff --git a/apps/public-docsite/package.json b/apps/public-docsite/package.json
@@ -25,24 +25,24 @@
  "devDependencies": {
  "@fluentui/common-styles": "^1.2.11",
  "@fluentui/eslint-plugin": "*",
- "@fluentui/react-monaco-editor": "^1.7.19",
+ "@fluentui/react-monaco-editor": "^1.7.20",
  "@fluentui/scripts": "^1.0.0",
  "write-file-webpack-plugin": "^4.1.0"
  },
  "dependencies": {
  "@fluentui/font-icons-mdl2": "^8.5.2",
  "@fluentui/public-docsite-resources": "^8.1.41",
  "@fluentui/public-docsite-setup": "^0.3.12",
- "@fluentui/react": "^8.99.1",
- "@fluentui/react-docsite-components": "^8.10.19",
+ "@fluentui/react": "^8.99.2",
+ "@fluentui/react-docsite-components": "^8.10.20",
  "@fluentui/react-examples": "^8.34.4",
- "@fluentui/react-experiments": "^8.14.14",
+ "@fluentui/react-experiments": "^8.14.15",
  "@fluentui/react-file-type-icons": "^8.8.0",
  "@fluentui/react-icons-mdl2": "^1.3.25",
  "@fluentui/react-icons-mdl2-branded": "^1.2.26",
  "@fluentui/set-version": "^8.2.2",
  "@fluentui/theme": "^2.6.17",
- "@fluentui/theme-samples": "^8.7.19",
+ "@fluentui/theme-samples": "^8.7.20",
  "@fluentui/utilities": "^8.13.2",
  "@microsoft/load-themed-styles": "^1.10.26",
  "office-ui-fabric-core": "^11.0.0",

diff --git a/apps/public-docsite/src/SiteDefinition/SiteDefinition.pages/Controls/cross.tsx b/apps/public-docsite/src/SiteDefinition/SiteDefinition.pages/Controls/cross.tsx
@@ -4,7 +4,7 @@ import { INavPage, LoadingComponent } from '@fluentui/react-docsite-components/l
 export const controlsPagesCrossPlatform: INavPage[] = [
  {
  title: 'Controls',
- url: '#/controls/crossplatform',
+ url: '#/controls/cross',
  isHiddenFromMainNav: true,
  component: () => <LoadingComponent title="Controls" />,
  getComponent: cb =>
@@ -18,14 +18,14 @@ export const controlsPagesCrossPlatform: INavPage[] = [
  pages: [
  {
  title: 'Button',
- url: '#/controls/crossplatform/button',
+ url: '#/controls/cross/button',
  component: () => <LoadingComponent title="Button" />,
  getComponent: cb =>
  require.ensure([], require => cb(require<any>('../../../pages/Controls/ButtonPage/ButtonPage').ButtonPage)),
  },
  {
  title: 'Link',
- url: '#/controls/crossplatform/link',
+ url: '#/controls/cross/link',
  component: () => <LoadingComponent title="Link" />,
  getComponent: cb =>
  require.ensure([], require => cb(require<any>('../../../pages/Controls/LinkPage/LinkPage').LinkPage)),
@@ -38,7 +38,7 @@ export const controlsPagesCrossPlatform: INavPage[] = [
  pages: [
  {
  title: 'Persona',
- url: '#/controls/crossplatform/persona',
+ url: '#/controls/cross/persona',
  component: () => <LoadingComponent title="Persona" />,
  getComponent: cb =>
  require.ensure([], require =>
@@ -53,14 +53,14 @@ export const controlsPagesCrossPlatform: INavPage[] = [
  pages: [
  {
  title: 'Text',
- url: '#/controls/crossplatform/text',
+ url: '#/controls/cross/text',
  component: () => <LoadingComponent title="Text" />,
  getComponent: cb =>
  require.ensure([], require => cb(require<any>('../../../pages/Controls/TextPage/TextPage').TextPage)),
  },
  {
  title: 'Separator',
- url: '#/controls/crossplatform/separator',
+ url: '#/controls/cross/separator',
  component: () => <LoadingComponent title="Separator" />,
  getComponent: cb =>
  require.ensure([], require =>

diff --git a/apps/public-docsite/src/SiteDefinition/SiteDefinition.pages/GetStarted/GetStarted.pages.tsx b/apps/public-docsite/src/SiteDefinition/SiteDefinition.pages/GetStarted/GetStarted.pages.tsx
@@ -87,7 +87,7 @@ export const GetStartedPages: INavPage = {
  cross: [
  {
  title: 'Get started',
- url: '#/get-started/crossplatform',
+ url: '#/get-started/cross',
  isHiddenFromMainNav: true,
  component: () => <LoadingComponent title="Get started" />,
  getComponent: cb =>

diff --git a/apps/public-docsite/src/pages/Controls/ButtonPage/docs/cross/ButtonOverview.md b/apps/public-docsite/src/pages/Controls/ButtonPage/docs/cross/ButtonOverview.md
@@ -1,5 +1,5 @@
 Buttons are best used to enable a user to commit a change or complete steps in a task. They are typically found inside forms, dialogs, panels or pages. An example of their usage is confirming the deletion of a file in a confirmation dialog.
 
-When considering their place in a layout, contemplate the order in which a user will flow through the UI. As an example, in a form, the individual will need to read and interact with the form fields before submiting the form. Therefore, as a general rule, the button should be placed at the bottom of the UI container (a dialog, panel, or page) which holds the related UI elements.
+When considering their place in a layout, contemplate the order in which a user will flow through the UI. As an example, in a form, the individual will need to read and interact with the form fields before submitting the form. Therefore, as a general rule, the button should be placed at the bottom of the UI container (a dialog, panel, or page) which holds the related UI elements.
 
 While buttons can technically be used to navigate a user to another part of the experience, this is not recommended unless that navigation is part of an action or their flow.
diff --git a/apps/public-docsite/src/pages/Controls/ButtonPage/docs/windows/ButtonOverview.md b/apps/public-docsite/src/pages/Controls/ButtonPage/docs/windows/ButtonOverview.md
@@ -1,5 +1,5 @@
 Buttons are best used to enable a user to commit a change or complete steps in a task. They are typically found inside forms, dialogs, panels or pages. An example of their usage is confirming the deletion of a file in a confirmation dialog.
 
-When considering their place in a layout, contemplate the order in which a user will flow through the UI. As an example, in a form, the individual will need to read and interact with the form fields before submiting the form. Therefore, as a general rule, the button should be placed at the bottom of the UI container (a dialog, panel, or page) which holds the related UI elements.
+When considering their place in a layout, contemplate the order in which a user will flow through the UI. As an example, in a form, the individual will need to read and interact with the form fields before submitting the form. Therefore, as a general rule, the button should be placed at the bottom of the UI container (a dialog, panel, or page) which holds the related UI elements.
 
 While buttons can technically be used to navigate a user to another part of the experience, this is not recommended unless that navigation is part of an action or their flow.
diff --git a/apps/public-docsite/src/pages/Controls/DrawerPage/docs/ios/DrawerOverview.md b/apps/public-docsite/src/pages/Controls/DrawerPage/docs/ios/DrawerOverview.md
@@ -1,7 +1,7 @@
 Drawers let you reveal lightweight views inside your application without being a full-screen view that takes over the navigation hierarchy. They are easy to dismiss & resize, and may leave space on-screen that shows the content behind them.
 
 <DisplayToggle onText="Dark" offText="Light" label="Theme Switcher">
-### Veritcal
+### Vertical
 
 <img className="off" src="https://static2.sharepointonline.com/files/fabric/fabric-website/images/controls/ios/updated/img_drawer_03_floatingsheet_light.png?text=LightMode" />
 <img className="on" src="https://static2.sharepointonline.com/files/fabric/fabric-website/images/controls/ios/updated/img_drawer_03_floatingsheet_dark.png?text=DarkMode" />

diff --git a/apps/public-docsite/src/pages/Controls/PersonaPage/PersonaPage.doc.ts b/apps/public-docsite/src/pages/Controls/PersonaPage/PersonaPage.doc.ts
@@ -7,7 +7,7 @@ const related: ISideRailLink[] = [
  { text: 'iOS Persona', url: '#/controls/ios/persona' },
  { text: 'Android Persona', url: '#/controls/android/persona' },
  { text: 'macOS Avatar', url: '#/controls/mac/avatar' },
- { text: 'Cross-platform Persona', url: '#/controls/crossplatform/persona' },
+ { text: 'Cross-platform Persona', url: '#/controls/cross/persona' },
 ];
 const componentUrl =
  'https://github.com/microsoft/fluentui/tree/master/apps/public-docsite/src/pages/Controls/PersonaPage';

diff --git a/apps/public-docsite/src/pages/Controls/SeparatorPage/SeparatorPage.doc.ts b/apps/public-docsite/src/pages/Controls/SeparatorPage/SeparatorPage.doc.ts
@@ -8,7 +8,7 @@ const related: ISideRailLink[] = [
  { text: 'Android Separator', url: '#/controls/android/separator' },
  { text: 'Android ListItemDivider', url: '#/controls/android/listcells' },
  { text: 'macOS Separator', url: '#/controls/mac/separator' },
- { text: 'Cross-platform Separator', url: '#/controls/crossplatform/separator' },
+ { text: 'Cross-platform Separator', url: '#/controls/cross/separator' },
 ];
 const componentUrl =
  'https://github.com/microsoft/fluentui/tree/master/apps/public-docsite/src/pages/Controls/SeparatorPage';

diff --git a/apps/public-docsite/src/pages/Controls/TextPage/TextPage.doc.ts b/apps/public-docsite/src/pages/Controls/TextPage/TextPage.doc.ts
@@ -6,7 +6,7 @@ const related: ISideRailLink[] = [
  { text: 'Web Text', url: '#/controls/web/text' },
  { text: 'iOS Text', url: '#/controls/ios/text' },
  { text: 'Android Text', url: '#/controls/android/text' },
- { text: 'Cross-platform Text', url: '#/controls/crossplatform/text' },
+ { text: 'Cross-platform Text', url: '#/controls/cross/text' },
 ];
 const componentUrl =
  'https://github.com/microsoft/fluentui/tree/master/apps/public-docsite/src/pages/Controls/TextPage';

diff --git a/apps/public-docsite/src/pages/HomePage/HomePage.base.tsx b/apps/public-docsite/src/pages/HomePage/HomePage.base.tsx
@@ -315,10 +315,10 @@ export class HomePageBase extends React.Component<IHomePageProps, IHomePageState
  </TitleStack>
  <ul className={classNames.cardList}>
  <li className={classNames.cardListItem}>
- {this._renderLink('#/controls/crossplatform', 'Controls', { ariaLabel: 'Controls: Cross-platform' })}
+ {this._renderLink('#/controls/cross', 'Controls', { ariaLabel: 'Controls: Cross-platform' })}
  </li>
  <li className={classNames.cardListItem}>
- {this._renderLink('#/get-started/crossplatform', 'Get started', {
+ {this._renderLink('#/get-started/cross', 'Get started', {
  ariaLabel: 'Get started: Cross-platform',
  })}
  </li>

diff --git a/apps/react-18-tests-v8/package.json b/apps/react-18-tests-v8/package.json
@@ -23,7 +23,7 @@
  "swc-loader": "^0.2.3"
  },
  "dependencies": {
- "@fluentui/react": "^8.99.1",
+ "@fluentui/react": "^8.99.2",
  "@fluentui/react-hooks": "^8.6.12",
  "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.6",
- "@fluentui/react-provider": "^9.1.5",
+ "@fluentui/react-button": "^9.1.7",
+ "@fluentui/react-provider": "^9.1.6",
  "@fluentui/react-theme": "^9.1.1",
  "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.6.1"
+ "@fluentui/react-components": "^9.6.3"
  },
  "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.99.1",
+ "@fluentui/react": "^8.99.2",
  "@microsoft/load-themed-styles": "^1.10.26",
  "@types/mocha": "^7.0.2",
  "@fluentui/scripts": "^1.0.0",

diff --git a/apps/ssr-tests/test/test.js b/apps/ssr-tests/test/test.js
@@ -46,6 +46,12 @@ describe('Utilities', () => {
  assert.equal(library.getDocument(), undefined);
  });
  });
+
+ describe('canUseDOM', () => {
+ it('returns false in server environment', () => {
+ assert.equal(library.canUseDOM(), false);
+ });
+ });
 });
 
 function testRender(componentName, component) {
@@ -56,7 +62,7 @@ function testRender(componentName, component) {
  ReactDOMServer.renderToString(elem);
  done();
  } catch (e) {
- done(new Error(e));
+ done(e);
  }
  });
 }
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.99.1",
- "@fluentui/react-components": "^9.6.1",
+ "@fluentui/react": "^8.99.2",
+ "@fluentui/react-components": "^9.6.3",
  "@fluentui/react-icons": "^2.0.175",
  "@fluentui/web-components": "^2.5.8",
  "@microsoft/fast-element": "^1.10.4",

diff --git a/apps/theming-designer/package.json b/apps/theming-designer/package.json
@@ -18,9 +18,9 @@
  "@fluentui/scripts": "^1.0.0"
  },
  "dependencies": {
- "@fluentui/react": "^8.99.1",
+ "@fluentui/react": "^8.99.2",
  "@fluentui/merge-styles": "^8.5.3",
- "@fluentui/react-docsite-components": "^8.10.19",
+ "@fluentui/react-docsite-components": "^8.10.20",
  "@fluentui/foundation-legacy": "^8.2.22",
  "@fluentui/scheme-utilities": "^8.3.18",
  "@fluentui/set-version": "^8.2.2",