TextField: Adds borderless option.

common/changes/joem-textfield-borderless_2017-05-06-22-56.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "TextField: `borderless` flag added for suppressing the border style.",
+      "type": "minor"
+    }
+  ],
+  "email": "martellaj@live.com"
+}

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

@@ -84,6 +84,12 @@ export interface IDatePickerProps extends React.Props<DatePicker> {
    * Localized strings to use in the DatePicker
    */
   strings?: IDatePickerStrings;
+
+  /**
+   * Determines if DatePicker has a border.
+   * @defaultvalue false
+   */
+  borderless?: boolean;
 }
 
 export interface IDatePickerStrings {

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

@@ -108,7 +108,8 @@ export class DatePicker extends BaseComponent<IDatePickerProps, IDatePickerState
     firstDayOfWeek: DayOfWeek.Sunday,
     isRequired: false,
     isMonthPickerVisible: true,
-    strings: DEFAULT_STRINGS
+    strings: DEFAULT_STRINGS,
+    borderless: false
   };
 
   public refs: {
@@ -160,7 +161,7 @@ export class DatePicker extends BaseComponent<IDatePickerProps, IDatePickerState
   }
 
   public render() {
-    let { firstDayOfWeek, strings, label, isRequired, ariaLabel, placeholder, allowTextInput } = this.props;
+    let { firstDayOfWeek, strings, label, isRequired, ariaLabel, placeholder, allowTextInput, borderless } = this.props;
     let { isDatePickerShown, formattedDate, selectedDate, errorMessage } = this.state;
 
     return (
@@ -179,6 +180,7 @@ export class DatePicker extends BaseComponent<IDatePickerProps, IDatePickerState
             errorMessage={ errorMessage }
             label={ label }
             placeholder={ placeholder }
+            borderless={ borderless }
             iconClass={ css(
               'ms-Icon ms-Icon--Calendar',
               label ? 'ms-DatePicker-event--with-label' : 'ms-DatePicker-event--without-label',

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

@@ -52,6 +52,12 @@ export interface ITextFieldProps extends React.HTMLProps<HTMLInputElement | HTML
    */
   underlined?: boolean;
 
+  /**
+   * Whether or not the textfield is borderless.
+   * @default false
+   */
+  borderless?: boolean;
+
   /**
    * Label for the textfield.
    */

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

@@ -155,6 +155,9 @@
   font-size: $ms-font-size-xs;
 }
 
+.rootIsBorderless .fieldGroup {
+  border-color: transparent;
+}
 
 //== Modifier: Single line (default), underlined
 //

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

@@ -35,6 +35,7 @@ export class TextField extends BaseComponent<ITextFieldProps, ITextFieldState> i
     resizable: true,
     autoAdjustHeight: false,
     underlined: false,
+    borderless: false,
     onChanged: () => { /* noop */ },
     onBeforeChange: () => { /* noop */ },
     onNotifyValidationResult: () => { /* noop */ },
@@ -129,6 +130,7 @@ export class TextField extends BaseComponent<ITextFieldProps, ITextFieldState> i
       multiline,
       required,
       underlined,
+      borderless,
       addonString,
       onRenderAddon = this._onRenderAddon
     } = this.props;
@@ -141,7 +143,8 @@ export class TextField extends BaseComponent<ITextFieldProps, ITextFieldState> i
       ['is-disabled ' + styles.rootIsDisabled]: disabled,
       ['is-active ' + styles.rootIsActive]: isFocused,
       ['ms-TextField--multiline ' + styles.rootIsMultiline]: multiline,
-      ['ms-TextField--underlined ' + styles.rootIsUnderlined]: underlined
+      ['ms-TextField--underlined ' + styles.rootIsUnderlined]: underlined,
+      ['ms-TextField--borderless ' + styles.rootIsBorderless]: borderless
     });
 
     return (

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

@@ -17,6 +17,8 @@ export class TextFieldBasicExample extends React.Component<any, any> {
         <TextField label='Multiline TextField Unresizable' multiline resizable={ false } />
         <TextField label='Multiline TextField with auto adjust height' multiline autoAdjustHeight />
         <TextField label='Underlined TextField' underlined />
+        <TextField label='Borderless TextField' borderless placeholder='No borders here, folks.' />
+        <TextField label='Multiline Borderless TextField' multiline rows={ 4 } borderless placeholder='Example TextField without a border' />
       </div>
     );
   }