Skip to content

[TextField, Panel] Removed componentId internal prop #3896

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
David Zearing (dzearing) merged 7 commits into from
Mar 27, 2018
Merged

[TextField, Panel] Removed componentId internal prop #3896

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
47089e9
Remove componentId internal prop
lambertwang-zz Feb 6, 2018
25999ba
change file
lambertwang-zz Feb 6, 2018
15261c3
Merge branch 'master' of github.com:lambertwang/office-ui-fabric-reac…
lambertwang-zz Feb 21, 2018
c2e3a1d
Reinstate prop as deprecated
lambertwang-zz Feb 21, 2018
1a7bb04
Fixed tslint issue
lambertwang-zz Feb 23, 2018
1fcae10
Merge branch 'master' into magellan/componentIdInternal
dzearing Mar 13, 2018
01de8d3
Update magellan-componentIdInternal_2018-02-06-19-27.json
lambertwang Mar 13, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions common/changes/office-ui-fabric-react/magellan-componentIdInternal_2018-02-06-19-27.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
{
"changes": [
{
"packageName": "office-ui-fabric-react",
"comment": "[TextField, Panel] Removed componentId internal",
"type": "minor"

@dzearing David Zearing (dzearing) Feb 20, 2018

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this is a patch, if you leave the prop intact.

@lambertwang-zz Lambert Wang (lambertwang-zz) Feb 22, 2018

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok, done.

}
],
"packageName": "office-ui-fabric-react",
"email": "law@microsoft.com"
}
11 changes: 5 additions & 6 deletions packages/office-ui-fabric-react/src/components/Panel/Panel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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 (
Expand Down
5 changes: 0 additions & 5 deletions packages/office-ui-fabric-react/src/components/Panel/Panel.types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;

@dzearing David Zearing (dzearing) Feb 20, 2018 •
edited
Loading

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can't remove this; it will break consumers. Please Add a @deprecated tag to the comments and leave it intact so that we don't cause build breaks.

I'm not sure this is something we need to keep respecting though, because it doesn't change any behavior of the component. But, it would be good to add a warnDeprecations call in the constructor of panel to indicate to partners to remove it.

@lambertwang-zz Lambert Wang (lambertwang-zz) Feb 22, 2018

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done.

}

export enum PanelType {
Expand Down
11 changes: 6 additions & 5 deletions packages/office-ui-fabric-react/src/components/TextField/TextField.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { ITextField, ITextFieldProps } from './TextField.types';
import { Label } from '../../Label';
import { Icon } from '../../Icon';
import {
autobind,
DelayedRender,
BaseComponent,
getId,
Expand Down Expand Up @@ -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,
Expand All @@ -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) }>
Expand Down Expand Up @@ -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>);
}
Expand Down
5 changes: 0 additions & 5 deletions packages/office-ui-fabric-react/src/components/TextField/TextField.types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -222,11 +222,6 @@ export interface ITextFieldProps extends React.AllHTMLAttributes<HTMLInputElemen
*/
iconClass?: string;

/**
* Internal ID passed to render functions.

@lambertwang-zz Lambert Wang (lambertwang-zz) Feb 6, 2018

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Note: this wasn't even passed to every render function, it was just being passed to onRenderLabel.

*/
componentId?: string;

/**
* Whether the input field should have autocomplete enabled.
* This tells the browser to display options based on earlier typed values.
Expand Down