pnp#1367: use controlStrings instead of direct url for folder image

Ateina · Apr 9, 2024 · 7b6929a · 7b6929a
1 parent 55a770c
commit 7b6929a
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 9 deletions.
diff --git a/src/controls/filePicker/controls/DocumentLibraryBrowser/DocumentLibraryBrowser.module.scss b/src/controls/filePicker/controls/DocumentLibraryBrowser/DocumentLibraryBrowser.module.scss
@@ -28,12 +28,19 @@
     margin: 24px 32px 0px 32px;
     cursor: pointer;
 
-    img {
+    .filePickerFolderCoverBack,
+    .filePickerFolderCoverFront {
       display: block;
       position: absolute;
       left: -3px;
       right: -3px;
       bottom: -4px;
+
+      img {
+        border: none;
+        padding: 0;
+        margin: 0;
+      }
     }
   }
 

diff --git a/src/controls/filePicker/controls/DocumentLibraryBrowser/DocumentLibraryBrowser.tsx b/src/controls/filePicker/controls/DocumentLibraryBrowser/DocumentLibraryBrowser.tsx
@@ -1,6 +1,7 @@
 import * as React from "react";
 import { Spinner } from "@fluentui/react/lib/Spinner";
 import { Stack } from "@fluentui/react/lib/Stack";
+import { Icon } from "@fluentui/react/lib/Icon";
 import { IDocumentLibraryBrowserProps } from "./IDocumentLibraryBrowserProps";
 import { IDocumentLibraryBrowserState } from "./IDocumentLibraryBrowserState";
 import { ILibrary } from "../../../../services/FileBrowserService.types";
@@ -62,14 +63,16 @@ export class DocumentLibraryBrowser extends React.Component<
         onClick={(_event) => this._handleOpenLibrary(item)}
       >
           <div className={styles.filePickerFolderCardImage}>
-            <img
-              aria-hidden="true"
-              src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/foldericons/folder-large_backplate.svg"
-            />
-            <img
-              aria-hidden="true"
-              src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/foldericons/folder-large_frontplate_nopreview.svg"
-            />
+            <Icon
+              className={styles.filePickerFolderCoverBack}
+              imageProps={{
+                src: strings.FolderBackPlate
+            }} />
+            <Icon
+              className={styles.filePickerFolderCoverFront}
+              imageProps={{
+                src: strings.FolderFrontPlate
+            }} />
           </div>
             <div className={styles.filePickerFolderCardTitle}>
               {item.title}