From 1443f068010f34c3e33f1744533b7151f37a1860 Mon Sep 17 00:00:00 2001 From: Matheus Wichman Date: Wed, 21 Apr 2021 14:18:06 -0300 Subject: [PATCH 1/4] [SwitchBase] Remove checked argument from onChange --- .../src/pages/guides/migration-v4/migration-v4.md | 15 +++++++++++++++ packages/material-ui/src/internal/SwitchBase.d.ts | 2 +- packages/material-ui/src/internal/SwitchBase.js | 7 ++----- .../material-ui/src/internal/SwitchBase.test.js | 5 +++-- 4 files changed, 21 insertions(+), 8 deletions(-) diff --git a/docs/src/pages/guides/migration-v4/migration-v4.md b/docs/src/pages/guides/migration-v4/migration-v4.md index 9dba9813dffef0..40ef50a96bba7a 100644 --- a/docs/src/pages/guides/migration-v4/migration-v4.md +++ b/docs/src/pages/guides/migration-v4/migration-v4.md @@ -1121,6 +1121,21 @@ As the core components use emotion as a styled engine, the props used by emotion ``` +### Switch + +- Remove the second argument from `onChange`. You can pull out the checked state by accessing `event.target.checked`. + + ```diff + function MySwitch() { + - const handleChange = (event: any, checked: boolean) => { + + const handleChange = (event: any) => { + + const checked = event.target.checked; + }; + + return ; + } + ``` + ### Table - The customization of the table pagination's actions labels must be done with the `getItemAriaLabel` prop. This increases consistency with the `Pagination` component. diff --git a/packages/material-ui/src/internal/SwitchBase.d.ts b/packages/material-ui/src/internal/SwitchBase.d.ts index 5138340dfafcfd..6d2f10c726b830 100644 --- a/packages/material-ui/src/internal/SwitchBase.d.ts +++ b/packages/material-ui/src/internal/SwitchBase.d.ts @@ -52,7 +52,7 @@ export interface SwitchBaseProps * You can pull out the new value by accessing `event.target.value` (string). * You can pull out the new checked state by accessing `event.target.checked` (boolean). */ - onChange?: (event: React.ChangeEvent, checked: boolean) => void; + onChange?: (event: React.ChangeEvent) => void; readOnly?: boolean; /** * If `true`, the `input` element is required. diff --git a/packages/material-ui/src/internal/SwitchBase.js b/packages/material-ui/src/internal/SwitchBase.js index 16d9fd3e21acba..79d3a5b47a674b 100644 --- a/packages/material-ui/src/internal/SwitchBase.js +++ b/packages/material-ui/src/internal/SwitchBase.js @@ -100,13 +100,10 @@ const SwitchBase = React.forwardRef(function SwitchBase(props, ref) { return; } - const newChecked = event.target.checked; - - setCheckedState(newChecked); + setCheckedState(event.target.checked); if (onChange) { - // TODO v5: remove the second argument. - onChange(event, newChecked); + onChange(event); } }; diff --git a/packages/material-ui/src/internal/SwitchBase.test.js b/packages/material-ui/src/internal/SwitchBase.test.js index 0eb21e0e355593..a39f7d1ae8b1e6 100644 --- a/packages/material-ui/src/internal/SwitchBase.test.js +++ b/packages/material-ui/src/internal/SwitchBase.test.js @@ -196,7 +196,7 @@ describe('', () => { it('should call onChange when controlled', () => { const checked = true; const handleChange = spy(); - const { getByRole } = render( + const { getByRole, setProps } = render( ', () => { ); getByRole('checkbox').click(); + setProps({ checked: false }); expect(handleChange.callCount).to.equal(1); - expect(handleChange.firstCall.args[1]).to.equal(!checked); + expect(handleChange.firstCall.args[0].target.checked).to.equal(!checked); }); it('should not change checkbox state when event is default prevented', () => { From ea3e135d6cc4a6294eec15317a933a00e6803033 Mon Sep 17 00:00:00 2001 From: Matheus Wichman Date: Wed, 21 Apr 2021 19:41:17 -0300 Subject: [PATCH 2/4] Update docs/src/pages/guides/migration-v4/migration-v4.md Co-authored-by: Olivier Tassinari --- docs/src/pages/guides/migration-v4/migration-v4.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/src/pages/guides/migration-v4/migration-v4.md b/docs/src/pages/guides/migration-v4/migration-v4.md index 40ef50a96bba7a..c81c9ee74dc5fe 100644 --- a/docs/src/pages/guides/migration-v4/migration-v4.md +++ b/docs/src/pages/guides/migration-v4/migration-v4.md @@ -1127,8 +1127,8 @@ As the core components use emotion as a styled engine, the props used by emotion ```diff function MySwitch() { - - const handleChange = (event: any, checked: boolean) => { - + const handleChange = (event: any) => { + - const handleChange = (event: React.ChangeEvent, checked: boolean) => { + + const handleChange = (event: React.ChangeEvent) => { + const checked = event.target.checked; }; From a1e5c24ca07c89ad0b0d0ba92a790181067f0790 Mon Sep 17 00:00:00 2001 From: Matheus Wichman Date: Wed, 21 Apr 2021 19:53:04 -0300 Subject: [PATCH 3/4] Add Checkbox to migration guide --- .../src/pages/guides/migration-v4/migration-v4.md | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/docs/src/pages/guides/migration-v4/migration-v4.md b/docs/src/pages/guides/migration-v4/migration-v4.md index c81c9ee74dc5fe..3053a453eecdc7 100644 --- a/docs/src/pages/guides/migration-v4/migration-v4.md +++ b/docs/src/pages/guides/migration-v4/migration-v4.md @@ -478,6 +478,21 @@ As the core components use emotion as a styled engine, the props used by emotion +