New Component: ComboBox

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>
+    );
+  }
+}

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

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

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

@@ -0,0 +1,56 @@
+import { IDropdownOption, IDropdownProps } from '../../Dropdown';
+import { IIconProps } from '../../Icon';
+
+export interface IComboBox {
+
+}
+
+export interface IComboBoxProps extends IDropdownProps {
+
+  /**
+   * Collection of options for this ComboBox
+   */
+  options?: IComboBoxOption[];
+
+  /**
+   * 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?: IComboBoxOption, 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?: () => IComboBoxOption[] | PromiseLike<IComboBoxOption[]>;
+
+  /**
+   * 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;
+}
+
+export interface IComboBoxOption extends IDropdownOption {
+  /**
+   * Font-family associated with this option.
+   */
+  fontFamily?: string;
+}

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

@@ -0,0 +1,266 @@
+@import '../../common/common';
+
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// ComboBox styles
+
+$ComboBox-selectedItem-bg: $ms-color-neutralQuaternaryAlt;
+$ComboBox-selectedItem-hover-bg: $ms-color-neutralLighter;
+$ComboBox-height: 32px;
+$ComboBox-caretDown-width: 32px;
+$ComboBox-item-height: 36px;
+
+// Mixin for high contrast mode link states
+@mixin highContrastListItemState {
+  @media screen and (-ms-high-contrast: active) {
+    background-color: $ms-color-contrastBlackSelected;
+    border-color: $ms-color-contrastBlackSelected;
+    color: $ms-color-black;
+
+    &:focus {
+      border-color: $ms-color-black;
+    }
+  }
+
+  @media screen and (-ms-high-contrast: black-on-white) {
+    background-color: $ms-color-contrastWhiteSelected;
+    border-color: $ms-color-contrastWhiteSelected;
+    color: $ms-color-white;
+  }
+
+  @include highContrastAdjust();
+}
+
+.root {
+  @include ms-normalize;
+  @include ms-font-m;
+  color: $ms-color-neutralPrimary;
+
+  margin-bottom: 10px;
+  position: relative;
+  outline: 0;
+  user-select: none;
+  background: $ms-color-white;
+  border: 1px solid $ms-color-neutralTertiaryAlt;
+  cursor: text ;
+  display: block;
+  height: $ComboBox-height;
+  line-height: $ComboBox-height - 2px; // height minus the border
+  @include padding(0, $ComboBox-caretDown-width, 0, 0);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+
+
+
+  &:hover,
+  &.focused {
+    &.wrapper
+      {
+        border-color: $ms-color-themePrimary;
+
+        @media screen and (-ms-high-contrast: active) {
+          color: $ms-color-contrastBlackSelected;
+        }
+
+        @media screen and (-ms-high-contrast: black-on-white) {
+          color: $ms-color-contrastWhiteSelected;
+        }
+    }
+
+    &.readOnly {
+      .input,
+      .caretDown {
+        background-color: $ms-color-neutralLighter;
+      }
+    }
+  }
+
+  &.wrapperForError {
+      border-color: $ms-color-error;
+  }
+
+  :global(.ms-Label) {
+    display: inline-block;
+    margin-bottom: 8px;
+  }
+}
+
+//== State: A disabled ComboBox
+.root.rootIsDisabled {
+  &.wrapper,
+  .input,
+  .caretDown {
+    background-color: $ms-color-neutralLighter;
+    border-color: $ms-color-neutralLighter;
+    color: $ms-color-neutralTertiary;
+    cursor: default;
+
+    @media screen and (-ms-high-contrast: active) {
+      border-color: $ms-color-contrastBlackDisabled;
+      color: $ms-color-contrastBlackDisabled;
+    }
+
+    @media screen and (-ms-high-contrast: black-on-white) {
+      border-color: $ms-color-contrastWhiteDisabled;
+      color: $ms-color-contrastWhiteDisabled;
+    }
+  }
+}
+
+.input {
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  border: none;
+  outline: none;
+  font: inherit;
+  text-overflow: ellipsis;
+  padding-left: 12px;
+
+  &:hover {
+    background-color: $ms-color-neutralLight;
+    color: $ms-color-neutralPrimary;
+  }
+
+  &::selection {
+    background-color: $ms-color-neutralSecondaryAlt;
+    color: $ms-color-white;
+  }
+}
+
+.caretDown {
+  color: $ms-color-neutralDark;
+  font-size: $ms-icon-size-s;
+  position: absolute;
+  height: $ComboBox-height;
+  line-height: $ComboBox-height - 2px; // height minus the border
+  width: $ComboBox-caretDown-width;
+  text-align: center;
+  cursor: default;
+
+  &:hover{
+    background-color: $ms-color-neutralQuaternaryAlt;
+  }
+
+  &:active{
+    background-color: $ms-color-neutralTertiaryAlt;
+  }
+}
+
+.callout {
+  box-shadow: 0 0px 5px 0px rgba(0, 0, 0, 0.4);
+  border: 1px solid $ms-color-neutralLight;
+  max-height: 576px;
+}
+
+.errorMessage{
+    color: $ms-color-error;
+  &::before {
+    content: '* ';
+  }
+}
+
+.items {
+  display: block;
+}
+
+// Container for the ComboBox items, displayed as a panel on small screens.
+.item {
+  background: transparent;
+  box-sizing: border-box;
+  cursor: pointer;
+  display: block;
+  width: 100%;
+  height: auto;
+  min-height: $ComboBox-item-height;
+  line-height: 20px;
+  padding: 5px 16px;
+  position: relative;
+  border: 1px solid transparent;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  text-align: left;
+
+  @media screen and (-ms-high-contrast: active) {
+    border-color: $ms-color-black;
+  }
+
+  @media screen and (-ms-high-contrast: black-on-white) {
+    border-color: $ms-color-white;
+  }
+
+  &:hover {
+    background-color: $ComboBox-selectedItem-hover-bg;
+    color: $ms-color-black;
+
+    @include highContrastListItemState;
+  }
+
+  @include focus-border();
+
+  &:focus {
+    background-color: $ms-color-neutralLighter;
+  }
+
+  &:active {
+    background-color: $ComboBox-selectedItem-hover-bg;
+    color: $ms-color-black;
+  }
+
+  &.itemIsDisabled {
+    background: $ms-color-white;
+    color: $ms-color-neutralTertiary;
+    cursor: default;
+  }
+  :global(.ms-Button-flexContainer) {
+    justify-content: flex-start;
+  }
+}
+
+// A selected ComboBox item
+.item.itemIsSelected {
+  background-color: $ComboBox-selectedItem-bg;
+  color: $ms-color-black;
+
+  &:hover {
+    background-color: $ComboBox-selectedItem-bg;
+  }
+
+  @include focus-border();
+
+  @include highContrastListItemState;
+}
+
+.header {
+  @include ms-font-m;
+  font-weight: $ms-font-weight-semibold;
+  color: $ms-color-themePrimary;
+  background: none;
+  border: none;
+  height: $ComboBox-item-height;
+  line-height: $ComboBox-item-height;
+  cursor: default;
+  padding: 0px 16px;
+  user-select: none;
+  @include text-align(left);
+}
+
+.divider {
+  height: 1px;
+  background-color: $dividerColor;
+}
+
+.optionText {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  min-width: 0px;
+  max-width: 100%;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  margin: 1px;
+}