[Modal] Trigger pressed animation on backdrop click

.changeset/strong-poems-double.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Clicking on the modal backdrop triggers the pressed state of the modal's close button

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,24 +10,41 @@ export interface BackdropProps {
   transparent?: boolean;
   onClick?(): void;
   onTouchStart?(): void;
+  setClosing?: Dispatch<SetStateAction<boolean>>;
 }
 
 export function Backdrop(props: BackdropProps) {
-  const {onClick, onTouchStart, belowNavigation, transparent} = props;
+  const {onClick, onTouchStart, belowNavigation, transparent, setClosing} =
+    props;
 
   const className = classNames(
     styles.Backdrop,
     belowNavigation && styles.belowNavigation,
     transparent && styles.transparent,
   );
 
+  const handleMouseDown = () => {
+    if (setClosing) {
+      setClosing(true);
+    }
+  };
+
+  const handleMouseUp = () => {
+    if (setClosing && onClick) {
+      setClosing(false);
+      onClick();
+    }
+  };
+
   return (
     <>
       <ScrollLock />
       <div
         className={className}
         onClick={onClick}
         onTouchStart={onTouchStart}
+        onMouseDown={handleMouseDown}
+        onMouseUp={handleMouseUp}
       />
     </>
   );

polaris-react/src/components/Modal/Modal.tsx

@@ -90,6 +90,7 @@ export const Modal: React.FunctionComponent<ModalProps> & {
   fullScreen,
 }: ModalProps) {
   const [iframeHeight, setIframeHeight] = useState(IFRAME_LOADING_HEIGHT);
+  const [closing, setClosing] = useState(false);
 
   const headerId = useUniqueId('modal-header');
   const activatorRef = useRef<HTMLDivElement>(null);
@@ -195,16 +196,22 @@ export const Modal: React.FunctionComponent<ModalProps> & {
         small={small}
         limitHeight={limitHeight}
         fullScreen={fullScreen}
+        setClosing={setClosing}
       >
-        <Header titleHidden={titleHidden} id={headerId} onClose={onClose}>
+        <Header
+          titleHidden={titleHidden}
+          id={headerId}
+          closing={closing}
+          onClose={onClose}
+        >
           {title}
         </Header>
         <div className={styles.BodyWrapper}>{bodyMarkup}</div>
         {footerMarkup}
       </Dialog>
     );
 
-    backdrop = <Backdrop onClick={onClose} />;
+    backdrop = <Backdrop setClosing={setClosing} onClick={onClose} />;
   }
 
   const animated = !instant;

polaris-react/src/components/Modal/components/CloseButton/CloseButton.scss

@@ -13,7 +13,8 @@
     @include recolor-icon(var(--p-icon-hovered));
   }
 
-  &:active {
+  &:active,
+  &.pressed {
     background: var(--p-surface-pressed);
   }
 

polaris-react/src/components/Modal/components/CloseButton/CloseButton.tsx

@@ -8,11 +8,16 @@ import {Icon} from '../../../Icon';
 import styles from './CloseButton.scss';
 
 export interface CloseButtonProps {
+  pressed?: boolean;
   titleHidden?: boolean;
   onClick(): void;
 }
 
-export function CloseButton({titleHidden = false, onClick}: CloseButtonProps) {
+export function CloseButton({
+  pressed,
+  titleHidden = false,
+  onClick,
+}: CloseButtonProps) {
   const i18n = useI18n();
 
   return (
@@ -21,6 +26,7 @@ export function CloseButton({titleHidden = false, onClick}: CloseButtonProps) {
       className={classNames(
         styles.CloseButton,
         titleHidden && styles.titleHidden,
+        pressed && styles.pressed,
       )}
       aria-label={i18n.translate('Polaris.Common.close')}
     >

polaris-react/src/components/Modal/components/Dialog/Dialog.tsx

@@ -1,4 +1,4 @@
-import React, {useRef, useEffect} from 'react';
+import React, {useRef, useEffect, SetStateAction, Dispatch} from 'react';
 import {Transition, CSSTransition} from 'react-transition-group';
 import {motion} from '@shopify/polaris-tokens';
 
@@ -22,6 +22,7 @@ export interface DialogProps {
   onExited?(): void;
   in?: boolean;
   fullScreen?: boolean;
+  setClosing?: Dispatch<SetStateAction<boolean>>;
 }
 
 export function Dialog({
@@ -35,6 +36,7 @@ export function Dialog({
   small,
   limitHeight,
   fullScreen,
+  setClosing,
   ...props
 }: DialogProps) {
   const containerNode = useRef<HTMLDivElement>(null);
@@ -53,6 +55,19 @@ export function Dialog({
       focusFirstFocusableNode(containerNode.current);
   }, []);
 
+  const handleKeyDown = () => {
+    if (setClosing) {
+      setClosing(true);
+    }
+  };
+
+  const handleKeyUp = () => {
+    if (setClosing) {
+      setClosing(false);
+    }
+    onClose();
+  };
+
   return (
     <TransitionChild
       {...props}
@@ -78,7 +93,12 @@ export function Dialog({
             className={styles.Dialog}
           >
             <div className={classes}>
-              <KeypressListener keyCode={Key.Escape} handler={onClose} />
+              <KeypressListener
+                keyCode={Key.Escape}
+                keyEvent="keydown"
+                handler={handleKeyDown}
+              />
+              <KeypressListener keyCode={Key.Escape} handler={handleKeyUp} />
               {children}
             </div>
           </div>

polaris-react/src/components/Modal/components/Header/Header.tsx

@@ -8,11 +8,18 @@ import styles from './Header.scss';
 export interface HeaderProps {
   id: string;
   titleHidden: boolean;
+  closing: boolean;
   children?: React.ReactNode;
   onClose(): void;
 }
 
-export function Header({id, titleHidden, children, onClose}: HeaderProps) {
+export function Header({
+  id,
+  titleHidden,
+  closing,
+  children,
+  onClose,
+}: HeaderProps) {
   return (
     <div
       className={titleHidden || !children ? styles.titleHidden : styles.Header}
@@ -22,7 +29,11 @@ export function Header({id, titleHidden, children, onClose}: HeaderProps) {
           {children}
         </Text>
       </div>
-      <CloseButton titleHidden={titleHidden} onClick={onClose} />
+      <CloseButton
+        pressed={closing}
+        titleHidden={titleHidden}
+        onClick={onClose}
+      />
     </div>
   );
 }