chore: Update dialog examples to be more generic (#7415)

As requested by design
adobe · Nov 21, 2024 · c6bd2cb · c6bd2cb · rspbot · Nov 21, 2024
1 parent 2e1dd22
commit c6bd2cb
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 21 deletions.
diff --git a/packages/@react-spectrum/s2/stories/CustomDialog.stories.tsx b/packages/@react-spectrum/s2/stories/CustomDialog.stories.tsx
@@ -30,28 +30,27 @@ const meta: Meta<typeof CustomDialog> = {
 
 export default meta;
 
-export const WhatsNew = (args: any) => (
+export const EdgeToEdge = (args: any) => (
   <DialogTrigger>
     <ActionButton>Open dialog</ActionButton>
     <CustomDialog padding="none" {...args} isDismissible styles={style({maxWidth: {isSizeUnset: '[800px]'}})({isSizeUnset: args.size == null})}>
       <div className={style({display: 'flex', size: 'full'})}>
         <div className={style({display: 'flex', flexDirection: 'column', rowGap: 32, padding: 32, backgroundColor: 'layer-1', width: 192, flexShrink: 0})}>
-          <Heading slot="title" styles={style({font: 'title-3xl', marginY: 0})}>What's new</Heading>
+          <Heading slot="title" styles={style({font: 'title-3xl', marginY: 0})}>Example</Heading>
           <ul className={style({listStyleType: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 8})}>
-            <li className={style({height: 32, font: 'ui'})}>Selective unlock</li>
-            <li className={style({height: 32, font: 'ui'})}>Drawing aids</li>
-            <li className={style({height: 32, font: 'ui'})}>Brush previews</li>
-            <li className={style({height: 32, font: 'ui'})}>Multiple color sampling</li>
-            <li className={style({height: 32, font: 'ui'})}>Vector trimming</li>
-            <li className={style({height: 32, font: 'ui'})}>Clipping masks</li>
-            <li className={style({height: 32, font: 'ui'})}>Coming soon</li>
+            <li className={style({height: 32, font: 'ui'})}>Lorem ipsum</li>
+            <li className={style({height: 32, font: 'ui'})}>Consectetur adipiscing</li>
+            <li className={style({height: 32, font: 'ui'})}>Tempor incididunt</li>
+            <li className={style({height: 32, font: 'ui'})}>Colore magna</li>
+            <li className={style({height: 32, font: 'ui'})}>Exercitation ullamco</li>
+            <li className={style({height: 32, font: 'ui'})}>Commodo consequat</li>
           </ul>
         </div>
         <div className={style({flexGrow: 1})}>
           <Image src={new URL('./assets/placeholder.png', import.meta.url).toString()} styles={style({width: 'full'})} />
           <div className={style({padding: 32, paddingEnd: 16})}>
-            <h3 className={style({font: 'title-lg', marginY: 0})}>Selective unlock</h3>
-            <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>
+            <h3 className={style({font: 'title-lg', marginY: 0})}>Example Heading</h3>
+            <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>
           </div>
         </div>
         <CloseButton staticColor="black" styles={style({position: 'absolute', top: 12, insetEnd: 12})} />
@@ -60,21 +59,21 @@ export const WhatsNew = (args: any) => (
   </DialogTrigger>
 );
 
-export const ThankYou = (args: any) => (
+export const Illustration = (args: any) => (
   <DialogTrigger>
     <ActionButton>Open dialog</ActionButton>
     <CustomDialog {...args}>
       <div className={style({display: 'flex', flexDirection: 'column', rowGap: 8, alignItems: 'center'})}>
         <Checkmark />
         <Heading slot="title" styles={style({font: 'heading-lg', textAlign: 'center', marginY: 0})}>Thank you!</Heading>
-        <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>
+        <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>
         <CloseButton styles={style({position: 'absolute', top: 12, insetEnd: 12})} />
       </div>
     </CustomDialog>
   </DialogTrigger>
 );
 
-ThankYou.args = {
+Illustration.args = {
   size: 'M'
 };
 
@@ -93,8 +92,8 @@ export const SideImage = (args: any) => (
           })} />
         <div className={style({padding: {default: 24, sm: 32}, flexGrow: 1, display: 'flex', flexDirection: 'column', rowGap: 32})}>
           <div className={style({display: 'flex', flexDirection: 'column', rowGap: 32, flexGrow: 1})}>
-            <Heading slot="title" styles={style({font: 'heading', marginY: 0})}>Add new brand</Heading>
-            <TextField label="Brand name" isRequired />
+            <Heading slot="title" styles={style({font: 'heading', marginY: 0})}>Add new</Heading>
+            <TextField label="Name" isRequired />
             <DropZone>
               <IllustratedMessage orientation="horizontal" size="S">
                 <DropToUpload />
@@ -105,7 +104,7 @@ export const SideImage = (args: any) => (
           </div>
           <ButtonGroup styles={style({marginStart: 'auto'})}>
             <Button slot="close" variant="secondary">Close</Button>
-            <Button variant="accent">Add brand</Button>
+            <Button variant="accent">Add</Button>
           </ButtonGroup>
         </div>
       </div>

diff --git a/packages/@react-spectrum/s2/stories/Popover.stories.tsx b/packages/@react-spectrum/s2/stories/Popover.stories.tsx
@@ -47,12 +47,12 @@ export const HelpCenter = (args: any) => (
           <Tab id="feedback">Feedback</Tab>
         </TabList>
         <TabPanel id="help">
-          <SearchField label="Search Experience League"  styles={style({marginTop: 12, marginX: 12})} />
+          <SearchField label="Search"  styles={style({marginTop: 12, marginX: 12})} />
           <Menu aria-label="Help" styles={style({marginTop: 12})}>
             <MenuSection>
               <MenuItem href="#">
                 <File />
-                <Text slot="label">Adobe Experience Cloud Learn & Support</Text>
+                <Text slot="label">Documentation</Text>
               </MenuItem>
             </MenuSection>
             <MenuSection>
@@ -84,10 +84,10 @@ export const HelpCenter = (args: any) => (
         <TabPanel id="support" styles={style({margin: 12})}>
           <Card size="L" styles={style({width: 'full'})}>
             <CardPreview>
-              <Image src="https://cdn.experience-stage.adobe.net/assets/support.7d96ed11.svg" />
+              <Image src="https://react-spectrum.adobe.com/ReactSpectrumHome_976x445_2x.3eedfdc2.webp" />
             </CardPreview>
             <Content>
-              <Text slot="title">Go to support at Experience League</Text>
+              <Text slot="title">Go to support</Text>
               <Text slot="description">Find support resources or submit a ticket</Text>
             </Content>
           </Card>