From 47089e9a9130a39cd78f47cc44d2a6db9317b191 Mon Sep 17 00:00:00 2001
From: Lambert W <law@microsoft.com>
Date: Tue, 6 Feb 2018 11:26:42 -0800
Subject: [PATCH 1/5] Remove componentId internal prop

---
 .../src/components/Panel/Panel.tsx                    | 11 +++++------
 .../src/components/Panel/Panel.types.ts               |  5 -----
 .../src/components/TextField/TextField.tsx            | 11 ++++++-----
 .../src/components/TextField/TextField.types.ts       |  5 -----
 4 files changed, 11 insertions(+), 21 deletions(-)

diff --git a/packages/office-ui-fabric-react/src/components/Panel/Panel.tsx b/packages/office-ui-fabric-react/src/components/Panel/Panel.tsx
index d996d0a5b8c4c7..36c598ec88bc3b 100644
--- a/packages/office-ui-fabric-react/src/components/Panel/Panel.tsx
+++ b/packages/office-ui-fabric-react/src/components/Panel/Panel.tsx
@@ -102,7 +102,6 @@ export class Panel extends BaseComponent<IPanelProps, IPanelState> implements IP
     let isOnRightSide = isRTL ? isLeft : !isLeft;
     const headerTextId = id + '-headerText';
     const customWidthStyles = (type === PanelType.custom) ? { width: customWidth } : {};
-    const renderProps: IPanelProps = { ...this.props, componentId: id };
 
     if (!isOpen && !isAnimating && !isHiddenOnDismiss) {
       return null;
@@ -177,12 +176,12 @@ export class Panel extends BaseComponent<IPanelProps, IPanelState> implements IP
               isClickableOutsideFocusTrap={ isLightDismiss || isHiddenOnDismiss }
             >
               <div className={ css('ms-Panel-commands') } data-is-visible={ true } >
-                { onRenderNavigation(renderProps, this._onRenderNavigation) }
+                { onRenderNavigation(this.props, this._onRenderNavigation) }
               </div>
               <div className={ css('ms-Panel-contentInner', styles.contentInner) } >
-                { onRenderHeader(renderProps, this._onRenderHeader) }
-                { onRenderBody(renderProps, this._onRenderBody) }
-                { onRenderFooter(renderProps, this._onRenderFooter) }
+                { onRenderHeader(this.props, this._onRenderHeader) }
+                { onRenderBody(this.props, this._onRenderBody) }
+                { onRenderFooter(this.props, this._onRenderFooter) }
               </div>
             </FocusTrapZone>
           </div>
@@ -257,9 +256,9 @@ export class Panel extends BaseComponent<IPanelProps, IPanelState> implements IP
   private _onRenderHeader(props: IPanelProps): JSX.Element | null {
     const {
       headerText,
-      componentId,
       headerClassName = '',
     } = props;
+    const componentId = this.state.id;
 
     if (headerText) {
       return (
diff --git a/packages/office-ui-fabric-react/src/components/Panel/Panel.types.ts b/packages/office-ui-fabric-react/src/components/Panel/Panel.types.ts
index 1e6acd0c9f70f2..95e6e93c15e021 100644
--- a/packages/office-ui-fabric-react/src/components/Panel/Panel.types.ts
+++ b/packages/office-ui-fabric-react/src/components/Panel/Panel.types.ts
@@ -168,11 +168,6 @@ export interface IPanelProps extends React.Props<Panel> {
    * Custom renderer for content in the sticky footer
    */
   onRenderFooterContent?: IRenderFunction<IPanelProps>;
-
-  /**
-   * Internal ID passed to render functions.
-   */
-  componentId?: string;
 }
 
 export enum PanelType {
diff --git a/packages/office-ui-fabric-react/src/components/TextField/TextField.tsx b/packages/office-ui-fabric-react/src/components/TextField/TextField.tsx
index bb711fbd70f7ee..41823316fc6dae 100644
--- a/packages/office-ui-fabric-react/src/components/TextField/TextField.tsx
+++ b/packages/office-ui-fabric-react/src/components/TextField/TextField.tsx
@@ -3,6 +3,7 @@ import { ITextField, ITextFieldProps } from './TextField.types';
 import { Label } from '../../Label';
 import { Icon } from '../../Icon';
 import {
+  autobind,
   DelayedRender,
   BaseComponent,
   getId,
@@ -148,7 +149,6 @@ export class TextField extends BaseComponent<ITextFieldProps, ITextFieldState> i
     let { isFocused } = this.state;
     const errorMessage = this._errorMessage;
     this._isDescriptionAvailable = Boolean(description || errorMessage);
-    const renderProps: ITextFieldProps = { ...this.props, componentId: this._id };
 
     const textFieldClassName = css('ms-TextField', styles.root, className, {
       ['is-required ' + styles.rootIsRequiredLabel]: this.props.label && required,
@@ -163,7 +163,7 @@ export class TextField extends BaseComponent<ITextFieldProps, ITextFieldState> i
     return (
       <div className={ textFieldClassName }>
         <div className={ css('ms-TextField-wrapper', styles.wrapper, underlined ? errorMessage && styles.invalid : '') }>
-          { onRenderLabel(renderProps, this._onRenderLabel) }
+          { onRenderLabel(this.props, this._onRenderLabel) }
           <div className={ css('ms-TextField-fieldGroup', styles.fieldGroup, isFocused && styles.fieldGroupIsFocused, errorMessage && styles.invalid) }>
             { (addonString !== undefined || this.props.onRenderAddon) && (
               <div className={ css('ms-TextField-prefix', styles.fieldPrefixSuffix) }>
@@ -287,11 +287,12 @@ export class TextField extends BaseComponent<ITextFieldProps, ITextFieldState> i
     }
   }
 
+  @autobind
   private _onRenderLabel(props: ITextFieldProps): JSX.Element | null {
     const {
-      label,
-      componentId
-     } = props;
+      label
+    } = props;
+    const componentId = this._id;
     if (label) {
       return (<Label htmlFor={ componentId }>{ label }</Label>);
     }
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 7f32537bc68d4c..c6c804ee72a57c 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
@@ -222,11 +222,6 @@ export interface ITextFieldProps extends React.AllHTMLAttributes<HTMLInputElemen
    */
   iconClass?: string;
 
-  /**
-   * Internal ID passed to render functions.
-   */
-  componentId?: string;
-
   /**
    * Whether the input field should have autocomplete enabled.
    * This tells the browser to display options based on earlier typed values.

From 25999bae48ff93631d29e3c8ffd2a25dcd277d5c Mon Sep 17 00:00:00 2001
From: Lambert W <law@microsoft.com>
Date: Tue, 6 Feb 2018 11:27:21 -0800
Subject: [PATCH 2/5] change file

---
 ...magellan-componentIdInternal_2018-02-06-19-27.json | 11 +++++++++++
 1 file changed, 11 insertions(+)
 create mode 100644 common/changes/office-ui-fabric-react/magellan-componentIdInternal_2018-02-06-19-27.json

diff --git a/common/changes/office-ui-fabric-react/magellan-componentIdInternal_2018-02-06-19-27.json b/common/changes/office-ui-fabric-react/magellan-componentIdInternal_2018-02-06-19-27.json
new file mode 100644
index 00000000000000..3973566b22878e
--- /dev/null
+++ b/common/changes/office-ui-fabric-react/magellan-componentIdInternal_2018-02-06-19-27.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "[TextField, Panel] Removed componentId internal",
+      "type": "minor"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "law@microsoft.com"
+}
\ No newline at end of file

From c2e3a1d560f169ab73e14978c40ac15fa70b4c74 Mon Sep 17 00:00:00 2001
From: Lambert W <law@microsoft.com>
Date: Wed, 21 Feb 2018 11:06:48 -0800
Subject: [PATCH 3/5] Reinstate prop as deprecated

---
 .../magellan-componentIdInternal_2018-02-06-19-27.json      | 2 +-
 .../office-ui-fabric-react/src/components/Panel/Panel.tsx   | 6 ++++--
 .../src/components/Panel/Panel.types.ts                     | 6 ++++++
 .../src/components/TextField/TextField.tsx                  | 3 +--
 .../src/components/TextField/TextField.types.ts             | 6 ++++++
 5 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/common/changes/office-ui-fabric-react/magellan-componentIdInternal_2018-02-06-19-27.json b/common/changes/office-ui-fabric-react/magellan-componentIdInternal_2018-02-06-19-27.json
index 3973566b22878e..51acb0d7dbba18 100644
--- a/common/changes/office-ui-fabric-react/magellan-componentIdInternal_2018-02-06-19-27.json
+++ b/common/changes/office-ui-fabric-react/magellan-componentIdInternal_2018-02-06-19-27.json
@@ -3,7 +3,7 @@
     {
       "packageName": "office-ui-fabric-react",
       "comment": "[TextField, Panel] Removed componentId internal",
-      "type": "minor"
+      "type": "patch"
     }
   ],
   "packageName": "office-ui-fabric-react",
diff --git a/packages/office-ui-fabric-react/src/components/Panel/Panel.tsx b/packages/office-ui-fabric-react/src/components/Panel/Panel.tsx
index 140f7e9b928c45..60b9f9a6001642 100644
--- a/packages/office-ui-fabric-react/src/components/Panel/Panel.tsx
+++ b/packages/office-ui-fabric-react/src/components/Panel/Panel.tsx
@@ -258,12 +258,14 @@ export class Panel extends BaseComponent<IPanelProps, IPanelState> implements IP
       headerText,
       headerClassName = '',
     } = props;
-    const componentId = this.state.id;
 
     if (headerText) {
       return (
         <div className={ css('ms-Panel-header', styles.header) }>
-          <p className={ css('ms-Panel-headerText', styles.headerText, headerClassName) } id={ componentId + '-headerText' } role='heading'>
+          <p className={ css('ms-Panel-headerText', styles.headerText, headerClassName) }
+            id={ this.state.id + '-headerText' }
+            role='heading'
+          >
             { headerText }
           </p>
         </div>
diff --git a/packages/office-ui-fabric-react/src/components/Panel/Panel.types.ts b/packages/office-ui-fabric-react/src/components/Panel/Panel.types.ts
index 95e6e93c15e021..2c3c2fb065e651 100644
--- a/packages/office-ui-fabric-react/src/components/Panel/Panel.types.ts
+++ b/packages/office-ui-fabric-react/src/components/Panel/Panel.types.ts
@@ -168,6 +168,12 @@ export interface IPanelProps extends React.Props<Panel> {
    * Custom renderer for content in the sticky footer
    */
   onRenderFooterContent?: IRenderFunction<IPanelProps>;
+
+  /**
+   * Deprecated property. Serves no function.
+   * @deprecated
+   */
+  componentId?: string;
 }
 
 export enum PanelType {
diff --git a/packages/office-ui-fabric-react/src/components/TextField/TextField.tsx b/packages/office-ui-fabric-react/src/components/TextField/TextField.tsx
index c11a63a5733a07..d54e79729bf574 100644
--- a/packages/office-ui-fabric-react/src/components/TextField/TextField.tsx
+++ b/packages/office-ui-fabric-react/src/components/TextField/TextField.tsx
@@ -295,9 +295,8 @@ export class TextField extends BaseComponent<ITextFieldProps, ITextFieldState> i
     const {
       label
     } = props;
-    const componentId = this._id;
     if (label) {
-      return (<Label htmlFor={ componentId }>{ label }</Label>);
+      return (<Label htmlFor={ this._id }>{ label }</Label>);
     }
     return null;
   }
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 c6c804ee72a57c..46cc5f889573d9 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
@@ -227,4 +227,10 @@ export interface ITextFieldProps extends React.AllHTMLAttributes<HTMLInputElemen
    * This tells the browser to display options based on earlier typed values.
    */
   autoComplete?: 'on' | 'off';
+
+  /**
+   * Deprecated property. Serves no function.
+   * @deprecated
+   */
+  componentId?: string;
 }

From 1a7bb04b5538789d6b82087be46d2b17fc1a3842 Mon Sep 17 00:00:00 2001
From: Lambert W <law@microsoft.com>
Date: Fri, 23 Feb 2018 10:52:02 -0800
Subject: [PATCH 4/5] Fixed tslint issue

---
 packages/office-ui-fabric-react/src/components/Panel/Panel.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/office-ui-fabric-react/src/components/Panel/Panel.tsx b/packages/office-ui-fabric-react/src/components/Panel/Panel.tsx
index 60b9f9a6001642..5d35f7ffb83604 100644
--- a/packages/office-ui-fabric-react/src/components/Panel/Panel.tsx
+++ b/packages/office-ui-fabric-react/src/components/Panel/Panel.tsx
@@ -262,7 +262,8 @@ export class Panel extends BaseComponent<IPanelProps, IPanelState> implements IP
     if (headerText) {
       return (
         <div className={ css('ms-Panel-header', styles.header) }>
-          <p className={ css('ms-Panel-headerText', styles.headerText, headerClassName) }
+          <p
+            className={ css('ms-Panel-headerText', styles.headerText, headerClassName) }
             id={ this.state.id + '-headerText' }
             role='heading'
           >

From 01de8d3d259f7c6b80ede58957f71b48eef19b29 Mon Sep 17 00:00:00 2001
From: Lambert Wang <lambert.ww@gmail.com>
Date: Tue, 13 Mar 2018 13:33:42 -0700
Subject: [PATCH 5/5] Update magellan-componentIdInternal_2018-02-06-19-27.json

---
 .../magellan-componentIdInternal_2018-02-06-19-27.json        | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/common/changes/office-ui-fabric-react/magellan-componentIdInternal_2018-02-06-19-27.json b/common/changes/office-ui-fabric-react/magellan-componentIdInternal_2018-02-06-19-27.json
index 51acb0d7dbba18..9a84a48ef7d23c 100644
--- a/common/changes/office-ui-fabric-react/magellan-componentIdInternal_2018-02-06-19-27.json
+++ b/common/changes/office-ui-fabric-react/magellan-componentIdInternal_2018-02-06-19-27.json
@@ -2,10 +2,10 @@
   "changes": [
     {
       "packageName": "office-ui-fabric-react",
-      "comment": "[TextField, Panel] Removed componentId internal",
+      "comment": "TextField, Panel: Deprecated componentId prop.",
       "type": "patch"
     }
   ],
   "packageName": "office-ui-fabric-react",
   "email": "law@microsoft.com"
-}
\ No newline at end of file
+}