Skip to content

Commit c6f9272

Browse files
kyledurandkyledurand
authored
[polaris.shopify.com] Fix Modal examples (#10541)
1 parent fe1aac1 commit c6f9272

9 files changed

+308
-270
lines changed

‎polaris.shopify.com/pages/examples/modal-default.tsx‎

Lines changed: 28 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {Button, Modal, TextContainer} from '@shopify/polaris';
1+
import {Button, Frame, Modal, TextContainer} from '@shopify/polaris';
22
import {useState, useCallback} from 'react';
33
import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
44

@@ -11,32 +11,34 @@ function ModalExample() {
1111

1212
return (
1313
<div style={{height: '500px'}}>
14-
<Modal
15-
activator={activator}
16-
open={active}
17-
onClose={handleChange}
18-
title="Reach more shoppers with Instagram product tags"
19-
primaryAction={{
20-
content: 'Add Instagram',
21-
onAction: handleChange,
22-
}}
23-
secondaryActions={[
24-
{
25-
content: 'Learn more',
14+
<Frame>
15+
<Modal
16+
activator={activator}
17+
open={active}
18+
onClose={handleChange}
19+
title="Reach more shoppers with Instagram product tags"
20+
primaryAction={{
21+
content: 'Add Instagram',
2622
onAction: handleChange,
27-
},
28-
]}
29-
>
30-
<Modal.Section>
31-
<TextContainer>
32-
<p>
33-
Use Instagram posts to share your products with millions of
34-
people. Let shoppers buy from your store without leaving
35-
Instagram.
36-
</p>
37-
</TextContainer>
38-
</Modal.Section>
39-
</Modal>
23+
}}
24+
secondaryActions={[
25+
{
26+
content: 'Learn more',
27+
onAction: handleChange,
28+
},
29+
]}
30+
>
31+
<Modal.Section>
32+
<TextContainer>
33+
<p>
34+
Use Instagram posts to share your products with millions of
35+
people. Let shoppers buy from your store without leaving
36+
Instagram.
37+
</p>
38+
</TextContainer>
39+
</Modal.Section>
40+
</Modal>
41+
</Frame>
4042
</div>
4143
);
4244
}

‎polaris.shopify.com/pages/examples/modal-large.tsx‎

Lines changed: 44 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,11 @@
1-
import {Button, Modal, LegacyStack, DropZone, Checkbox} from '@shopify/polaris';
1+
import {
2+
Button,
3+
Modal,
4+
LegacyStack,
5+
DropZone,
6+
Checkbox,
7+
Frame,
8+
} from '@shopify/polaris';
29
import {useState, useCallback} from 'react';
310
import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
411

@@ -14,41 +21,43 @@ function LargeModalExample() {
1421

1522
return (
1623
<div style={{height: '500px'}}>
17-
<Modal
18-
large
19-
activator={activator}
20-
open={active}
21-
onClose={toggleActive}
22-
title="Import customers by CSV"
23-
primaryAction={{
24-
content: 'Import customers',
25-
onAction: toggleActive,
26-
}}
27-
secondaryActions={[
28-
{
29-
content: 'Cancel',
24+
<Frame>
25+
<Modal
26+
large
27+
activator={activator}
28+
open={active}
29+
onClose={toggleActive}
30+
title="Import customers by CSV"
31+
primaryAction={{
32+
content: 'Import customers',
3033
onAction: toggleActive,
31-
},
32-
]}
33-
>
34-
<Modal.Section>
35-
<LegacyStack vertical>
36-
<DropZone
37-
accept=".csv"
38-
errorOverlayText="File type must be .csv"
39-
type="file"
40-
onDrop={() => {}}
41-
>
42-
<DropZone.FileUpload />
43-
</DropZone>
44-
<Checkbox
45-
checked={checked}
46-
label="Overwrite existing customers that have the same email or phone"
47-
onChange={handleCheckbox}
48-
/>
49-
</LegacyStack>
50-
</Modal.Section>
51-
</Modal>
34+
}}
35+
secondaryActions={[
36+
{
37+
content: 'Cancel',
38+
onAction: toggleActive,
39+
},
40+
]}
41+
>
42+
<Modal.Section>
43+
<LegacyStack vertical>
44+
<DropZone
45+
accept=".csv"
46+
errorOverlayText="File type must be .csv"
47+
type="file"
48+
onDrop={() => {}}
49+
>
50+
<DropZone.FileUpload />
51+
</DropZone>
52+
<Checkbox
53+
checked={checked}
54+
label="Overwrite existing customers that have the same email or phone"
55+
onChange={handleCheckbox}
56+
/>
57+
</LegacyStack>
58+
</Modal.Section>
59+
</Modal>
60+
</Frame>
5261
</div>
5362
);
5463
}

‎polaris.shopify.com/pages/examples/modal-small.tsx‎

Lines changed: 44 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,11 @@
1-
import {Button, Modal, LegacyStack, DropZone, Checkbox} from '@shopify/polaris';
1+
import {
2+
Button,
3+
Modal,
4+
LegacyStack,
5+
DropZone,
6+
Checkbox,
7+
Frame,
8+
} from '@shopify/polaris';
29
import {useState, useCallback} from 'react';
310
import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
411

@@ -14,41 +21,43 @@ function SmallModalExample() {
1421

1522
return (
1623
<div style={{height: '500px'}}>
17-
<Modal
18-
small
19-
activator={activator}
20-
open={active}
21-
onClose={toggleActive}
22-
title="Import customers by CSV"
23-
primaryAction={{
24-
content: 'Import customers',
25-
onAction: toggleActive,
26-
}}
27-
secondaryActions={[
28-
{
29-
content: 'Cancel',
24+
<Frame>
25+
<Modal
26+
small
27+
activator={activator}
28+
open={active}
29+
onClose={toggleActive}
30+
title="Import customers by CSV"
31+
primaryAction={{
32+
content: 'Import customers',
3033
onAction: toggleActive,
31-
},
32-
]}
33-
>
34-
<Modal.Section>
35-
<LegacyStack vertical>
36-
<DropZone
37-
accept=".csv"
38-
errorOverlayText="File type must be .csv"
39-
type="file"
40-
onDrop={() => {}}
41-
>
42-
<DropZone.FileUpload />
43-
</DropZone>
44-
<Checkbox
45-
checked={checked}
46-
label="Overwrite existing customers that have the same email or phone"
47-
onChange={handleCheckbox}
48-
/>
49-
</LegacyStack>
50-
</Modal.Section>
51-
</Modal>
34+
}}
35+
secondaryActions={[
36+
{
37+
content: 'Cancel',
38+
onAction: toggleActive,
39+
},
40+
]}
41+
>
42+
<Modal.Section>
43+
<LegacyStack vertical>
44+
<DropZone
45+
accept=".csv"
46+
errorOverlayText="File type must be .csv"
47+
type="file"
48+
onDrop={() => {}}
49+
>
50+
<DropZone.FileUpload />
51+
</DropZone>
52+
<Checkbox
53+
checked={checked}
54+
label="Overwrite existing customers that have the same email or phone"
55+
onChange={handleCheckbox}
56+
/>
57+
</LegacyStack>
58+
</Modal.Section>
59+
</Modal>
60+
</Frame>
5261
</div>
5362
);
5463
}

‎polaris.shopify.com/pages/examples/modal-with-activator-ref.tsx‎

Lines changed: 29 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {Button, Modal, TextContainer} from '@shopify/polaris';
1+
import {Button, Frame, Modal, TextContainer} from '@shopify/polaris';
22
import {useState, useCallback, useRef} from 'react';
33
import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
44

@@ -21,33 +21,35 @@ function ModalExample() {
2121

2222
return (
2323
<div style={{height: '500px'}}>
24-
{activator}
25-
<Modal
26-
activator={buttonRef}
27-
open={active}
28-
onClose={handleClose}
29-
title="Reach more shoppers with Instagram product tags"
30-
primaryAction={{
31-
content: 'Add Instagram',
32-
onAction: handleClose,
33-
}}
34-
secondaryActions={[
35-
{
36-
content: 'Learn more',
24+
<Frame>
25+
{activator}
26+
<Modal
27+
activator={buttonRef}
28+
open={active}
29+
onClose={handleClose}
30+
title="Reach more shoppers with Instagram product tags"
31+
primaryAction={{
32+
content: 'Add Instagram',
3733
onAction: handleClose,
38-
},
39-
]}
40-
>
41-
<Modal.Section>
42-
<TextContainer>
43-
<p>
44-
Use Instagram posts to share your products with millions of
45-
people. Let shoppers buy from your store without leaving
46-
Instagram.
47-
</p>
48-
</TextContainer>
49-
</Modal.Section>
50-
</Modal>
34+
}}
35+
secondaryActions={[
36+
{
37+
content: 'Learn more',
38+
onAction: handleClose,
39+
},
40+
]}
41+
>
42+
<Modal.Section>
43+
<TextContainer>
44+
<p>
45+
Use Instagram posts to share your products with millions of
46+
people. Let shoppers buy from your store without leaving
47+
Instagram.
48+
</p>
49+
</TextContainer>
50+
</Modal.Section>
51+
</Modal>
52+
</Frame>
5153
</div>
5254
);
5355
}

‎polaris.shopify.com/pages/examples/modal-with-primary-action.tsx‎

Lines changed: 33 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,10 @@
1-
import {Button, Modal, LegacyStack, TextContainer} from '@shopify/polaris';
1+
import {
2+
Button,
3+
Modal,
4+
LegacyStack,
5+
TextContainer,
6+
Frame,
7+
} from '@shopify/polaris';
28
import {useState, useCallback} from 'react';
39
import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
410

@@ -11,30 +17,32 @@ function ModalWithPrimaryActionExample() {
1117

1218
return (
1319
<div style={{height: '500px'}}>
14-
<Modal
15-
activator={activator}
16-
open={active}
17-
onClose={toggleModal}
18-
title="Get a shareable link"
19-
primaryAction={{
20-
content: 'Close',
21-
onAction: toggleModal,
22-
}}
23-
>
24-
<Modal.Section>
25-
<LegacyStack vertical>
26-
<LegacyStack.Item>
27-
<TextContainer>
28-
<p>
29-
You can share this discount link with your customers via email
30-
or social media. Your discount will be automatically applied
31-
at checkout.
32-
</p>
33-
</TextContainer>
34-
</LegacyStack.Item>
35-
</LegacyStack>
36-
</Modal.Section>
37-
</Modal>
20+
<Frame>
21+
<Modal
22+
activator={activator}
23+
open={active}
24+
onClose={toggleModal}
25+
title="Get a shareable link"
26+
primaryAction={{
27+
content: 'Close',
28+
onAction: toggleModal,
29+
}}
30+
>
31+
<Modal.Section>
32+
<LegacyStack vertical>
33+
<LegacyStack.Item>
34+
<TextContainer>
35+
<p>
36+
You can share this discount link with your customers via
37+
email or social media. Your discount will be automatically
38+
applied at checkout.
39+
</p>
40+
</TextContainer>
41+
</LegacyStack.Item>
42+
</LegacyStack>
43+
</Modal.Section>
44+
</Modal>
45+
</Frame>
3846
</div>
3947
);
4048
}

0 commit comments

Comments
 (0)