Skip to content

Commit c6bd2cb

Browse files
devongovettdevongovett
authored
chore: Update dialog examples to be more generic (#7415)
As requested by design
1 parent 2e1dd22 commit c6bd2cb

File tree

2 files changed

+20
-21
lines changed

2 files changed

+20
-21
lines changed

‎packages/@react-spectrum/s2/stories/CustomDialog.stories.tsx

Lines changed: 16 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -30,28 +30,27 @@ const meta: Meta<typeof CustomDialog> = {
3030

3131
export default meta;
3232

33-
export const WhatsNew = (args: any) => (
33+
export const EdgeToEdge = (args: any) => (
3434
<DialogTrigger>
3535
<ActionButton>Open dialog</ActionButton>
3636
<CustomDialog padding="none" {...args} isDismissible styles={style({maxWidth: {isSizeUnset: '[800px]'}})({isSizeUnset: args.size == null})}>
3737
<div className={style({display: 'flex', size: 'full'})}>
3838
<div className={style({display: 'flex', flexDirection: 'column', rowGap: 32, padding: 32, backgroundColor: 'layer-1', width: 192, flexShrink: 0})}>
39-
<Heading slot="title" styles={style({font: 'title-3xl', marginY: 0})}>What's new</Heading>
39+
<Heading slot="title" styles={style({font: 'title-3xl', marginY: 0})}>Example</Heading>
4040
<ul className={style({listStyleType: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 8})}>
41-
<li className={style({height: 32, font: 'ui'})}>Selective unlock</li>
42-
<li className={style({height: 32, font: 'ui'})}>Drawing aids</li>
43-
<li className={style({height: 32, font: 'ui'})}>Brush previews</li>
44-
<li className={style({height: 32, font: 'ui'})}>Multiple color sampling</li>
45-
<li className={style({height: 32, font: 'ui'})}>Vector trimming</li>
46-
<li className={style({height: 32, font: 'ui'})}>Clipping masks</li>
47-
<li className={style({height: 32, font: 'ui'})}>Coming soon</li>
41+
<li className={style({height: 32, font: 'ui'})}>Lorem ipsum</li>
42+
<li className={style({height: 32, font: 'ui'})}>Consectetur adipiscing</li>
43+
<li className={style({height: 32, font: 'ui'})}>Tempor incididunt</li>
44+
<li className={style({height: 32, font: 'ui'})}>Colore magna</li>
45+
<li className={style({height: 32, font: 'ui'})}>Exercitation ullamco</li>
46+
<li className={style({height: 32, font: 'ui'})}>Commodo consequat</li>
4847
</ul>
4948
</div>
5049
<div className={style({flexGrow: 1})}>
5150
<Image src={new URL('./assets/placeholder.png', import.meta.url).toString()} styles={style({width: 'full'})} />
5251
<div className={style({padding: 32, paddingEnd: 16})}>
53-
<h3 className={style({font: 'title-lg', marginY: 0})}>Selective unlock</h3>
54-
<p className={style({font: 'body'})}>Now you can unlock objects right on the artboard, and easily find the right one when many overlap. No more searching in the Layers panel or unlocking everything at once.</p>
52+
<h3 className={style({font: 'title-lg', marginY: 0})}>Example Heading</h3>
53+
<p className={style({font: 'body'})}>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in</p>
5554
</div>
5655
</div>
5756
<CloseButton staticColor="black" styles={style({position: 'absolute', top: 12, insetEnd: 12})} />
@@ -60,21 +59,21 @@ export const WhatsNew = (args: any) => (
6059
</DialogTrigger>
6160
);
6261

63-
export const ThankYou = (args: any) => (
62+
export const Illustration = (args: any) => (
6463
<DialogTrigger>
6564
<ActionButton>Open dialog</ActionButton>
6665
<CustomDialog {...args}>
6766
<div className={style({display: 'flex', flexDirection: 'column', rowGap: 8, alignItems: 'center'})}>
6867
<Checkmark />
6968
<Heading slot="title" styles={style({font: 'heading-lg', textAlign: 'center', marginY: 0})}>Thank you!</Heading>
70-
<p className={style({font: 'body', textAlign: 'center', marginY: 0})}>Your report has been submitted. Thank you for help keeping Adobe safe. You can learn more about our content policies by visiting our Transparency Center.</p>
69+
<p className={style({font: 'body', textAlign: 'center', marginY: 0})}>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
7170
<CloseButton styles={style({position: 'absolute', top: 12, insetEnd: 12})} />
7271
</div>
7372
</CustomDialog>
7473
</DialogTrigger>
7574
);
7675

77-
ThankYou.args = {
76+
Illustration.args = {
7877
size: 'M'
7978
};
8079

@@ -93,8 +92,8 @@ export const SideImage = (args: any) => (
9392
})} />
9493
<div className={style({padding: {default: 24, sm: 32}, flexGrow: 1, display: 'flex', flexDirection: 'column', rowGap: 32})}>
9594
<div className={style({display: 'flex', flexDirection: 'column', rowGap: 32, flexGrow: 1})}>
96-
<Heading slot="title" styles={style({font: 'heading', marginY: 0})}>Add new brand</Heading>
97-
<TextField label="Brand name" isRequired />
95+
<Heading slot="title" styles={style({font: 'heading', marginY: 0})}>Add new</Heading>
96+
<TextField label="Name" isRequired />
9897
<DropZone>
9998
<IllustratedMessage orientation="horizontal" size="S">
10099
<DropToUpload />
@@ -105,7 +104,7 @@ export const SideImage = (args: any) => (
105104
</div>
106105
<ButtonGroup styles={style({marginStart: 'auto'})}>
107106
<Button slot="close" variant="secondary">Close</Button>
108-
<Button variant="accent">Add brand</Button>
107+
<Button variant="accent">Add</Button>
109108
</ButtonGroup>
110109
</div>
111110
</div>

‎packages/@react-spectrum/s2/stories/Popover.stories.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -47,12 +47,12 @@ export const HelpCenter = (args: any) => (
4747
<Tab id="feedback">Feedback</Tab>
4848
</TabList>
4949
<TabPanel id="help">
50-
<SearchField label="Search Experience League" styles={style({marginTop: 12, marginX: 12})} />
50+
<SearchField label="Search" styles={style({marginTop: 12, marginX: 12})} />
5151
<Menu aria-label="Help" styles={style({marginTop: 12})}>
5252
<MenuSection>
5353
<MenuItem href="#">
5454
<File />
55-
<Text slot="label">Adobe Experience Cloud Learn & Support</Text>
55+
<Text slot="label">Documentation</Text>
5656
</MenuItem>
5757
</MenuSection>
5858
<MenuSection>
@@ -84,10 +84,10 @@ export const HelpCenter = (args: any) => (
8484
<TabPanel id="support" styles={style({margin: 12})}>
8585
<Card size="L" styles={style({width: 'full'})}>
8686
<CardPreview>
87-
<Image src="https://cdn.experience-stage.adobe.net/assets/support.7d96ed11.svg" />
87+
<Image src="https://react-spectrum.adobe.com/ReactSpectrumHome_976x445_2x.3eedfdc2.webp" />
8888
</CardPreview>
8989
<Content>
90-
<Text slot="title">Go to support at Experience League</Text>
90+
<Text slot="title">Go to support</Text>
9191
<Text slot="description">Find support resources or submit a ticket</Text>
9292
</Content>
9393
</Card>

0 commit comments

Comments
 (0)