feat: update mgt-login to new fluent-ui designs (#1807)

* feat: update mgt-login to fluent-ui designs

* tests: added story for multiple logged in accounts

* fix: use correct import for MockProvider initialization

* fix: correct spacing and hover colors

* updating spacing, and mgt-person hover states

* docs: correcting doc comments and fixing small style issue

* adding retries to yarn install for azure devops

* clean up button colors, spacing, and documentation

* Ensuring doc comments are provided where needed

azure-pipelines.yml

@@ -17,16 +17,17 @@ steps:
       command: custom
       verbose: false
       customCommand: '--no-git-tag-version version $(baseVersionNumber).$(Build.BuildId)'
-      
+
   - script: |
       npm install -g yarn lerna
       yarn
     displayName: Install dependencies
+    retryCountOnTaskFailure: 5
 
   - script: |
       yarn build
     displayName: Build
-    
+
   #- task: Npm@1
   #  displayName: 'npm test'
   #  inputs:

index.html

@@ -55,6 +55,7 @@
     <h1>Developer test page</h1>
     <main>
       <h2>mgt-login</h2>
+      <mgt-login login-view="compact"></mgt-login>
       <mgt-login></mgt-login>
       <h2>mgt-person me query two lines card on click with presence</h2>
       <mgt-person person-query="me" view="twoLines" person-card="click" show-presence></mgt-person>

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

@@ -13,19 +13,24 @@
 mgt-login {
   --font-size: #{$ms-font-size-m};
   --font-weight: #{$ms-font-weight-semibold};
-  --width: '100%';
-  --height: '100%';
   --margin: 0;
-  --padding: 12px 20px;
   --popup-command-font-size: 14px;
   --popup-command-margin: 16px 0 0;
   --popup-padding: 10px 4px 16px 4px;
+  --box-shadow: none; // disable the box-shadow on the flyout and use the one from fluent-card
+  --popup-padding: 12px 4px;
+  --profile-spacing: 12px 0 28px 0;
+  --profile-spacing-full: 21px 0 28px 0;
 }
 
 :host .root,
 mgt-login .root {
   position: relative;
   display: inline-block;
+
+  &.vertical-layout {
+    --profile-spacing: var(--profile-spacing-full);
+  }
 }
 
 :host .login-button,
@@ -38,7 +43,6 @@ mgt-login .login-button {
   width: var(--width);
   height: var(--height);
   margin: var(--margin);
-  padding: var(--padding);
   color: set-var(button__color, $theme-default, $login);
   background-color: var(--button-background-color, transparent);
   border: none;
@@ -48,10 +52,6 @@ mgt-login .login-button {
   text-indent: inherit;
   letter-spacing: inherit;
 
-  mgt-person {
-    --color-sub1: set-var(button__color, $theme-default, $login);
-  }
-
   &:hover {
     color: $button__color--hover;
     --color: #{$button__color--hover};
@@ -72,6 +72,35 @@ mgt-login .login-button {
   &.no-click {
     pointer-events: none;
   }
+
+  &.signed-in {
+    padding: 7px 11px;
+    &:hover {
+      color: inherit;
+      --color: inherit;
+      --color-sub1: inherit;
+    }
+
+    &.small {
+      padding: 0;
+      &:hover {
+        background-color: inherit;
+      }
+      > mgt-person {
+        --focus-offset: 2px;
+      }
+    }
+
+    &.full-size {
+      padding: 9px 11px;
+    }
+  }
+  > mgt-person {
+    --focus-offset: 8px;
+  }
+}
+:host fluent-button.login-button::part(content) {
+  margin: 5px 0;
 }
 
 :host .login-icon,
@@ -110,42 +139,27 @@ mgt-login .popup-content {
 
     .list-box {
       margin-bottom: 25px;
+      margin-top: 6px;
       background-color: $popup__background-color;
       --accent-fill-hover: $popup__background-color;
       --accent-fill-active: $popup__background-color;
       --accent-foreground-cut-rest: black;
-      color: black !important;
+      // eliminates the border on the list-box
+      --stroke-width: 0;
       .list-box-option {
-        margin-bottom: 4px;
+        // keeps background hover inside list-box and ensure focus rings don't overlap other accounts
+        margin: 8px 1px;
         mgt-person {
-          max-width: 270px;
-          width: 270px;
-          margin-left: 18px;
-          --details-spacing: 9px;
+          max-width: 246px;
+          width: 246px;
+          margin: 0 22px;
           --avatar-size: 40px;
-          position: relative;
-          --line1-color: rgba(0, 0, 0, 0.83);
-          --line2-color: rgba(0, 0, 0, 0.55);
-          &:after {
-            content: '';
-            position: absolute;
-            z-index: 1;
-            top: 0;
-            right: 8px;
-            bottom: 0px;
-            pointer-events: none;
-            background-image: linear-gradient(to right, rgba(255, 255, 255, 0), $popup__background-color 100%);
-            width: 50%;
-          }
+          --focus-offset: 4px;
         }
         &:hover {
-          border-radius: 4px;
-          background: rgba(0, 0, 0, 0.1);
-          mgt-person {
-            &:after {
-              background-image: none;
-            }
-          }
+          // --neutral-fill-hover: #{$neutralFillHover};
+          background-color: var(--login-hover-fill, set-var(background-color--hover, $theme-default, $common));
+          cursor: pointer;
         }
       }
       &:focus {
@@ -192,48 +206,47 @@ mgt-login .popup-content {
     }
   }
   .add-account {
+    margin: 0 8px;
     .add-account-button {
       position: relative;
-      color: #{$commblue_primary};
+      color: $popup__add-account-button-color;
       border: none;
       background-color: $popup__background-color;
       cursor: pointer;
-      margin: 0px 0px 10px 19px;
       padding: 0;
-      border: 1px solid transparent;
+      // hack to ensure that the button matches the card color
+      --neutral-fill-stealth-rest: #{$popup__background-color};
+      --neutral-fill-stealth-hover: #{$popup__button-color--hover};
       &:hover {
-        color: #{$commblue_shade20};
-        text-shadow: 0 0 0.01px #{$commblue_shade20};
+        // hack to prevent text color changing on hover
+        --accent-foreground-hover: #{$popup__add-account-button-color};
+        background-color: $popup__button-color--hover;
       }
       .account-switch-icon {
         vertical-align: middle;
-        display: inline-block;
+        display: inline-flex;
+        svg {
+          path {
+            fill: $popup__add-account-button-color;
+          }
+        }
       }
     }
   }
 
   .main-profile {
-    margin-bottom: 35px;
-    text-align: center;
-    mgt-person {
-      --avatar-size: 72px;
-      --person-flex-direction: column;
-      --details-spacing: 0px;
-      --line1-color: rgba(0, 0, 0, 0.83);
-      --line2-color: rgba(0, 0, 0, 0.55);
-    }
+    padding: 0 21px;
+    margin: var(--profile-spacing);
   }
 }
 
 :host .popup-commands ul,
 mgt-login .popup-commands ul {
   list-style-type: none;
   margin: var(--popup-command-margin);
-  padding: 0;
-  margin-bottom: 10px;
-  margin-top: 6px;
+  padding: 0 8px;
+  margin: 0;
   text-align: right;
-  padding-right: 16px;
 }
 
 :host .popup-command,
@@ -243,17 +256,19 @@ mgt-login .popup-command {
   color: #{$commblue_primary};
   background-color: $popup__background-color;
   border: none;
-  padding: 0 0 1px 0;
   cursor: pointer;
   transition: color 0.3s;
   word-spacing: inherit;
   text-indent: inherit;
   letter-spacing: inherit;
-  border: 1px solid transparent;
-
+  // hack to ensure that the button matches the card color
+  --neutral-fill-stealth-rest: #{$popup__background-color};
+  --neutral-fill-stealth-hover: #{$popup__button-color--hover};
   &:hover {
-    text-shadow: 0 0 0.01px #{$commblue_shade20};
-    color: #{$commblue_shade20};
+    // hack to prevent text color changing on hover
+    --accent-foreground-hover: --accent-foreground-rest;
+    // ensure that the background of the popup command host element changes on hover
+    background-color: $popup__button-color--hover;
   }
 }
 

packages/mgt-components/src/components/mgt-login/mgt-login.theme.scss

@@ -12,7 +12,15 @@ $button__background-color--hover: var(
   --button-background-color--hover,
   set-var(background-color--hover, $theme-default, $common)
 );
-$popup__background-color: var(--popup-background-color, set-var(background-color, $theme-default, $common));
+$popup__background-color: var(
+  --popup-background-color,
+  var(--neutral-fill-rest, set-var(background-color, $theme-default, $common))
+);
+$popup__add-account-button-color: var(--add-account-button-color, set-var(color__sub2, $theme-default, $common));
+$popup__button-color--hover: var(
+  --popup-button-color--hover,
+  var(--neutral-fill-stealth-hover, #{$neutralFillStealthHover})
+);
 
 $login: (
   button__color: (