adding overflow story and handles close icon (#540)

Author: vogtn

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

@@ -117,56 +117,64 @@ mgt-people-picker .people-selected-list {
   overflow: hidden;
 }
 
-.overflow-gradient,
-mgt-people-picker .overflow-gradient {
-  content: '';
-  position: absolute;
-  width: 15px;
-  height: 90%;
-  top: 0;
-  right: 22px;
-  background-image: linear-gradient(
-    to right,
-    rgba(255, 255, 255, 0) 0%,
-    rgba(255, 255, 255, 0) 60%,
-    $selected-person-background-color 100%
-  );
-  background-image: -moz-linear-gradient(
-    left,
-    rgba(255, 255, 255, 0) 0%,
-    rgba(255, 255, 255, 0) 60%,
-    $selected-person-background-color 100%
-  );
-  background-image: -o-linear-gradient(
-    left,
-    rgba(255, 255, 255, 0) 0%,
-    rgba(255, 255, 255, 0) 60%,
-    $selected-person-background-color 100%
-  );
-  background-image: -ms-linear-gradient(
-    left,
-    rgba(255, 255, 255, 0) 0%,
-    rgba(255, 255, 255, 0) 60%,
-    $selected-person-background-color 100%
-  );
-  background-image: -webkit-linear-gradient(
-    left,
-    rgba(255, 255, 255, 0) 0%,
-    rgba(255, 255, 255, 0) 60%,
-    $selected-person-background-color 100%
-  );
+.overflow-offset,
+mgt-people-picker .overflow-offset {
+  margin-left: 25px;
+  .overflow-gradient {
+    content: '';
+    position: absolute;
+    margin-right: 23px;
+    width: 10px;
+    height: 90%;
+    top: 0;
+    right: 0;
+    background-image: linear-gradient(
+      to right,
+      rgba(255, 255, 255, 0) 0%,
+      rgba(255, 255, 255, 0) 60%,
+      $selected-person-background-color 100%
+    );
+    background-image: -moz-linear-gradient(
+      left,
+      rgba(255, 255, 255, 0) 0%,
+      rgba(255, 255, 255, 0) 60%,
+      $selected-person-background-color 100%
+    );
+    background-image: -o-linear-gradient(
+      left,
+      rgba(255, 255, 255, 0) 0%,
+      rgba(255, 255, 255, 0) 60%,
+      $selected-person-background-color 100%
+    );
+    background-image: -ms-linear-gradient(
+      left,
+      rgba(255, 255, 255, 0) 0%,
+      rgba(255, 255, 255, 0) 60%,
+      $selected-person-background-color 100%
+    );
+    background-image: -webkit-linear-gradient(
+      left,
+      rgba(255, 255, 255, 0) 0%,
+      rgba(255, 255, 255, 0) 60%,
+      $selected-person-background-color 100%
+    );
+  }
 }
 
 .CloseIcon,
 mgt-people-picker .CloseIcon {
+  height: 100%;
+  top: 0;
+  margin-top: 4px;
+  margin-left: 10px;
+  position: absolute;
   line-height: normal;
   font-family: 'FabricMDL2Icons';
-  padding-right: 8px;
-  margin-top: 0px;
+  padding-right: 7px;
   cursor: pointer;
   color: $font-color;
   background-color: $selected-person-background-color;
-  right: 0px;
+  right: 0;
 }
 
 :host .people-person,
@@ -273,6 +281,8 @@ mgt-person {
   cursor: default;
 }
 .selected-person {
+  overflow: hidden;
+  min-width: 100%;
   --avatar-size-s: 24px;
   margin-left: 0px;
   --color: $font-color;

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

@@ -441,8 +441,10 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
               ${this.renderTemplate('selected-person', { person }, `selected-${person.id}`) ||
                 this.renderSelectedPerson(person)}
 
-              <div class="overflow-gradient"></div>
-              <div class="CloseIcon" @click="${e => this.removePerson(person, e)}">\uE711</div>
+              <div class="overflow-offset">
+                <div class="overflow-gradient"></div>
+                <div class="CloseIcon" @click="${e => this.removePerson(person, e)}">\uE711</div>
+              </div>
             </div>
           `
       )}

stories/components/peoplePicker.stories.js

@@ -64,3 +64,14 @@ export const pickDistributionGroups = () => html`
   <mgt-people-picker type="group" group-type="distribution"></mgt-people-picker>
   <!-- group-type can be "any", "unified", "security", "mailenabledsecurity", "distribution" -->
 `;
+
+export const pickerOverflowGradient = () => html`
+  <mgt-people-picker
+    default-selected-user-ids="e8a02cc7-df4d-4778-956d-784cc9506e5a,eeMcKFN0P0aANVSXFM_xFQ==,48d31887-5fad-4d73-a9f5-3c356e68a038,e3d0513b-449e-4198-ba6f-bd97ae7cae85"
+  ></mgt-people-picker>
+  <style>
+    .story-mgt-preview-wrapper {
+      width: 120px;
+    }
+  </style>
+`;