From 7cd61d884c84878fdb18a3e647da61664e2dcf3d Mon Sep 17 00:00:00 2001 From: Jacob Logan Date: Fri, 11 Feb 2022 10:11:18 -0700 Subject: [PATCH 1/6] update SwitchField to allow updates when controlled, updated documentation to reflect and display this change --- .../examples/SwitchFieldIsCheckedExample.tsx | 24 ++++++++++- .../pages/components/switchfield/react.mdx | 4 +- .../__tests__/SwitchField.test.tsx | 43 +++++++++++++++++-- .../src/primitives/SwitchField/useSwitch.ts | 9 ++-- 4 files changed, 69 insertions(+), 11 deletions(-) diff --git a/docs/src/pages/components/switchfield/examples/SwitchFieldIsCheckedExample.tsx b/docs/src/pages/components/switchfield/examples/SwitchFieldIsCheckedExample.tsx index e0f85c7eef6..fe2dad11be8 100644 --- a/docs/src/pages/components/switchfield/examples/SwitchFieldIsCheckedExample.tsx +++ b/docs/src/pages/components/switchfield/examples/SwitchFieldIsCheckedExample.tsx @@ -1,5 +1,25 @@ -import { SwitchField } from '@aws-amplify/ui-react'; +import { SwitchField, Button } from '@aws-amplify/ui-react'; +import * as React from 'react'; export const SwitchFieldIsCheckedExample = () => { - return ; + const [isChecked, setIsChecked] = React.useState(true); + + return ( + <> + { + setIsChecked(e.target.checked); + }} + /> + + + ); }; diff --git a/docs/src/pages/components/switchfield/react.mdx b/docs/src/pages/components/switchfield/react.mdx index f669ff68e89..3e3a0024889 100644 --- a/docs/src/pages/components/switchfield/react.mdx +++ b/docs/src/pages/components/switchfield/react.mdx @@ -45,7 +45,9 @@ The most basic usage simply includes a SwitchField component passing in a requir ### isChecked -The `isChecked` property is a `boolean` value that defines if the switch is on or off. This is a boolean property and being set to either true or false will change this into a controlled switchField which can only be switched on or off using this controlled value. +The `isChecked` property is a `boolean` value that defines if the switch is on or off. This is a boolean property and being set to either true or false will change this into a controlled switchField. +If you would like to be able to toggle a controlled `SwitchField` through the click event of the `SwitchField` component, you will need to pass in an `onChange` event function which updates the controlled value. +This is demonstrated in the example below. diff --git a/packages/react/src/primitives/SwitchField/__tests__/SwitchField.test.tsx b/packages/react/src/primitives/SwitchField/__tests__/SwitchField.test.tsx index 83f08709b10..09ed191c849 100644 --- a/packages/react/src/primitives/SwitchField/__tests__/SwitchField.test.tsx +++ b/packages/react/src/primitives/SwitchField/__tests__/SwitchField.test.tsx @@ -94,6 +94,23 @@ describe('Switch Field', () => { }); describe('Input', () => { + let updateControlledValue; + const ControlledSwitch = () => { + const [isChecked, setIsChecked] = React.useState(true); + const changeFunction = (e) => { + setIsChecked(e.target.checked); + }; + updateControlledValue = setIsChecked; + + return ( + + ); + }; + it('should create a checkbox input element', async () => { const { container } = render(); @@ -128,14 +145,34 @@ describe('Switch Field', () => { }); it('should set the input to checked with the isChecked prop', async () => { - const { container } = render( - - ); + const { container } = render(); const field = container.getElementsByTagName('input')[0]; expect(field).toBeChecked(); }); + it('should update the checked value when a controlled value is updated', async () => { + render(); + + let input = await screen.findByLabelText(label); + expect(input).toBeChecked(); + + updateControlledValue(false); + input = await screen.findByLabelText(label); + expect(input).not.toBeChecked(); + }); + + it('should update the checked value with a click event', async () => { + render(); + + let input = await screen.findByLabelText(label); + expect(input).toBeChecked(); + + userEvent.click(input); + input = await screen.findByLabelText(label); + expect(input).not.toBeChecked(); + }); + it('should set the input to checked with the defaultChecked prop', async () => { const { container } = render( diff --git a/packages/react/src/primitives/SwitchField/useSwitch.ts b/packages/react/src/primitives/SwitchField/useSwitch.ts index 6d9cf863359..3b05723b131 100644 --- a/packages/react/src/primitives/SwitchField/useSwitch.ts +++ b/packages/react/src/primitives/SwitchField/useSwitch.ts @@ -12,12 +12,11 @@ export const useSwitch = (props) => { event.preventDefault(); return; } - if (!isControlled) { - typeof onChange === 'function' && onChange(event); - setIsOn(event.target.checked); - } + + typeof onChange === 'function' && onChange(event); + setIsOn(event.target.checked); }, - [onChange, isControlled, isDisabled] + [onChange, isDisabled] ); if (isControlled && isOn !== isChecked) { From 6101bafeb261b1a00dbf5a30d13db40e20f5f8ec Mon Sep 17 00:00:00 2001 From: jacoblogan Date: Fri, 11 Feb 2022 10:37:14 -0700 Subject: [PATCH 2/6] Create three-dryers-swim.md --- .changeset/three-dryers-swim.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/three-dryers-swim.md diff --git a/.changeset/three-dryers-swim.md b/.changeset/three-dryers-swim.md new file mode 100644 index 00000000000..cc521685fa4 --- /dev/null +++ b/.changeset/three-dryers-swim.md @@ -0,0 +1,6 @@ +--- +"docs": patch +"@aws-amplify/ui-react": patch +--- + +update SwitchField to allow updates on controlled component From de6b186be40f453874a095ec88541508eebea531 Mon Sep 17 00:00:00 2001 From: Joe Buono Date: Fri, 11 Feb 2022 13:06:59 -0500 Subject: [PATCH 3/6] Delete three-dryers-swim.md --- .changeset/three-dryers-swim.md | 6 ------ 1 file changed, 6 deletions(-) delete mode 100644 .changeset/three-dryers-swim.md diff --git a/.changeset/three-dryers-swim.md b/.changeset/three-dryers-swim.md deleted file mode 100644 index cc521685fa4..00000000000 --- a/.changeset/three-dryers-swim.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -"docs": patch -"@aws-amplify/ui-react": patch ---- - -update SwitchField to allow updates on controlled component From 061afdd3ca216b799dce3ec6d059de58bf6e5550 Mon Sep 17 00:00:00 2001 From: jacoblogan Date: Mon, 14 Feb 2022 10:06:15 -0700 Subject: [PATCH 4/6] Create fifty-keys-move.md --- .changeset/fifty-keys-move.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/fifty-keys-move.md diff --git a/.changeset/fifty-keys-move.md b/.changeset/fifty-keys-move.md new file mode 100644 index 00000000000..102e34fe2e5 --- /dev/null +++ b/.changeset/fifty-keys-move.md @@ -0,0 +1,6 @@ +--- +"docs": patch +"@aws-amplify/ui-react": patch +--- + +update SwitchField to allow user updates on controlled component From a974e8ffc52e65ea5b5429ca90969d1f5c72ec2c Mon Sep 17 00:00:00 2001 From: Jacob Logan Date: Mon, 14 Feb 2022 10:31:03 -0700 Subject: [PATCH 5/6] update switchfield docs to add 'controlled component' section --- docs/src/pages/components/switchfield/react.mdx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/src/pages/components/switchfield/react.mdx b/docs/src/pages/components/switchfield/react.mdx index 3e3a0024889..79e4c439703 100644 --- a/docs/src/pages/components/switchfield/react.mdx +++ b/docs/src/pages/components/switchfield/react.mdx @@ -43,11 +43,11 @@ The most basic usage simply includes a SwitchField component passing in a requir {() => import('./../shared/formFieldAccessibility.mdx')} -### isChecked +### Controlled component -The `isChecked` property is a `boolean` value that defines if the switch is on or off. This is a boolean property and being set to either true or false will change this into a controlled switchField. -If you would like to be able to toggle a controlled `SwitchField` through the click event of the `SwitchField` component, you will need to pass in an `onChange` event function which updates the controlled value. -This is demonstrated in the example below. +The `SwitchFIeld` can be a controlled component by passing in the controlled boolean value as the `isChecked` prop. +To allow the user to toggle a controlled `SwitchField`, the `onChange` handler must be passed in and update the controlled +value. An example of this pattern is displayed below. From fa12e7427917662080edc8cf3ac3d4eb513f85e6 Mon Sep 17 00:00:00 2001 From: Jacob Logan Date: Mon, 14 Feb 2022 10:39:42 -0700 Subject: [PATCH 6/6] remove docs patch update from changeset --- .changeset/fifty-keys-move.md | 1 - 1 file changed, 1 deletion(-) diff --git a/.changeset/fifty-keys-move.md b/.changeset/fifty-keys-move.md index 102e34fe2e5..d0164cc55cd 100644 --- a/.changeset/fifty-keys-move.md +++ b/.changeset/fifty-keys-move.md @@ -1,5 +1,4 @@ --- -"docs": patch "@aws-amplify/ui-react": patch ---