New Component: ComboBox

apps/fabric-website/src/components/App/AppState.tsx

@@ -129,6 +129,13 @@ export const AppState: IAppState = {
           component: () => <LoadingComponent title='ColorPicker' />,
           getComponent: cb => require.ensure([], (require) => cb(require<any>('../../pages/Components/ColorPickerComponentPage').ColorPickerComponentPage))
         },
+        {
+          title: 'ComboBox',
+          url: '#/components/ComboBox',
+          component: () => <LoadingComponent title='ComboBox' />,
+          getComponent: cb => require.ensure([], (require) => cb(require<any>('../../pages/Components/ComboBoxComponentPage').ComboBoxComponentPage))
+
+        },
         {
           title: 'CommandBar',
           url: '#/components/commandbar',
@@ -401,4 +408,4 @@ export const AppState: IAppState = {
       getComponent: cb => require.ensure([], (require) => cb(require<any>('../../pages/Interstitials/FabricIOSPage').FabricIOSPage))
     }
   ]
-};
+};

apps/fabric-website/src/pages/Components/ComboBoxComponentPage.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { ComboBoxPage } from 'office-ui-fabric-react/lib/components/ComboBox/ComboBoxPage';
+import { PageHeader } from '../../components/PageHeader/PageHeader';
+import { ComponentPage } from '../../components/ComponentPage/ComponentPage';
+
+export class ComboBoxComponentPage extends React.Component<any, any> {
+  public render() {
+    return (
+      <div ref='pageElement'>
+        <ComponentPage>
+          <PageHeader pageTitle='ComboBox' backgroundColor='#038387'
+            links={
+              [
+                {
+                  'text': 'Overview',
+                  'location': 'Overview'
+                },
+                {
+                  'text': 'Variants',
+                  'location': 'Variants'
+                },
+                {
+                  'text': 'Implementation',
+                  'location': 'Implementation'
+                }
+              ]
+            } />
+          <ComboBoxPage isHeaderVisible={ false } />
+        </ComponentPage>
+      </div>
+    );
+  }
+}

common/changes/@uifabric/fabric-website/miwhea-website-update-header_2017-06-09-19-15.json~HEAD

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/fabric-website",
+      "comment": "Fix issues with dev.office.com header",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@uifabric/fabric-website",
+  "email": "[email protected]"
+}

common/changes/@uifabric/fabric-website/miwhea-website-update-header_2017-06-09-19-15.json~b0ee1f6c9e5f0d9b31c060d92998e0c43af504d4

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/fabric-website",
+      "comment": "Fix issues with dev.office.com header",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@uifabric/fabric-website",
+  "email": "[email protected]"
+}

packages/office-ui-fabric-react/src/ComboBox.ts

@@ -0,0 +1 @@
+export * from './components/ComboBox/index';

packages/office-ui-fabric-react/src/SelectableOption.ts

@@ -0,0 +1 @@
+export * from './utilities/selectableOption/index';

packages/office-ui-fabric-react/src/VisualTestState.ts

@@ -8,6 +8,7 @@ export const VisualTestState: IVisualTestState = {
     './Button/ButtonPage.visualtest',
     './Checkbox/CheckboxPage.visualtest',
     './ChoiceGroup/ChoiceGroupPage.visualtest',
+    './ComboBox/ComboBoxPage.visualtest',
     './CommandBar/CommandBarPage.visualtest',
     './ContextualMenu/ContextualMenuPage.visualtest',
     './DetailsList/DetailsListPage.visualtest',

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

@@ -0,0 +1,59 @@
+import { IIconProps } from '../../Icon';
+import { ISelectableOption } from '../../utilities/selectableOption/SelectableOption.Props';
+import { ISelectableDroppableTextProps } from '../../utilities/selectableOption/SelectableDroppableText.Props';
+
+export interface IComboBox {
+  /**
+ * Sets focus to the input in the comboBox
+ * @returns True if focus could be set, false if no operation was taken.
+ */
+  focus(): boolean;
+}
+
+export interface IComboBoxProps extends ISelectableDroppableTextProps<IComboBox> {
+  /**
+   * Optional callback to access the IComboBox interface. Use this instead of ref for accessing
+   * the public methods and properties of the component.
+   */
+  componentRef?: (component: IComboBox) => void;
+
+  /**
+   * Collection of options for this ComboBox
+   */
+  options?: ISelectableOption[];
+
+  /**
+   * Callback issues when either:
+   * 1) the selected option changes
+   * 2) a manually edited value is submitted. In this case there may not be a matched option if allowFreeform is also true
+   *    (and hence only value would be true, the other parameter would be null in this case)
+   */
+  onChanged?: (option?: ISelectableOption, index?: number, value?: string) => void;
+
+  /**
+   * Callback issued when the options should be resolved, if they have been updated or
+   * if they need to be passed in the first time
+   */
+  onResolveOptions?: (options: ISelectableOption[]) => ISelectableOption[] | PromiseLike<ISelectableOption[]>;
+
+  /**
+   * Whether the ComboBox is free form, meaning that the user input is not bound to provided items. Defaults to false.
+   */
+  allowFreeform?: boolean;
+
+  /**
+   * Whether the ComboBox auto completes. As the user is inputing text, it will be suggested potential matches from the list of items. If
+   * the combo box is expanded, this will also scroll to the suggested item, and give it a selected style. Defaults to false.
+   */
+  autoComplete?: boolean;
+
+  /**
+   * Value to show in the input, does not have to map to a combobox option
+   */
+  value?: string;
+
+  /**
+   * The IconProps to use for the button aspect of the combobox
+   */
+  buttonIconProps?: IIconProps;
+}