diff --git a/common/changes/master_2017-05-02-22-52.json b/common/changes/master_2017-05-02-22-52.json new file mode 100644 index 00000000000000..d5eb7237a25aab --- /dev/null +++ b/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" +} diff --git a/packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.Props.ts b/packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.Props.ts index 09bb6e2e6356a6..69bab7d15863b7 100644 --- a/packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.Props.ts +++ b/packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.Props.ts @@ -24,6 +24,11 @@ export interface IDropdownProps extends React.Props { */ 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 { */ onChanged?: (option: IDropdownOption, index?: number) => void; + /** + * Optional custom renderer for placeholder text + */ + onRenderPlaceHolder?: IRenderFunction; + /** * Optional custom renderer for selected option displayed in input */ diff --git a/packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.scss b/packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.scss index bce83a75c16a5f..898b47d42fd98f 100644 --- a/packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.scss +++ b/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 { diff --git a/packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.tsx b/packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.tsx index e406596da924b0..111a7b909b3a40 100644 --- a/packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.tsx +++ b/packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.tsx @@ -141,14 +141,18 @@ export class Dropdown extends BaseComponent 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) + } @@ -196,6 +200,15 @@ export class Dropdown extends BaseComponent{ item.text }; } + // Render placeHolder text in dropdown input + @autobind + private _onRenderPlaceHolder(props): JSX.Element { + if (!props.placeHolder) { + return null; + } + return { props.placeHolder }; + } + // Render Callout or Panel container and pass in list @autobind private _onRenderContainer(props: IDropdownProps): JSX.Element { diff --git a/packages/office-ui-fabric-react/src/components/Dropdown/examples/Dropdown.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/Dropdown/examples/Dropdown.Basic.Example.tsx index 66524225d4f129..ee753c5ff4f6f6 100644 --- a/packages/office-ui-fabric-react/src/components/Dropdown/examples/Dropdown.Basic.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Dropdown/examples/Dropdown.Basic.Example.tsx @@ -18,6 +18,7 @@ export class DropdownBasicExample extends React.Component {