feature: update File List component to Fluent UI (#1833)

* update: update file list, file-upload to fluent design

* update: upload button style

* update: change variable naming to snake_case

* update: change file conflict style to include keeping both files

* update: remove maximum files in file upload

* update: update button colour

* update: update upload status

* update: fix rtl padding

* update: fix file rtl padding

* Update packages/mgt-components/src/components/mgt-file-list/mgt-file-upload/strings.ts

Co-authored-by: Gavin Barron <[email protected]>

* update: fix dark theme

* update: fix accessibility issues

---------

Co-authored-by: Gavin Barron <[email protected]>

Author: Mnickii

packages/mgt-components/src/components/mgt-file-list/mgt-file-list.scss

@@ -20,19 +20,12 @@ $file-list-box-shadow: var(
 );
 $file-list-border: var(--file-list-border, none);
 $file-item-border-radius: var(--file-item-border-radius, 2px);
-$file-item-margin: var(--file-item-margin, 0 4px);
+$file-item-margin: var(--file-item-margin, 0 4px 0 4px);
 $show-more-button-font-size: var(--show-more-button-font-size, 12px);
 $show-more-button-padding: var(--show-more-button-padding, 6px);
 $show-more-button-border-bottom-right-radius: var(--show-more-button-border-bottom-right-radius, 8px);
 $show-more-button-border-bottom-left-radius: var(--show-more-button-border-bottom-left-radius, 8px);
-$show-more-button-background-color: var(
-  --show-more-button-background-color,
-  set-var(background-color__sub2, $theme-default, $common)
-);
-$show-more-button-background-color--hover: var(
-  --show-more-button-background-color--hover,
-  $file-item-background-color--hover
-);
+$show-more-button-background-color--hover: var(--show-more-button-background-color--hover, $show_more_button_hover);
 $progress-ring-size: var(--progress-ring-size, 24px);
 
 :host {
@@ -64,6 +57,9 @@ $progress-ring-size: var(--progress-ring-size, 24px);
       border-right: var(--file-item-border-right, none);
       border-bottom: var(--file-item-border-bottom, none);
       margin: $file-item-margin;
+      padding-inline-start: var(--file-item-padding-inline-start, 24px);
+      padding-top: var(--file-item-padding-top, 10px);
+      padding-bottom: var(--file-item-padding-bottom, 8px);
       border-radius: $file-item-border-radius;
       cursor: pointer;
 
@@ -74,7 +70,6 @@ $progress-ring-size: var(--progress-ring-size, 24px);
       &:hover,
       &.focused {
         background-color: $file-item-background-color--hover;
-        border-radius: 4px;
 
         .mgt-file-item {
           --file-background-color: $file-item-background-color--hover;
@@ -105,7 +100,6 @@ $progress-ring-size: var(--progress-ring-size, 24px);
     border-bottom-right-radius: $show-more-button-border-bottom-right-radius;
     border-bottom-left-radius: $show-more-button-border-bottom-left-radius;
     cursor: pointer;
-    background-color: $show-more-button-background-color;
 
     &:hover {
       background-color: $show-more-button-background-color--hover;

packages/mgt-components/src/components/mgt-file-list/mgt-file-list.theme.scss

@@ -10,12 +10,12 @@
 $file-list: (
   list__item__background-color--hover: (
     _var: --file-item-background-color--hover,
-    light: rgba(0, 0, 0, 0.1),
+    light: rgba(247, 247, 247, 1),
     dark: #0078d4
   ),
   list__item__background-color--active: (
     _var: --file-item-background-color--active,
-    light: rgba(0, 0, 0, 0.05),
+    light: rgba(251, 251, 251, 1),
     dark: #238ada
   ),
   list__background-color: (
@@ -36,12 +36,12 @@ $file-list: (
   upload__dialog__content__background-color: (
     _var: --file-upload-dialog-content-background-color,
     light: rgb(255, 255, 255),
-    dark: rgb(74, 74, 74)
+    dark: #787878
   ),
   upload__dialog__content__color: (
     _var: --file-upload-dialog-content-color,
     light: rgb(50, 49, 48),
-    dark: rgb(255, 255, 255)
+    dark: #000
   ),
   upload__dialog__primarybutton__color: (
     _var: --file-upload-dialog-primarybutton-color,

packages/mgt-components/src/components/mgt-file-list/mgt-file-list.ts

@@ -898,6 +898,8 @@ export class MgtFileList extends MgtTemplatedComponent {
       const li = event.target.closest('li');
       const index = nodes.indexOf(li);
       this._focusedItemIndex = index;
+      const clickedItem = fileList.children[this._focusedItemIndex];
+      this.updateItemBackgroundColor(fileList, clickedItem, 'selected');
 
       for (let i = 0; i < fileList.children.length; i++) {
         fileList.children[i].classList.remove('focused');

packages/mgt-components/src/components/mgt-file-list/mgt-file-upload/mgt-file-upload.scss

@@ -25,36 +25,40 @@ $file-upload-dialog-primarybutton-background-color: set-var(
 $file-upload-button-background-color: set-var(upload__button__background-color, $theme-default, $file-upload);
 $file-item-background-color--hover: set-var(list__item__background-color--hover, $theme-default, $file-upload);
 $file-item-background-color--active: set-var(list__item__background-color--active, $theme-default, $file-upload);
-$file-upload-icon-button-background-color: var(--color, inherit);
+$file-upload-icon-button-background-color: var(--color, fileUploadIconBackground);
 $file-list-box-shadow: var(
   --file-list-box-shadow,
   0px 3.2px 7.2px rgba(0, 0, 0, 0.132),
   0px 0.6px 1.8px rgba(0, 0, 0, 0.108)
 );
 :host .file-upload-area-button {
   width: 100%;
+  --neutral-fill-hover: $file-upload-button-background-color;
+  --neutral-fill-rest: $file-upload-button-background-color;
+  --neutral-fill-active: $file-upload-button-background-color;
+  --neutral-fill-focus: $file-upload-button-background-color;
   div {
     float: var(--file-upload-button-float, right);
     text-align: center;
     display: table;
-    margin-top: 39px;
-    margin-right: 16px;
-    margin-left: 16px;
+    margin-top: 30px;
+    margin-right: 36px;
   }
 
   fluent-button.file-upload-button {
-    color: var(--file-upload-button-color, inherit);
+    color: var(--file-upload-button-color, $fileButtonColour);
     vertical-align: middle;
-    display: table-cell;
     background-color: $file-upload-button-background-color;
     width: 120px;
     height: 32px;
     cursor: pointer;
     font-size: $font-size;
     font-family: $font-family;
     position: relative;
-    &:hover {
-      background-color: $file-item-background-color--hover;
+
+    .upload-text {
+      font-weight: 400;
+      line-height: 20px;
     }
   }
 
@@ -86,8 +90,7 @@ $file-list-box-shadow: var(
 
     .file-upload-status {
       position: absolute;
-      top: 12px;
-      left: 16px;
+      left: 48px;
     }
 
     fluent-progress.file-upload-bar {
@@ -115,11 +118,11 @@ $file-list-box-shadow: var(
 
 :host .mgt-file-item {
   --file-background-color: transparent;
+  margin: 0 0 20px 26px;
 }
 
 :host .upload-icon {
-  fill: var(--file-upload-button-color, $file-upload-icon-button-background-color);
-  height: 12px;
+  fill: var(--file-upload-button-color, $fileButtonColour);
 }
 
 :host .file-upload-Template {
@@ -200,11 +203,15 @@ $file-list-box-shadow: var(
   .file-upload-dialog-ok {
     height: 32px;
     min-width: 60px;
-    border: 1px solid $file-upload-dialog-primarybutton-background-color;
-    background-color: $file-upload-dialog-primarybutton-background-color;
-    color: $file-upload-dialog-primarybutton-color;
+    border: 1px solid rgb(138, 136, 134);
+    background-color: $file-upload-button-background-color;
+    color: $fileButtonColour;
     font-size: $font-size;
     margin-right: 5px;
+    --neutral-fill-rest: $fileButtonColour;
+    --neutral-fill-hover: $fileButtonColour;
+    --neutral-fill-active: $fileButtonColour;
+    --neutral-fill-focus: $fileButtonColour;
   }
 
   .file-upload-dialog-cancel {

packages/mgt-components/src/components/mgt-file-list/mgt-file-upload/mgt-file-upload.theme.scss

@@ -10,17 +10,17 @@
 $file-upload: (
   list__item__background-color--hover: (
     _var: --file-item-background-color--hover,
-    light: rgba(0, 0, 0, 0.1),
+    light: rgba(247, 247, 247, 1),
     dark: #0078d4
   ),
   list__item__background-color--active: (
     _var: --file-item-background-color--active,
-    light: rgba(0, 0, 0, 0.05),
+    light: rgba(251, 251, 251, 1),
     dark: #238ada
   ),
   upload__button__background-color: (
     _var: --file-upload-button-background-color,
-    light: rgb(243, 242, 241),
+    light: #036ac4,
     dark: #006cbe
   ),
   upload__dialog__background-color: (
@@ -31,12 +31,12 @@ $file-upload: (
   upload__dialog__content__background-color: (
     _var: --file-upload-dialog-content-background-color,
     light: rgb(255, 255, 255),
-    dark: rgb(74, 74, 74)
+    dark: #787878
   ),
   upload__dialog__content__color: (
     _var: --file-upload-dialog-content-color,
     light: rgb(50, 49, 48),
-    dark: rgb(255, 255, 255)
+    dark: #000
   ),
   upload__dialog__primarybutton__color: (
     _var: --file-upload-dialog-primarybutton-color,
@@ -50,4 +50,6 @@ $file-upload: (
   )
 );
 
+$fileButtonColour: #ffffff;
+
 @include create-themes($file-upload);

packages/mgt-components/src/components/mgt-file-list/mgt-file-upload/mgt-file-upload.ts

@@ -266,7 +266,6 @@ export class MgtFileUpload extends MgtBaseComponent {
   private _dialogCheckBox: string = '';
   private _applyAll: boolean = false;
   private _applyAllConflitBehavior: number = null;
-  private _maximumFiles: boolean = false;
   private _maximumFileSize: boolean = false;
   private _excludedFileType: boolean = false;
 
@@ -318,13 +317,17 @@ export class MgtFileUpload extends MgtBaseComponent {
         <div>
           <input
             id="file-upload-input"
+            title="${this.strings.uploadButtonLabel}"
+            tabindex="-1"
             aria-label="file upload input"
             type="file"
             multiple="true"
             @change="${this.onFileUploadChange}"
           />
-          <fluent-button class="file-upload-button" @click=${this.onFileUploadClick}>
-            ${getSvg(SvgIcon.Upload)}${strings.buttonUploadFile}
+          <fluent-button class="file-upload-button" @click=${this.onFileUploadClick} label=${
+      this.strings.uploadButtonLabel
+    }>
+            ${getSvg(SvgIcon.Upload)} <span class="upload-text">${this.strings.buttonUploadFile}</span>
           </fluent-button>
         </div>
         </div>
@@ -566,7 +569,6 @@ export class MgtFileUpload extends MgtBaseComponent {
     const fileItemsCompleted: MgtFileUploadItem[] = [];
     this._applyAll = false;
     this._applyAllConflitBehavior = null;
-    this._maximumFiles = false;
     this._maximumFileSize = false;
     this._excludedFileType = false;
 
@@ -585,27 +587,6 @@ export class MgtFileUpload extends MgtBaseComponent {
         // Initialize variable for File validation
         let acceptFile = true;
 
-        // Exclude file based on max files upload allowed
-        if (fileItems.length >= this.fileUploadList.maxUploadFile) {
-          acceptFile = false;
-          if (!this._maximumFiles) {
-            const maximumFiles: (number | true)[] = await this.getFileUploadStatus(
-              file,
-              fullPath,
-              'MaxFiles',
-              this.fileUploadList
-            );
-            if (maximumFiles !== null) {
-              if (maximumFiles[0] === 0) {
-                return null;
-              }
-              if (maximumFiles[0] === 1) {
-                this._maximumFiles = true;
-              }
-            }
-          }
-        }
-
         // Exclude file based on max file size allowed
         if (this.fileUploadList.maxFileSize !== undefined && acceptFile) {
           if (file.size > this.fileUploadList.maxFileSize * 1024) {
@@ -778,46 +759,6 @@ export class MgtFileUpload extends MgtBaseComponent {
           return null;
         }
         break;
-      case 'MaxFiles':
-        fileUploadDialog.classList.add('visible');
-        this._dialogTitle = strings.maximumFilesTitle;
-        this._dialogContent = strings.maximumFiles.split('{MaxNumber}').join(fileUploadList.maxUploadFile.toString());
-        this._dialogCheckBox = strings.checkApplyAll;
-        this._dialogPrimaryButton = strings.buttonUpload;
-        this._dialogSecondaryButton = strings.buttonReselect;
-        super.requestStateUpdate(true);
-
-        return new Promise<number[]>(async resolve => {
-          const fileUploadDialogOk: HTMLElement = this.renderRoot.querySelector('.file-upload-dialog-ok');
-          const fileUploadDialogCancel: HTMLElement = this.renderRoot.querySelector('.file-upload-dialog-cancel');
-          const fileUploadDialogClose: HTMLElement = this.renderRoot.querySelector('.file-upload-dialog-close');
-          const fileUploadDialogCheck: HTMLInputElement = this.renderRoot.querySelector('#file-upload-dialog-check');
-          fileUploadDialogCheck.checked = false;
-          fileUploadDialogCheck.classList.add('hide');
-
-          // Remove and include event listener to validate options.
-          fileUploadDialogOk.removeEventListener('click', onOkDialogClick);
-          fileUploadDialogCancel.removeEventListener('click', onCancelDialogClick);
-          fileUploadDialogClose.removeEventListener('click', onCancelDialogClick);
-          fileUploadDialogOk.addEventListener('click', onOkDialogClick);
-          fileUploadDialogCancel.addEventListener('click', onCancelDialogClick);
-          fileUploadDialogClose.addEventListener('click', onCancelDialogClick);
-
-          // tslint:disable-next-line: completed-docs
-          function onOkDialogClick() {
-            fileUploadDialog.classList.remove('visible');
-            // Continue upload
-            resolve([1]);
-          }
-
-          // tslint:disable-next-line: completed-docs
-          function onCancelDialogClick() {
-            fileUploadDialog.classList.remove('visible');
-            // Cancel all
-            resolve([0]);
-          }
-        });
-        break;
       case 'ExcludedFileType':
         fileUploadDialog.classList.add('visible');
         this._dialogTitle = strings.fileTypeTitle;

packages/mgt-components/src/components/mgt-file-list/mgt-file-upload/strings.ts

@@ -21,9 +21,10 @@ export const strings = {
   buttonOk: 'OK',
   buttonCancel: 'Cancel',
   buttonUpload: 'Upload',
-  buttonKeep: 'Keep',
+  buttonKeep: 'Keep both',
   buttonReplace: 'Replace',
   buttonReselect: 'Reselect',
   fileReplaceTitle: 'Replace file',
-  fileReplace: 'Do you want to replace the file "{FileName}" or keep file with new name?'
+  fileReplace: 'Do you want to replace the file "{FileName}" or keep both files?',
+  uploadButtonLabel: 'File upload button'
 };

packages/mgt-components/src/components/mgt-file/mgt-file.scss

@@ -50,7 +50,7 @@ mgt-file .item {
   }
 
   &__details {
-    padding: 0 0 0 14px;
+    padding-inline-start: var(--file-padding-inline-start, 14px);
 
     .line1 {
       font-size: $font-size;
@@ -83,7 +83,6 @@ mgt-file .item {
     direction: rtl;
     &__details {
       direction: rtl;
-      padding: 0 14px 0 0;
     }
   }
 }

packages/mgt-components/src/components/mgt-person-card/mgt-person-card.scss

@@ -411,7 +411,7 @@ $person-card-nav-back-arrow-hover-color: var(--person-card-nav-back-arrow-hover-
         &:hover {
           cursor: pointer;
           color: $person-card-show-more-hover-color;
-          background-color: $greyHover;
+          background-color: $gray_hover;
         }
       }
 

packages/mgt-components/src/components/mgt-person-card/sections/mgt-person-card-files/mgt-person-card-files.scss

@@ -33,7 +33,7 @@
       padding: 11px 20px;
 
       &:hover {
-        background-color: $greyHover;
+        background-color: $gray_hover;
         cursor: pointer;
       }