From 3e344ec4e61428840cdae270e3b6e5bd41a5a744 Mon Sep 17 00:00:00 2001
From: Kyle Durand <kyledurand@users.noreply.github.com>
Date: Tue, 10 Jan 2023 14:59:00 -0500
Subject: [PATCH 1/2] Fix modal scroll bug

---
 .changeset/pretty-drinks-tie.md              | 5 +++++
 polaris-react/src/components/Modal/Modal.tsx | 4 +++-
 2 files changed, 8 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/pretty-drinks-tie.md

diff --git a/.changeset/pretty-drinks-tie.md b/.changeset/pretty-drinks-tie.md
new file mode 100644
index 00000000000..b2a78c5eff1
--- /dev/null
+++ b/.changeset/pretty-drinks-tie.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Fixed modal scroll bug
diff --git a/polaris-react/src/components/Modal/Modal.tsx b/polaris-react/src/components/Modal/Modal.tsx
index b656747fdb2..e75db6efca2 100644
--- a/polaris-react/src/components/Modal/Modal.tsx
+++ b/polaris-react/src/components/Modal/Modal.tsx
@@ -165,7 +165,9 @@ export const Modal: React.FunctionComponent<ModalProps> & {
     );
 
     const scrollContainerMarkup = noScroll ? (
-      <Box width="100%">{body}</Box>
+      <Box width="100%" overflowX="hidden">
+        {body}
+      </Box>
     ) : (
       <Scrollable
         shadow

From 081bed4b785a0f8652bf2ad9b2cc63c10927f1c7 Mon Sep 17 00:00:00 2001
From: Kyle Durand <kyledurand@users.noreply.github.com>
Date: Tue, 10 Jan 2023 16:45:31 -0500
Subject: [PATCH 2/2] Improve story content

---
 .../src/components/Modal/Modal.stories.tsx    | 98 ++++++++++++-------
 1 file changed, 64 insertions(+), 34 deletions(-)

diff --git a/polaris-react/src/components/Modal/Modal.stories.tsx b/polaris-react/src/components/Modal/Modal.stories.tsx
index 02b80b02d90..3e0dc05798a 100644
--- a/polaris-react/src/components/Modal/Modal.stories.tsx
+++ b/polaris-react/src/components/Modal/Modal.stories.tsx
@@ -6,7 +6,6 @@ import {
   Checkbox,
   ChoiceList,
   DropZone,
-  Form,
   FormLayout,
   Modal,
   Stack,
@@ -490,29 +489,44 @@ export function WithLongContent() {
       title="Long form modal"
       open
       onClose={() => {}}
-      sectioned
       primaryAction={{content: 'Save'}}
     >
-      <Banner title="Heyo" />
-      <Form onSubmit={() => {}}>
+      <Modal.Section>
+        <Banner title="Payment details" />
+      </Modal.Section>
+      <Modal.Section>
         <FormLayout>
           <FormLayout.Group>
-            <TextField label="URL" type="url" autoComplete="url" />
-            <TextField label="URL" type="url" autoComplete="url" />
-            <TextField label="URL" type="url" autoComplete="url" />
+            <TextField label="Payment method type" autoComplete="off" />
+            <TextField label="Card number" autoComplete="off" />
+          </FormLayout.Group>
+
+          <FormLayout.Group>
+            <TextField label="Expires" autoComplete="off" />
+            <TextField label="CVV" autoComplete="off" />
+          </FormLayout.Group>
+
+          <FormLayout.Group>
+            <TextField label="Country/region" autoComplete="off" />
+          </FormLayout.Group>
+
+          <FormLayout.Group>
+            <TextField label="First name" autoComplete="off" />
+            <TextField label="Last name" autoComplete="off" />
+          </FormLayout.Group>
+
+          <FormLayout.Group>
+            <TextField label="Address" autoComplete="off" />
+            <TextField label="Apartment, suite, etc." autoComplete="off" />
+          </FormLayout.Group>
+
+          <FormLayout.Group>
+            <TextField label="City" autoComplete="off" />
+            <TextField label="Province" autoComplete="off" />
+            <TextField label="Postal code" autoComplete="off" />
           </FormLayout.Group>
         </FormLayout>
-        <FormLayout>
-          <TextField label="URL" type="url" autoComplete="url" />
-          <TextField label="URL" type="url" autoComplete="url" />
-          <TextField label="URL" type="url" autoComplete="url" />
-          <TextField label="URL" type="url" autoComplete="url" />
-          <TextField label="URL" type="url" autoComplete="url" />
-          <TextField label="URL" type="url" autoComplete="url" />
-          <TextField label="URL" type="url" autoComplete="url" />
-          <TextField label="URL" type="url" autoComplete="url" />
-        </FormLayout>
-      </Form>
+      </Modal.Section>
     </Modal>
   );
 }
@@ -527,26 +541,42 @@ export function WithLongContentNoScroll() {
       noScroll
       primaryAction={{content: 'Save'}}
     >
-      <Banner title="Heyo" />
-      <Form onSubmit={() => {}}>
+      <Modal.Section>
+        <Banner title="Payment details" />
+      </Modal.Section>
+      <Modal.Section>
         <FormLayout>
           <FormLayout.Group>
-            <TextField label="URL" type="url" autoComplete="url" />
-            <TextField label="URL" type="url" autoComplete="url" />
-            <TextField label="URL" type="url" autoComplete="url" />
+            <TextField label="Payment method type" autoComplete="off" />
+            <TextField label="Card number" autoComplete="off" />
+          </FormLayout.Group>
+
+          <FormLayout.Group>
+            <TextField label="Expires" autoComplete="off" />
+            <TextField label="CVV" autoComplete="off" />
+          </FormLayout.Group>
+
+          <FormLayout.Group>
+            <TextField label="Country/region" autoComplete="off" />
+          </FormLayout.Group>
+
+          <FormLayout.Group>
+            <TextField label="First name" autoComplete="off" />
+            <TextField label="Last name" autoComplete="off" />
+          </FormLayout.Group>
+
+          <FormLayout.Group>
+            <TextField label="Address" autoComplete="off" />
+            <TextField label="Apartment, suite, etc." autoComplete="off" />
+          </FormLayout.Group>
+
+          <FormLayout.Group>
+            <TextField label="City" autoComplete="off" />
+            <TextField label="Province" autoComplete="off" />
+            <TextField label="Postal code" autoComplete="off" />
           </FormLayout.Group>
         </FormLayout>
-        <FormLayout>
-          <TextField label="URL" type="url" autoComplete="url" />
-          <TextField label="URL" type="url" autoComplete="url" />
-          <TextField label="URL" type="url" autoComplete="url" />
-          <TextField label="URL" type="url" autoComplete="url" />
-          <TextField label="URL" type="url" autoComplete="url" />
-          <TextField label="URL" type="url" autoComplete="url" />
-          <TextField label="URL" type="url" autoComplete="url" />
-          <TextField label="URL" type="url" autoComplete="url" />
-        </FormLayout>
-      </Form>
+      </Modal.Section>
     </Modal>
   );
 }