[TextField, Panel] Removed componentId internal prop

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: Deprecated componentId prop.",
+      "type": "patch"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "[email protected]"
+}

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

@@ -102,7 +102,6 @@ export class Panel extends BaseComponent<IPanelProps, IPanelState> implements IP
     const 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,14 +256,17 @@ export class Panel extends BaseComponent<IPanelProps, IPanelState> implements IP
   private _onRenderHeader(props: IPanelProps): JSX.Element | null {
     const {
       headerText,
-      componentId,
       headerClassName = '',
     } = props;
 
     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>

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

@@ -170,7 +170,8 @@ export interface IPanelProps extends React.Props<Panel> {
   onRenderFooterContent?: IRenderFunction<IPanelProps>;
 
   /**
-   * Internal ID passed to render functions.
+   * Deprecated property. Serves no function.
+   * @deprecated
    */
   componentId?: string;
 }

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,
@@ -153,7 +154,6 @@ export class TextField extends BaseComponent<ITextFieldProps, ITextFieldState> i
     const { 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,
@@ -168,7 +168,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) }>
@@ -292,13 +292,13 @@ export class TextField extends BaseComponent<ITextFieldProps, ITextFieldState> i
     }
   }
 
+  @autobind
   private _onRenderLabel(props: ITextFieldProps): JSX.Element | null {
     const {
-      label,
-      componentId
+      label
     } = props;
     if (label) {
-      return (<Label htmlFor={ componentId }>{ label }</Label>);
+      return (<Label htmlFor={ this._id }>{ label }</Label>);
     }
     return null;
   }

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

@@ -222,14 +222,15 @@ 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.
    */
   autoComplete?: 'on' | 'off';
+
+  /**
+   * Deprecated property. Serves no function.
+   * @deprecated
+   */
+  componentId?: string;
 }