Dropdown placeholder text

common/changes/master_2017-05-02-22-52.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Dropdown: New placeHolder text feature allows dropdown to act more like a traditional input field",
+      "type": "minor"
+    }
+  ],
+  "email": "micahgodbolt@gmail.com"
+}

packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.Props.ts

@@ -24,6 +24,11 @@ export interface IDropdownProps extends React.Props<Dropdown> {
    */
   label?: string;
 
+  /**
+   * Input placeholder text. Displayed until option is selected.
+   */
+  placeHolder?: string;
+
   /**
   * Aria Label for the Dropdown for screen reader users.
   */
@@ -60,6 +65,11 @@ export interface IDropdownProps extends React.Props<Dropdown> {
    */
   onChanged?: (option: IDropdownOption, index?: number) => void;
 
+  /**
+   * Optional custom renderer for placeholder text
+   */
+  onRenderPlaceHolder?: IRenderFunction<IDropdownProps>;
+
   /**
    * Optional custom renderer for selected option displayed in input
    */

packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.scss

@@ -56,6 +56,9 @@ $DropDown-item-height: 36px;
         color: $ms-color-contrastWhiteSelected;
       }
     }
+    .titleIsPlaceHolder {
+      color: $ms-color-neutralTertiary;
+    }
   }
 
   &:hover,
@@ -155,6 +158,9 @@ $DropDown-item-height: 36px;
   &.titleIsError {
         border-color: $ms-color-error;
     }
+  &.titleIsPlaceHolder {
+    color: $ms-color-neutralTertiary;
+  }
 }
 
 .panel {

packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.tsx

@@ -141,14 +141,18 @@ export class Dropdown extends BaseComponent<IDropdownInternalProps, IDropdownSta
             id={ id + '-option' }
             className={ css(
               'ms-Dropdown-title', styles.title,
+              !selectedOption && styles.titleIsPlaceHolder,
               (errorMessage && errorMessage.length > 0 ? styles.titleIsError : null))
             }
             key={ selectedIndex }
             aria-atomic={ true }
           >
-            { selectedOption && (
-              onRenderTitle(selectedOption, this._onRenderTitle)
-            ) }
+            { // If option is selected render title, otherwise render the placeholder text
+              selectedOption ? (
+                onRenderTitle(selectedOption, this._onRenderTitle)
+              ) :
+                this._onRenderPlaceHolder(this.props)
+            }
           </span>
           <i className={ css('ms-Dropdown-caretDown ms-Icon ms-Icon--ChevronDown', styles.caretDown) } role='presentation' aria-hidden='true'></i>
         </div>
@@ -196,6 +200,15 @@ export class Dropdown extends BaseComponent<IDropdownInternalProps, IDropdownSta
     return <span>{ item.text }</span>;
   }
 
+  // Render placeHolder text in dropdown input
+  @autobind
+  private _onRenderPlaceHolder(props): JSX.Element {
+    if (!props.placeHolder) {
+      return null;
+    }
+    return <span>{ props.placeHolder }</span>;
+  }
+
   // Render Callout or Panel container and pass in list
   @autobind
   private _onRenderContainer(props: IDropdownProps): JSX.Element {

packages/office-ui-fabric-react/src/components/Dropdown/examples/Dropdown.Basic.Example.tsx

@@ -18,6 +18,7 @@ export class DropdownBasicExample extends React.Component<any, any> {
       <div className='ms-DropdownBasicExample'>
 
         <Dropdown
+          placeHolder='Select an Option'
           label='Basic uncontrolled example:'
           id='Basicdrop1'
           ariaLabel='Basic dropdown example'