feature: update File List component to Fluent UI

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 0 20px 26px);
 $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 {
@@ -106,7 +99,6 @@ mgt-file-item .file-list-wrapper {
     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: (

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

@@ -891,6 +891,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: (
@@ -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

@@ -265,7 +265,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;
 
@@ -322,7 +321,7 @@ export class MgtFileUpload extends MgtBaseComponent {
             @change="${this.onFileUploadChange}"
           />
           <fluent-button class="file-upload-button" @click=${this.onFileUploadClick}>
-            ${getSvg(SvgIcon.Upload)}${strings.buttonUploadFile}
+            ${getSvg(SvgIcon.Upload)} <span class="upload-text">${strings.buttonUploadFile}</span>
           </fluent-button>
         </div>
         </div>
@@ -564,7 +563,6 @@ export class MgtFileUpload extends MgtBaseComponent {
     const fileItemsCompleted: MgtFileUploadItem[] = [];
     this._applyAll = false;
     this._applyAllConflitBehavior = null;
-    this._maximumFiles = false;
     this._maximumFileSize = false;
     this._excludedFileType = false;
 
@@ -583,27 +581,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) {
@@ -776,46 +753,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,9 @@ 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?'
 };

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;
       }
 

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

@@ -34,7 +34,7 @@
       justify-content: space-between;
 
       &:hover {
-        background-color: $greyHover;
+        background-color: $gray_hover;
         cursor: pointer;
       }
 

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

@@ -76,7 +76,7 @@ $person-card-active-org-member-color: var(--person-card-active-org-member-color,
       margin-right: 20px;
 
       &.org-member--target {
-        background-color: $greyBackground;
+        background-color: $gray_background;
         border: 1px solid $person-card-active-org-member-color;
         mgt-person {
           --line2-color: #000000;
@@ -88,7 +88,7 @@ $person-card-active-org-member-color: var(--person-card-active-org-member-color,
 
         &:hover {
           cursor: pointer;
-          background-color: $greyHover;
+          background-color: $gray_hover;
         }
       }
 
@@ -128,7 +128,7 @@ $person-card-active-org-member-color: var(--person-card-active-org-member-color,
 
       &:hover {
         cursor: pointer;
-        background-color: $greyHover;
+        background-color: $gray_hover;
       }
 
       .coworker__person {

packages/mgt-components/src/styles/shared-sass-variables.scss

@@ -51,10 +51,11 @@ $green: #6bb700; /* Person / Available */
 $greyPill: #f0f0f0; /* Person Pill */
 
 // Change once standard all through
-$greyHover: #f7f7f7; /* Person Card Hover */
-$greyBackground: #fbfbfb; /* Person Card Background */
+$gray_hover: #f7f7f7; /* Person Card Hover */
+$gray_background: #fbfbfb; /* Person Card Background */
 $commblue_org: #0360b9; /* Person Card Org border */
 $gray_separator_org: #d6d6d6; /* Person Card Org target borders */
+$show_more_button_hover: #efefef; /* File List Hover */
 
 /* ---------------Common style variables--------------- */
 /* -----Background----- */