From fda21d17a065b349de9c0eb73e4cf399de9721a3 Mon Sep 17 00:00:00 2001 From: Emmanuel Etti Date: Wed, 18 Jan 2023 23:03:57 +0000 Subject: [PATCH 1/5] Removing mouse up and mouse down from modal Co-authored-by: Jason Kurian --- .changeset/gentle-chefs-hear.md | 5 +++++ .../src/components/Backdrop/Backdrop.tsx | 21 ++----------------- polaris-react/src/components/Modal/Modal.tsx | 2 +- 3 files changed, 8 insertions(+), 20 deletions(-) create mode 100644 .changeset/gentle-chefs-hear.md diff --git a/.changeset/gentle-chefs-hear.md b/.changeset/gentle-chefs-hear.md new file mode 100644 index 00000000000..1efb11fa3c5 --- /dev/null +++ b/.changeset/gentle-chefs-hear.md @@ -0,0 +1,5 @@ +--- +'@shopify/polaris': major +--- + +Replaces mouse up and down events on Backdrop with onClick to close Modal diff --git a/polaris-react/src/components/Backdrop/Backdrop.tsx b/polaris-react/src/components/Backdrop/Backdrop.tsx index 4a0ca77d734..ba274071f75 100644 --- a/polaris-react/src/components/Backdrop/Backdrop.tsx +++ b/polaris-react/src/components/Backdrop/Backdrop.tsx @@ -1,4 +1,4 @@ -import React, {Dispatch, SetStateAction} from 'react'; +import React from 'react'; import {classNames} from '../../utilities/css'; import {ScrollLock} from '../ScrollLock'; @@ -10,12 +10,10 @@ export interface BackdropProps { transparent?: boolean; onClick?(): void; onTouchStart?(): void; - setClosing?: Dispatch>; } export function Backdrop(props: BackdropProps) { - const {onClick, onTouchStart, belowNavigation, transparent, setClosing} = - props; + const {onClick, onTouchStart, belowNavigation, transparent} = props; const className = classNames( styles.Backdrop, @@ -23,19 +21,6 @@ export function Backdrop(props: BackdropProps) { transparent && styles.transparent, ); - const handleMouseDown = () => { - if (setClosing) { - setClosing(true); - } - }; - - const handleMouseUp = () => { - if (setClosing && onClick) { - setClosing(false); - onClick(); - } - }; - return ( <> @@ -43,8 +28,6 @@ export function Backdrop(props: BackdropProps) { className={className} onClick={onClick} onTouchStart={onTouchStart} - onMouseDown={handleMouseDown} - onMouseUp={handleMouseUp} /> ); diff --git a/polaris-react/src/components/Modal/Modal.tsx b/polaris-react/src/components/Modal/Modal.tsx index e75db6efca2..73ad7c3d358 100644 --- a/polaris-react/src/components/Modal/Modal.tsx +++ b/polaris-react/src/components/Modal/Modal.tsx @@ -217,7 +217,7 @@ export const Modal: React.FunctionComponent & { ); - backdrop = ; + backdrop = ; } const animated = !instant; From 5d19dcf54a04ade7afbbfc6dc181c66271b14e97 Mon Sep 17 00:00:00 2001 From: Emmanuel Etti Date: Mon, 23 Jan 2023 17:54:57 +0000 Subject: [PATCH 2/5] Adding animation to Modal closing icon --- .../src/components/Backdrop/Backdrop.tsx | 22 ++++++++++++++++--- polaris-react/src/components/Modal/Modal.tsx | 2 +- 2 files changed, 20 insertions(+), 4 deletions(-) diff --git a/polaris-react/src/components/Backdrop/Backdrop.tsx b/polaris-react/src/components/Backdrop/Backdrop.tsx index ba274071f75..ed8319955d3 100644 --- a/polaris-react/src/components/Backdrop/Backdrop.tsx +++ b/polaris-react/src/components/Backdrop/Backdrop.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, {Dispatch, SetStateAction} from 'react'; import {classNames} from '../../utilities/css'; import {ScrollLock} from '../ScrollLock'; @@ -10,10 +10,12 @@ export interface BackdropProps { transparent?: boolean; onClick?(): void; onTouchStart?(): void; + setClosing?: Dispatch>; } export function Backdrop(props: BackdropProps) { - const {onClick, onTouchStart, belowNavigation, transparent} = props; + const {onClick, onTouchStart, belowNavigation, transparent, setClosing} = + props; const className = classNames( styles.Backdrop, @@ -21,13 +23,27 @@ export function Backdrop(props: BackdropProps) { transparent && styles.transparent, ); + const handleMouseDown = () => { + if (setClosing) { + setClosing(true); + } + }; + + const handleClick = () => { + if (setClosing && onClick) { + setClosing(false); + onClick(); + } + }; + return ( <>
); diff --git a/polaris-react/src/components/Modal/Modal.tsx b/polaris-react/src/components/Modal/Modal.tsx index 73ad7c3d358..e75db6efca2 100644 --- a/polaris-react/src/components/Modal/Modal.tsx +++ b/polaris-react/src/components/Modal/Modal.tsx @@ -217,7 +217,7 @@ export const Modal: React.FunctionComponent & { ); - backdrop = ; + backdrop = ; } const animated = !instant; From a74a21b33888eab16d01bc7adcdafc95231aa9a6 Mon Sep 17 00:00:00 2001 From: Emmanuel Etti Date: Mon, 23 Jan 2023 20:16:05 +0000 Subject: [PATCH 3/5] Adds passing test --- .../src/components/Backdrop/tests/Backdrop.test.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/polaris-react/src/components/Backdrop/tests/Backdrop.test.tsx b/polaris-react/src/components/Backdrop/tests/Backdrop.test.tsx index 7a7d8fdf8f0..0e43260b0c5 100644 --- a/polaris-react/src/components/Backdrop/tests/Backdrop.test.tsx +++ b/polaris-react/src/components/Backdrop/tests/Backdrop.test.tsx @@ -4,11 +4,13 @@ import {mountWithApp} from 'tests/utilities'; import {Backdrop} from '..'; describe('', () => { - describe('onDismiss()', () => { + describe('onClick()', () => { it('is called when the backdrop is clicked', () => { const spy = jest.fn(); - const backdrop = mountWithApp(); - backdrop.find('div', {onClick: spy})!.trigger('onClick'); + const backdrop = mountWithApp( + {}} />, + ); + backdrop.find('div')!.trigger('onClick'); expect(spy).toHaveBeenCalled(); }); }); From 6cc4cd589928535e7dee6f900bd69f04c6b34d6d Mon Sep 17 00:00:00 2001 From: Emmanuel Etti Date: Mon, 23 Jan 2023 20:25:56 +0000 Subject: [PATCH 4/5] Changes contribution from major to patch --- .changeset/gentle-chefs-hear.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/gentle-chefs-hear.md b/.changeset/gentle-chefs-hear.md index 1efb11fa3c5..b01d618870a 100644 --- a/.changeset/gentle-chefs-hear.md +++ b/.changeset/gentle-chefs-hear.md @@ -1,5 +1,5 @@ --- -'@shopify/polaris': major +'@shopify/polaris': patch --- Replaces mouse up and down events on Backdrop with onClick to close Modal From 283ee4404551c87db382530efda4b7b520f39422 Mon Sep 17 00:00:00 2001 From: Emmanuel Etti <78582921+emmanueletti@users.noreply.github.com> Date: Tue, 24 Jan 2023 08:39:05 -0800 Subject: [PATCH 5/5] Update .changeset/gentle-chefs-hear.md Co-authored-by: Kyle Durand --- .changeset/gentle-chefs-hear.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/gentle-chefs-hear.md b/.changeset/gentle-chefs-hear.md index b01d618870a..476548e6a6a 100644 --- a/.changeset/gentle-chefs-hear.md +++ b/.changeset/gentle-chefs-hear.md @@ -2,4 +2,4 @@ '@shopify/polaris': patch --- -Replaces mouse up and down events on Backdrop with onClick to close Modal +Replaced mouse up and down events on Backdrop with onClick to close Modal