TextField: Fix inputClassName

common/changes/office-ui-fabric-react/jg-textfield-fix-input-classname_2018-08-17-16-47.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "TextField: Fix application of inputClassName lost when component was converted to JS styling.",
+      "type": "patch"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "[email protected]"
+}

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

@@ -163,6 +163,7 @@ export class TextFieldBase extends BaseComponent<ITextFieldProps, ITextFieldStat
       disabled,
       iconClass,
       iconProps,
+      inputClassName,
       label,
       multiline,
       required,
@@ -195,7 +196,8 @@ export class TextFieldBase extends BaseComponent<ITextFieldProps, ITextFieldStat
       resizable,
       hasIcon: !!iconProps,
       underlined,
-      iconClass
+      iconClass,
+      inputClassName
     });
 
     // If a custom description render function is supplied then treat description as always available.

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

@@ -64,7 +64,8 @@ export function getStyles(props: ITextFieldStyleProps): ITextFieldStyles {
     hasIcon,
     resizable,
     hasErrorMessage,
-    iconClass
+    iconClass,
+    inputClassName
   } = props;
 
   const { semanticColors, palette } = theme;
@@ -329,7 +330,8 @@ export function getStyles(props: ITextFieldStyleProps): ITextFieldStyles {
             padding: '0 11px 0 11px'
           }
         }
-      }
+      },
+      inputClassName
     ],
     icon: [
       multiline && {

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

@@ -40,7 +40,11 @@ describe('TextField', () => {
   }
 
   it('renders TextField correctly', () => {
-    const component = renderer.create(<TextField label="Label" />);
+    const className = 'testClassName';
+    const inputClassName = 'testInputClassName';
+    const component = renderer.create(
+      <TextField label="Label" className={className} inputClassName={inputClassName} />
+    );
     const tree = component.toJSON();
     expect(tree).toMatchSnapshot();
   });

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

@@ -290,7 +290,15 @@ export interface ITextFieldProps extends React.AllHTMLAttributes<HTMLInputElemen
 export type ITextFieldStyleProps = Required<Pick<ITextFieldProps, 'theme'>> &
   Pick<
     ITextFieldProps,
-    'className' | 'disabled' | 'required' | 'multiline' | 'borderless' | 'resizable' | 'underlined' | 'iconClass'
+    | 'className'
+    | 'disabled'
+    | 'inputClassName'
+    | 'required'
+    | 'multiline'
+    | 'borderless'
+    | 'resizable'
+    | 'underlined'
+    | 'iconClass'
   > & {
     /** Element has an error message. */
     hasErrorMessage?: boolean;

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

@@ -4,6 +4,7 @@ exports[`TextField renders TextField correctly 1`] = `
 <div
   className=
       ms-TextField
+      testClassName
       {
         box-shadow: none;
         box-sizing: border-box;
@@ -96,6 +97,7 @@ exports[`TextField renders TextField correctly 1`] = `
         aria-label={undefined}
         className=
             ms-TextField-field
+            testInputClassName
             {
               background-color: transparent;
               background: none;