[TextField] Implemented masking

apps/todo-app/src/components/TodoForm.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { autobind, BaseComponent, IBaseProps } from 'office-ui-fabric-react/lib/Utilities';
 import { PrimaryButton } from 'office-ui-fabric-react/lib/Button';
-import { TextField, ITextField } from 'office-ui-fabric-react/lib/TextField';
+import { DefaultTextField, ITextField } from 'office-ui-fabric-react/lib/TextField';
 import * as stylesImport from './Todo.scss';
 const styles: any = stylesImport;
 import strings from './../strings';
@@ -59,7 +59,7 @@ export default class TodoForm extends BaseComponent<ITodoFormProps, ITodoFormSta
   public render(): JSX.Element {
     return (
       <form className={ styles.todoForm } onSubmit={ this._onSubmit }>
-        <TextField
+        <DefaultTextField
           className={ styles.textField }
           value={ this.state.inputValue }
           componentRef={ this._resolveRef('_textField') }

common/changes/office-ui-fabric-react/magellan-textFieldMasking_2018-01-24-01-35.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "[TextField] Inmplemented Input Masking",
+      "type": "minor"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "law@microsoft.com"
+}

packages/experiments/src/components/Form/inputs/textInput/FormTextInput.test.tsx

@@ -10,7 +10,7 @@ import { IFormProps } from '../../Form.types';
 import { DEFAULT_DEBOUNCE } from '../../FormBaseInput';
 import { FormTextInput } from './FormTextInput';
 import { IFormTextInputProps } from './FormTextInput.types';
-import { TextField } from 'office-ui-fabric-react/lib/TextField';
+import { BaseTextField } from 'office-ui-fabric-react/lib/TextField';
 
 // Utilities
 import { Validators } from '../../validators/Validators';
@@ -112,7 +112,7 @@ describe('FormTextInput Unit Tests', () => {
       ReactTestUtils.Simulate.submit(form);
 
       // Find the TextField component
-      let field = ReactTestUtils.findRenderedComponentWithType(renderedForm, TextField);
+      let field = ReactTestUtils.findRenderedComponentWithType(renderedForm, BaseTextField);
       expect(field.state.errorMessage).toBeTruthy();
       expect(result).toBeFalsy();
     });

packages/experiments/src/components/Form/inputs/textInput/FormTextInput.tsx

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { IFormTextInputProps } from './FormTextInput.types';
 import { FormBaseInput, IFormBaseInputState } from '../../FormBaseInput';
 import { IFormContext } from '../../Form';
-import { TextField, ITextFieldProps } from 'office-ui-fabric-react/lib/TextField';
+import { DefaultTextField, ITextFieldProps } from 'office-ui-fabric-react/lib/TextField';
 
 // Utilities
 import { autobind } from 'office-ui-fabric-react/lib/Utilities';
@@ -37,7 +37,7 @@ export class FormTextInput extends FormBaseInput<string, IFormTextInputProps, IF
    */
   public render(): JSX.Element {
     return (
-      <TextField
+      <DefaultTextField
         {...this.props.textFieldProps}
         key={ this.props.inputKey }
         value={ this.state.currentValue }

packages/experiments/src/components/LayoutGroup/examples/LayoutGroup.Basic.Example.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { LayoutGroup } from '../LayoutGroup';
 import { PrimaryButton } from 'office-ui-fabric-react/lib/Button';
 import { Dropdown } from 'office-ui-fabric-react/lib/Dropdown';
-import { TextField } from 'office-ui-fabric-react/lib/TextField';
+import { DefaultTextField } from 'office-ui-fabric-react/lib/TextField';
 import { ChoiceGroup } from 'office-ui-fabric-react/lib/ChoiceGroup';
 import { Checkbox } from 'office-ui-fabric-react/lib/Checkbox';
 import { Label } from 'office-ui-fabric-react/lib/Label';
@@ -37,8 +37,15 @@ export class LayoutGroupBasicExample extends React.Component<{}, {}> {
             }
           />
           <LayoutGroup layoutGap={ 20 } direction='horizontal' justify='fill'>
-            <TextField label='TextField with a placeholder' placeholder='Now I am a Placeholder' ariaLabel='Please enter text here' />
-            <TextField label='TextField with an icon' iconProps={ { iconName: 'Calendar' } } />
+            <DefaultTextField
+              label='TextField with a placeholder'
+              placeholder='Now I am a Placeholder'
+              ariaLabel='Please enter text here'
+            />
+            <DefaultTextField
+              label='TextField with an icon'
+              iconProps={ { iconName: 'Calendar' } }
+            />
           </LayoutGroup>
 
           <LayoutGroup layoutGap={ 20 } direction='horizontal' justify='fill'>

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

@@ -5,7 +5,7 @@ import {
   css
 } from '../../Utilities';
 import { IColorPickerProps } from './ColorPicker.types';
-import { TextField } from '../../TextField';
+import { DefaultTextField, ITextField } from '../../TextField';
 import { ColorRectangle } from './ColorRectangle';
 import { ColorSlider } from './ColorSlider';
 import {
@@ -35,11 +35,11 @@ export class ColorPicker extends BaseComponent<IColorPickerProps, IColorPickerSt
     alphaLabel: 'Alpha'
   };
 
-  private hexText: TextField;
-  private rText: TextField;
-  private gText: TextField;
-  private bText: TextField;
-  private aText: TextField;
+  private hexText: ITextField;
+  private rText: ITextField;
+  private gText: ITextField;
+  private bText: ITextField;
+  private aText: ITextField;
 
   constructor(props: IColorPickerProps) {
     super(props);
@@ -92,48 +92,58 @@ export class ColorPicker extends BaseComponent<IColorPickerProps, IColorPickerSt
             <tbody>
               <tr>
                 <td>
-                  <TextField
+                  <DefaultTextField
                     className={ css('ms-ColorPicker-input', styles.input) }
                     value={ color.hex }
-                    ref={ (ref) => this.hexText = ref! }
+                    /* tslint:disable:jsx-no-lambda*/
+                    componentRef={ (ref) => this.hexText = ref! }
+                    /* tslint:enable:jsx-no-lambda*/
                     onBlur={ this._onHexChanged }
                     spellCheck={ false }
                   />
                 </td>
                 <td style={ { width: '18%' } }>
-                  <TextField
+                  <DefaultTextField
                     className={ css('ms-ColorPicker-input', styles.input) }
                     onBlur={ this._onRGBAChanged }
                     value={ String(color.r) }
-                    ref={ (ref) => this.rText = ref! }
+                    /* tslint:disable:jsx-no-lambda*/
+                    componentRef={ (ref) => this.rText = ref! }
+                    /* tslint:enable:jsx-no-lambda*/
                     spellCheck={ false }
                   />
                 </td>
                 <td style={ { width: '18%' } }>
-                  <TextField
+                  <DefaultTextField
                     className={ css('ms-ColorPicker-input', styles.input) }
                     onBlur={ this._onRGBAChanged }
                     value={ String(color.g) }
-                    ref={ (ref) => this.gText = ref! }
+                    /* tslint:disable:jsx-no-lambda*/
+                    componentRef={ (ref) => this.gText = ref! }
+                    /* tslint:enable:jsx-no-lambda*/
                     spellCheck={ false }
                   />
                 </td>
                 <td style={ { width: '18%' } }>
-                  <TextField
+                  <DefaultTextField
                     className={ css('ms-ColorPicker-input', styles.input) }
                     onBlur={ this._onRGBAChanged }
                     value={ String(color.b) }
-                    ref={ (ref) => this.bText = ref! }
+                    /* tslint:disable:jsx-no-lambda*/
+                    componentRef={ (ref) => this.bText = ref! }
+                    /* tslint:enable:jsx-no-lambda*/
                     spellCheck={ false }
                   />
                 </td>
                 { !this.props.alphaSliderHidden && (
                   <td style={ { width: '18%' } }>
-                    <TextField
+                    <DefaultTextField
                       className={ css('ms-ColorPicker-input', styles.input) }
                       onBlur={ this._onRGBAChanged }
                       value={ String(color.a) }
-                      ref={ (ref) => this.aText = ref! }
+                      /* tslint:disable:jsx-no-lambda*/
+                      componentRef={ (ref) => this.aText = ref! }
+                      /* tslint:enable:jsx-no-lambda*/
                       spellCheck={ false }
                     />
                   </td>

packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Directional.Example.tsx

@@ -3,7 +3,7 @@ import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
 import { Checkbox } from 'office-ui-fabric-react/lib/Checkbox';
 import { DirectionalHint, ContextualMenuItemType } from 'office-ui-fabric-react/lib/ContextualMenu';
 import { Dropdown, IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown';
-import { TextField } from 'office-ui-fabric-react/lib/TextField';
+import { DefaultTextField } from 'office-ui-fabric-react/lib/TextField';
 import { autobind, getRTL } from 'office-ui-fabric-react/lib/Utilities';
 import './ContextualMenuExample.scss';
 import * as exampleStylesImport from '../../../common/_exampleStyles.scss';
@@ -39,7 +39,6 @@ export class ContextualMenuDirectionalExample extends React.Component<{}, IConte
   public refs: {
     [key: string]: React.ReactInstance;
     menuButton: HTMLElement;
-    gapSize: TextField;
   };
 
   public constructor(props: {}) {

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

@@ -10,7 +10,7 @@ import {
 import { FirstWeekOfYear } from '../../utilities/dateValues/DateValues';
 import { Callout } from '../../Callout';
 import { DirectionalHint } from '../../common/DirectionalHint';
-import { TextField } from '../../TextField';
+import { DefaultTextField, ITextField } from '../../TextField';
 import {
   autobind,
   BaseComponent,
@@ -122,7 +122,7 @@ export class DatePicker extends BaseComponent<IDatePickerProps, IDatePickerState
   private _root: HTMLElement;
   private _calendar: Calendar;
   private _datepicker: HTMLDivElement;
-  private _textField: TextField;
+  private _textField: ITextField;
   private _preventFocusOpeningPicker: boolean;
   private _focusOnSelectedDateOnUpdate: boolean;
 
@@ -190,7 +190,7 @@ export class DatePicker extends BaseComponent<IDatePickerProps, IDatePickerState
     return (
       <div className={ css('ms-DatePicker', styles.root, className) } ref={ this._resolveRef('_root') }>
         <div ref={ this._resolveRef('_datepicker') }>
-          <TextField
+          <DefaultTextField
             className={ styles.textField }
             ariaLabel={ ariaLabel }
             aria-haspopup='true'
@@ -217,7 +217,7 @@ export class DatePicker extends BaseComponent<IDatePickerProps, IDatePickerState
             } }
             readOnly={ !allowTextInput }
             value={ formattedDate }
-            ref={ this._resolveRef('_textField') }
+            componentRef={ this._resolveRef('_textField') }
             role={ allowTextInput ? 'combobox' : 'menu' }
           />
         </div>

packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Advanced.Example.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Link } from 'office-ui-fabric-react/lib/Link';
-import { TextField } from 'office-ui-fabric-react/lib/TextField';
+import { DefaultTextField } from 'office-ui-fabric-react/lib/TextField';
 import { CommandBar } from 'office-ui-fabric-react/lib/CommandBar';
 import {
   IContextualMenuProps,
@@ -119,7 +119,7 @@ export class DetailsListAdvancedExample extends React.Component<{}, IDetailsList
 
         {
           (isGrouped) ?
-            <TextField label='Group Item Limit' onChanged={ this._onItemLimitChanged } /> :
+            <DefaultTextField label='Group Item Limit' onChanged={ this._onItemLimitChanged } /> :
             (null)
         }
 

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

@@ -1,7 +1,7 @@
 /* tslint:disable:no-unused-variable */
 import * as React from 'react';
 /* tslint:enable:no-unused-variable */
-import { TextField } from 'office-ui-fabric-react/lib/TextField';
+import { DefaultTextField } from 'office-ui-fabric-react/lib/TextField';
 import {
   DetailsList,
   DetailsListLayoutMode,
@@ -70,7 +70,7 @@ export class DetailsListBasicExample extends React.Component<{}, {
     return (
       <div>
         <div>{ selectionDetails }</div>
-        <TextField
+        <DefaultTextField
           label='Filter by name:'
           onChanged={ this._onChanged }
         />

packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Compact.Example.tsx

@@ -1,7 +1,7 @@
 /* tslint:disable:no-unused-variable */
 import * as React from 'react';
 /* tslint:enable:no-unused-variable */
-import { TextField } from 'office-ui-fabric-react/lib/TextField';
+import { DefaultTextField } from 'office-ui-fabric-react/lib/TextField';
 import {
   DetailsList,
   DetailsListLayoutMode,
@@ -71,7 +71,7 @@ export class DetailsListCompactExample extends React.Component<{}, {
     return (
       <div>
         <div>{ selectionDetails }</div>
-        <TextField
+        <DefaultTextField
           label='Filter by name:'
           onChanged={ this._onChanged }
         />

packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Documents.Example.tsx

@@ -1,7 +1,7 @@
 /* tslint:disable:no-unused-variable */
 import * as React from 'react';
 /* tslint:enable:no-unused-variable */
-import { TextField } from 'office-ui-fabric-react/lib/TextField';
+import { DefaultTextField } from 'office-ui-fabric-react/lib/TextField';
 import { Toggle } from 'office-ui-fabric-react/lib/Toggle';
 import {
   DetailsList,
@@ -222,7 +222,7 @@ export class DetailsListDocumentsExample extends React.Component<any, IDetailsLi
           offText='Normal'
         />
         <div>{ selectionDetails }</div>
-        <TextField
+        <DefaultTextField
           label='Filter by name:'
           onChanged={ this._onChangeText }
         />

packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.Click.Example.tsx

@@ -6,7 +6,7 @@ import { autobind } from '../../../Utilities';
 import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
 import { FocusTrapZone } from 'office-ui-fabric-react/lib/FocusTrapZone';
 import { Link } from 'office-ui-fabric-react/lib/Link';
-import { TextField } from 'office-ui-fabric-react/lib/TextField';
+import { DefaultTextField } from 'office-ui-fabric-react/lib/TextField';
 import { Toggle, IToggle } from 'office-ui-fabric-react/lib/Toggle';
 import './FocusTrapZone.Box.Example.scss';
 
@@ -60,7 +60,7 @@ export default class BoxNoClickExample extends React.Component<React.HTMLAttribu
 
     return (
       <div className='ms-FocusTrapZoneBoxExample'>
-        <TextField label='Default TextField' placeholder='Input inside Focus Trap Zone' className='' />
+        <DefaultTextField label='Default TextField' placeholder='Input inside Focus Trap Zone' className='' />
         <Link href='' className='' >Hyperlink inside FocusTrapZone</Link><br /><br />
         <Toggle
           componentRef={ this._setRef }

packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.Example.tsx

@@ -6,7 +6,7 @@ import { autobind } from '../../../Utilities';
 import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
 import { FocusTrapZone } from 'office-ui-fabric-react/lib/FocusTrapZone';
 import { Link } from 'office-ui-fabric-react/lib/Link';
-import { TextField } from 'office-ui-fabric-react/lib/TextField';
+import { DefaultTextField } from 'office-ui-fabric-react/lib/TextField';
 import { Toggle, IToggle } from 'office-ui-fabric-react/lib/Toggle';
 import './FocusTrapZone.Box.Example.scss';
 
@@ -60,7 +60,7 @@ export default class BoxExample extends React.Component<React.HTMLAttributes<HTM
 
     return (
       <div className='ms-FocusTrapZoneBoxExample'>
-        <TextField label='Default TextField' placeholder='Input inside Focus Trap Zone' className='' />
+        <DefaultTextField label='Default TextField' placeholder='Input inside Focus Trap Zone' className='' />
         <Link href='' className='' >Hyperlink inside FocusTrapZone</Link><br /><br />
         <Toggle
           componentRef={ this._setRef }

packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.FocusOnCustomElement.Example.tsx

@@ -6,7 +6,7 @@ import { autobind } from '../../../Utilities';
 import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
 import { FocusTrapZone } from 'office-ui-fabric-react/lib/FocusTrapZone';
 import { Link } from 'office-ui-fabric-react/lib/Link';
-import { TextField } from 'office-ui-fabric-react/lib/TextField';
+import { DefaultTextField } from 'office-ui-fabric-react/lib/TextField';
 import { Toggle, IToggle } from 'office-ui-fabric-react/lib/Toggle';
 
 export interface IBoxExampleExampleState {
@@ -58,7 +58,7 @@ export default class BoxExample extends React.Component<React.HTMLAttributes<HTM
 
     return (
       <div className='ms-FocusTrapZoneBoxExample'>
-        <TextField label='Default TextField' placeholder='Input inside Focus Trap Zone' className='' />
+        <DefaultTextField label='Default TextField' placeholder='Input inside Focus Trap Zone' className='' />
         <Link href='' className='' >Hyperlink inside FocusTrapZone</Link><br /><br />
         <div className='shouldFocus input'>
           <Toggle

packages/office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.Disabled.Example.tsx

@@ -4,7 +4,7 @@ import * as React from 'react';
 
 import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
 import { FocusZone, FocusZoneDirection } from 'office-ui-fabric-react/lib/FocusZone';
-import { TextField } from 'office-ui-fabric-react/lib/TextField';
+import { DefaultTextField } from 'office-ui-fabric-react/lib/TextField';
 import './FocusZone.Disabled.Example.scss';
 
 export const FocusZoneDisabledExample = () => (
@@ -14,7 +14,7 @@ export const FocusZoneDisabledExample = () => (
         <span>Enabled FocusZone: </span>
         <DefaultButton>Button 1</DefaultButton>
         <DefaultButton>Button 2</DefaultButton>
-        <TextField value='FocusZone TextField' className='ms-FocusZoneDisabledExample-textField' />
+        <DefaultTextField value='FocusZone TextField' className='ms-FocusZoneDisabledExample-textField' />
         <DefaultButton>Button 3</DefaultButton>
       </FocusZone>
     </div>
@@ -29,7 +29,7 @@ export const FocusZoneDisabledExample = () => (
       </FocusZone>
     </div>
     <div className='ms-Row'>
-      <TextField value='Tabbable Element 2' />
+      <DefaultTextField value='Tabbable Element 2' />
     </div>
   </div>
 );