From aa0a3e8c6f5df6e34ddd9c4713870899d4112b4c Mon Sep 17 00:00:00 2001 From: bryan-hunter Date: Thu, 21 Oct 2021 16:28:01 -0500 Subject: [PATCH 1/4] [InputBase] New property for disabling inject of GlobalStyles --- docs/pages/api-docs/input-base.json | 1 + docs/translations/api-docs/input-base/input-base.json | 1 + packages/mui-material/src/InputBase/InputBase.d.ts | 5 +++++ packages/mui-material/src/InputBase/InputBase.js | 8 +++++++- 4 files changed, 14 insertions(+), 1 deletion(-) diff --git a/docs/pages/api-docs/input-base.json b/docs/pages/api-docs/input-base.json index 429bfbb5e86247..fa2ca9a78835d0 100644 --- a/docs/pages/api-docs/input-base.json +++ b/docs/pages/api-docs/input-base.json @@ -16,6 +16,7 @@ "componentsProps": { "type": { "name": "object" }, "default": "{}" }, "defaultValue": { "type": { "name": "any" } }, "disabled": { "type": { "name": "bool" } }, + "disableInjectingGlobalStyles": { "type": { "name": "bool" } }, "endAdornment": { "type": { "name": "node" } }, "error": { "type": { "name": "bool" } }, "fullWidth": { "type": { "name": "bool" } }, diff --git a/docs/translations/api-docs/input-base/input-base.json b/docs/translations/api-docs/input-base/input-base.json index f2c1da53728cbf..a1461434afac9f 100644 --- a/docs/translations/api-docs/input-base/input-base.json +++ b/docs/translations/api-docs/input-base/input-base.json @@ -9,6 +9,7 @@ "componentsProps": "The props used for each slot inside the Input.", "defaultValue": "The default value. Use when the component is not controlled.", "disabled": "If true, the component is disabled. The prop defaults to the value (false) inherited from the parent FormControl component.", + "disableInjectingGlobalStyles": "If true, GlobalStyles for auto-fill will not be injected / removed on mount / unmount.", "endAdornment": "End InputAdornment for this component.", "error": "If true, the input will indicate an error. The prop defaults to the value (false) inherited from the parent FormControl component.", "fullWidth": "If true, the input will take up the full width of its container.", diff --git a/packages/mui-material/src/InputBase/InputBase.d.ts b/packages/mui-material/src/InputBase/InputBase.d.ts index ad3a9ae5d7f5ea..8db9d7312451c2 100644 --- a/packages/mui-material/src/InputBase/InputBase.d.ts +++ b/packages/mui-material/src/InputBase/InputBase.d.ts @@ -70,6 +70,11 @@ export interface InputBaseProps * The prop defaults to the value (`false`) inherited from the parent FormControl component. */ disabled?: boolean; + /** + * If `true`, GlobalStyles for auto-fill will not be injected / removed on mount / unmount. + * @default false + */ + disableInjectingGlobalStyles?: boolean; /** * End `InputAdornment` for this component. */ diff --git a/packages/mui-material/src/InputBase/InputBase.js b/packages/mui-material/src/InputBase/InputBase.js index b45c20ab6d09fb..92741870a845db 100644 --- a/packages/mui-material/src/InputBase/InputBase.js +++ b/packages/mui-material/src/InputBase/InputBase.js @@ -241,6 +241,7 @@ const InputBase = React.forwardRef(function InputBase(inProps, ref) { componentsProps = {}, defaultValue, disabled, + disableInjectingGlobalStyles, endAdornment, error, fullWidth = false, @@ -493,7 +494,7 @@ const InputBase = React.forwardRef(function InputBase(inProps, ref) { return ( - {inputGlobalStyles} + {!disableInjectingGlobalStyles && inputGlobalStyles} Date: Mon, 25 Oct 2021 17:51:48 -0500 Subject: [PATCH 2/4] Update packages/mui-material/src/InputBase/InputBase.d.ts Co-authored-by: Marija Najdova --- packages/mui-material/src/InputBase/InputBase.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mui-material/src/InputBase/InputBase.d.ts b/packages/mui-material/src/InputBase/InputBase.d.ts index 8db9d7312451c2..8e366d75ef3069 100644 --- a/packages/mui-material/src/InputBase/InputBase.d.ts +++ b/packages/mui-material/src/InputBase/InputBase.d.ts @@ -71,7 +71,7 @@ export interface InputBaseProps */ disabled?: boolean; /** - * If `true`, GlobalStyles for auto-fill will not be injected / removed on mount / unmount. + * If `true`, GlobalStyles for the auto-fill keyframes will not be injected/removed on mount/unmount. Make sure to inject them at the top of your application. This option is intended to help with boosting the initial rendering performance if you are loading a big amount of Input components at once. * @default false */ disableInjectingGlobalStyles?: boolean; From 177cc03a9cd32c35f493ca343aa8cdaa13794d50 Mon Sep 17 00:00:00 2001 From: bryan-hunter Date: Mon, 25 Oct 2021 17:59:48 -0500 Subject: [PATCH 3/4] update InputBase.js and docs --- docs/translations/api-docs/input-base/input-base.json | 2 +- packages/mui-material/src/InputBase/InputBase.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/translations/api-docs/input-base/input-base.json b/docs/translations/api-docs/input-base/input-base.json index a1461434afac9f..fe910da85a9c1e 100644 --- a/docs/translations/api-docs/input-base/input-base.json +++ b/docs/translations/api-docs/input-base/input-base.json @@ -9,7 +9,7 @@ "componentsProps": "The props used for each slot inside the Input.", "defaultValue": "The default value. Use when the component is not controlled.", "disabled": "If true, the component is disabled. The prop defaults to the value (false) inherited from the parent FormControl component.", - "disableInjectingGlobalStyles": "If true, GlobalStyles for auto-fill will not be injected / removed on mount / unmount.", + "disableInjectingGlobalStyles": "If true, GlobalStyles for the auto-fill keyframes will not be injected/removed on mount/unmount. Make sure to inject them at the top of your application. This option is intended to help with boosting the initial rendering performance if you are loading a big amount of Input components at once.", "endAdornment": "End InputAdornment for this component.", "error": "If true, the input will indicate an error. The prop defaults to the value (false) inherited from the parent FormControl component.", "fullWidth": "If true, the input will take up the full width of its container.", diff --git a/packages/mui-material/src/InputBase/InputBase.js b/packages/mui-material/src/InputBase/InputBase.js index e273d0af1bedd9..6f97d5d125a92f 100644 --- a/packages/mui-material/src/InputBase/InputBase.js +++ b/packages/mui-material/src/InputBase/InputBase.js @@ -609,7 +609,7 @@ InputBase.propTypes /* remove-proptypes */ = { */ disabled: PropTypes.bool, /** - * If `true`, GlobalStyles for auto-fill will not be injected / removed on mount / unmount. + * If `true`, GlobalStyles for the auto-fill keyframes will not be injected/removed on mount/unmount. Make sure to inject them at the top of your application. This option is intended to help with boosting the initial rendering performance if you are loading a big amount of Input components at once. * @default false */ disableInjectingGlobalStyles: PropTypes.bool, From 3c9a69c12c8907c5cc1bcfe91945969275e65038 Mon Sep 17 00:00:00 2001 From: bryan-hunter Date: Wed, 27 Oct 2021 17:27:44 -0500 Subject: [PATCH 4/4] fix lint --- packages/mui-material/src/InputBase/InputBase.d.ts | 3 ++- packages/mui-material/src/InputBase/InputBase.js | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/mui-material/src/InputBase/InputBase.d.ts b/packages/mui-material/src/InputBase/InputBase.d.ts index 8e366d75ef3069..257385215b9d3b 100644 --- a/packages/mui-material/src/InputBase/InputBase.d.ts +++ b/packages/mui-material/src/InputBase/InputBase.d.ts @@ -71,7 +71,8 @@ export interface InputBaseProps */ disabled?: boolean; /** - * If `true`, GlobalStyles for the auto-fill keyframes will not be injected/removed on mount/unmount. Make sure to inject them at the top of your application. This option is intended to help with boosting the initial rendering performance if you are loading a big amount of Input components at once. + * If `true`, GlobalStyles for the auto-fill keyframes will not be injected/removed on mount/unmount. Make sure to inject them at the top of your application. + * This option is intended to help with boosting the initial rendering performance if you are loading a big amount of Input components at once. * @default false */ disableInjectingGlobalStyles?: boolean; diff --git a/packages/mui-material/src/InputBase/InputBase.js b/packages/mui-material/src/InputBase/InputBase.js index 6f97d5d125a92f..aca7f64b93ce34 100644 --- a/packages/mui-material/src/InputBase/InputBase.js +++ b/packages/mui-material/src/InputBase/InputBase.js @@ -609,7 +609,8 @@ InputBase.propTypes /* remove-proptypes */ = { */ disabled: PropTypes.bool, /** - * If `true`, GlobalStyles for the auto-fill keyframes will not be injected/removed on mount/unmount. Make sure to inject them at the top of your application. This option is intended to help with boosting the initial rendering performance if you are loading a big amount of Input components at once. + * If `true`, GlobalStyles for the auto-fill keyframes will not be injected/removed on mount/unmount. Make sure to inject them at the top of your application. + * This option is intended to help with boosting the initial rendering performance if you are loading a big amount of Input components at once. * @default false */ disableInjectingGlobalStyles: PropTypes.bool,