people-picker ui refresh and darkmode (#411)

* people-picker ui refresh and darkmode

* top and bottom selected people margin and fixing story

* css props, refactor scss

* final scss updates

* style feedback, prop location update, internal prop

* displayName fix and intial selection

* removing additional requestUpdate

* min-width for default fluent guidelines

* input background preserve variable

* segoe font

* height matching to teams-channel-picker

* fix overflow issue

Co-authored-by: Nikola Metulev <[email protected]>

Author: vogtn

src/components/mgt-people-picker/mgt-people-picker.scss

@@ -15,15 +15,29 @@ $avatar-size: var(--avatar-size, 48px);
 $initials-color: var(--initials-color, white);
 $initials-background-color: var(--initials-background-color, #{$ms-color-magenta});
 $accent-color: var(--accent-color, #0078d4);
-$separator-margin: var(--separator-margin, 0px 0px 0px 0px);
 
-$people-list-background-color: var(--people-list-background-color, white);
+$input-border: var(--input-border, 2px solid #b3b0ad);
+$input-border-bottom: var(--input-border-bottom, $input-border);
+$input-border-right: var(--input-border-right, $input-border);
+$input-border-left: var(--input-border-left, $input-border);
+$input-border-top: var(--input-border-top, $input-border);
+
+$input-hover-color: var(--input-hover-color, #323130);
+$input-focus-color: var(--input-focus-color, #0078d4);
+$input-background-color: var(--input-background-color, var(--people-list-background-color, white));
+
+$dropdown-background-color: var(--dropdown-background-color, white);
+$dropdown-item-hover-background: var(--dropdown-item-hover-background, #f1f1f1dd);
+
+$placeholder-default-color: var(--placeholder-default-color, #605e5c);
+$placeholder-focus-color: var(--placeholder-focus-color, #323130);
+$font-color: var(--font-color, #323130);
 
 :host {
   border-radius: 2px;
-  font-family: var(--default-font-family);
-  font-style: normal;
-  font-weight: normal;
+  font-family: var(--default-font-family, 'Segoe UI');
+  height: 38px;
+  display: contents;
 }
 :host .root,
 mgt-people-picker .root {
@@ -34,16 +48,27 @@ mgt-people-picker .root {
 mgt-people-picker .people-picker {
   position: relative;
   margin: 7px 0 0 0;
-  background-color: white;
-  padding-bottom: 8px;
+  background-color: $input-background-color;
+  padding-bottom: 6px;
+  border: $input-border;
+  border-bottom: $input-border-bottom;
+  border-left: $input-border-left;
+  border-top: $input-border-top;
+  border-right: $input-border-right;
+  &:hover {
+    border-color: $input-hover-color;
+  }
+  &.focused {
+    border-color: $input-focus-color;
+  }
 }
 
 :host .flyout-root,
 mgt-people-picker .flyout-root {
   padding: 0;
   border-radius: 2px;
-  background-color: $people-list-background-color;
-  width: 100%;
+  background-color: $dropdown-background-color;
+  min-width: 260px;
   overflow-y: auto;
   text-align: left;
   list-style-type: none;
@@ -52,17 +77,10 @@ mgt-people-picker .flyout-root {
     cursor: pointer;
   }
 }
-:host .people-list-separator,
-mgt-people-picker .people-list-separator {
-  margin: $separator-margin;
-  height: 2px;
-  background: $accent-color;
-  margin-top: 5px;
-  text-align: center;
-}
 
 :host .people-selected-input,
 mgt-people-picker .people-selected-input {
+  font-family: var(--default-font-family, 'Segoe UI');
   position: relative;
   border: none;
   line-height: normal;
@@ -71,16 +89,24 @@ mgt-people-picker .people-selected-input {
   font-weight: normal;
   font-size: 14px;
   line-height: 19px;
+  background-color: $input-background-color;
+  color: $font-color;
+  &::placeholder {
+    color: $placeholder-default-color;
+  }
+  &:focus::placeholder {
+    color: $placeholder-focus-color;
+  }
 }
 
 :host .people-selected-list,
 mgt-people-picker .people-selected-list {
   display: flex;
   flex-wrap: wrap;
   vertical-align: middle;
-  margin: 0 0 0 0;
+  margin: 0 2px 0 0;
   list-style-type: none;
-  padding-left: 10px;
+  padding-left: 8px;
   font-style: normal;
   font-weight: normal;
 }
@@ -92,6 +118,7 @@ mgt-people-picker .CloseIcon {
   padding-left: 4px;
   margin-top: 0px;
   cursor: pointer;
+  color: $font-color;
 }
 :host .SearchIcon,
 mgt-people-picker .SearchIcon {
@@ -102,7 +129,7 @@ mgt-people-picker .SearchIcon {
 :host .people-person,
 mgt-people-picker .people-person {
   display: flex;
-  margin: 4px 5px 0px 0;
+  margin: 5px 5px 0px 0;
   align-items: center;
   background-color: rgba(196, 196, 196, 0.24);
   border-radius: 15px;
@@ -122,13 +149,13 @@ mgt-people-picker .list-person {
   font-size: 14px;
 
   &:hover {
-    background-color: #f1f1f1dd;
+    background-color: $dropdown-item-hover-background;
   }
 }
 
 :host .list-person.focused,
 mgt-people-picker .list-person.focused {
-  background-color: #f1f1f1;
+  background-color: $dropdown-item-hover-background;
 }
 
 :host .people-person-text,
@@ -141,11 +168,11 @@ mgt-people-picker .people-person-text {
 
 :host .input-search,
 mgt-people-picker .input-search {
-  margin: 7px 2px 0px 3px;
+  margin: 6px 2px 1px 3px;
 }
 :host .input-search.input-search--start,
 mgt-people-picker .input-search.input-search--start {
-  margin: 7px 0px 0px 0px;
+  margin: 6px 0px 1px 0px;
   line-height: normal;
   margin-inline-start: 0px;
   margin-inline-end: 0px;
@@ -155,7 +182,7 @@ mgt-people-picker .input-search.input-search--start {
 mgt-people-picker .people-picker-input {
   display: flex;
   order: 2;
-  background-color: white;
+  background-color: $input-background-color;
   margin: $avatar-margin;
   font-size: 14px;
   line-height: 19px;
@@ -202,19 +229,22 @@ mgt-person {
 .selected-person {
   --avatar-size-s: 24px;
   margin-left: 0px;
+  --color: $font-color;
+  color: $font-color;
+  margin-bottom: 1px;
 }
 
 :host .search-error-text,
 :host .loading-text,
 mgt-people-picker .search-error-text,
 mgt-people-picker .loading-text {
-  font-family: Segoe UI;
+  font-family: var(--default-font-family, 'Segoe UI');
   font-style: normal;
   font-weight: 600;
   font-size: 14px;
   line-height: 19px;
   text-align: center;
-  color: #232222;
+  color: $font-color;
   margin-left: 50px;
   margin-right: 50px;
 }
@@ -255,4 +285,5 @@ mgt-people-picker .people-person-text-area {
   flex: 1 1 0;
   max-height: 40px;
   overflow: hidden;
+  color: $font-color;
 }

src/components/mgt-people-picker/mgt-people-picker.ts

@@ -44,6 +44,24 @@ interface IFocusable {
  *
  * @fires selectionChanged - Fired when selection changes
  *
+ * @cssprop --font-color - {font} Default font color
+ *
+ * @cssprop --input-border - {String} Input section entire border
+ * @cssprop --input-border-top - {String} Input section border top only
+ * @cssprop --input-border-right - {String} Input section border right only
+ * @cssprop --input-border-bottom - {String} Input section border bottom only
+ * @cssprop --input-border-left - {String} Input section border left only
+ * @cssprop --input-background-color - {Color} Input section background color
+ * @cssprop --input-hover-color - {Color} Input text hover color
+ * @cssprop --input-focus-color - {Color} Input text focus color
+ *
+ * @cssprop --dropdown-background-color - {Color} Background color of dropdown area
+ * @cssprop --dropdown-item-hover-background - {Color} Background color of channel or team during hover
+ * @cssprop --dropdown-item-selected-background - {Color} Background color of selected channel
+ *
+ * @cssprop --placeholder-focus-color - {Color} Color of placeholder text during focus state
+ * @cssprop --placeholder-default-color - {Color} Color of placeholder text
+ *
  * @cssprop --people-list-background-color - {Color} People list background color
  * @cssprop --accent-color - {Color} Accent color
  */
@@ -57,6 +75,17 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
     return styles;
   }
 
+  /**
+   * Gets the flyout element
+   *
+   * @protected
+   * @type {MgtFlyout}
+   * @memberof MgtLogin
+   */
+  protected get flyout(): MgtFlyout {
+    return this.renderRoot.querySelector('.flyout');
+  }
+
   /**
    * containing object of IDynamicPerson.
    * @type {IDynamicPerson[]}
@@ -185,17 +214,6 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
    */
   protected userInput: string;
 
-  /**
-   * Gets the flyout element
-   *
-   * @protected
-   * @type {MgtFlyout}
-   * @memberof MgtLogin
-   */
-  protected get flyout(): MgtFlyout {
-    return this.renderRoot.querySelector('.flyout');
-  }
-
   // if search is still loading don't load "people not found" state
   @property({ attribute: false }) private _showLoading: boolean;
 
@@ -208,6 +226,7 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
   // List of people requested if group property is provided
   private _groupPeople: IDynamicPerson[];
   private _debouncedSearch: { (): void; (): void };
+  @internalProperty() private _isFocused = false;
 
   @internalProperty() private _foundPeople: IDynamicPerson[];
 
@@ -238,6 +257,7 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
    * @memberof MgtPeoplePicker
    */
   public focus(options?: FocusOptions) {
+    this.gainedFocus();
     const peopleInput = this.renderRoot.querySelector('.people-selected-input') as HTMLInputElement;
     if (!peopleInput) {
       return;
@@ -293,14 +313,18 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
     const selectedPeopleTemplate = this.renderSelectedPeople(this.selectedPeople);
     const inputTemplate = this.renderInput();
     const flyoutTemplate = this.renderFlyout(inputTemplate);
+
+    const inputClasses = {
+      focused: this._isFocused,
+      'people-picker': true
+    };
     return html`
-      <div class="people-picker" @click=${() => this.focus()}>
+      <div class=${classMap(inputClasses)} @click=${() => this.focus()}>
         <div class="people-picker-input">
           <div class="people-selected-list">
             ${selectedPeopleTemplate} ${flyoutTemplate}
           </div>
         </div>
-        <div class="people-list-separator"></div>
       </div>
     `;
   }
@@ -349,6 +373,7 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
           .value="${this.userInput}"
           @keydown="${this.onUserKeyDown}"
           @keyup="${this.onUserKeyUp}"
+          @blur=${this.lostFocus}
         />
       </div>
     `;
@@ -668,6 +693,9 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
     if (person) {
       this.userInput = '';
       const duplicatePeople = this.selectedPeople.filter(p => {
+        if (!person.id) {
+          return p.displayName === person.displayName;
+        }
         return p.id === person.id;
       });
 
@@ -680,6 +708,18 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
     }
   }
 
+  private gainedFocus() {
+    this._isFocused = true;
+    const input = this.renderRoot.querySelector('.people-selected-input') as HTMLInputElement;
+    if (input) {
+      input.focus();
+    }
+  }
+
+  private lostFocus() {
+    this._isFocused = false;
+  }
+
   private renderHighlightText(person: IDynamicPerson): TemplateResult {
     let first: string = '';
     let last: string = '';
@@ -793,6 +833,9 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
    * @param event - event tracked on user input (keydown)
    */
   private onUserKeyDown(event: KeyboardEvent): void {
+    if (!this.flyout.isOpen) {
+      return;
+    }
     if (event.keyCode === 40 || event.keyCode === 38) {
       // keyCodes capture: down arrow (40) and up arrow (38)
       this.handleArrowSelection(event);
@@ -858,12 +901,16 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
     // find ids from selected people
     if (people) {
       const idFilter = this.selectedPeople.map(el => {
-        return el.id;
+        return el.id ? el.id : el.displayName;
       });
 
       // filter id's
       const filtered = people.filter((person: IDynamicPerson) => {
-        return idFilter.indexOf(person.id) === -1;
+        if (person.id) {
+          return idFilter.indexOf(person.id) === -1;
+        } else {
+          return idFilter.indexOf(person.displayName) === -1;
+        }
       });
 
       return filtered;