From ecaf032fce390628d6158678b39cbb08e8e1b30b Mon Sep 17 00:00:00 2001
From: Rushi Vishavadia <rushi@xola.com>
Date: Wed, 15 Feb 2023 17:28:29 +0530
Subject: [PATCH 01/11] Initial cut to slide from bottom

---
 src/components/Modal.jsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/Modal.jsx b/src/components/Modal.jsx
index 4f8a3c88c..9a297d63f 100644
--- a/src/components/Modal.jsx
+++ b/src/components/Modal.jsx
@@ -49,17 +49,18 @@ export const Modal = ({
                     <Transition.Child
                         as={Fragment}
                         enter="ease-out duration-300"
-                        enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+                        enterFrom="opacity-0 translate-y-full sm:translate-y-0 sm:scale-95"
                         enterTo="opacity-100 translate-y-0 sm:scale-100"
                         leave="ease-in duration-200"
                         leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-                        leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+                        leaveTo="opacity-0 translate-y-full sm:translate-y-0 sm:scale-95"
                     >
                         <div
                             className={clsx(
                                 className,
                                 sizes[size],
-                                "inline-block w-full transform overflow-hidden rounded-lg bg-white p-10 text-left align-middle shadow-xl transition-all",
+                                "inline-block w-full transform overflow-hidden rounded-lg bg-white p-10 text-left",
+                                "align-bottom shadow-xl transition-all",
                             )}
                         >
                             {onClose ? (

From f3bf01aee2bd7fed79d8d2ec5e42f6e996652f5f Mon Sep 17 00:00:00 2001
From: Rushi Vishavadia <rushi@xola.com>
Date: Wed, 15 Feb 2023 17:34:23 +0530
Subject: [PATCH 02/11] Set spacing and border radius

---
 src/components/Modal.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Modal.jsx b/src/components/Modal.jsx
index 9a297d63f..1107321d3 100644
--- a/src/components/Modal.jsx
+++ b/src/components/Modal.jsx
@@ -28,7 +28,7 @@ export const Modal = ({
     return (
         <Transition appear show={isOpen} as={Fragment}>
             <Dialog as="div" className="ui-modal fixed inset-0 z-30 overflow-y-auto" onClose={handleOutsideClick}>
-                <div className="min-h-screen px-4 text-center">
+                <div className="min-h-screen p-0 pt-10 text-center">
                     <Transition.Child
                         as={Fragment}
                         enter="ease-out duration-300"
@@ -59,7 +59,7 @@ export const Modal = ({
                             className={clsx(
                                 className,
                                 sizes[size],
-                                "inline-block w-full transform overflow-hidden rounded-lg bg-white p-10 text-left",
+                                "inline-block w-full transform overflow-hidden rounded-tl-2xl rounded-tr-2xl bg-white p-10 text-left",
                                 "align-bottom shadow-xl transition-all",
                             )}
                         >

From 08b8f24dd0ea6e78c29ceef4f347acc672fa5974 Mon Sep 17 00:00:00 2001
From: Rushi Vishavadia <rushi@xola.com>
Date: Wed, 15 Feb 2023 18:07:16 +0530
Subject: [PATCH 03/11] Almost final improvements

---
 src/components/Modal.jsx | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/components/Modal.jsx b/src/components/Modal.jsx
index 1107321d3..5f9053c49 100644
--- a/src/components/Modal.jsx
+++ b/src/components/Modal.jsx
@@ -41,17 +41,17 @@ export const Modal = ({
                         <Dialog.Overlay className="ui-modal-overlay fixed inset-0 bg-gray-dark bg-opacity-75 transition-opacity" />
                     </Transition.Child>
 
-                    {/* This element is to trick the browser into centering the modal contents. */}
-                    <span className="inline-block h-screen align-middle" aria-hidden="true">
+                    {/* For desktop only this element is to trick the browser into centering the modal contents. */}
+                    <span className="hidden h-screen align-middle sm:inline-block" aria-hidden="true">
                         &#8203;
                     </span>
 
                     <Transition.Child
                         as={Fragment}
-                        enter="ease-out duration-300"
-                        enterFrom="opacity-0 translate-y-full sm:translate-y-0 sm:scale-95"
+                        enter="ease-in-out duration-500 sm:duration-300"
+                        enterFrom="opacity-0 translate-y-30 sm:translate-y-4 sm:scale-95"
                         enterTo="opacity-100 translate-y-0 sm:scale-100"
-                        leave="ease-in duration-200"
+                        leave="ease-in duration-500 sm:duration-200"
                         leaveFrom="opacity-100 translate-y-0 sm:scale-100"
                         leaveTo="opacity-0 translate-y-full sm:translate-y-0 sm:scale-95"
                     >
@@ -59,8 +59,10 @@ export const Modal = ({
                             className={clsx(
                                 className,
                                 sizes[size],
-                                "inline-block w-full transform overflow-hidden rounded-tl-2xl rounded-tr-2xl bg-white p-10 text-left",
-                                "align-bottom shadow-xl transition-all",
+                                "w-full transform overflow-hidden rounded-tl-2xl rounded-tr-2xl bg-white sm:rounded-lg",
+                                "absolute bottom-0 sm:relative sm:inline-block sm:inline-block",
+                                "p-10 text-left",
+                                "shadow-xl transition-all",
                             )}
                         >
                             {onClose ? (

From f3e9b72a993b6177c94d226f5d804698771a6ecf Mon Sep 17 00:00:00 2001
From: Rushi Vishavadia <rushi@xola.com>
Date: Thu, 16 Feb 2023 11:45:05 +0530
Subject: [PATCH 04/11] Add 72px config and add swipe down bar + responsive
 fixes

---
 src/components/Modal.jsx | 22 +++++++++++++---------
 tailwind.config.js       |  1 +
 2 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/src/components/Modal.jsx b/src/components/Modal.jsx
index 5f9053c49..60742aad0 100644
--- a/src/components/Modal.jsx
+++ b/src/components/Modal.jsx
@@ -4,11 +4,12 @@ import PropTypes from "prop-types";
 import React, { Fragment } from "react";
 import { CloseIcon } from "../icons/CloseIcon";
 
+// Widths are for desktop designs because mobile is always full width
 const sizes = {
-    small: "max-w-100",
-    medium: "max-w-125",
-    large: "max-w-150",
-    huge: "max-w-200",
+    small: "sm:max-w-100",
+    medium: "sm:max-w-125",
+    large: "sm:max-w-150",
+    huge: "sm:max-w-200",
 };
 
 export const Modal = ({
@@ -28,7 +29,7 @@ export const Modal = ({
     return (
         <Transition appear show={isOpen} as={Fragment}>
             <Dialog as="div" className="ui-modal fixed inset-0 z-30 overflow-y-auto" onClose={handleOutsideClick}>
-                <div className="min-h-screen p-0 pt-10 text-center">
+                <div className="min-h-screen p-0 text-center">
                     <Transition.Child
                         as={Fragment}
                         enter="ease-out duration-300"
@@ -59,10 +60,9 @@ export const Modal = ({
                             className={clsx(
                                 className,
                                 sizes[size],
-                                "w-full transform overflow-hidden rounded-tl-2xl rounded-tr-2xl bg-white sm:rounded-lg",
                                 "absolute bottom-0 sm:relative sm:inline-block sm:inline-block",
-                                "p-10 text-left",
-                                "shadow-xl transition-all",
+                                "w-full transform overflow-hidden rounded-tl-2xl rounded-tr-2xl bg-white py-4 px-8",
+                                "text-left shadow-xl transition-all sm:rounded-lg sm:p-10",
                             )}
                         >
                             {onClose ? (
@@ -75,7 +75,11 @@ export const Modal = ({
                                 </button>
                             ) : null}
 
-                            {children}
+                            {/* Show a little bar at the top in mobile only to show you can swipe this down */}
+                            <div className="absolute left-1/2 h-1.5 w-18 -translate-x-1/2 rounded-full bg-black opacity-10 sm:hidden"></div>
+
+                            {/* The actual content of the modal with padding for mobile only */}
+                            <div className="pt-6 sm:pt-0">{children}</div>
                         </div>
                     </Transition.Child>
                 </div>
diff --git a/tailwind.config.js b/tailwind.config.js
index 116c4adf1..e03cddc57 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -91,6 +91,7 @@ const spacing = {
     14: "56px",
     15: "60px",
     16: "64px",
+    18: "72px",
     20: "80px",
     24: "96px",
     25: "100px",

From e62ce0fd8c52db111f60526f7cb74fa73c45c228 Mon Sep 17 00:00:00 2001
From: Rushi Vishavadia <rushi@xola.com>
Date: Thu, 16 Feb 2023 11:45:37 +0530
Subject: [PATCH 05/11] =?UTF-8?q?=F0=9F=A7=B9=20Lint?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Modal.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Modal.jsx b/src/components/Modal.jsx
index 60742aad0..ac9bdc4f6 100644
--- a/src/components/Modal.jsx
+++ b/src/components/Modal.jsx
@@ -76,7 +76,7 @@ export const Modal = ({
                             ) : null}
 
                             {/* Show a little bar at the top in mobile only to show you can swipe this down */}
-                            <div className="absolute left-1/2 h-1.5 w-18 -translate-x-1/2 rounded-full bg-black opacity-10 sm:hidden"></div>
+                            <div className="absolute left-1/2 h-1.5 w-18 -translate-x-1/2 rounded-full bg-black opacity-10 sm:hidden" />
 
                             {/* The actual content of the modal with padding for mobile only */}
                             <div className="pt-6 sm:pt-0">{children}</div>

From 3b2b17e6e7ba97bcaee968960ee05aacf3ae9709 Mon Sep 17 00:00:00 2001
From: Rushi Vishavadia <rushi@xola.com>
Date: Thu, 16 Feb 2023 11:54:45 +0530
Subject: [PATCH 06/11] Add support for swipe to close on mobile for Modal

---
 src/components/Modal.jsx | 24 ++++++++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/src/components/Modal.jsx b/src/components/Modal.jsx
index ac9bdc4f6..dbb3bcadc 100644
--- a/src/components/Modal.jsx
+++ b/src/components/Modal.jsx
@@ -1,7 +1,7 @@
 import { Dialog, Transition } from "@headlessui/react";
 import clsx from "clsx";
 import PropTypes from "prop-types";
-import React, { Fragment } from "react";
+import React, { Fragment, useState } from "react";
 import { CloseIcon } from "../icons/CloseIcon";
 
 // Widths are for desktop designs because mobile is always full width
@@ -20,15 +20,35 @@ export const Modal = ({
     children,
     className,
 }) => {
+    const [startCoordinates, setStartCoordinates] = useState();
     const handleOutsideClick = () => {
         if (shouldCloseOnOutsideClick) {
             onClose();
         }
     };
 
+    const handleTouchStart = (e) => {
+        setStartCoordinates(e.touches[0].clientY);
+    };
+
+    const handleTouchMove = (e) => {
+        const currentY = e.touches[0].clientY;
+        const diffY = currentY - startCoordinates;
+
+        if (diffY > 100) {
+            onClose?.();
+        }
+    };
+
     return (
         <Transition appear show={isOpen} as={Fragment}>
-            <Dialog as="div" className="ui-modal fixed inset-0 z-30 overflow-y-auto" onClose={handleOutsideClick}>
+            <Dialog
+                as="div"
+                className="ui-modal fixed inset-0 z-30 overflow-y-auto"
+                onTouchStart={handleTouchStart}
+                onTouchMove={handleTouchMove}
+                onClose={handleOutsideClick}
+            >
                 <div className="min-h-screen p-0 text-center">
                     <Transition.Child
                         as={Fragment}

From 914f5b42b404a68d864de528791bf3dc274ee183 Mon Sep 17 00:00:00 2001
From: Rushi Vishavadia <rushi@xola.com>
Date: Thu, 16 Feb 2023 12:43:46 +0530
Subject: [PATCH 07/11] Fixes for iOS Safari

---
 src/components/Modal.jsx | 24 +++++++++++++++---------
 1 file changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/components/Modal.jsx b/src/components/Modal.jsx
index dbb3bcadc..366dcf7db 100644
--- a/src/components/Modal.jsx
+++ b/src/components/Modal.jsx
@@ -20,23 +20,29 @@ export const Modal = ({
     children,
     className,
 }) => {
-    const [startCoordinates, setStartCoordinates] = useState();
     const handleOutsideClick = () => {
         if (shouldCloseOnOutsideClick) {
             onClose();
         }
     };
 
+    const [clientY, setClientY] = useState();
     const handleTouchStart = (e) => {
-        setStartCoordinates(e.touches[0].clientY);
+        e.stopPropagation();
+        setClientY(e.touches?.[0].clientY);
     };
 
     const handleTouchMove = (e) => {
-        const currentY = e.touches[0].clientY;
-        const diffY = currentY - startCoordinates;
-
-        if (diffY > 100) {
-            onClose?.();
+        e.stopPropagation();
+        const currentY = e.touches?.[0].clientY;
+        const diffY = currentY - clientY;
+        if (diffY > 80) {
+            // The swipe was more than 80px, so close the div
+            setTimeout(() => {
+                // Hack because sometimes there are other operations queued up and calling close now won't close it
+                onClose();
+                setClientY(null);
+            }, 100);
         }
     };
 
@@ -44,12 +50,12 @@ export const Modal = ({
         <Transition appear show={isOpen} as={Fragment}>
             <Dialog
                 as="div"
-                className="ui-modal fixed inset-0 z-30 overflow-y-auto"
+                className="ui-modal absolute inset-0 z-30 overflow-hidden sm:fixed sm:overflow-auto"
                 onTouchStart={handleTouchStart}
                 onTouchMove={handleTouchMove}
                 onClose={handleOutsideClick}
             >
-                <div className="min-h-screen p-0 text-center">
+                <div className="sm:min-h-screen sm:p-0 sm:text-center">
                     <Transition.Child
                         as={Fragment}
                         enter="ease-out duration-300"

From 4f61021d528bdb5ec5da36f002ac3a0fce90dcfd Mon Sep 17 00:00:00 2001
From: Rushi Vishavadia <rushi@xola.com>
Date: Thu, 16 Feb 2023 12:54:23 +0530
Subject: [PATCH 08/11] Slide down to hide

---
 src/components/Modal.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Modal.jsx b/src/components/Modal.jsx
index 366dcf7db..f210bc0fd 100644
--- a/src/components/Modal.jsx
+++ b/src/components/Modal.jsx
@@ -50,7 +50,7 @@ export const Modal = ({
         <Transition appear show={isOpen} as={Fragment}>
             <Dialog
                 as="div"
-                className="ui-modal absolute inset-0 z-30 overflow-hidden sm:fixed sm:overflow-auto"
+                className="ui-modal fixed inset-0 z-30"
                 onTouchStart={handleTouchStart}
                 onTouchMove={handleTouchMove}
                 onClose={handleOutsideClick}
@@ -80,7 +80,7 @@ export const Modal = ({
                         enterTo="opacity-100 translate-y-0 sm:scale-100"
                         leave="ease-in duration-500 sm:duration-200"
                         leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-                        leaveTo="opacity-0 translate-y-full sm:translate-y-0 sm:scale-95"
+                        leaveTo="opacity-0 translate-y-30 sm:translate-y-0 sm:scale-95"
                     >
                         <div
                             className={clsx(

From c38e435995b9ba02ac4e4a259b75d495090acdc5 Mon Sep 17 00:00:00 2001
From: Rushi Vishavadia <rushi@xola.com>
Date: Thu, 16 Feb 2023 13:01:52 +0530
Subject: [PATCH 09/11] Remove dupe class

---
 src/components/Modal.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Modal.jsx b/src/components/Modal.jsx
index f210bc0fd..82f864d70 100644
--- a/src/components/Modal.jsx
+++ b/src/components/Modal.jsx
@@ -86,7 +86,7 @@ export const Modal = ({
                             className={clsx(
                                 className,
                                 sizes[size],
-                                "absolute bottom-0 sm:relative sm:inline-block sm:inline-block",
+                                "absolute bottom-0 sm:relative sm:inline-block",
                                 "w-full transform overflow-hidden rounded-tl-2xl rounded-tr-2xl bg-white py-4 px-8",
                                 "text-left shadow-xl transition-all sm:rounded-lg sm:p-10",
                             )}

From bb2b57ca784ba5bc1aa6b9affe2ab99ceb1e1da9 Mon Sep 17 00:00:00 2001
From: Rushi Vishavadia <rushi@xola.com>
Date: Thu, 16 Feb 2023 20:07:19 +0530
Subject: [PATCH 10/11] Update story text

---
 src/stories/Overlay/Modal.stories.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/stories/Overlay/Modal.stories.js b/src/stories/Overlay/Modal.stories.js
index 7f51c482d..0172b353b 100644
--- a/src/stories/Overlay/Modal.stories.js
+++ b/src/stories/Overlay/Modal.stories.js
@@ -47,6 +47,9 @@ export const Default = ({ size, shouldCloseOnOutsideClick }) => {
 
     return (
         <div>
+            <p className="my-4">
+                This shows the desktop & mobile versions of the modal. The mobile version pops up from the bottom
+            </p>
             <Button onClick={toggle}>Click me to launch a modal</Button>
 
             <Modal size={size} isOpen={isOpen} shouldCloseOnOutsideClick={shouldCloseOnOutsideClick} onClose={toggle}>

From 2ea5647129e19a48ae06998814d3c4ce94ae9ebc Mon Sep 17 00:00:00 2001
From: Manoj Vaibhav <manoj.r@xola.com>
Date: Fri, 17 Feb 2023 11:49:06 +0530
Subject: [PATCH 11/11] X2C-8 Upgraded headlessui/react package

---
 package-lock.json | 28 +++++++++++++++++++++++-----
 package.json      |  2 +-
 2 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 1a6019c7a..39f9386f4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,7 @@
             "version": "2.0.0",
             "license": "MIT",
             "dependencies": {
-                "@headlessui/react": "^1.4.0",
+                "@headlessui/react": "^1.7.11",
                 "@tailwindcss/forms": "^0.4.0",
                 "@tailwindcss/line-clamp": "^0.3.1",
                 "@tippyjs/react": "^4.2.6",
@@ -2105,8 +2105,12 @@
             "dev": true
         },
         "node_modules/@headlessui/react": {
-            "version": "1.4.1",
-            "integrity": "sha512-gL6Ns5xQM57cZBzX6IVv6L7nsam8rDEpRhs5fg28SN64ikfmuuMgunc+Rw5C1cMScnvFM+cz32ueVrlSFEVlSg==",
+            "version": "1.7.11",
+            "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-1.7.11.tgz",
+            "integrity": "sha512-EaDbVgcyiylhtskZZf4Qb/JiiByY7cYbd0qgZ9xm2pm2X7hKojG0P4TaQYKgPOV3vojPhd/pZyQh3nmRkkcSyw==",
+            "dependencies": {
+                "client-only": "^0.0.1"
+            },
             "engines": {
                 "node": ">=10"
             },
@@ -11707,6 +11711,11 @@
                 "@colors/colors": "1.5.0"
             }
         },
+        "node_modules/client-only": {
+            "version": "0.0.1",
+            "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
+            "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA=="
+        },
         "node_modules/cliui": {
             "version": "7.0.4",
             "integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==",
@@ -31627,8 +31636,12 @@
             "dev": true
         },
         "@headlessui/react": {
-            "version": "1.4.1",
-            "integrity": "sha512-gL6Ns5xQM57cZBzX6IVv6L7nsam8rDEpRhs5fg28SN64ikfmuuMgunc+Rw5C1cMScnvFM+cz32ueVrlSFEVlSg=="
+            "version": "1.7.11",
+            "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-1.7.11.tgz",
+            "integrity": "sha512-EaDbVgcyiylhtskZZf4Qb/JiiByY7cYbd0qgZ9xm2pm2X7hKojG0P4TaQYKgPOV3vojPhd/pZyQh3nmRkkcSyw==",
+            "requires": {
+                "client-only": "^0.0.1"
+            }
         },
         "@humanwhocodes/config-array": {
             "version": "0.11.7",
@@ -38642,6 +38655,11 @@
                 "string-width": "^4.2.0"
             }
         },
+        "client-only": {
+            "version": "0.0.1",
+            "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
+            "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA=="
+        },
         "cliui": {
             "version": "7.0.4",
             "integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==",
diff --git a/package.json b/package.json
index 38a4f5e43..fca43b181 100644
--- a/package.json
+++ b/package.json
@@ -29,7 +29,7 @@
         "chromatic": "chromatic --exit-zero-on-changes --build-script-name build:storybook"
     },
     "dependencies": {
-        "@headlessui/react": "^1.4.0",
+        "@headlessui/react": "^1.7.11",
         "@tailwindcss/forms": "^0.4.0",
         "@tailwindcss/line-clamp": "^0.3.1",
         "@tippyjs/react": "^4.2.6",