Merge branch 'nivogt/people-picker-group' of https://github.com/microsoftgraph/microsoft-graph-toolkit into nivogt/people-picker-group

Author: vogtn

samples/react-app/package.json

@@ -1,9 +1,10 @@
 {
   "name": "react-app",
-  "version": "0.1.0",
+  "version": "1.3.0",
   "private": true,
   "dependencies": {
-    "@microsoft/mgt": "0.1.0-preview.8",
+    "@microsoft/mgt": "^1.3.0-preview.3",
+    "@microsoft/mgt-react": "^1.3.0-preview.3",
     "@webcomponents/webcomponentsjs": "2.2.10",
     "react": "^16.8.5",
     "react-app-polyfill": "1.0.1",

samples/react-app/src/App.js

@@ -1,24 +1,24 @@
 import React, { Component } from 'react';
-import "@microsoft/mgt";
+import { Login, Agenda, Person} from '@microsoft/mgt-react';
+import { PersonViewType } from '@microsoft/mgt';
 
 class App extends Component {
   render() {
+
+    const personDetails = {
+      displayName: 'Nikola Metulev'
+    };
+
     return (
       <div className="App">
-          <mgt-login ref="loginComponent"></mgt-login>
-          <mgt-agenda group-by-day></mgt-agenda>
+          <Login loginCompleted={()=> console.log('login completed')}/>
+          <Agenda groupByDay="true"/>
 
 
-          <mgt-person show-name ref={el => el.personDetails = {displayName: 'Nikola Metulev'}}></mgt-person>
+          <Person personDetails={personDetails} view={PersonViewType.oneline}/>
       </div>
     );
   }
-
-  componentDidMount() {
-    this.refs.loginComponent.addEventListener('loginCompleted', e => {
-      console.log('logincompleted');
-  });
-  }
 }
 
 export default App;

src/components/mgt-agenda/mgt-agenda.ts

@@ -68,7 +68,7 @@ export class MgtAgenda extends MgtTemplatedComponent {
     }
 
     this._date = value;
-    this.requestStateUpdate(true);
+    this.reloadState();
   }
 
   /**
@@ -88,7 +88,7 @@ export class MgtAgenda extends MgtTemplatedComponent {
     }
 
     this._groupId = value;
-    this.requestStateUpdate(true);
+    this.reloadState();
   }
 
   /**
@@ -108,7 +108,7 @@ export class MgtAgenda extends MgtTemplatedComponent {
     }
 
     this._days = value;
-    this.requestStateUpdate(true);
+    this.reloadState();
   }
 
   /**
@@ -128,7 +128,7 @@ export class MgtAgenda extends MgtTemplatedComponent {
     }
 
     this._eventQuery = value;
-    this.requestStateUpdate(true);
+    this.reloadState();
   }
 
   /**
@@ -236,20 +236,6 @@ export class MgtAgenda extends MgtTemplatedComponent {
     `;
   }
 
-  /**
-   * Request to reload the state.
-   * Use reload instead of load to ensure loading events are fired.
-   *
-   * @protected
-   * @memberof MgtBaseComponent
-   */
-  protected async requestStateUpdate(force?: boolean) {
-    if (force) {
-      this.events = null;
-    }
-    super.requestStateUpdate(force);
-  }
-
   /**
    * Render the loading state
    *
@@ -539,6 +525,11 @@ export class MgtAgenda extends MgtTemplatedComponent {
     }
   }
 
+  private async reloadState() {
+    this.events = null;
+    this.requestStateUpdate(true);
+  }
+
   private onResize() {
     this._isNarrow = this.offsetWidth < 600;
   }

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

@@ -45,7 +45,6 @@ mgt-people-picker .root {
 :host .people-picker,
 mgt-people-picker .people-picker {
   position: relative;
-  margin: 7px 0 0 0;
   background-color: $input-background-color;
   padding-bottom: 6px;
   border: $input-border;

src/components/mgt-teams-channel-picker/mgt-teams-channel-picker.scss

@@ -67,7 +67,7 @@ $dropdown-item-selected-background: var(--dropdown-item-selected-background, #de
     .channel-chosen-list {
       min-height: 29px;
       display: flex;
-      flex-wrap: wrap;
+      flex-wrap: nowrap;
       vertical-align: middle;
       margin: 0 0 0 0;
       list-style-type: none;
@@ -106,7 +106,7 @@ $dropdown-item-selected-background: var(--dropdown-item-selected-background, #de
         font-weight: normal;
         font-size: 14px;
         line-height: 19px;
-        background-color: $input-background-color;
+        background-color: transparent;
         color: $font-color;
         padding-left: 5px;
         &::placeholder {
@@ -120,7 +120,8 @@ $dropdown-item-selected-background: var(--dropdown-item-selected-background, #de
       .close-icon {
         display: inline-block;
         position: absolute;
-        right: 10px;
+        right: 0;
+        padding: 10px;
         line-height: normal;
         font-family: 'FabricMDL2Icons';
         margin-bottom: 1px;

src/components/mgt-teams-channel-picker/mgt-teams-channel-picker.ts

@@ -287,7 +287,7 @@ export class MgtTeamsChannelPicker extends MgtTemplatedComponent {
               ${!this._selectedItemState ? getSvg(SvgIcon.Search, '#252424') : ''}
             </div>
             <div class="channel-chosen-list">
-              ${this.renderSelected()} ${this.renderInput()}
+              ${this.renderSelected()} ${this.renderInput()} ${this.renderCloseButton()}
             </div>
           </div>
           <div class=${classMap(dropdownClasses)}>${this.renderDropdown()}</div>
@@ -313,9 +313,6 @@ export class MgtTeamsChannelPicker extends MgtTemplatedComponent {
         <div class="selected-team-name">${this._selectedItemState.parent.item.displayName}</div>
         <div class="arrow">${getSvg(SvgIcon.TeamSeparator, '#B3B0AD')}</div>
         ${this._selectedItemState.item.displayName}
-        <div class="close-icon" @click="${() => this.selectChannel(null)}">
-          
-        </div>
       </li>
       <div class="search-icon">
         ${this._isFocused ? getSvg(SvgIcon.Search, '#252424') : ''}
@@ -352,6 +349,21 @@ export class MgtTeamsChannelPicker extends MgtTemplatedComponent {
     `;
   }
 
+  /**
+   * Renders close button
+   *
+   * @protected
+   * @returns
+   * @memberof MgtTeamsChannelPicker
+   */
+  protected renderCloseButton() {
+    return html`
+      <div class="close-icon" @click="${() => this.selectChannel(null)}">
+        
+      </div>
+    `;
+  }
+
   /**
    * Renders dropdown content
    *