People Picker known issue fixes (#136)

vogtn · nmetulev · commit fd9f08e9b8c3 · 2019-08-29T13:02:24.000-07:00
* [people-picker] Adding documentation and basic custom css variables

* [people-picker] removing console.log

* [people-picker-documentation] fixing typo in documentation

* [people-picker] updating arrow selection status

* [people-picker] updating first selection is highlighted

* [people-picker] updating docs to utilize real image

* [people-picker] adding new file

* [people-picker] changing text overflow property on selected people

* [people-picker] changing text overflow property on selected people

* [people-picker] updating selected people long string with css ellipses

* [people-picker]updating centering of close icon

* [people-picker] adding repeat instead of map, also caching images

* [people-picker] adding timeout to boolean for no users found

* [people-picker] updating image storing in case local storage doesn't exist

* [people-picker] removing docs and adding pr fixes
diff --git a/samples/examples/people-picker.html b/samples/examples/people-picker.html
@@ -14,13 +14,14 @@
   </head>
 
   <body>
-    <mgt-msal-provider client-id="a974dfa0-9f57-49b9-95db-90f04ce2111a"></mgt-msal-provider>
+    <!-- <mgt-msal-provider client-id="a974dfa0-9f57-49b9-95db-90f04ce2111a"></mgt-msal-provider> -->
 
-    <!-- <mgt-mock-provider></mgt-mock-provider> -->
+    <mgt-mock-provider></mgt-mock-provider>
 
     <mgt-login></mgt-login>
 
-    <mgt-people-picker id="picker1"></mgt-people-picker>
+    <div style="max-width: 200px"><mgt-people-picker id="picker1"></mgt-people-picker></div>
+    <!-- <mgt-tasks></mgt-tasks> -->
     <h2>hello</h2>
 
     <div style="position: fixed; bottom: 0;">
diff --git a/src/components/mgt-people-picker/mgt-people-picker.scss b/src/components/mgt-people-picker/mgt-people-picker.scss
@@ -16,6 +16,8 @@ $initials-color: var(--initials-color, white);
 $initials-background-color: var(--initials-background-color, #{$ms-color-magenta});
 $accent-color: var(--accent-color, #0078d4);
 
+$people-list-background-color: var(--people-list-background-color, white);
+
 :host {
   border-radius: 2px;
 }
@@ -39,7 +41,7 @@ mgt-people-picker .people-list {
   padding: 0;
   box-shadow: 0px 1.3289px 2.65781px rgba(180, 180, 180, 0.182), 0px 1.3289px 2.65781px rgba(68, 68, 68, 0.3);
   border-radius: 2px;
-  background-color: white;
+  background-color: $people-list-background-color;
   z-index: 1; /* Sit on top */
   width: 100%;
   text-align: left;
@@ -87,7 +89,7 @@ mgt-people-picker .CloseIcon {
   font-family: 'FabricMDL2Icons';
   padding-right: 8px;
   padding-left: 4px;
-  margin-top: 3px;
+  margin-top: 0px;
 }
 :host .SearchIcon,
 mgt-people-picker .SearchIcon {
@@ -102,7 +104,10 @@ mgt-people-picker .people-person {
   align-items: center;
   background-color: rgba(196, 196, 196, 0.24);
   border-radius: 15px;
-  max-height: 24px;
+  height: 24px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 :host .people-person-list,
@@ -180,6 +185,10 @@ mgt-people-picker .remove-person-button-secondary {
 
 :host .person-display-name,
 mgt-people-picker .person-display-name {
+  max-width: 100px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
   margin-left: 8px;
   font-family: Segoe UI;
   font-style: normal;
diff --git a/src/components/mgt-people-picker/mgt-people-picker.ts b/src/components/mgt-people-picker/mgt-people-picker.ts
