From af181cba5e514905fc6f9f19f8a5dbe52bf9748e Mon Sep 17 00:00:00 2001
From: Antanina Druzhkina <totora246@gmail.com>
Date: Tue, 9 Apr 2024 15:07:41 +0400
Subject: [PATCH 1/6] #1367: added placeholder to the FilePicker "From a link"
 tab

---
 src/controls/filePicker/LinkFilePickerTab/LinkFilePickerTab.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/controls/filePicker/LinkFilePickerTab/LinkFilePickerTab.tsx b/src/controls/filePicker/LinkFilePickerTab/LinkFilePickerTab.tsx
index 505db4609..4f5492b6b 100644
--- a/src/controls/filePicker/LinkFilePickerTab/LinkFilePickerTab.tsx
+++ b/src/controls/filePicker/LinkFilePickerTab/LinkFilePickerTab.tsx
@@ -35,6 +35,7 @@ export default class LinkFilePickerTab extends React.Component<ILinkFilePickerTa
             label={strings.LinkFileInstructions}
             ariaLabel={strings.LinkFileInstructions}
             defaultValue={"https://"}
+            placeholder={"https://"}
             onGetErrorMessage={(value: string) => this._getErrorMessagePromise(value)}
             autoAdjustHeight={false}
             underlined={false}

From bce0cbd8e2ef9923e870c2d41a916b078c9d4123 Mon Sep 17 00:00:00 2001
From: Antanina Druzhkina <totora246@gmail.com>
Date: Tue, 9 Apr 2024 16:10:47 +0400
Subject: [PATCH 2/6] #1367: update libraries layout for FilePicker "Site" tab

---
 .../DocumentLibraryBrowser.module.scss        | 42 ++++++++
 .../DocumentLibraryBrowser.tsx                | 96 +++++++------------
 2 files changed, 74 insertions(+), 64 deletions(-)

diff --git a/src/controls/filePicker/controls/DocumentLibraryBrowser/DocumentLibraryBrowser.module.scss b/src/controls/filePicker/controls/DocumentLibraryBrowser/DocumentLibraryBrowser.module.scss
index a2f750dfa..2284de1ed 100644
--- a/src/controls/filePicker/controls/DocumentLibraryBrowser/DocumentLibraryBrowser.module.scss
+++ b/src/controls/filePicker/controls/DocumentLibraryBrowser/DocumentLibraryBrowser.module.scss
@@ -94,3 +94,45 @@
 .documentLibraryBrowserContainer {
   padding: 0;
 }
+
+.filePickerFolderCardTile {
+  max-width: 176px;
+  text-align: center;
+  outline: none;
+  position: relative;
+  @include ms-float(left);
+
+  &:hover {
+    background-color: $ms-color-neutralLighter;
+    border-radius: 5px;
+    .filePickerFolderCardTitle {
+      text-decoration: underline;
+    }
+  }
+
+  .filePickerFolderCardImage {
+    position: relative;
+    width: 112px;
+    height: 80px;
+    margin: 24px 32px 0px 32px;
+    cursor: pointer;
+
+    img {
+      display: block;
+      position: absolute;
+      left: -3px;
+      right: -3px;
+      bottom: -4px;
+    }
+  }
+
+  .filePickerFolderCardTitle {
+    cursor: pointer;
+    font-size: 14px;
+    overflow:hidden;
+    white-space:nowrap;
+    text-overflow: ellipsis;
+    padding: 12px 8px;
+    text-align: center;
+  }
+}
diff --git a/src/controls/filePicker/controls/DocumentLibraryBrowser/DocumentLibraryBrowser.tsx b/src/controls/filePicker/controls/DocumentLibraryBrowser/DocumentLibraryBrowser.tsx
index 6dcc8cbe3..f34a00608 100644
--- a/src/controls/filePicker/controls/DocumentLibraryBrowser/DocumentLibraryBrowser.tsx
+++ b/src/controls/filePicker/controls/DocumentLibraryBrowser/DocumentLibraryBrowser.tsx
@@ -1,34 +1,20 @@
-import * as React from 'react';
-import { List } from '@fluentui/react/lib/List';
-import { Spinner } from '@fluentui/react/lib/Spinner';
-import { Image, ImageFit } from '@fluentui/react/lib/Image';
-import { IDocumentLibraryBrowserProps } from './IDocumentLibraryBrowserProps';
-import { IDocumentLibraryBrowserState } from './IDocumentLibraryBrowserState';
-import { ILibrary } from '../../../../services/FileBrowserService.types';
+import * as React from "react";
+import { Spinner } from "@fluentui/react/lib/Spinner";
+import { Stack } from "@fluentui/react/lib/Stack";
+import { IDocumentLibraryBrowserProps } from "./IDocumentLibraryBrowserProps";
+import { IDocumentLibraryBrowserState } from "./IDocumentLibraryBrowserState";
+import { ILibrary } from "../../../../services/FileBrowserService.types";
 
-import { IRectangle } from '@fluentui/react/lib/Utilities';
-import { DefaultButton } from '@fluentui/react/lib/Button';
-
-import styles from './DocumentLibraryBrowser.module.scss';
-import * as strings from 'ControlStrings';
-
-/**
- * Rows per page
- */
-export const ROWS_PER_PAGE = 3;
-
-/**
- * Maximum row height
- */
-export const MAX_ROW_HEIGHT = 250;
+import styles from "./DocumentLibraryBrowser.module.scss";
+import * as strings from "ControlStrings";
 
 /**
  * This would have been better done as an Office Fabric TileList, but it isn't available yet for production use
  */
-export class DocumentLibraryBrowser extends React.Component<IDocumentLibraryBrowserProps, IDocumentLibraryBrowserState> {
-  private _columnCount: number;
-  private _columnWidth: number;
-  private _rowHeight: number;
+export class DocumentLibraryBrowser extends React.Component<
+  IDocumentLibraryBrowserProps,
+  IDocumentLibraryBrowserState
+> {
 
   constructor(props: IDocumentLibraryBrowserProps) {
     super(props);
@@ -54,58 +40,40 @@ export class DocumentLibraryBrowser extends React.Component<IDocumentLibraryBrow
     return (
       <div className={styles.documentLibraryBrowserContainer}>
         {isLoading && <Spinner label={strings.Loading} />}
-        <List
-          className={styles.filePickerFolderCardGrid}
-          items={lists}
-          getItemCountForPage={this._getItemCountForPage}
-          getPageHeight={this._getPageHeight}
-          renderedWindowsAhead={4}
-          onRenderCell={this._onRenderLibraryTile}
-        />
+        <Stack wrap horizontal horizontalAlign="start" verticalAlign="center">
+          {lists.map((list, index) =>
+            this._onRenderLibraryTile(list, index)
+          )}
+        </Stack>
       </div>
     );
   }
 
-  /**
-   * Calculates how many items there should be in the page
-   */
-  private _getItemCountForPage = (itemIndex: number, surfaceRect: IRectangle): number => {
-    if (itemIndex === 0) {
-      this._columnCount = Math.ceil(surfaceRect.width / MAX_ROW_HEIGHT);
-      this._columnWidth = Math.floor(surfaceRect.width / this._columnCount);
-      this._rowHeight = this._columnWidth;
-    }
-
-    return this._columnCount * ROWS_PER_PAGE;
-  }
-
-  /**
-   * Gets the height of a list "page"
-   */
-  private _getPageHeight = (): number => {
-    return this._rowHeight * ROWS_PER_PAGE;
-  }
-
-  /**
+   /**
    * Renders a cell for search suggestions
    */
   private _onRenderLibraryTile = (item: ILibrary, index: number | undefined): JSX.Element => {
-    const imgSrc = item.iconPath ? item.iconPath : "";
 
     return (
       <div
+        key={item.absoluteUrl}
         className={styles.filePickerFolderCardTile}
         data-is-focusable={true}
-        style={{
-          width: 100 / this._columnCount + '%'
-        }}
+        onClick={(_event) => this._handleOpenLibrary(item)}
       >
-        <div className={styles.filePickerFolderCardSizer}>
-          <div className={styles.filePickerFolderCardPadder}>
-            <Image src={imgSrc} className={styles.filePickerFolderCardImage} imageFit={ImageFit.cover} />
-            <DefaultButton className={styles.filePickerFolderCardLabel} onClick={(_event) => this._handleOpenLibrary(item)}>{item.title}</DefaultButton>
+          <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"
+            />
+          </div>
+            <div className={styles.filePickerFolderCardTitle}>
+              {item.title}
           </div>
-        </div>
       </div>
     );
   }

From 55a770cfdae2ab87a502ff60273da52c321def42 Mon Sep 17 00:00:00 2001
From: Antanina Druzhkina <totora246@gmail.com>
Date: Tue, 9 Apr 2024 16:12:34 +0400
Subject: [PATCH 3/6] #1367: remove unused styles

---
 .../DocumentLibraryBrowser.module.scss        | 89 -------------------
 1 file changed, 89 deletions(-)

diff --git a/src/controls/filePicker/controls/DocumentLibraryBrowser/DocumentLibraryBrowser.module.scss b/src/controls/filePicker/controls/DocumentLibraryBrowser/DocumentLibraryBrowser.module.scss
index 2284de1ed..eb9c80328 100644
--- a/src/controls/filePicker/controls/DocumentLibraryBrowser/DocumentLibraryBrowser.module.scss
+++ b/src/controls/filePicker/controls/DocumentLibraryBrowser/DocumentLibraryBrowser.module.scss
@@ -2,95 +2,6 @@
 //@import "../PropertyPaneFilePicker.module.scss";
 
 /** TILES **/
-.filePickerFolderCardGrid {
-  overflow: hidden;
-  font-size: 0;
-
-  :global {
-    .ms-List-page {
-      overflow: hidden;
-      font-size: 0;
-    }
-
-    .ms-List-surface {
-      position: relative;
-    }
-  }
-}
-
-.filePickerFolderCardTile {
-  text-align: center;
-  outline: none;
-  position: relative;
-  @include ms-float(left);
-}
-
-.filePickerFolderCardPadder {
-  position: absolute;
-  left: 5px;
-  top: 5px;
-  right: 5px;
-  bottom: 5px;
-}
-
-:global(.ms-Fabric--isFocusVisible) .filePickerFolderCardTile:focus:after {
-  content: "";
-  position: absolute;
-  left: 2px;
-  right: 2px;
-  top: 2px;
-  bottom: 2px;
-  box-sizing: border-box;
-  border: 1px solid "[theme:white, default:#{$ms-color-white}]";
-}
-
-.filePickerFolderCardSizer {
-  padding-bottom: 100%;
-}
-
-.filePickerFolderCardImage {
-  width: 100%;
-  left: 0;
-  top: 0;
-  color: "[theme:white, default:#{$ms-color-white}]";
-  position: absolute;
-  bottom: 0;
-  font-size: 12px;
-  width: 100%;
-}
-
-.filePickerFolderCardLabel {
-  background-color: "[theme:neutralLight, default:#{$ms-color-neutralLight}]";
-  height: 100%;
-  width: 100%;
-  top: 0;
-  color: "[theme:black, default:#{$ms-color-black}]";
-  padding: 10px;
-  position: absolute;
-  bottom: 0;
-  font-size: 12px;
-  left: 0;
-  width: 100%;
-  box-sizing: border-box;
-  font-size: 21px;
-  font-weight: 600;
-
-  :global .ms-Button-textContainer {
-    max-width: 100%;
-    word-break: break-word;
-  }
-
-  &:hover {
-    color: "[theme:black, default:#{$ms-color-black}]";
-    background-color: "[theme:neutralLighter, default:#{$ms-color-neutralLighter}]";
-  }
-
-  &:active {
-    color: "[theme:black, default:#{$ms-color-black}]";
-    background-color: "[theme:neutralLighterAlt, default:#{$ms-color-neutralLighterAlt}]";
-  }
-}
-
 .documentLibraryBrowserContainer {
   padding: 0;
 }

From 7b6929a51892975c1714afa52942a97d22056508 Mon Sep 17 00:00:00 2001
From: Antanina Druzhkina <totora246@gmail.com>
Date: Tue, 9 Apr 2024 16:40:33 +0400
Subject: [PATCH 4/6] #1367: use controlStrings instead of direct url for
 folder image

---
 .../DocumentLibraryBrowser.module.scss        |  9 ++++++++-
 .../DocumentLibraryBrowser.tsx                | 19 +++++++++++--------
 2 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/src/controls/filePicker/controls/DocumentLibraryBrowser/DocumentLibraryBrowser.module.scss b/src/controls/filePicker/controls/DocumentLibraryBrowser/DocumentLibraryBrowser.module.scss
index eb9c80328..bb4e75a83 100644
--- 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
index f34a00608..bad332cee 100644
--- 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}

From 2420cf2017d8d89ec842646b2ee5a1e0ac07cddd Mon Sep 17 00:00:00 2001
From: Antanina Druzhkina <antanina.druzhkina@gmail.com>
Date: Wed, 14 Aug 2024 18:22:24 +0400
Subject: [PATCH 5/6] Update
 src/controls/filePicker/controls/DocumentLibraryBrowser/DocumentLibraryBrowser.module.scss
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Michaël Maillot <battosaimykle@gmail.com>
---
 .../DocumentLibraryBrowser/DocumentLibraryBrowser.module.scss   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/controls/filePicker/controls/DocumentLibraryBrowser/DocumentLibraryBrowser.module.scss b/src/controls/filePicker/controls/DocumentLibraryBrowser/DocumentLibraryBrowser.module.scss
index bb4e75a83..a48477bd9 100644
--- a/src/controls/filePicker/controls/DocumentLibraryBrowser/DocumentLibraryBrowser.module.scss
+++ b/src/controls/filePicker/controls/DocumentLibraryBrowser/DocumentLibraryBrowser.module.scss
@@ -46,7 +46,7 @@
 
   .filePickerFolderCardTitle {
     cursor: pointer;
-    font-size: 14px;
+    font-size: $ms-font-size-14;
     overflow:hidden;
     white-space:nowrap;
     text-overflow: ellipsis;

From af0a1bfdb205cf68de4621d2862d01b0d909fc1b Mon Sep 17 00:00:00 2001
From: Antanina Druzhkina <totora246@gmail.com>
Date: Wed, 16 Oct 2024 00:08:15 +0400
Subject: [PATCH 6/6] #1367: update styles

---
 .../DocumentLibraryBrowser.module.scss        | 31 +++++++++++--------
 1 file changed, 18 insertions(+), 13 deletions(-)

diff --git a/src/controls/filePicker/controls/DocumentLibraryBrowser/DocumentLibraryBrowser.module.scss b/src/controls/filePicker/controls/DocumentLibraryBrowser/DocumentLibraryBrowser.module.scss
index bb4e75a83..6c0055a9d 100644
--- a/src/controls/filePicker/controls/DocumentLibraryBrowser/DocumentLibraryBrowser.module.scss
+++ b/src/controls/filePicker/controls/DocumentLibraryBrowser/DocumentLibraryBrowser.module.scss
@@ -7,10 +7,10 @@
 }
 
 .filePickerFolderCardTile {
-  max-width: 176px;
+  width: 10vw;
+  margin: 1vh 0;
   text-align: center;
   outline: none;
-  position: relative;
   @include ms-float(left);
 
   &:hover {
@@ -22,35 +22,40 @@
   }
 
   .filePickerFolderCardImage {
-    position: relative;
-    width: 112px;
-    height: 80px;
-    margin: 24px 32px 0px 32px;
+    height: 100%;
     cursor: pointer;
+    margin: 1vw 0 0;
 
-    .filePickerFolderCoverBack,
-    .filePickerFolderCoverFront {
+    .filePickerFolderCoverBack {
       display: block;
       position: absolute;
-      left: -3px;
-      right: -3px;
-      bottom: -4px;
+    }
+
+    .filePickerFolderCoverFront {
+      display: block;
+    }
+
+    .filePickerFolderCoverBack,
+    .filePickerFolderCoverFront {
+      margin: 0 1vw;
+      width: 8vw;
 
       img {
         border: none;
         padding: 0;
         margin: 0;
+        width: 100%;
       }
     }
   }
 
   .filePickerFolderCardTitle {
     cursor: pointer;
-    font-size: 14px;
+    font-size: $ms-font-size-14;
     overflow:hidden;
     white-space:nowrap;
     text-overflow: ellipsis;
-    padding: 12px 8px;
+    padding: 1vh 0.5vw;
     text-align: center;
   }
 }