chore(public-docsite): Renaming Office to Microsoft 365 (#26171)

* Renaming Office to Microsoft 365. * changing wording from brand to product
microsoft · Jan 6, 2023 · 3bab722 · 3bab722
1 parent 0176bd1
commit 3bab722
Show file tree

Hide file tree

Showing 23 changed files with 48 additions and 104 deletions.
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;
 }
 

diff --git a/...ceBrandIconsPage/OfficeBrandIconsPage.tsx → ...ProductIconsPage/M365ProductIconsPage.tsx b/...ceBrandIconsPage/OfficeBrandIconsPage.tsx → ...ProductIconsPage/M365ProductIconsPage.tsx
@@ -2,26 +2,26 @@ import * as React from 'react';
 import { Image, Link } from '@fluentui/react';
 import { Markdown, MarkdownHeader, IPageSectionProps } from '@fluentui/react-docsite-components/lib/index2';
 import { IStylesPageProps, StylesAreaPage } from '../StylesAreaPage';
-import { OfficeBrandIconsPageProps } from './OfficeBrandIconsPage.doc';
+import { M365ProductIconsPageProps } from './M365ProductIconsPage.doc';
 import { Platforms } from '../../../interfaces/Platforms';
 import { cdnUrl } from '../../../utilities/cdn';
-import * as styles from './OfficeBrandIconsPage.module.scss';
+import * as styles from './M365ProductIconsPage.module.scss';
 
 const baseUrl =
-  'https://github.com/microsoft/fluentui/tree/master/apps/public-docsite/src/pages/Styles/OfficeBrandIconsPage/docs';
+  'https://github.com/microsoft/fluentui/tree/master/apps/public-docsite/src/pages/Styles/M365ProductIconsPage/docs';
 const fabricCDN = `${cdnUrl}/assets`;
 
 const productIcons = require<
   { icon: string; name: string }[]
   // eslint-disable-next-line import/no-extraneous-dependencies
->('@fluentui/public-docsite/lib/data/brand-icons-products.json');
+>('@fluentui/public-docsite/lib/data/product-icons.json');
 
-export const OfficeBrandIconsPage: React.FunctionComponent<IStylesPageProps> = props => {
+export const M365ProductIconsPage: React.FunctionComponent<IStylesPageProps> = props => {
   const { platform } = props;
   return (
     <StylesAreaPage
       {...props}
-      {...OfficeBrandIconsPageProps[platform!]}
+      {...M365ProductIconsPageProps[platform!]}
       otherSections={_otherSections(platform!) as IPageSectionProps[]}
     />
   );
@@ -33,23 +33,23 @@ function _otherSections(platform: Platforms): IPageSectionProps<Platforms>[] {
       return [
         {
           sectionName: 'Overview',
-          editUrl: `${baseUrl}/web/OfficeBrandIconsOverview.md`,
+          editUrl: `${baseUrl}/web/M365ProductIconsOverview.md`,
           content: (
             <>
               <Markdown>
                 {
-                  require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Styles/OfficeBrandIconsPage/docs/web/OfficeBrandIconsOverview.md') as string
+                  require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Styles/M365ProductIconsPage/docs/web/M365ProductIconsOverview.md') as string
                 }
               </Markdown>
-              <MarkdownHeader as="h3">When should I use Office Brand icons?</MarkdownHeader>
+              <MarkdownHeader as="h3">When should I use Microsoft 365 Product icons?</MarkdownHeader>
               <div className="ms-Grid">
                 <div className="ms-Grid-row">
                   <div className="ms-Grid-col ms-sm12 ms-lg6">
                     <p>
-                      Use Office brand icons to help your users transition between Microsoft products. Product icons
-                      should only be used when the behavior of the command (app icon) is to launch the application. Do
-                      not use a product icon to create a new file of that type. For example, do not use the Word app
-                      icon for the menu option that allows users create a new Word document.
+                      Use Microsoft 365 product icons to help your users transition between Microsoft products. Product
+                      icons should only be used when the behavior of the command (app icon) is to launch the
+                      application. Do not use a product icon to create a new file of that type. For example, do not use
+                      the Word app icon for the menu option that allows users create a new Word document.
                     </p>
                     <p>
                       If you're looking for icons for command bars, navigation, status indicators, or similar, check out
@@ -97,14 +97,14 @@ function _otherSections(platform: Platforms): IPageSectionProps<Platforms>[] {
         },
         {
           sectionName: 'Format and sizes',
-          editUrl: `${baseUrl}/web/OfficeBrandIconsFormat.md`,
+          editUrl: `${baseUrl}/web/M365ProductIconsFormat.md`,
           content: (
             <div className="ms-Grid">
               <div className="ms-Grid-row">
                 <div className="ms-Grid-col ms-sm12 ms-lg6">
                   <Markdown>
                     {
-                      require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Styles/OfficeBrandIconsPage/docs/web/OfficeBrandIconsFormat.md') as string
+                      require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Styles/M365ProductIconsPage/docs/web/M365ProductIconsFormat.md') as string
                     }
                   </Markdown>
                 </div>
@@ -154,29 +154,29 @@ function _otherSections(platform: Platforms): IPageSectionProps<Platforms>[] {
         },
         {
           sectionName: 'Resolutions',
-          editUrl: `${baseUrl}/web/OfficeBrandIconsResolutions.md`,
+          editUrl: `${baseUrl}/web/M365ProductIconsResolutions.md`,
           content: (
             <Markdown>
               {
-                require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Styles/OfficeBrandIconsPage/docs/web/OfficeBrandIconsResolutions.md') as string
+                require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Styles/M365ProductIconsPage/docs/web/M365ProductIconsResolutions.md') as string
               }
             </Markdown>
           ),
         },
         {
           sectionName: 'Implementation',
-          editUrl: `${baseUrl}/web/OfficeBrandIconsImplementation.md`,
+          editUrl: `${baseUrl}/web/M365ProductIconsImplementation.md`,
           content: (
             <Markdown>
               {
-                require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Styles/OfficeBrandIconsPage/docs/web/OfficeBrandIconsImplementation.md') as string
+                require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Styles/M365ProductIconsPage/docs/web/M365ProductIconsImplementation.md') as string
               }
             </Markdown>
           ),
         },
 
         {
-          sectionName: 'Branded icon library',
+          sectionName: 'Product icon library',
           content: (
             <>
               <ul className={styles.iconList}>

diff --git a/...nsPage/docs/web/OfficeBrandIconsFormat.md → ...nsPage/docs/web/M365ProductIconsFormat.md b/...nsPage/docs/web/OfficeBrandIconsFormat.md → ...nsPage/docs/web/M365ProductIconsFormat.md
@@ -1,4 +1,4 @@
-Office brand icons look best at 16x16, 48x48, and 96x96 pixel sizes in the UI of Microsoft products. Fluent UI provides these icons in both SVG and PNG formats. SVGs are more versatile, and can be resized more easily since they are vectors, but are not supported by all browsers. PNGs are supported by most browsers, but require many sizes to remain visually crisp.
+Microsoft 365 product icons look best at 16x16, 48x48, and 96x96 pixel sizes in the UI of Microsoft products. Fluent UI provides these icons in both SVG and PNG formats. SVGs are more versatile, and can be resized more easily since they are vectors, but are not supported by all browsers. PNGs are supported by most browsers, but require many sizes to remain visually crisp.
 
 Both PNGs and SVGs are available in predefined dimensions at 16x16, 20x20, 32x32, 40x40, 48x48, 64x64 and 96x96 pixel sizes. Where possible, use the default sizes to prevent artifacts and blurry subpixel rendering for PNGs. Otherwise, use the size that most closely maps to what you need for your experience for the best quality.
-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.