From 3d65b1423a6f20e73ed900871d1ca4be53754c72 Mon Sep 17 00:00:00 2001 From: Chris Mohr Date: Tue, 17 Apr 2018 11:19:45 -0700 Subject: [PATCH 1/7] add onRenderDescription to TextField --- ...iption_for_TextField_2018-04-16-23-55.json | 11 +++++++++ ...iption_for_TextField_2018-04-16-23-55.json | 11 +++++++++ ...iption_for_TextField_2018-04-16-23-55.json | 11 +++++++++ ...iption_for_TextField_2018-04-16-23-55.json | 11 +++++++++ ...iption_for_TextField_2018-04-16-23-55.json | 11 +++++++++ ...iption_for_TextField_2018-04-16-23-55.json | 11 +++++++++ ...iption_for_TextField_2018-04-16-23-55.json | 11 +++++++++ ...iption_for_TextField_2018-04-16-23-55.json | 11 +++++++++ ...iption_for_TextField_2018-04-16-23-55.json | 11 +++++++++ ...iption_for_TextField_2018-04-16-23-55.json | 11 +++++++++ ...iption_for_TextField_2018-04-16-23-55.json | 11 +++++++++ .../src/components/TextField/TextField.tsx | 14 +++++++++-- .../components/TextField/TextField.types.ts | 5 ++++ .../components/TextField/TextFieldPage.tsx | 8 +++++++ .../TextField.OnRenderDescription.Example.tsx | 24 +++++++++++++++++++ 15 files changed, 170 insertions(+), 2 deletions(-) create mode 100644 common/changes/@uifabric/example-app-base/onRenderDescription_for_TextField_2018-04-16-23-55.json create mode 100644 common/changes/@uifabric/experiments/onRenderDescription_for_TextField_2018-04-16-23-55.json create mode 100644 common/changes/@uifabric/fabric-website/onRenderDescription_for_TextField_2018-04-16-23-55.json create mode 100644 common/changes/@uifabric/file-type-icons/onRenderDescription_for_TextField_2018-04-16-23-55.json create mode 100644 common/changes/@uifabric/icons/onRenderDescription_for_TextField_2018-04-16-23-55.json create mode 100644 common/changes/@uifabric/jest-serializer-merge-styles/onRenderDescription_for_TextField_2018-04-16-23-55.json create mode 100644 common/changes/@uifabric/merge-styles/onRenderDescription_for_TextField_2018-04-16-23-55.json create mode 100644 common/changes/@uifabric/styling/onRenderDescription_for_TextField_2018-04-16-23-55.json create mode 100644 common/changes/@uifabric/utilities/onRenderDescription_for_TextField_2018-04-16-23-55.json create mode 100644 common/changes/@uifabric/variants/onRenderDescription_for_TextField_2018-04-16-23-55.json create mode 100644 common/changes/office-ui-fabric-react/onRenderDescription_for_TextField_2018-04-16-23-55.json create mode 100644 packages/office-ui-fabric-react/src/components/TextField/examples/TextField.OnRenderDescription.Example.tsx diff --git a/common/changes/@uifabric/example-app-base/onRenderDescription_for_TextField_2018-04-16-23-55.json b/common/changes/@uifabric/example-app-base/onRenderDescription_for_TextField_2018-04-16-23-55.json new file mode 100644 index 00000000000000..a6dd8206b32b13 --- /dev/null +++ b/common/changes/@uifabric/example-app-base/onRenderDescription_for_TextField_2018-04-16-23-55.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "comment": "", + "packageName": "@uifabric/example-app-base", + "type": "none" + } + ], + "packageName": "@uifabric/example-app-base", + "email": "chrismo@microsoft.com" +} \ No newline at end of file diff --git a/common/changes/@uifabric/experiments/onRenderDescription_for_TextField_2018-04-16-23-55.json b/common/changes/@uifabric/experiments/onRenderDescription_for_TextField_2018-04-16-23-55.json new file mode 100644 index 00000000000000..4529054d32044c --- /dev/null +++ b/common/changes/@uifabric/experiments/onRenderDescription_for_TextField_2018-04-16-23-55.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "comment": "", + "packageName": "@uifabric/experiments", + "type": "none" + } + ], + "packageName": "@uifabric/experiments", + "email": "chrismo@microsoft.com" +} \ No newline at end of file diff --git a/common/changes/@uifabric/fabric-website/onRenderDescription_for_TextField_2018-04-16-23-55.json b/common/changes/@uifabric/fabric-website/onRenderDescription_for_TextField_2018-04-16-23-55.json new file mode 100644 index 00000000000000..fa41e8ec53044c --- /dev/null +++ b/common/changes/@uifabric/fabric-website/onRenderDescription_for_TextField_2018-04-16-23-55.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "comment": "", + "packageName": "@uifabric/fabric-website", + "type": "none" + } + ], + "packageName": "@uifabric/fabric-website", + "email": "chrismo@microsoft.com" +} \ No newline at end of file diff --git a/common/changes/@uifabric/file-type-icons/onRenderDescription_for_TextField_2018-04-16-23-55.json b/common/changes/@uifabric/file-type-icons/onRenderDescription_for_TextField_2018-04-16-23-55.json new file mode 100644 index 00000000000000..a8f3151205b226 --- /dev/null +++ b/common/changes/@uifabric/file-type-icons/onRenderDescription_for_TextField_2018-04-16-23-55.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "comment": "", + "packageName": "@uifabric/file-type-icons", + "type": "none" + } + ], + "packageName": "@uifabric/file-type-icons", + "email": "chrismo@microsoft.com" +} \ No newline at end of file diff --git a/common/changes/@uifabric/icons/onRenderDescription_for_TextField_2018-04-16-23-55.json b/common/changes/@uifabric/icons/onRenderDescription_for_TextField_2018-04-16-23-55.json new file mode 100644 index 00000000000000..e5b5075dba06b2 --- /dev/null +++ b/common/changes/@uifabric/icons/onRenderDescription_for_TextField_2018-04-16-23-55.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "comment": "", + "packageName": "@uifabric/icons", + "type": "none" + } + ], + "packageName": "@uifabric/icons", + "email": "chrismo@microsoft.com" +} \ No newline at end of file diff --git a/common/changes/@uifabric/jest-serializer-merge-styles/onRenderDescription_for_TextField_2018-04-16-23-55.json b/common/changes/@uifabric/jest-serializer-merge-styles/onRenderDescription_for_TextField_2018-04-16-23-55.json new file mode 100644 index 00000000000000..a80a5ea1407ea7 --- /dev/null +++ b/common/changes/@uifabric/jest-serializer-merge-styles/onRenderDescription_for_TextField_2018-04-16-23-55.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "comment": "", + "packageName": "@uifabric/jest-serializer-merge-styles", + "type": "none" + } + ], + "packageName": "@uifabric/jest-serializer-merge-styles", + "email": "chrismo@microsoft.com" +} \ No newline at end of file diff --git a/common/changes/@uifabric/merge-styles/onRenderDescription_for_TextField_2018-04-16-23-55.json b/common/changes/@uifabric/merge-styles/onRenderDescription_for_TextField_2018-04-16-23-55.json new file mode 100644 index 00000000000000..a12b8ed15553e8 --- /dev/null +++ b/common/changes/@uifabric/merge-styles/onRenderDescription_for_TextField_2018-04-16-23-55.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "comment": "", + "packageName": "@uifabric/merge-styles", + "type": "none" + } + ], + "packageName": "@uifabric/merge-styles", + "email": "chrismo@microsoft.com" +} \ No newline at end of file diff --git a/common/changes/@uifabric/styling/onRenderDescription_for_TextField_2018-04-16-23-55.json b/common/changes/@uifabric/styling/onRenderDescription_for_TextField_2018-04-16-23-55.json new file mode 100644 index 00000000000000..1bec6881094f99 --- /dev/null +++ b/common/changes/@uifabric/styling/onRenderDescription_for_TextField_2018-04-16-23-55.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "comment": "", + "packageName": "@uifabric/styling", + "type": "none" + } + ], + "packageName": "@uifabric/styling", + "email": "chrismo@microsoft.com" +} \ No newline at end of file diff --git a/common/changes/@uifabric/utilities/onRenderDescription_for_TextField_2018-04-16-23-55.json b/common/changes/@uifabric/utilities/onRenderDescription_for_TextField_2018-04-16-23-55.json new file mode 100644 index 00000000000000..ac80125bc988ea --- /dev/null +++ b/common/changes/@uifabric/utilities/onRenderDescription_for_TextField_2018-04-16-23-55.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "comment": "", + "packageName": "@uifabric/utilities", + "type": "none" + } + ], + "packageName": "@uifabric/utilities", + "email": "chrismo@microsoft.com" +} \ No newline at end of file diff --git a/common/changes/@uifabric/variants/onRenderDescription_for_TextField_2018-04-16-23-55.json b/common/changes/@uifabric/variants/onRenderDescription_for_TextField_2018-04-16-23-55.json new file mode 100644 index 00000000000000..25fffacd6e260e --- /dev/null +++ b/common/changes/@uifabric/variants/onRenderDescription_for_TextField_2018-04-16-23-55.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "comment": "", + "packageName": "@uifabric/variants", + "type": "none" + } + ], + "packageName": "@uifabric/variants", + "email": "chrismo@microsoft.com" +} \ No newline at end of file diff --git a/common/changes/office-ui-fabric-react/onRenderDescription_for_TextField_2018-04-16-23-55.json b/common/changes/office-ui-fabric-react/onRenderDescription_for_TextField_2018-04-16-23-55.json new file mode 100644 index 00000000000000..fbfb53e7016884 --- /dev/null +++ b/common/changes/office-ui-fabric-react/onRenderDescription_for_TextField_2018-04-16-23-55.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "add onRenderDescription to TextField", + "type": "minor" + } + ], + "packageName": "office-ui-fabric-react", + "email": "chrismo@microsoft.com" +} \ No newline at end of file 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 309fd7ee2ca28a..b985e300aebc80 100644 --- a/packages/office-ui-fabric-react/src/components/TextField/TextField.tsx +++ b/packages/office-ui-fabric-react/src/components/TextField/TextField.tsx @@ -150,7 +150,8 @@ export class TextField extends BaseComponent i onRenderAddon = this._onRenderAddon, // @deprecated onRenderPrefix = this._onRenderPrefix, onRenderSuffix = this._onRenderSuffix, - onRenderLabel = this._onRenderLabel + onRenderLabel = this._onRenderLabel, + onRenderDescription = this._onRenderDescription } = this.props; const { isFocused } = this.state; const errorMessage = this._errorMessage; @@ -192,7 +193,7 @@ export class TextField extends BaseComponent i { this._isDescriptionAvailable && - { description && { description } } + { onRenderDescription(this.props, this._onRenderDescription) } { errorMessage &&
@@ -304,6 +305,15 @@ export class TextField extends BaseComponent i return null; } + @autobind + private _onRenderDescription(props: ITextFieldProps): JSX.Element | null { + const { description } = props; + if (description) { + return ({ description }); + } + return null; + } + // @deprecated private _onRenderAddon(props: ITextFieldProps): JSX.Element { const { addonString } = props; 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 41d6d0bf120031..8fdd651ff077cb 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 @@ -87,6 +87,11 @@ export interface ITextFieldProps extends React.AllHTMLAttributes; + /** * @deprecated * Deprecated; use prefix instead. diff --git a/packages/office-ui-fabric-react/src/components/TextField/TextFieldPage.tsx b/packages/office-ui-fabric-react/src/components/TextField/TextFieldPage.tsx index 15ebbbd00d5196..000ba49e16fb13 100644 --- a/packages/office-ui-fabric-react/src/components/TextField/TextFieldPage.tsx +++ b/packages/office-ui-fabric-react/src/components/TextField/TextFieldPage.tsx @@ -19,6 +19,7 @@ import { TextFieldStatus } from './TextField.checklist'; import { TextFieldSuffixExample } from './examples/TextField.Suffix.Example'; import { TextFieldUnderlinedExample } from './examples/TextField.Underlined.Example'; import { TextFieldAutoCompleteExample } from './examples/TextField.AutoComplete.Example'; +import { TextFieldOnRenderDescriptionExample } from './examples/TextField.OnRenderDescription.Example'; const TextFieldBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/TextField/examples/TextField.Basic.Example.tsx') as string; const TextFieldBorderlessExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/TextField/examples/TextField.Borderless.Example.tsx') as string; @@ -32,6 +33,7 @@ const TextFieldPrefixAndSuffixExampleCode = require('!raw-loader!office-ui-fabri const TextFieldSuffixExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/TextField/examples/TextField.Suffix.Example.tsx') as string; const TextFieldUnderlinedExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/TextField/examples/TextField.Underlined.Example.tsx') as string; const TextFieldAutoCompleteExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/TextField/examples/TextField.AutoComplete.Example.tsx') as string; +const TextFieldOnRenderDescriptionExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/TextField/examples/TextField.OnRenderDescription.Example.tsx') as string; export class TextFieldPage extends React.Component { public render() { @@ -111,6 +113,12 @@ export class TextFieldPage extends React.Component > + + + { + public render() { + return ( +
+ +
+ ); + } + + private _onRenderDescription = (props: ITextFieldProps): JSX.Element => { + return ( +
+ { props.description }{ ' ' } + e.preventDefault() } >Link +
); + } +} From 50eaa79f186156b6b63cf4d1323a1dd9e81be77b Mon Sep 17 00:00:00 2001 From: Chris Mohr Date: Tue, 17 Apr 2018 12:00:26 -0700 Subject: [PATCH 2/7] delete empty change files --- ...derDescription_for_TextField_2018-04-16-23-55.json | 11 ----------- ...derDescription_for_TextField_2018-04-16-23-55.json | 11 ----------- ...derDescription_for_TextField_2018-04-16-23-55.json | 11 ----------- ...derDescription_for_TextField_2018-04-16-23-55.json | 11 ----------- ...derDescription_for_TextField_2018-04-16-23-55.json | 11 ----------- ...derDescription_for_TextField_2018-04-16-23-55.json | 11 ----------- ...derDescription_for_TextField_2018-04-16-23-55.json | 11 ----------- ...derDescription_for_TextField_2018-04-16-23-55.json | 11 ----------- ...derDescription_for_TextField_2018-04-16-23-55.json | 11 ----------- ...derDescription_for_TextField_2018-04-16-23-55.json | 11 ----------- 10 files changed, 110 deletions(-) delete mode 100644 common/changes/@uifabric/example-app-base/onRenderDescription_for_TextField_2018-04-16-23-55.json delete mode 100644 common/changes/@uifabric/experiments/onRenderDescription_for_TextField_2018-04-16-23-55.json delete mode 100644 common/changes/@uifabric/fabric-website/onRenderDescription_for_TextField_2018-04-16-23-55.json delete mode 100644 common/changes/@uifabric/file-type-icons/onRenderDescription_for_TextField_2018-04-16-23-55.json delete mode 100644 common/changes/@uifabric/icons/onRenderDescription_for_TextField_2018-04-16-23-55.json delete mode 100644 common/changes/@uifabric/jest-serializer-merge-styles/onRenderDescription_for_TextField_2018-04-16-23-55.json delete mode 100644 common/changes/@uifabric/merge-styles/onRenderDescription_for_TextField_2018-04-16-23-55.json delete mode 100644 common/changes/@uifabric/styling/onRenderDescription_for_TextField_2018-04-16-23-55.json delete mode 100644 common/changes/@uifabric/utilities/onRenderDescription_for_TextField_2018-04-16-23-55.json delete mode 100644 common/changes/@uifabric/variants/onRenderDescription_for_TextField_2018-04-16-23-55.json diff --git a/common/changes/@uifabric/example-app-base/onRenderDescription_for_TextField_2018-04-16-23-55.json b/common/changes/@uifabric/example-app-base/onRenderDescription_for_TextField_2018-04-16-23-55.json deleted file mode 100644 index a6dd8206b32b13..00000000000000 --- a/common/changes/@uifabric/example-app-base/onRenderDescription_for_TextField_2018-04-16-23-55.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "comment": "", - "packageName": "@uifabric/example-app-base", - "type": "none" - } - ], - "packageName": "@uifabric/example-app-base", - "email": "chrismo@microsoft.com" -} \ No newline at end of file diff --git a/common/changes/@uifabric/experiments/onRenderDescription_for_TextField_2018-04-16-23-55.json b/common/changes/@uifabric/experiments/onRenderDescription_for_TextField_2018-04-16-23-55.json deleted file mode 100644 index 4529054d32044c..00000000000000 --- a/common/changes/@uifabric/experiments/onRenderDescription_for_TextField_2018-04-16-23-55.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "comment": "", - "packageName": "@uifabric/experiments", - "type": "none" - } - ], - "packageName": "@uifabric/experiments", - "email": "chrismo@microsoft.com" -} \ No newline at end of file diff --git a/common/changes/@uifabric/fabric-website/onRenderDescription_for_TextField_2018-04-16-23-55.json b/common/changes/@uifabric/fabric-website/onRenderDescription_for_TextField_2018-04-16-23-55.json deleted file mode 100644 index fa41e8ec53044c..00000000000000 --- a/common/changes/@uifabric/fabric-website/onRenderDescription_for_TextField_2018-04-16-23-55.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "comment": "", - "packageName": "@uifabric/fabric-website", - "type": "none" - } - ], - "packageName": "@uifabric/fabric-website", - "email": "chrismo@microsoft.com" -} \ No newline at end of file diff --git a/common/changes/@uifabric/file-type-icons/onRenderDescription_for_TextField_2018-04-16-23-55.json b/common/changes/@uifabric/file-type-icons/onRenderDescription_for_TextField_2018-04-16-23-55.json deleted file mode 100644 index a8f3151205b226..00000000000000 --- a/common/changes/@uifabric/file-type-icons/onRenderDescription_for_TextField_2018-04-16-23-55.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "comment": "", - "packageName": "@uifabric/file-type-icons", - "type": "none" - } - ], - "packageName": "@uifabric/file-type-icons", - "email": "chrismo@microsoft.com" -} \ No newline at end of file diff --git a/common/changes/@uifabric/icons/onRenderDescription_for_TextField_2018-04-16-23-55.json b/common/changes/@uifabric/icons/onRenderDescription_for_TextField_2018-04-16-23-55.json deleted file mode 100644 index e5b5075dba06b2..00000000000000 --- a/common/changes/@uifabric/icons/onRenderDescription_for_TextField_2018-04-16-23-55.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "comment": "", - "packageName": "@uifabric/icons", - "type": "none" - } - ], - "packageName": "@uifabric/icons", - "email": "chrismo@microsoft.com" -} \ No newline at end of file diff --git a/common/changes/@uifabric/jest-serializer-merge-styles/onRenderDescription_for_TextField_2018-04-16-23-55.json b/common/changes/@uifabric/jest-serializer-merge-styles/onRenderDescription_for_TextField_2018-04-16-23-55.json deleted file mode 100644 index a80a5ea1407ea7..00000000000000 --- a/common/changes/@uifabric/jest-serializer-merge-styles/onRenderDescription_for_TextField_2018-04-16-23-55.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "comment": "", - "packageName": "@uifabric/jest-serializer-merge-styles", - "type": "none" - } - ], - "packageName": "@uifabric/jest-serializer-merge-styles", - "email": "chrismo@microsoft.com" -} \ No newline at end of file diff --git a/common/changes/@uifabric/merge-styles/onRenderDescription_for_TextField_2018-04-16-23-55.json b/common/changes/@uifabric/merge-styles/onRenderDescription_for_TextField_2018-04-16-23-55.json deleted file mode 100644 index a12b8ed15553e8..00000000000000 --- a/common/changes/@uifabric/merge-styles/onRenderDescription_for_TextField_2018-04-16-23-55.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "comment": "", - "packageName": "@uifabric/merge-styles", - "type": "none" - } - ], - "packageName": "@uifabric/merge-styles", - "email": "chrismo@microsoft.com" -} \ No newline at end of file diff --git a/common/changes/@uifabric/styling/onRenderDescription_for_TextField_2018-04-16-23-55.json b/common/changes/@uifabric/styling/onRenderDescription_for_TextField_2018-04-16-23-55.json deleted file mode 100644 index 1bec6881094f99..00000000000000 --- a/common/changes/@uifabric/styling/onRenderDescription_for_TextField_2018-04-16-23-55.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "comment": "", - "packageName": "@uifabric/styling", - "type": "none" - } - ], - "packageName": "@uifabric/styling", - "email": "chrismo@microsoft.com" -} \ No newline at end of file diff --git a/common/changes/@uifabric/utilities/onRenderDescription_for_TextField_2018-04-16-23-55.json b/common/changes/@uifabric/utilities/onRenderDescription_for_TextField_2018-04-16-23-55.json deleted file mode 100644 index ac80125bc988ea..00000000000000 --- a/common/changes/@uifabric/utilities/onRenderDescription_for_TextField_2018-04-16-23-55.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "comment": "", - "packageName": "@uifabric/utilities", - "type": "none" - } - ], - "packageName": "@uifabric/utilities", - "email": "chrismo@microsoft.com" -} \ No newline at end of file diff --git a/common/changes/@uifabric/variants/onRenderDescription_for_TextField_2018-04-16-23-55.json b/common/changes/@uifabric/variants/onRenderDescription_for_TextField_2018-04-16-23-55.json deleted file mode 100644 index 25fffacd6e260e..00000000000000 --- a/common/changes/@uifabric/variants/onRenderDescription_for_TextField_2018-04-16-23-55.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "comment": "", - "packageName": "@uifabric/variants", - "type": "none" - } - ], - "packageName": "@uifabric/variants", - "email": "chrismo@microsoft.com" -} \ No newline at end of file From b6808b26d1f58bee7373b5710bcd96430557e085 Mon Sep 17 00:00:00 2001 From: Chris Mohr Date: Tue, 17 Apr 2018 12:21:55 -0700 Subject: [PATCH 3/7] fix linting error --- .../examples/TextField.OnRenderDescription.Example.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.OnRenderDescription.Example.tsx b/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.OnRenderDescription.Example.tsx index 721e0853494aa2..fd5b5cf49f8244 100644 --- a/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.OnRenderDescription.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.OnRenderDescription.Example.tsx @@ -18,7 +18,11 @@ export class TextFieldOnRenderDescriptionExample extends React.Component<{}, {}> return (
{ props.description }{ ' ' } - e.preventDefault() } >Link + Link
); } + + private _onLinkClick = (e: React.MouseEvent) => { + e.preventDefault(); + } } From 5f6ad333f7fef4eefdc14e135a04148cce816b91 Mon Sep 17 00:00:00 2001 From: Chris Mohr Date: Tue, 17 Apr 2018 12:33:41 -0700 Subject: [PATCH 4/7] use arrow function instead of autobind --- .../src/components/TextField/TextField.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) 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 b985e300aebc80..38884a8922a774 100644 --- a/packages/office-ui-fabric-react/src/components/TextField/TextField.tsx +++ b/packages/office-ui-fabric-react/src/components/TextField/TextField.tsx @@ -305,8 +305,7 @@ export class TextField extends BaseComponent i return null; } - @autobind - private _onRenderDescription(props: ITextFieldProps): JSX.Element | null { + private _onRenderDescription = (props: ITextFieldProps): JSX.Element | null => { const { description } = props; if (description) { return ({ description }); From c15acafd15900049fc98f0b5929bce14a6f251c6 Mon Sep 17 00:00:00 2001 From: Chris Mohr Date: Tue, 17 Apr 2018 17:35:46 -0700 Subject: [PATCH 5/7] address pr feedback --- .../src/components/TextField/TextField.tsx | 24 ++++++------------- .../components/TextField/TextField.types.ts | 8 +++---- 2 files changed, 11 insertions(+), 21 deletions(-) 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 38884a8922a774..dc1a08f3372f66 100644 --- a/packages/office-ui-fabric-react/src/components/TextField/TextField.tsx +++ b/packages/office-ui-fabric-react/src/components/TextField/TextField.tsx @@ -136,6 +136,7 @@ export class TextField extends BaseComponent i public render() { const { className, + label, description, disabled, iconClass, @@ -170,7 +171,7 @@ export class TextField extends BaseComponent i return (
- { onRenderLabel(this.props, this._onRenderLabel) } + { label && onRenderLabel(this.props, this._onRenderLabel) }
{ (addonString !== undefined || this.props.onRenderAddon) && (
@@ -193,7 +194,7 @@ export class TextField extends BaseComponent i
{ this._isDescriptionAvailable && - { onRenderDescription(this.props, this._onRenderDescription) } + { description && onRenderDescription(this.props, this._onRenderDescription) } { errorMessage &&
@@ -294,23 +295,12 @@ export class TextField extends BaseComponent i } } - @autobind - private _onRenderLabel(props: ITextFieldProps): JSX.Element | null { - const { - label - } = props; - if (label) { - return (); - } - return null; + private _onRenderLabel = (props: ITextFieldProps): JSX.Element => { + return (); } - private _onRenderDescription = (props: ITextFieldProps): JSX.Element | null => { - const { description } = props; - if (description) { - return ({ description }); - } - return null; + private _onRenderDescription = (props: ITextFieldProps): JSX.Element => { + return ({ props.description }); } // @deprecated 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 8fdd651ff077cb..6ed2c850c5f721 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 @@ -78,7 +78,7 @@ export interface ITextFieldProps extends React.AllHTMLAttributes; @@ -88,7 +88,7 @@ export interface ITextFieldProps extends React.AllHTMLAttributes; @@ -115,12 +115,12 @@ export interface ITextFieldProps extends React.AllHTMLAttributes; /** - * Custom render function for prefix + * Custom render function for prefix. */ onRenderPrefix?: IRenderFunction; /** - * Custom render function for suffix + * Custom render function for suffix. */ onRenderSuffix?: IRenderFunction; From 383f313ea05f29db003d7eb5d2991b2595153227 Mon Sep 17 00:00:00 2001 From: Chris Mohr Date: Wed, 18 Apr 2018 12:24:50 -0700 Subject: [PATCH 6/7] allow onRenderDescriptiont to be invoked in absence of description --- .../src/components/TextField/TextField.tsx | 19 ++++++++++++------- 1 file changed, 12 insertions(+), 7 deletions(-) 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 dc1a08f3372f66..9a16590d80812e 100644 --- a/packages/office-ui-fabric-react/src/components/TextField/TextField.tsx +++ b/packages/office-ui-fabric-react/src/components/TextField/TextField.tsx @@ -136,7 +136,6 @@ export class TextField extends BaseComponent i public render() { const { className, - label, description, disabled, iconClass, @@ -171,7 +170,7 @@ export class TextField extends BaseComponent i return (
- { label && onRenderLabel(this.props, this._onRenderLabel) } + { onRenderLabel(this.props, this._onRenderLabel) }
{ (addonString !== undefined || this.props.onRenderAddon) && (
@@ -194,7 +193,7 @@ export class TextField extends BaseComponent i
{ this._isDescriptionAvailable && - { description && onRenderDescription(this.props, this._onRenderDescription) } + { onRenderDescription(this.props, this._onRenderDescription) } { errorMessage &&
@@ -295,12 +294,18 @@ export class TextField extends BaseComponent i } } - private _onRenderLabel = (props: ITextFieldProps): JSX.Element => { - return (); + private _onRenderLabel = (props: ITextFieldProps): JSX.Element | null => { + if (props.label) { + return (); + } + return null; } - private _onRenderDescription = (props: ITextFieldProps): JSX.Element => { - return ({ props.description }); + private _onRenderDescription = (props: ITextFieldProps): JSX.Element | null => { + if (props.description) { + return ({ props.description }); + } + return null; } // @deprecated From a65ef5a7f341b18b028e081cbba1b93fa39a50a3 Mon Sep 17 00:00:00 2001 From: Chris Mohr Date: Thu, 19 Apr 2018 15:48:58 -0700 Subject: [PATCH 7/7] remove autobind --- .../src/components/TextField/TextField.tsx | 1 - 1 file changed, 1 deletion(-) 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 9a16590d80812e..a07aa059e0dfeb 100644 --- a/packages/office-ui-fabric-react/src/components/TextField/TextField.tsx +++ b/packages/office-ui-fabric-react/src/components/TextField/TextField.tsx @@ -3,7 +3,6 @@ import { ITextField, ITextFieldProps } from './TextField.types'; import { Label } from '../../Label'; import { Icon } from '../../Icon'; import { - autobind, DelayedRender, BaseComponent, getId,