Skip to content

Commit fc511d4

Browse files
kyledurandjuzser
kyledurand
authored and
juzser
committed
[Modal] Fix content overflow / scroll bug (Shopify#8018)
Fixes: Shopify#8013 [Spin link](https://admin.web.billing-kmux.kyle-durand.us.spin.dev/store/shop1) The cause of this bug was not porting over `overflow-x: hidden` from the body markup container Before | After ---|--- ![](https://screenshot.click/10-32-qzmr9-qfziv.png) | ![](https://screenshot.click/10-32-lbwb7-4b4z2.png)
1 parent b3d5d10 commit fc511d4

File tree

3 files changed

+72
-35
lines changed

3 files changed

+72
-35
lines changed

‎.changeset/pretty-drinks-tie.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@shopify/polaris': patch
3+
---
4+
5+
Fixed modal scroll bug

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

Lines changed: 64 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import {
66
Checkbox,
77
ChoiceList,
88
DropZone,
9-
Form,
109
FormLayout,
1110
Modal,
1211
Stack,
@@ -490,29 +489,44 @@ export function WithLongContent() {
490489
title="Long form modal"
491490
open
492491
onClose={() => {}}
493-
sectioned
494492
primaryAction={{content: 'Save'}}
495493
>
496-
<Banner title="Heyo" />
497-
<Form onSubmit={() => {}}>
494+
<Modal.Section>
495+
<Banner title="Payment details" />
496+
</Modal.Section>
497+
<Modal.Section>
498498
<FormLayout>
499499
<FormLayout.Group>
500-
<TextField label="URL" type="url" autoComplete="url" />
501-
<TextField label="URL" type="url" autoComplete="url" />
502-
<TextField label="URL" type="url" autoComplete="url" />
500+
<TextField label="Payment method type" autoComplete="off" />
501+
<TextField label="Card number" autoComplete="off" />
502+
</FormLayout.Group>
503+
504+
<FormLayout.Group>
505+
<TextField label="Expires" autoComplete="off" />
506+
<TextField label="CVV" autoComplete="off" />
507+
</FormLayout.Group>
508+
509+
<FormLayout.Group>
510+
<TextField label="Country/region" autoComplete="off" />
511+
</FormLayout.Group>
512+
513+
<FormLayout.Group>
514+
<TextField label="First name" autoComplete="off" />
515+
<TextField label="Last name" autoComplete="off" />
516+
</FormLayout.Group>
517+
518+
<FormLayout.Group>
519+
<TextField label="Address" autoComplete="off" />
520+
<TextField label="Apartment, suite, etc." autoComplete="off" />
521+
</FormLayout.Group>
522+
523+
<FormLayout.Group>
524+
<TextField label="City" autoComplete="off" />
525+
<TextField label="Province" autoComplete="off" />
526+
<TextField label="Postal code" autoComplete="off" />
503527
</FormLayout.Group>
504528
</FormLayout>
505-
<FormLayout>
506-
<TextField label="URL" type="url" autoComplete="url" />
507-
<TextField label="URL" type="url" autoComplete="url" />
508-
<TextField label="URL" type="url" autoComplete="url" />
509-
<TextField label="URL" type="url" autoComplete="url" />
510-
<TextField label="URL" type="url" autoComplete="url" />
511-
<TextField label="URL" type="url" autoComplete="url" />
512-
<TextField label="URL" type="url" autoComplete="url" />
513-
<TextField label="URL" type="url" autoComplete="url" />
514-
</FormLayout>
515-
</Form>
529+
</Modal.Section>
516530
</Modal>
517531
);
518532
}
@@ -527,26 +541,42 @@ export function WithLongContentNoScroll() {
527541
noScroll
528542
primaryAction={{content: 'Save'}}
529543
>
530-
<Banner title="Heyo" />
531-
<Form onSubmit={() => {}}>
544+
<Modal.Section>
545+
<Banner title="Payment details" />
546+
</Modal.Section>
547+
<Modal.Section>
532548
<FormLayout>
533549
<FormLayout.Group>
534-
<TextField label="URL" type="url" autoComplete="url" />
535-
<TextField label="URL" type="url" autoComplete="url" />
536-
<TextField label="URL" type="url" autoComplete="url" />
550+
<TextField label="Payment method type" autoComplete="off" />
551+
<TextField label="Card number" autoComplete="off" />
552+
</FormLayout.Group>
553+
554+
<FormLayout.Group>
555+
<TextField label="Expires" autoComplete="off" />
556+
<TextField label="CVV" autoComplete="off" />
557+
</FormLayout.Group>
558+
559+
<FormLayout.Group>
560+
<TextField label="Country/region" autoComplete="off" />
561+
</FormLayout.Group>
562+
563+
<FormLayout.Group>
564+
<TextField label="First name" autoComplete="off" />
565+
<TextField label="Last name" autoComplete="off" />
566+
</FormLayout.Group>
567+
568+
<FormLayout.Group>
569+
<TextField label="Address" autoComplete="off" />
570+
<TextField label="Apartment, suite, etc." autoComplete="off" />
571+
</FormLayout.Group>
572+
573+
<FormLayout.Group>
574+
<TextField label="City" autoComplete="off" />
575+
<TextField label="Province" autoComplete="off" />
576+
<TextField label="Postal code" autoComplete="off" />
537577
</FormLayout.Group>
538578
</FormLayout>
539-
<FormLayout>
540-
<TextField label="URL" type="url" autoComplete="url" />
541-
<TextField label="URL" type="url" autoComplete="url" />
542-
<TextField label="URL" type="url" autoComplete="url" />
543-
<TextField label="URL" type="url" autoComplete="url" />
544-
<TextField label="URL" type="url" autoComplete="url" />
545-
<TextField label="URL" type="url" autoComplete="url" />
546-
<TextField label="URL" type="url" autoComplete="url" />
547-
<TextField label="URL" type="url" autoComplete="url" />
548-
</FormLayout>
549-
</Form>
579+
</Modal.Section>
550580
</Modal>
551581
);
552582
}

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -165,7 +165,9 @@ export const Modal: React.FunctionComponent<ModalProps> & {
165165
);
166166

167167
const scrollContainerMarkup = noScroll ? (
168-
<Box width="100%">{body}</Box>
168+
<Box width="100%" overflowX="hidden">
169+
{body}
170+
</Box>
169171
) : (
170172
<Scrollable
171173
shadow

0 commit comments

Comments
 (0)