Fix suggestion header/footer for more flexible rendering

common/changes/@uifabric/experiments/amyngu-suggestionCssChanges_2018-04-03-21-34.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/experiments",
+      "comment": "fix suggestion header/footer for more flexibile rendering",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@uifabric/experiments",
+  "email": "amyngu@microsoft.com"
+}

packages/experiments/src/components/ExtendedPicker/examples/ExtendedPeoplePicker.Basic.Example.scss

@@ -1,3 +1,5 @@
+@import '~office-ui-fabric-react/src/common/common';
+
 :global {
   .ms-PeoplePicker {
     width: 100%;
@@ -7,3 +9,15 @@
     width: 208px;
   }
 }
+
+.headerItem {
+  border-bottom: 1px solid $ms-color-neutralLight;
+  height: 30px;
+  padding-left: 12px;
+}
+
+.footerItem {
+  border-top: 1px solid $ms-color-neutralLight;
+  height: 60px;
+  padding-left: 12px;
+}

packages/experiments/src/components/ExtendedPicker/examples/ExtendedPeoplePicker.Basic.Example.tsx

@@ -10,11 +10,14 @@ import { ExtendedPeoplePicker } from '../PeoplePicker/ExtendedPeoplePicker';
 import { PrimaryButton } from 'office-ui-fabric-react/lib/Button';
 import { IPersonaWithMenu } from 'office-ui-fabric-react/lib/components/pickers/PeoplePicker/PeoplePickerItems/PeoplePickerItem.types';
 import { people, mru, groupOne, groupTwo } from './PeopleExampleData';
-import './ExtendedPeoplePicker.Basic.Example.scss';
 import { SuggestionsStore, FloatingPeoplePicker, IBaseFloatingPickerProps, IBaseFloatingPickerSuggestionProps } from '../../FloatingPicker';
 import { IBaseSelectedItemsListProps, ISelectedPeopleProps, SelectedPeopleList, IExtendedPersonaProps }
   from '../../SelectedItemsList';
 
+import * as stylesImport from './ExtendedPeoplePicker.Basic.Example.scss';
+// tslint:disable-next-line:no-any
+const styles: any = stylesImport;
+
 export interface IPeoplePickerExampleState {
   peopleList: IPersonaProps[];
   mostRecentlyUsed: IPersonaProps[];
@@ -48,7 +51,7 @@ export class ExtendedPeoplePickerTypesExample extends BaseComponent<{}, IPeopleP
       headerItemsProps: [{
         renderItem: () => {
           return (
-            <div>Use this address: { this._picker
+            <div className={ styles.headerItem }>Use this address: { this._picker
               && this._picker.inputElement
               && this._picker.inputElement ? this._picker.inputElement.value : '' }</div>
           );
@@ -67,7 +70,7 @@ export class ExtendedPeoplePickerTypesExample extends BaseComponent<{}, IPeopleP
       {
         renderItem: () => {
           return (
-            <div>Suggested Contacts</div>
+            <div className={ styles.headerItem }>Suggested Contacts</div>
           );
         },
         shouldShow: this._shouldShowSuggestedContacts,
@@ -76,7 +79,7 @@ export class ExtendedPeoplePickerTypesExample extends BaseComponent<{}, IPeopleP
       footerItemsProps: [{
         renderItem: () => {
           return (
-            <div>No results</div>
+            <div className={ styles.footerItem }>No results</div>
           );
         },
         shouldShow: () => {
@@ -87,7 +90,7 @@ export class ExtendedPeoplePickerTypesExample extends BaseComponent<{}, IPeopleP
         }
       },
       {
-        renderItem: () => { return (<div>Search for more</div>); },
+        renderItem: () => { return (<div className={ styles.footerItem }>Search for more</div>); },
         onExecute: () => { this.setState({ searchMoreAvailable: false }); },
         shouldShow: () => { return this.state.searchMoreAvailable && !this._shouldShowSuggestedContacts(); }
       }],

packages/experiments/src/components/FloatingPicker/BaseFloatingPicker.tsx

@@ -138,6 +138,10 @@ export class BaseFloatingPicker<T, P extends IBaseFloatingPickerProps<T>> extend
     }
   }
 
+  public updateSuggestions(suggestions: T[]): void {
+    this.suggestionStore.updateSuggestions(suggestions);
+  }
+
   public render(): JSX.Element {
     let { className } = this.props;
     return (
@@ -199,10 +203,6 @@ export class BaseFloatingPicker<T, P extends IBaseFloatingPickerProps<T>> extend
     this.forceUpdate();
   }
 
-  protected updateSuggestions(suggestions: T[]): void {
-    this.suggestionStore.updateSuggestions(suggestions);
-  }
-
   protected updateValue(updatedValue: string): void {
     if (this.props.onInputChanged) {
       (this.props.onInputChanged as (filter: string) => void)(updatedValue);

packages/experiments/src/components/FloatingPicker/Suggestions/Suggestions.scss

@@ -4,7 +4,6 @@
   overflow-y: auto;
   overflow-x: hidden;
   max-height: 300px;
-  border-bottom: 1px solid $ms-color-neutralLight;
 
   :global(.ms-Suggestion-item) {
     &:hover {

packages/experiments/src/components/FloatingPicker/Suggestions/SuggestionsControl.scss

@@ -10,11 +10,8 @@
   border: 0;
   cursor: pointer;
   margin: 0;
-  @include ms-padding-left(8px);
+  padding: 0px;
   position: relative;
-  border-top: 1px solid $ms-color-neutralLight;
-  border-bottom: 1px solid $ms-color-neutralLight;
-  height: 40px;
   @include ms-text-align(left);
   width: 100%;
   font-size: 12px;
@@ -48,11 +45,7 @@
 }
 
 .suggestionsTitle {
-  padding: 0 12px;
   font-size: $ms-font-size-s;
-  line-height: 40px;
-  border-top: 1px solid $ms-color-neutralLight;
-  border-bottom: 1px solid $ms-color-neutralLight;
 }
 
 .suggestionsSpinner {

packages/experiments/src/components/FloatingPicker/Suggestions/SuggestionsControl.tsx

@@ -4,7 +4,7 @@ import {
   css,
   KeyCodes
 } from '../../../Utilities';
-import { CommandButton, IButton } from 'office-ui-fabric-react/lib/Button';
+import { IButton } from 'office-ui-fabric-react/lib/Button';
 import { Spinner } from 'office-ui-fabric-react/lib/Spinner';
 import { ISuggestionModel } from 'office-ui-fabric-react/lib/Pickers';
 import {
@@ -42,7 +42,7 @@ export class SuggestionsHeaderFooterItem extends BaseComponent<ISuggestionsHeade
     return (
       onExecute ?
         (
-          <CommandButton
+          <button
             id={ id }
             onClick={ onExecute }
             className={ css(
@@ -54,7 +54,7 @@ export class SuggestionsHeaderFooterItem extends BaseComponent<ISuggestionsHeade
               }) }
           >
             { renderItem() }
-          </CommandButton>
+          </button>
         ) :
         (
           <div