From fdbd63e27c168d25600637d1a61e21bd8cea9dda Mon Sep 17 00:00:00 2001
From: Aniket Handa <anihan@microsoft.com>
Date: Fri, 26 Aug 2016 19:31:43 -0700
Subject: [PATCH 1/2] Centering the X button, and fixing hover styling issues

---
 src/components/PeoplePicker/PeoplePicker.scss | 39 +++++++++++++------
 src/components/PeoplePicker/PeoplePicker.tsx  |  4 +-
 2 files changed, 30 insertions(+), 13 deletions(-)

diff --git a/src/components/PeoplePicker/PeoplePicker.scss b/src/components/PeoplePicker/PeoplePicker.scss
index 7f57a6d38492de..76575445967e95 100644
--- a/src/components/PeoplePicker/PeoplePicker.scss
+++ b/src/components/PeoplePicker/PeoplePicker.scss
@@ -22,6 +22,7 @@
 // --------------------------------------------------
 // People Picker styles
 
+$peoplePicker-width: 340px;
 $personaItemHeight: 42px;
 
 
@@ -131,7 +132,7 @@ $personaItemHeight: 42px;
   border: 1px solid $ms-color-neutralTertiaryAlt;
   display: none;
   margin-bottom: -1px;
-  min-width: 340px;
+  width: $peoplePicker-width;
   padding-top: 9px;
   position: absolute;
   z-index: ($ms-zIndex-PeoplePicker + $ms-zIndex-middle);
@@ -183,6 +184,8 @@ $personaItemHeight: 42px;
   position: relative;
 
   .ms-Persona {
+    width: inherit;
+
     &:hover {
       @extend .ms-Persona.ms-Persona--darkText;
       cursor: pointer;
@@ -198,6 +201,7 @@ $personaItemHeight: 42px;
   // Ensure the width is 100%.
   .ms-Persona-details {
     width: 100%;
+    @include padding-right(28px);
   }
 }
 
@@ -236,8 +240,16 @@ $personaItemHeight: 42px;
 //== Modifier: Selectable Persona
 //
 .ms-PeoplePicker-resultBtn--selected {
-  background-color: $ms-color-themeLighter;
+  background-color: $ms-color-neutralQuaternaryAlt;
   outline: 1px solid transparent;
+
+  &:hover {
+    background-color: $ms-color-neutralQuaternary;
+  }
+
+  .ms-PeoplePicker-resultAction:hover {
+      background-color: $ms-color-neutralTertiaryAlt
+  }
 }
 
 .ms-PeoplePicker-peopleListBtn {
@@ -260,6 +272,7 @@ $personaItemHeight: 42px;
   top: 0;
   width: 30px;
   text-align: center;
+  padding: 0px;
 
   @media (min-width: $ms-screen-md-min) {
     height: 48px;
@@ -271,12 +284,12 @@ $personaItemHeight: 42px;
   }
 
   &:hover {
-    background-color: $ms-color-neutralTertiaryAlt;
+    background-color: $ms-color-neutralQuaternaryAlt;
     outline: 1px solid transparent;
   }
 
   &:active {
-    background-color: $ms-color-themeTertiary;
+    background-color: $ms-color-neutralQuaternary;
   }
 }
 
@@ -356,14 +369,22 @@ $personaItemHeight: 42px;
   text-align: left;
 
   &:hover {
-      background-color: $ms-color-neutralLight;
-      cursor: pointer;
+    background-color: $ms-color-neutralLight;
+    cursor: pointer;
+
+    .ms-PeoplePicker-searchMoreSecondary {
+      color: $ms-color-neutralDark;
+    }
   }
 
   // TODO: Works in Chrome, but not working in IE
   &:focus,
   &:active {
-      background-color: $ms-color-themeLight;
+    background-color: $ms-color-neutralQuaternaryAlt;
+
+    .ms-PeoplePicker-searchMoreSecondary {
+      color: $ms-color-black;
+    }
   }
 }
 
@@ -438,10 +459,6 @@ $personaItemHeight: 42px;
 
   .ms-PeoplePicker-resultAction {
     height: 32px;
-
-    .ms-Icon {
-      margin-top: -8px;
-    }
   }
 
   .ms-PeoplePicker-searchMore {
diff --git a/src/components/PeoplePicker/PeoplePicker.tsx b/src/components/PeoplePicker/PeoplePicker.tsx
index 3cba1558b67b6d..9a76c4f9f6d7be 100644
--- a/src/components/PeoplePicker/PeoplePicker.tsx
+++ b/src/components/PeoplePicker/PeoplePicker.tsx
@@ -683,14 +683,14 @@ export class PeoplePicker extends React.Component<IPeoplePickerProps, IPeoplePic
         className='ms-PeoplePicker-result'
         key={id}
         ref={ isSelected ? 'selectedSearchResult' : null }
+        onMouseDown={ () => { this._addPersonaToSelectedList(personaInfo); }}
+        onClick={ () => { this._addPersonaToSelectedList(personaInfo); }}
       >
         <div role='button' className={ buttonClassName }>
           <Persona
             { ...personaInfo }
             presence={ personaInfo.presence ? personaInfo.presence : PersonaPresence.online }
             size={ personaSize }
-            onMouseDown={ () => { this._addPersonaToSelectedList(personaInfo); }}
-            onClick={ () => { this._addPersonaToSelectedList(personaInfo); }}
           />
           { type !== PeoplePickerType.memberList ?
             <button

From 5d98b70085db536e425120f2d4b89b794ebf0577 Mon Sep 17 00:00:00 2001
From: Aniket Handa <anihan@microsoft.com>
Date: Fri, 26 Aug 2016 21:32:30 -0700
Subject: [PATCH 2/2] Fixing hover spacing issue, RTL issues

---
 src/components/PeoplePicker/PeoplePicker.scss | 52 ++++++++++---------
 src/components/PeoplePicker/PeoplePicker.tsx  |  4 +-
 2 files changed, 30 insertions(+), 26 deletions(-)

diff --git a/src/components/PeoplePicker/PeoplePicker.scss b/src/components/PeoplePicker/PeoplePicker.scss
index 76575445967e95..f7da0d8676ee07 100644
--- a/src/components/PeoplePicker/PeoplePicker.scss
+++ b/src/components/PeoplePicker/PeoplePicker.scss
@@ -22,7 +22,8 @@
 // --------------------------------------------------
 // People Picker styles
 
-$peoplePicker-width: 340px;
+$peoplePickerResults-maxWidth: 340px;
+$peoplePicker-rowHeight: 56px;
 $personaItemHeight: 42px;
 
 
@@ -132,10 +133,14 @@ $personaItemHeight: 42px;
   border: 1px solid $ms-color-neutralTertiaryAlt;
   display: none;
   margin-bottom: -1px;
-  width: $peoplePicker-width;
+  width: 100%;
   padding-top: 9px;
   position: absolute;
   z-index: ($ms-zIndex-PeoplePicker + $ms-zIndex-middle);
+
+  @media (min-width: $ms-screen-md-min) {
+    width: $peoplePickerResults-maxWidth;
+  }
 }
 
 // Show the results area when the people picker is active
@@ -211,16 +216,15 @@ $personaItemHeight: 42px;
   @include button-reset();
   position: relative;
   box-sizing: border-box;
-  height: 34px;
+  height: $personaItemHeight;
   width: 100%;
   background: none;
   border: 0;
-  text-align: left;
-  @include margin(8px, 0, 0, 0);
-  @include padding(0, 0, 0, 16px);
+  @include text-align(left);
+  @include padding(4px, 0, 4px, 16px);
 
   @media (min-width: $ms-screen-md-min) {
-    height: 48px;
+    height: $peoplePicker-rowHeight;
   }
 
   &:hover {
@@ -233,7 +237,7 @@ $personaItemHeight: 42px;
   }
 
   &.ms-PeoplePicker-resultBtn--compact {
-    height: 32px;
+    height: 40px;
   }
 }
 
@@ -275,7 +279,7 @@ $personaItemHeight: 42px;
   padding: 0px;
 
   @media (min-width: $ms-screen-md-min) {
-    height: 48px;
+    height: $peoplePicker-rowHeight;
   }
 
   .ms-Icon {
@@ -326,7 +330,7 @@ $personaItemHeight: 42px;
     width: 32px;
     height: 32px;
     top: 20px;
-    left: 20px;
+    @include left(20px);
     display: none;
 
     .ms-Spinner-circle {
@@ -365,8 +369,8 @@ $personaItemHeight: 42px;
   width: 100%;
   padding: 0;
   margin: 0;
-  padding-left: 70px;
-  text-align: left;
+  @include padding-left(70px);
+  @include text-align(left);
 
   &:hover {
     background-color: $ms-color-neutralLight;
@@ -390,7 +394,7 @@ $personaItemHeight: 42px;
 
 .ms-PeoplePicker-searchMoreBtn.ms-PeoplePicker-searchMoreBtn--compact {
   height: 49px;
-  padding-left: 50px;
+  @include padding-left(50px);
 }
 
 // Default search icon
@@ -398,7 +402,7 @@ $personaItemHeight: 42px;
   height: 70px;
   position: absolute;
   top: 0;
-  left: 0;
+  @include left(0);
   width: 70px;
 
   .ms-Icon {
@@ -458,7 +462,7 @@ $personaItemHeight: 42px;
   }
 
   .ms-PeoplePicker-resultAction {
-    height: 32px;
+    height: 40px;
   }
 
   .ms-PeoplePicker-searchMore {
@@ -468,7 +472,7 @@ $personaItemHeight: 42px;
       width: 28px;
       height: 28px;
       top: 12px;
-      left: 12px;
+      @include left(12px);
     }
 
   }
@@ -576,11 +580,11 @@ $personaItemHeight: 42px;
       }
 
       .ms-Persona-presence {
-        left: 19px;
+        @include left(19px);
       }
 
       .ms-Persona-details {
-        padding-left: 8px;
+        @include padding-left(8px);
       }
 
       .ms-Persona-primaryText {
@@ -628,30 +632,30 @@ $personaItemHeight: 42px;
   .ms-PeoplePicker-searchMore,
   .ms-PeoplePicker-searchMoreBtn,
   .ms-PeoplePicker-searchMoreIcon {
-    height: 48px;
+    height: $peoplePicker-rowHeight;
   }
 
   .ms-PeoplePicker-searchMoreBtn {
-    padding-left: 48px;
+    @include padding-left($peoplePicker-rowHeight);
   }
 
   .ms-PeoplePicker-searchMoreIcon {
-    width: 48px;
+    width: $peoplePicker-rowHeight;
   }
 
   .ms-PeoplePicker-searchMorePrimary {
     font-size: $ms-font-size-s;
-    line-height: 48px;
+    line-height: $peoplePicker-rowHeight;
   }
 
   .ms-PeoplePicker-searchMoreIcon .ms-Icon {
     top: 0;
-    line-height: 48px;
+    line-height: $peoplePicker-rowHeight;
   }
 
   .ms-Spinner {
     top: 16px;
-    left: 14px;
+    @include left(14px);
     height: 20px;
     width: 20px;
   }
diff --git a/src/components/PeoplePicker/PeoplePicker.tsx b/src/components/PeoplePicker/PeoplePicker.tsx
index 9a76c4f9f6d7be..3cba1558b67b6d 100644
--- a/src/components/PeoplePicker/PeoplePicker.tsx
+++ b/src/components/PeoplePicker/PeoplePicker.tsx
@@ -683,14 +683,14 @@ export class PeoplePicker extends React.Component<IPeoplePickerProps, IPeoplePic
         className='ms-PeoplePicker-result'
         key={id}
         ref={ isSelected ? 'selectedSearchResult' : null }
-        onMouseDown={ () => { this._addPersonaToSelectedList(personaInfo); }}
-        onClick={ () => { this._addPersonaToSelectedList(personaInfo); }}
       >
         <div role='button' className={ buttonClassName }>
           <Persona
             { ...personaInfo }
             presence={ personaInfo.presence ? personaInfo.presence : PersonaPresence.online }
             size={ personaSize }
+            onMouseDown={ () => { this._addPersonaToSelectedList(personaInfo); }}
+            onClick={ () => { this._addPersonaToSelectedList(personaInfo); }}
           />
           { type !== PeoplePickerType.memberList ?
             <button