From 33950c4a6965e751c39275e1a800fd1d14e6e415 Mon Sep 17 00:00:00 2001
From: Jason Gore <jagore@microsoft.com>
Date: Fri, 17 Aug 2018 09:47:04 -0700
Subject: [PATCH 1/2] TextField: Fix application of inputClassName lost when
 component was converted to JS styling.

---
 .../src/components/TextField/TextField.base.tsx        |  4 +++-
 .../src/components/TextField/TextField.styles.tsx      |  6 ++++--
 .../src/components/TextField/TextField.test.tsx        |  6 +++++-
 .../src/components/TextField/TextField.types.ts        | 10 +++++++++-
 .../TextField/__snapshots__/TextField.test.tsx.snap    |  2 ++
 5 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/packages/office-ui-fabric-react/src/components/TextField/TextField.base.tsx b/packages/office-ui-fabric-react/src/components/TextField/TextField.base.tsx
index 8c33e5316b9625..9e5787b689e84b 100644
--- a/packages/office-ui-fabric-react/src/components/TextField/TextField.base.tsx
+++ b/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.
diff --git a/packages/office-ui-fabric-react/src/components/TextField/TextField.styles.tsx b/packages/office-ui-fabric-react/src/components/TextField/TextField.styles.tsx
index 0591095ab022d3..d2a23f858f421b 100644
--- a/packages/office-ui-fabric-react/src/components/TextField/TextField.styles.tsx
+++ b/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 && {
diff --git a/packages/office-ui-fabric-react/src/components/TextField/TextField.test.tsx b/packages/office-ui-fabric-react/src/components/TextField/TextField.test.tsx
index be101429286c04..8e03362a738d6b 100644
--- a/packages/office-ui-fabric-react/src/components/TextField/TextField.test.tsx
+++ b/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();
   });
diff --git a/packages/office-ui-fabric-react/src/components/TextField/TextField.types.ts b/packages/office-ui-fabric-react/src/components/TextField/TextField.types.ts
index 6a30b987c600d6..cab4f5ba0e4e1c 100644
--- a/packages/office-ui-fabric-react/src/components/TextField/TextField.types.ts
+++ b/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;
diff --git a/packages/office-ui-fabric-react/src/components/TextField/__snapshots__/TextField.test.tsx.snap b/packages/office-ui-fabric-react/src/components/TextField/__snapshots__/TextField.test.tsx.snap
index 8a4f1af8d6f17e..da0926ecb94e5d 100644
--- a/packages/office-ui-fabric-react/src/components/TextField/__snapshots__/TextField.test.tsx.snap
+++ b/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;

From 36d6dd7142694477b7d3c6d30c9e91c51e26f48c Mon Sep 17 00:00:00 2001
From: Jason Gore <jagore@microsoft.com>
Date: Fri, 17 Aug 2018 09:48:01 -0700
Subject: [PATCH 2/2] Change file.

---
 ...extfield-fix-input-classname_2018-08-17-16-47.json | 11 +++++++++++
 1 file changed, 11 insertions(+)
 create mode 100644 common/changes/office-ui-fabric-react/jg-textfield-fix-input-classname_2018-08-17-16-47.json

diff --git a/common/changes/office-ui-fabric-react/jg-textfield-fix-input-classname_2018-08-17-16-47.json b/common/changes/office-ui-fabric-react/jg-textfield-fix-input-classname_2018-08-17-16-47.json
new file mode 100644
index 00000000000000..103ecaf3456342
--- /dev/null
+++ b/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": "jagore@microsoft.com"
+}
\ No newline at end of file