Merge branch 'master' into marcosmoura/docs/v0-migration-guide

* master: (29 commits) applying package updates fix: web component menu layering bug (microsoft#26260) Azure Theme: reduced spin button height to match TextField / DropDowns at 24px height (microsoft#26265) Update styling for contentBefore and contentAfter input slots (microsoft#26115) chore: Update Switch to use griffel reset styles (microsoft#26007) Fix: Allow root slot refs to merge with focus refs in Slider (microsoft#26243) applying package updates revert: MenuItem root slot only supports div (microsoft#26261) perf: Don't render Checkbox icon when unchecked (microsoft#26248) fix: Select disabled state hover style, Combobox disabled state open on chevron click (microsoft#26068) applying package updates chore: add more temporary codeowner rools for tooling config files (microsoft#26255) fix: stops using ARIAButton types for MenuItem root (microsoft#26257) refactor: Cleanup unused code (microsoft#26219) fix: MenuList props should win over context props (microsoft#26252) feat(react-tree): Actions positioning and behaviour (microsoft#26113) BREAKING(TableCellLayout): `wrapper` slot renamed to `content` (microsoft#26220) fix(scripts): make lint errors reporting propagate to STDOUT during pre-commit (lint-staged exec) (microsoft#26212) fix: Minimum visible overflow items should be respected (microsoft#26194) docs: Fix typos in react-table docs (microsoft#26213) ...
marcosmoura · Jan 10, 2023 · 9fc16e0 · 9fc16e0
2 parents 1448175 + 3748ba0
commit 9fc16e0
Show file tree

Hide file tree

Showing 410 changed files with 5,596 additions and 1,338 deletions.
diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
@@ -249,3 +249,6 @@ packages/react-experiments/src/components/TileList @ThomasMichon
 **/tsconfig.lib.json @microsoft/fluentui-react-build
 **/tsconfig.spec.json @microsoft/fluentui-react-build
 **/package.json @microsoft/fluentui-react-build
+**/cypress.config.ts @microsoft/fluentui-react-build
+**/api-extractor.json @microsoft/fluentui-react-build
+**/api-extractor.unstable.json @microsoft/fluentui-react-build
diff --git a/.storybook/docs-root.css b/.storybook/docs-root.css
@@ -62,6 +62,11 @@
   padding: 48px 0 0 0;
 }
 
+#docs-root .sbdocs-h2 code {
+  border-radius: 4px;
+  font-size: 20px;
+}
+
 #docs-root .sbdocs-h3 {
   font-family: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue',
     sans-serif;
@@ -72,6 +77,11 @@
   color: #000000;
 }
 
+#docs-root .sbdocs-h3 code {
+  border-radius: 3px;
+  font-size: 16px;
+}
+
 /* Only apply to H3s inside of stories which have a parent with an ID */
 #docs-root [id] > .sbdocs-h3:before {
   content: '';
@@ -285,7 +295,7 @@
 #docs-root .docblock-argstable-body > tr > td:nth-child(2) > div:nth-child(2) span,
 #docs-root .docblock-argstable-body > tr > td:nth-child(2) > div:nth-child(1) > div > span,
 #docs-root .css-16d4d7t {
-  font-family: Menlo, monospace;
+  font-family: 'Cascadia Code', Menlo, 'Courier New', Courier, monospace;
   font-style: normal;
   font-weight: normal;
   font-size: 14px;
@@ -318,7 +328,10 @@
 }
 
 #docs-root code {
-  margin: 1px 0 1px 0;
+  padding: 0.1em 0.2em;
+  display: inline-block;
+  background-color: rgba(17, 16, 15, 0.1);
+  border-radius: 2px;
 }
 
 .os-content-glue {

diff --git a/apps/perf-test-react-components/package.json b/apps/perf-test-react-components/package.json
@@ -17,11 +17,11 @@
   },
   "dependencies": {
     "@griffel/core": "^1.9.0",
-    "@fluentui/react-avatar": "^9.2.11",
-    "@fluentui/react-button": "^9.1.13",
-    "@fluentui/react-persona": "^9.1.0",
-    "@fluentui/react-provider": "^9.2.0",
-    "@fluentui/react-spinbutton": "^9.0.13",
+    "@fluentui/react-avatar": "^9.2.12",
+    "@fluentui/react-button": "^9.1.14",
+    "@fluentui/react-persona": "^9.1.1",
+    "@fluentui/react-provider": "^9.2.1",
+    "@fluentui/react-spinbutton": "^9.0.14",
     "@fluentui/react-theme": "^9.1.5",
     "@microsoft/load-themed-styles": "^1.10.26",
     "flamegrill": "0.2.0",

diff --git a/apps/perf-test/package.json b/apps/perf-test/package.json
@@ -16,8 +16,8 @@
     "@fluentui/scripts": "*"
   },
   "dependencies": {
-    "@fluentui/example-data": "^8.4.4",
-    "@fluentui/react": "^8.104.2",
+    "@fluentui/example-data": "^8.4.5",
+    "@fluentui/react": "^8.104.4",
     "@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
@@ -27,20 +27,20 @@
     "update-snapshots": "just-scripts jest -u"
   },
   "devDependencies": {
-    "@fluentui/api-docs": "^8.2.4",
+    "@fluentui/api-docs": "^8.2.5",
     "@fluentui/eslint-plugin": "*",
     "@fluentui/scripts": "*"
   },
   "dependencies": {
-    "@fluentui/react": "^8.104.2",
+    "@fluentui/react": "^8.104.4",
     "@fluentui/react-examples": "^8.34.4",
     "@microsoft/load-themed-styles": "^1.10.26",
-    "@fluentui/azure-themes": "^8.5.42",
-    "@fluentui/react-docsite-components": "^8.11.5",
-    "@fluentui/font-icons-mdl2": "^8.5.5",
-    "@fluentui/set-version": "^8.2.3",
-    "@fluentui/theme-samples": "^8.7.40",
-    "@fluentui/react-monaco-editor": "^1.7.40",
+    "@fluentui/azure-themes": "^8.5.44",
+    "@fluentui/react-docsite-components": "^8.11.7",
+    "@fluentui/font-icons-mdl2": "^8.5.6",
+    "@fluentui/set-version": "^8.2.4",
+    "@fluentui/theme-samples": "^8.7.42",
+    "@fluentui/react-monaco-editor": "^1.7.42",
     "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,11 +21,11 @@
     "@fluentui/scripts": "*"
   },
   "dependencies": {
-    "@fluentui/react": "^8.104.2",
+    "@fluentui/react": "^8.104.4",
     "@fluentui/react-northstar": "^0.65.0",
     "@fluentui/react-icons-northstar": "^0.65.0",
     "@fluentui/storybook": "^1.0.0",
-    "@fluentui/react-components": "^9.8.0",
+    "@fluentui/react-components": "^9.9.1",
     "@fluentui/react-storybook-addon": "9.0.0-rc.1",
     "@fluentui/react-theme": "^9.1.5",
     "@griffel/react": "^1.5.2",

diff --git a/apps/public-docsite/package.json b/apps/public-docsite/package.json
@@ -23,28 +23,28 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@fluentui/common-styles": "^1.2.14",
+    "@fluentui/common-styles": "^1.2.15",
     "@fluentui/eslint-plugin": "*",
-    "@fluentui/react-monaco-editor": "^1.7.40",
+    "@fluentui/react-monaco-editor": "^1.7.42",
     "@fluentui/scripts": "*",
     "write-file-webpack-plugin": "^4.1.0"
   },
   "dependencies": {
-    "@fluentui/font-icons-mdl2": "^8.5.5",
+    "@fluentui/font-icons-mdl2": "^8.5.6",
     "@fluentui/public-docsite-resources": "^8.1.41",
-    "@fluentui/public-docsite-setup": "^0.3.14",
-    "@fluentui/react": "^8.104.2",
-    "@fluentui/react-docsite-components": "^8.11.5",
+    "@fluentui/public-docsite-setup": "^0.3.15",
+    "@fluentui/react": "^8.104.4",
+    "@fluentui/react-docsite-components": "^8.11.7",
     "@fluentui/react-examples": "^8.34.4",
-    "@fluentui/react-experiments": "^8.14.35",
-    "@fluentui/fluent2-theme": "^8.104.5",
-    "@fluentui/react-file-type-icons": "^8.8.4",
-    "@fluentui/react-icons-mdl2": "^1.3.28",
-    "@fluentui/react-icons-mdl2-branded": "^1.2.29",
-    "@fluentui/set-version": "^8.2.3",
-    "@fluentui/theme": "^2.6.20",
-    "@fluentui/theme-samples": "^8.7.40",
-    "@fluentui/utilities": "^8.13.4",
+    "@fluentui/react-experiments": "^8.14.37",
+    "@fluentui/fluent2-theme": "^8.104.7",
+    "@fluentui/react-file-type-icons": "^8.8.5",
+    "@fluentui/react-icons-mdl2": "^1.3.29",
+    "@fluentui/react-icons-mdl2-branded": "^1.2.30",
+    "@fluentui/set-version": "^8.2.4",
+    "@fluentui/theme": "^2.6.21",
+    "@fluentui/theme-samples": "^8.7.42",
+    "@fluentui/utilities": "^8.13.5",
     "@microsoft/load-themed-styles": "^1.10.26",
     "office-ui-fabric-core": "^11.0.0",
     "react": "17.0.2",

diff --git a/apps/public-docsite/src/SiteDefinition/SiteDefinition.pages/Styles/web.tsx b/apps/public-docsite/src/SiteDefinition/SiteDefinition.pages/Styles/web.tsx
@@ -122,12 +122,12 @@ export const stylesPagesWeb: INavPage[] = [
       //   getComponent: cb => require.ensure([], require => cb(require<any>('../../../pages/Styles/IconsPage/IconsPage').IconsPage))
       // },
       {
-        title: 'Office Brand Icons',
-        url: '#/styles/web/office-brand-icons',
-        component: () => <LoadingComponent title="Office Brand Icons" />,
+        title: 'M365 Product Icons',
+        url: '#/styles/web/m365-product-icons',
+        component: () => <LoadingComponent title="M365 Product Icons" />,
         getComponent: cb =>
           require.ensure([], require =>
-            cb(require<any>('../../../pages/Styles/OfficeBrandIconsPage/OfficeBrandIconsPage').OfficeBrandIconsPage),
+            cb(require<any>('../../../pages/Styles/M365ProductIconsPage/M365ProductIconsPage').M365ProductIconsPage),
           ),
       },
       {

diff --git a/apps/public-docsite/src/SiteDefinition/SiteDefinition.tsx b/apps/public-docsite/src/SiteDefinition/SiteDefinition.tsx
@@ -49,7 +49,8 @@ export const SiteDefinition: ISiteDefinition<Platforms> = {
     { from: '#/examples/announced/', to: '#/controls/web/announced/' },
     { from: /#\/components/, to: '#/controls/web' },
     { from: '#/styles/animation', to: '#/styles/web/motion' },
-    { from: '#/styles/brand-icons', to: '#/styles/web/office-brand-icons' },
+    { from: '#/styles/brand-icons', to: '#/styles/web/m365-product-icons' },
+    { from: '#/styles/web/office-brand-icons', to: '#/styles/web/m365-product-icons' },
     { from: '#/styles/colors', to: '#/styles/web/colors/theme-slots' },
     { from: '#/styles/icons', to: '#/styles/web/icons' },
     { from: '#/styles/layout', to: '#/styles/web/layout' },

diff --git a/apps/public-docsite/src/data/brand-icons-monochrome.json b/apps/public-docsite/src/data/brand-icons-monochrome.json
diff --git a/...csite/src/data/brand-icons-documents.json → ...ite/src/data/product-icons-documents.json b/...csite/src/data/brand-icons-documents.json → ...ite/src/data/product-icons-documents.json
diff --git a/...ocsite/src/data/brand-icons-products.json → ...ublic-docsite/src/data/product-icons.json b/...ocsite/src/data/brand-icons-products.json → ...ublic-docsite/src/data/product-icons.json
@@ -7,7 +7,7 @@
   { "icon": "onenote", "name": "OneNote" },
   { "icon": "sharepoint", "name": "SharePoint" },
   { "icon": "teams", "name": "Microsoft Teams" },
-  { "icon": "office", "name": "Office" },
+  { "icon": "m365", "name": "Microsoft 365" },
   { "icon": "access", "name": "Access" },
   { "icon": "delve", "name": "Delve" },
   { "icon": "forms", "name": "Microsoft Forms" },

diff --git a/.../public-docsite/src/pages/Overviews/GetStartedPage/docs/web/GetStartedDesign.md b/.../public-docsite/src/pages/Overviews/GetStartedPage/docs/web/GetStartedDesign.md
@@ -4,7 +4,7 @@ Fluent UI gives you access to Segoe, Microsoft’s official typeface, along with
 
 ### Icons
 
-Fluent UI includes Office’s official product icons. Fluent UI also provides a suite of product and document symbols, so you can use the same metaphors we use. [Learn more](#/styles/web/icons)
+Fluent UI includes Microsoft 365's official product icons. Fluent UI also provides a suite of product and document symbols, so you can use the same metaphors we use. [Learn more](#/styles/web/icons)
 
 ### Controls
 

diff --git a/...site/src/pages/Overviews/ResourcesPage/docs/default/ResourcesDesignResources.md b/...site/src/pages/Overviews/ResourcesPage/docs/default/ResourcesDesignResources.md
@@ -22,16 +22,6 @@ These SharePoint design resources provide everything you need to design your web
   <li className="mdut--half">[SharePoint Toolkit (Figma)](https://aka.ms/SharePointToolkits/Web/Figma)</li>
 </ul>
 
-<h3 id="office-add-ins-design">Office Add-ins</h3>
-
-The Add-ins design toolkit provides layouts for interface elements and commonly used patterns in Word, Excel, and PowerPoint. Use it in addition to the Microsoft design toolkits to create an add-in that fits within Office.
-
-<ul className="md-list--flex">
-  <li className="mdut--half">[Add-ins Toolkit (Sketch)](https://aka.ms/addins_sketch_toolkit)</li>
-  <li className="mdut--half">[Designing Office Add-ins](https://docs.microsoft.com/en-us/office/dev/add-ins/design/add-in-design)</li>
-  <li className="mdut--half">[Add-ins Toolkit (XD)](https://aka.ms/addins_toolkit)</li>
-</ul>
-
 ### Fonts
 
 <ul className="md-list--flex">

diff --git a/...e/src/pages/Overviews/ResourcesPage/docs/default/ResourcesDeveloperResources.md b/...e/src/pages/Overviews/ResourcesPage/docs/default/ResourcesDeveloperResources.md
@@ -41,12 +41,3 @@ SharePoint uses Fluent UI, so if you’re building on top of or within a SharePo
   <li className="mdut--half">[Theme Designer](https://aka.ms/themedesigner)</li>
   <li className="mdut--half">[Get started with building client-side web parts](https://aka.ms/spfx-tutorials)</li>
 </ul>
-
-<h3 id="office-add-ins-dev">Office Add-ins</h3>
-
-Fluent UI is the official UI toolkit for creating Office Add-ins. Check out some of these resources to learn more about how to use Fluent UI in your next Add-in.
-
-<ul className="md-list--flex">
-  <li className="mdut--full">[Add-ins overview](https://docs.microsoft.com/office/dev/add-ins/)</li>
-  <li className="mdut--full">[Using Fluent UI React in your Add-ins](https://docs.microsoft.com/office/dev/add-ins/design/add-in-design)</li>
-</ul>
diff --git a/apps/public-docsite/src/pages/Styles/FabricIconsPage/FabricIconsPage.tsx b/apps/public-docsite/src/pages/Styles/FabricIconsPage/FabricIconsPage.tsx
@@ -69,7 +69,7 @@ function _otherSections(platform: Platforms): IPageSectionProps<Platforms>[] {
                   )
                 }
               </PivotItem>
-              <PivotItem headerText="SVG icons (branded)" itemKey="svg-branded" className={styles.iconGrid}>
+              <PivotItem headerText="SVG icons (products)" itemKey="svg-branded" className={styles.iconGrid}>
                 {selectedItem === 'svg-branded' && (
                   <IconGrid icons={import('@fluentui/react-icons-mdl2-branded')} iconType="react-svg" />
                 )}

diff --git a/...public-docsite/src/pages/Styles/FabricIconsPage/docs/web/FabricIconsOverview.md b/...public-docsite/src/pages/Styles/FabricIconsPage/docs/web/FabricIconsOverview.md
@@ -1,7 +1,7 @@
 Fluent UI primarily uses a custom font for its iconography, released under the [Microsoft Fabric Assets License](https://aka.ms/fluentui-assets-license). As of Fluent UI React version 8, an SVG-based version of the same icon set is available under the MIT license.
 
-**This page is about the general-use monoline icons. See the [brand icons page](#/styles/web/office-brand-icons) for multi-color product icons and the [file type icons page](#/styles/web/file-type-icons) for document icons.**
+**This page is about the general-use monoline icons. See the [product icons page](#/styles/web/m365-product-icons) for multi-color product icons and the [file type icons page](#/styles/web/file-type-icons) for document icons.**
 
 ### When should I use Fluent UI icons?
 
-It is recommended to use Fluent UI icons for command bars, navigation or status indicators. If you need icons to represent Office apps, see the [Office brand icons page](#/styles/web/office-brand-icons). If you are representing files or digital content, see the [file type icons page](#/styles/web/file-type-icons).
+It is recommended to use Fluent UI icons for command bars, navigation or status indicators. If you need icons to represent Microsoft 365 apps, see the [Microsoft 365 product icons page](#/styles/web/m365-product-icons). If you are representing files or digital content, see the [file type icons page](#/styles/web/file-type-icons).
diff --git a/...public-docsite/src/pages/Styles/FabricIconsPage/docs/web/FabricIconsSvgUsage.md b/...public-docsite/src/pages/Styles/FabricIconsPage/docs/web/FabricIconsSvgUsage.md
@@ -1,6 +1,6 @@
-An SVG-based version of Fluent UI's icon set is available from `@fluentui/react-icons-mdl2` and is released under the MIT license. This is the same MDL2 icon set used in the font icons, excluding any branded icons.
+An SVG-based version of Fluent UI's icon set is available from `@fluentui/react-icons-mdl2` and is released under the MIT license. This is the same MDL2 icon set used in the font icons, excluding any product icons.
 
-Branded SVG icons are available from `@fluentui/react-icons-mdl2-branded` and are still subject to the [Microsoft Fabric Assets License](https://aka.ms/fluentui-assets-license).
+Product SVG icons are available from `@fluentui/react-icons-mdl2-branded` and are still subject to the [Microsoft Fabric Assets License](https://aka.ms/fluentui-assets-license).
 
 Both packages contain SVG icons wrapped in React components. This allows you to import and bundle only the icons you need, resulting in smaller download sizes compared to the font-based approach with `initializeIcons`, which downloads all icons by default.
 

diff --git a/apps/public-docsite/src/pages/Styles/FileTypeIconsPage/FileTypeIconsPage.module.scss b/apps/public-docsite/src/pages/Styles/FileTypeIconsPage/FileTypeIconsPage.module.scss
@@ -62,7 +62,7 @@
   }
 }
 
-.brandIconsPage .brandIconsPageLink {
+.productIconsPage .productIconsPageLink {
   color: $ms-color-themePrimary;
 }
 

diff --git a/apps/public-docsite/src/pages/Styles/FileTypeIconsPage/FileTypeIconsPage.tsx b/apps/public-docsite/src/pages/Styles/FileTypeIconsPage/FileTypeIconsPage.tsx
@@ -11,7 +11,7 @@ const baseUrl =
   'https://github.com/microsoft/fluentui/tree/master/apps/public-docsite/src/pages/Styles/FileTypeIconsPage/docs';
 
 // eslint-disable-next-line import/no-extraneous-dependencies
-const documentIcons = require<{ name: string }[]>('@fluentui/public-docsite/lib/data/brand-icons-documents.json');
+const documentIcons = require<{ name: string }[]>('@fluentui/public-docsite/lib/data/product-icons-documents.json');
 
 export const FileTypeIconsPage: React.FunctionComponent<IStylesPageProps> = props => {
   const { platform } = props;
@@ -47,18 +47,18 @@ function _otherSections(platform: Platforms): IPageSectionProps<Platforms>[] {
                       Use file type icons to indicate to users that they are creating a new file of that type. Make sure
                       that a file of the type that the icon represents loads when the user selects the icon. For
                       example, do not use a Word .docx icon to open a .txt file. File type icons should always represent
-                      Microsoft Office files.
+                      Microsoft 365 files.
                       <br />
                       <br />
                       If you're looking for icons for command bars, navigation, status indicators, or similar, check out
                       the{' '}
                       <Link href="#/styles/web/icons" underline>
                         Fluent UI icons page
                       </Link>
-                      . {/* comment to prevent eslint/prettier conflict */}Alternatively, if you're looking for brand
+                      . {/* comment to prevent eslint/prettier conflict */}Alternatively, if you're looking for product
                       logos, or the icons of apps themselves, check out the{' '}
-                      <Link href="#/styles/web/office-brand-icons" underline>
-                        Fluent UI brand icons page
+                      <Link href="#/styles/web/m365-product-icons" underline>
+                        Fluent UI product icons page
                       </Link>
                       .
                     </p>

diff --git a/...ic-docsite/src/pages/Styles/FileTypeIconsPage/docs/web/FileTypeIconsOverview.md b/...ic-docsite/src/pages/Styles/FileTypeIconsPage/docs/web/FileTypeIconsOverview.md
@@ -2,4 +2,4 @@ Fluent UI includes document icons that you can use to connect your experience to
 
 File type icons represent user content, typically "files" in the classical sense, but also many "digital objects" like SharePoint pages or Sway stories. These icons are usually bigger and more detailed than command icons, and they're replaced with an actual thumbnail preview when possible.
 
-Usage of these icons is subject to the [assets license agreement (PDF)](https://aka.ms/fluentui-assets-license). Please read this document and the resolution/size guidance carefully to ensure that you use our branded icons correctly to create the best experience.
+Usage of these icons is subject to the [assets license agreement (PDF)](https://aka.ms/fluentui-assets-license). Please read this document and the resolution/size guidance carefully to ensure that you use our product icons correctly to create the best experience.
diff --git a/...randIconsPage/OfficeBrandIconsPage.doc.ts → ...ductIconsPage/M365ProductIconsPage.doc.ts b/...randIconsPage/OfficeBrandIconsPage.doc.ts → ...ductIconsPage/M365ProductIconsPage.doc.ts
@@ -1,10 +1,10 @@
 import { TFabricPlatformPageProps } from '../../../interfaces/Platforms';
 
-const title = 'Office Brand Icons';
+const title = 'Microsoft 365 Product Icons';
 const componentUrl =
-  'https://github.com/microsoft/fluentui/tree/master/apps/public-docsite/src/pages/Styles/OfficeBrandIconsPage';
+  'https://github.com/microsoft/fluentui/tree/master/apps/public-docsite/src/pages/Styles/M365ProductIconsPage';
 
-export const OfficeBrandIconsPageProps: TFabricPlatformPageProps = {
+export const M365ProductIconsPageProps: TFabricPlatformPageProps = {
   web: {
     title,
     componentUrl,

diff --git a/...consPage/OfficeBrandIconsPage.module.scss → ...consPage/M365ProductIconsPage.module.scss b/...consPage/OfficeBrandIconsPage.module.scss → ...consPage/M365ProductIconsPage.module.scss
@@ -59,7 +59,7 @@
   }
 }
 
-.brandIconsPage .brandIconsPageLink {
+.productIconsPage .productIconsPageLink {
   color: $ms-color-themePrimary;
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -62,7 +62,7 @@ @@
       }
     }
-    .brandIconsPage .brandIconsPageLink {
+    .productIconsPage .productIconsPageLink {
       color: $ms-color-themePrimary;
     }
@@ Expand Down @@
Original file line number	Diff line number	Diff line change
Expand Up		@@ -2,4 +2,4 @@ Fluent UI includes document icons that you can use to connect your experience to

		File type icons represent user content, typically "files" in the classical sense, but also many "digital objects" like SharePoint pages or Sway stories. These icons are usually bigger and more detailed than command icons, and they're replaced with an actual thumbnail preview when possible.

		Usage of these icons is subject to the [assets license agreement (PDF)](https://aka.ms/fluentui-assets-license). Please read this document and the resolution/size guidance carefully to ensure that you use our branded icons correctly to create the best experience.
		Usage of these icons is subject to the [assets license agreement (PDF)](https://aka.ms/fluentui-assets-license). Please read this document and the resolution/size guidance carefully to ensure that you use our product icons correctly to create the best experience.