Refactoring module css for PeoplePicker.

common/changes/luh-module-css-people-picker-items_2017-02-22-03-05.json

@@ -0,0 +1,8 @@
+{
+  "changes": [{
+    "packageName": "office-ui-fabric-react",
+    "comment": "Update People Picker with module css.",
+    "type": "patch"
+  }],
+  "email": "luh@microsoft.com"
+}

packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/PeoplePicker.scss

@@ -1,30 +1,22 @@
 @import '../../../common/common';
 
-:global {
-
-  .ms-PickerPersona-Container {
-    display: inline-block;
-  }
-
-  .ms-Picker-MenuItem.ms-result-content{
-    display: table-row;
-    .ms-result-item {
-      display: table-cell;
-      vertical-align: bottom;
-    }
+.resultContent {
+  display: table-row;
+  .resultItem {
+    display: table-cell;
+    vertical-align: bottom;
   }
+}
 
-  .ms-PeoplePicker-Persona {
-    width: 180px;
-
-    .ms-Persona-details {
-      width: 100%;
-    }
+.peoplePickerPersona {
+  width: 180px;
+   :global(.ms-Persona-details) {
+    width: 100%;
   }
+}
 
-  .ms-PeoplePicker {
-    .ms-BasePicker-text {
-      min-height: 40px;
-    }
+.peoplePicker {
+   :global(.ms-BasePicker-text) {
+    min-height: 40px;
   }
 }

packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/PeoplePickerItems/PickerItemsDefault.scss

@@ -1,42 +1,35 @@
 @import '../../../../common/common';
 
-:global {
-  .ms-PickerPersona-container {
-    @include focus-border();
-
-    display: inline-flex;
-    align-items: center;
-    background: $ms-color-neutralLighter;
-    margin: 1px;
-    cursor: default;
-    user-select: none;
-    max-width: 100%;
-
+.personaContainer {
+  @include focus-border();
+  display: inline-flex;
+  align-items: center;
+  background: $ms-color-neutralLighter;
+  margin: 1px;
+  cursor: default;
+  user-select: none;
+  max-width: 100%;
+  &:hover {
+    background: $ms-color-neutralLight;
+  }
+  &.personaContainerIsSelected {
+    background: $ms-color-neutralQuaternary;
     &:hover {
-      background: $ms-color-neutralLight;
-    }
-
-    &.is-selected {
-      background: $ms-color-neutralQuaternary;
-      &:hover {
-        background: $ms-color-neutralQuaternaryAlt;
-      }
-    }
-
-    .ms-PickerItem-content {
-      flex: 0 1 auto;
-      min-width: 0px;
-      &.ms-Button {
-        flex: 0 0 auto;
-      }
+      background: $ms-color-neutralQuaternaryAlt;
     }
-
-    .ms-Persona-details {
-      flex: 0 1 auto;
+  }
+  .itemContent {
+    flex: 0 1 auto;
+    min-width: 0px;
+    &:global(.ms-Button) {
+      flex: 0 0 auto;
     }
   }
-
-  .ms-PickerItem-container {
-    display: inline-block;
+  .personaDetails {
+    flex: 0 1 auto;
   }
 }
+
+.itemContainer {
+  display: inline-block;
+}

packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/PeoplePickerItems/SelectedItemDefault.tsx

@@ -5,7 +5,7 @@ import { css } from '../../../../Utilities';
 import { Persona, PersonaSize, PersonaPresence } from '../../../../Persona';
 import { IPeoplePickerItemProps } from './PeoplePickerItem.Props';
 import { Button, ButtonType } from '../../../../Button';
-import './PickerItemsDefault.scss';
+import styles from './PickerItemsDefault.scss';
 
 export const SelectedItemDefault: (props: IPeoplePickerItemProps) => JSX.Element = (peoplePickerItemProps: IPeoplePickerItemProps) => {
   let {
@@ -16,12 +16,12 @@ export const SelectedItemDefault: (props: IPeoplePickerItemProps) => JSX.Element
   } = peoplePickerItemProps;
   return (
     <div
-      className={ css('ms-PickerPersona-container', {
-        'is-selected': selected
+      className={ css('ms-PickerPersona-container', styles.personaContainer, {
+        ['is-selected ' + styles.personaContainerIsSelected]: selected
       }) }
       data-is-focusable={ true }
       data-selection-index={ index } >
-      <div className='ms-PickerItem-content'>
+      <div className={ css('ms-PickerItem-content', styles.itemContent) } >
         <Persona
           { ...item }
           presence={ item.presence !== undefined ? item.presence : PersonaPresence.none }
@@ -32,10 +32,10 @@ export const SelectedItemDefault: (props: IPeoplePickerItemProps) => JSX.Element
         onClick={ () => { if (onRemoveItem) { onRemoveItem(); } } }
         icon={ 'Cancel' }
         buttonType={ ButtonType.icon }
-        className='ms-PickerItem-content'
+        className={ css('ms-PickerItem-content', styles.itemContent) }
         data-is-focusable={ false }
       >
       </Button>
     </div >
   );
-};
+};

packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/PeoplePickerItems/SelectedItemWithMenu.tsx

@@ -1,11 +1,13 @@
 /* tslint:disable */
 import * as React from 'react';
 /* tslint:enable */
+import { css } from '../../../../Utilities';
 import { IPeoplePickerItemWithMenuProps } from './PeoplePickerItem.Props';
 import { Persona, PersonaPresence } from '../../../../Persona';
 import { ContextualMenu, DirectionalHint } from '../../../../ContextualMenu';
 import { Button, ButtonType } from '../../../../Button';
 import { FocusZone } from '../../../../FocusZone';
+import styles from './PickerItemsDefault.scss';
 
 export interface IPeoplePickerItemState {
   contextualMenuVisible: boolean;
@@ -30,21 +32,21 @@ export class SelectedItemWithMenu extends React.Component<IPeoplePickerItemWithM
       onRemoveItem
     } = this.props;
     return (
-      <div data-is-focusable={ true } className='ms-PickerItem-container'>
-        <FocusZone className='ms-PickerPersona-container' >
-          <div className='ms-PickerItem-content'>
+      <div data-is-focusable={ true } className={ css('ms-PickerItem-container', styles.itemContainer) }>
+        <FocusZone className={ css('ms-PickerPersona-container', styles.personaContainer) } >
+          <div className={ css('ms-PickerItem-content', styles.itemContent) }>
             <Persona
               { ...item }
               presence={ item.presence !== undefined ? item.presence : PersonaPresence.none }
             />
           </div>
-          <div ref='ellipsisRef' className='ms-PickerItem-content'>
+          <div ref='ellipsisRef' className={ css('ms-PickerItem-content', styles.itemContent) }>
             <Button
               icon={ 'More' }
               buttonType={ ButtonType.icon } onClick={ this.onContextualMenu }
             />
           </div>
-          <div className='ms-PickerItem-content'>
+          <div className={ css('ms-PickerItem-content', styles.itemContent) }>
             <Button
               icon={ 'Cancel' }
               buttonType={ ButtonType.icon }
@@ -71,4 +73,4 @@ export class SelectedItemWithMenu extends React.Component<IPeoplePickerItemWithM
   private _onCloseContextualMenu(ev: Event) {
     this.setState({ contextualMenuVisible: false });
   }
-}
+}

packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/PeoplePickerItems/SuggestionItemDefault.tsx

@@ -1,16 +1,19 @@
 /* tslint:disable */
 import * as React from 'react';
 /* tslint:enable */
+import { css } from '../../../../Utilities';
 import { Persona, PersonaSize, IPersonaProps, PersonaPresence } from '../../../../Persona';
+import styles from '../PeoplePicker.scss';
+
 export const SuggestionItemNormal: (persona: IPersonaProps) => JSX.Element = (personaProps: IPersonaProps) => {
   return (
     <div className='ms-PeoplePicker-personaContent'>
       <Persona
         { ...personaProps }
         presence={ personaProps.presence !== undefined ? personaProps.presence : PersonaPresence.none }
         size={ PersonaSize.small }
-        className={ 'ms-PeoplePicker-Persona' }
-        />
+        className={ css('ms-PeoplePicker-Persona', styles.peoplePickerPersona) }
+      />
     </div>
   );
 };
@@ -22,8 +25,8 @@ export const SuggestionItemSmall: (persona: IPersonaProps) => JSX.Element = (per
         { ...personaProps }
         presence={ personaProps.presence !== undefined ? personaProps.presence : PersonaPresence.none }
         size={ PersonaSize.extraSmall }
-        className={ 'ms-PeoplePicker-Persona' }
-        />
+        className={ css('ms-PeoplePicker-Persona', styles.peoplePickerPersona) }
+      />
     </div>
   );
-};
+};