Special Folder Icons (#13347)

#### Pull request checklist - [X] Addresses an existing issue: internal bug - [X] Include a change request file using `$ yarn change` #### Description of changes Add special folder icon support for file-type-icons and signals. i.e. Desktop, Documents, and Pictures #### Focus areas to test N/A
microsoft · May 28, 2020 · cfcf517 · cfcf517
1 parent e751296
commit cfcf517
Show file tree

Hide file tree

Showing 7 changed files with 61 additions and 15 deletions.
diff --git a/change/@uifabric-experiments-2020-05-27-07-11-43-user-taenri-specialFolderIcons.json b/change/@uifabric-experiments-2020-05-27-07-11-43-user-taenri-specialFolderIcons.json
@@ -0,0 +1,8 @@
+{
+  "type": "minor",
+  "comment": "Add special folder icon signals for Desktop, Documents, and Pictures.",
+  "packageName": "@uifabric/experiments",
+  "email": "[email protected]",
+  "dependentChangeType": "patch",
+  "date": "2020-05-27T14:11:26.806Z"
+}
diff --git a/change/@uifabric-file-type-icons-2020-05-27-07-11-43-user-taenri-specialFolderIcons.json b/change/@uifabric-file-type-icons-2020-05-27-07-11-43-user-taenri-specialFolderIcons.json
@@ -0,0 +1,8 @@
+{
+  "type": "minor",
+  "comment": "Add special folder icon types for file-type-icons.",
+  "packageName": "@uifabric/file-type-icons",
+  "email": "[email protected]",
+  "dependentChangeType": "patch",
+  "date": "2020-05-27T14:11:43.255Z"
+}
diff --git a/packages/experiments/src/components/signals/Signals.scss b/packages/experiments/src/components/signals/Signals.scss
@@ -67,6 +67,14 @@ settings used by the parent control.
   }
 }
 
+.folder {
+  color: $ms-color-neutralSecondary;
+
+  .selected & {
+    color: $ms-color-black;
+  }
+}
+
 .lock {
   color: $ms-color-neutralSecondary;
 

diff --git a/packages/experiments/src/components/signals/Signals.tsx b/packages/experiments/src/components/signals/Signals.tsx
@@ -118,6 +118,18 @@ export const SharedSignal: Signal = (props: ISignalProps): JSX.Element => {
   return <IconSignal {...props} signalClass={SignalsStyles.shared} iconName="people" />;
 };
 
+export const DesktopSignal: Signal = (props: ISignalProps): JSX.Element => {
+  return <IconSignal {...props} signalClass={SignalsStyles.folder} iconName="desktopfolder" />;
+};
+
+export const DocumentsSignal: Signal = (props: ISignalProps): JSX.Element => {
+  return <IconSignal {...props} signalClass={SignalsStyles.folder} iconName="documentsfolder" />;
+};
+
+export const PicturesSignal: Signal = (props: ISignalProps): JSX.Element => {
+  return <IconSignal {...props} signalClass={SignalsStyles.folder} iconName="picturesfolder" />;
+};
+
 export const MalwareDetectedSignal: Signal = (props: ISignalProps): JSX.Element => {
   return <IconSignal {...props} signalClass={SignalsStyles.malwareDetected} iconName="BlockedSiteSolid12" />;
 };

diff --git a/packages/file-type-icons/src/FileIconType.ts b/packages/file-type-icons/src/FileIconType.ts
@@ -14,6 +14,9 @@ export enum FileIconType {
   multiple = 6,
   stream = 7,
   news = 8,
+  desktopFolder = 9,
+  documentsFolder = 10,
+  picturesFolder = 11,
 }
 
-export type FileIconTypeInput = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+export type FileIconTypeInput = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11;
diff --git a/packages/file-type-icons/src/getFileTypeIconProps.ts b/packages/file-type-icons/src/getFileTypeIconProps.ts
@@ -11,6 +11,9 @@ const LIST_ITEM = 'splist';
 const MULTIPLE_ITEMS = 'multiple';
 const NEWS = 'sponews';
 const STREAM = 'stream';
+const DESKTOP_FOLDER = 'desktopfolder';
+const DOCUMENTS_FOLDER = 'documentsfolder';
+const PICTURES_FOLDER = 'picturesfolder';
 const DEFAULT_ICON_SIZE: FileTypeIconSize = 16;
 
 export type FileTypeIconSize = 16 | 20 | 24 | 32 | 40 | 48 | 64 | 96;
@@ -76,6 +79,16 @@ export function getFileTypeIconProps(options: IFileTypeIconOptions): { iconName:
         break;
       case FileIconType.news:
         iconBaseName = NEWS;
+        break;
+      case FileIconType.desktopFolder:
+        iconBaseName = DESKTOP_FOLDER;
+        break;
+      case FileIconType.documentsFolder:
+        iconBaseName = DOCUMENTS_FOLDER;
+        break;
+      case FileIconType.picturesFolder:
+        iconBaseName = PICTURES_FOLDER;
+        break;
     }
   }
 

diff --git a/packages/file-type-icons/src/initializeFileTypeIcons.tsx b/packages/file-type-icons/src/initializeFileTypeIcons.tsx
@@ -5,15 +5,9 @@ import { FileTypeIconMap } from './FileTypeIconMap';
 const PNG_SUFFIX = '_png';
 const SVG_SUFFIX = '_svg';
 
-const DEFAULT_BASE_URL = 'https://spoprod-a.akamaihd.net/files/fabric/assets/item-types/';
+const DEFAULT_BASE_URL = 'https://spoprod-a.akamaihd.net/files/fabric-cdn-prod_20200515.001/assets/item-types/';
 const ICON_SIZES: number[] = [16, 20, 24, 32, 40, 48, 64, 96];
 
-// Due to CDN cache, images updated in place may take up to a year to appear for some users
-// (though most users will see them within a week). To force immediate refresh, append a
-// unique string to the end of the URL. The CDN uses the URL as the cache key, so passing a
-// new URL will cause the CDN to create a new cache key.
-const REFRESH_STRING = '?v1';
-
 export function initializeFileTypeIcons(baseUrl: string = DEFAULT_BASE_URL, options?: Partial<IIconOptions>): void {
   ICON_SIZES.forEach((size: number) => {
     _initializeIcons(baseUrl, size, options);
@@ -26,8 +20,8 @@ function _initializeIcons(baseUrl: string, size: number, options?: Partial<IIcon
 
   iconTypes.forEach((type: string) => {
     const baseUrlSizeType = baseUrl + size + '/' + type;
-    fileTypeIcons[type + size + PNG_SUFFIX] = <img src={baseUrlSizeType + '.png' + REFRESH_STRING} alt="" />;
-    fileTypeIcons[type + size + SVG_SUFFIX] = <img src={baseUrlSizeType + '.svg' + REFRESH_STRING} alt="" />;
+    fileTypeIcons[type + size + PNG_SUFFIX] = <img src={baseUrlSizeType + '.png'} alt="" />;
+    fileTypeIcons[type + size + SVG_SUFFIX] = <img src={baseUrlSizeType + '.svg'} alt="" />;
 
     // For high resolution screens, register additional versions
     // Apply height=100% and width=100% to force image to fit into containing element
@@ -37,21 +31,21 @@ function _initializeIcons(baseUrl: string, size: number, options?: Partial<IIcon
     // Remove if statements when missing image files for 20_1.5x are provided.
     if (size !== 20) {
       fileTypeIcons[type + size + '_1.5x' + PNG_SUFFIX] = (
-        <img src={baseUrl + size + '_1.5x/' + type + '.png' + REFRESH_STRING} height="100%" width="100%" />
+        <img src={baseUrl + size + '_1.5x/' + type + '.png'} height="100%" width="100%" />
       );
       fileTypeIcons[type + size + '_1.5x' + SVG_SUFFIX] = (
-        <img src={baseUrl + size + '_1.5x/' + type + '.svg' + REFRESH_STRING} height="100%" width="100%" />
+        <img src={baseUrl + size + '_1.5x/' + type + '.svg'} height="100%" width="100%" />
       );
     }
 
     fileTypeIcons[type + size + '_2x' + PNG_SUFFIX] = (
-      <img src={baseUrl + size + '_2x/' + type + '.png' + REFRESH_STRING} height="100%" width="100%" />
+      <img src={baseUrl + size + '_2x/' + type + '.png'} height="100%" width="100%" />
     );
     fileTypeIcons[type + size + '_3x' + PNG_SUFFIX] = (
-      <img src={baseUrl + size + '_3x/' + type + '.png' + REFRESH_STRING} height="100%" width="100%" />
+      <img src={baseUrl + size + '_3x/' + type + '.png'} height="100%" width="100%" />
     );
     fileTypeIcons[type + size + '_4x' + PNG_SUFFIX] = (
-      <img src={baseUrl + size + '_4x/' + type + '.png' + REFRESH_STRING} height="100%" width="100%" />
+      <img src={baseUrl + size + '_4x/' + type + '.png'} height="100%" width="100%" />
     );
   });