fix: S2 examples Popover and add CustomDialog (#7459)

* fix: using Popover and s2-parcel example has meta veiwport defined * adding CustomDialog example * vw not vh
adobe · Dec 4, 2024 · 5757c3a · 5757c3a · rspbot · Dec 4, 2024
1 parent e14088a
commit 5757c3a
Show file tree

Hide file tree

Showing 7 changed files with 67 additions and 18 deletions.
diff --git a/examples/s2-parcel-example/src/App.js b/examples/s2-parcel-example/src/App.js
@@ -87,7 +87,7 @@ function App() {
         })}
       >
         <Section title="Buttons">
-          <ButtonGroup>
+          <ButtonGroup align="center" styles={style({maxWidth: '[100vw]'})}>
             <Button variant="primary">Primary</Button>
             <Button variant="secondary">Secondary</Button>
             <ActionButton>

diff --git a/examples/s2-parcel-example/src/Lazy.js b/examples/s2-parcel-example/src/Lazy.js
@@ -13,6 +13,7 @@ import {
   ButtonGroup,
   Checkbox,
   CheckboxGroup,
+  CloseButton,
   ColorArea,
   ColorField,
   ColorSlider,
@@ -23,6 +24,7 @@ import {
   ComboBoxItem,
   Content,
   ContextualHelp,
+  CustomDialog,
   Dialog,
   DialogContainer,
   DialogTrigger,
@@ -44,6 +46,7 @@ import {
   NumberField,
   Picker,
   PickerItem,
+  Popover,
   ProgressBar,
   ProgressCircle,
   Radio,
@@ -67,6 +70,7 @@ import {
   Tooltip,
   TooltipTrigger,
 } from "@react-spectrum/s2";
+import Checkmark from '@react-spectrum/s2/illustrations/gradient/generic1/Checkmark';
 import Cloud from "@react-spectrum/s2/illustrations/linear/Cloud";
 import DropToUpload from "@react-spectrum/s2/illustrations/linear/DropToUpload";
 import Edit from "@react-spectrum/s2/icons/Edit";
@@ -247,15 +251,27 @@ export default function Lazy() {
           </Dialog>
         </DialogTrigger>
 
-        <DialogTrigger type="popover">
+        <DialogTrigger>
+          <ActionButton>Illustration</ActionButton>
+          <CustomDialog size="M">
+            <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})}>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>
+
+        <DialogTrigger>
           <ActionButton>Disk Status</ActionButton>
-          <Dialog>
-            <Heading>C://</Heading>
+          <Popover>
+            <Heading styles={style({font: 'heading', marginTop: 0, marginBottom: 20})}>C://</Heading>
 
-            <Content>
+            <Content styles={style({font: 'ui'})}>
               <Text>50% disk space remaining.</Text>
             </Content>
-          </Dialog>
+          </Popover>
         </DialogTrigger>
 
         <TooltipTrigger>

diff --git a/examples/s2-parcel-example/src/index.html b/examples/s2-parcel-example/src/index.html
@@ -2,6 +2,7 @@
 <html lang="en">
     <head>
         <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
         <title>Spectrum 2 + Parcel</title>
     </head>
     <body>

diff --git a/examples/s2-vite-project/src/App.tsx b/examples/s2-vite-project/src/App.tsx
@@ -87,7 +87,7 @@ function App() {
         })}
       >
         <Section title="Buttons">
-          <ButtonGroup>
+          <ButtonGroup align="center" styles={style({maxWidth: '[100vw]'})}>
             <Button variant="primary">Primary</Button>
             <Button variant="secondary">Secondary</Button>
             <ActionButton>

diff --git a/examples/s2-vite-project/src/Lazy.tsx b/examples/s2-vite-project/src/Lazy.tsx
@@ -13,6 +13,7 @@ import {
   ButtonGroup,
   Checkbox,
   CheckboxGroup,
+  CloseButton,
   ColorArea,
   ColorField,
   ColorSlider,
@@ -23,6 +24,7 @@ import {
   ComboBoxItem,
   Content,
   ContextualHelp,
+  CustomDialog,
   Dialog,
   DialogContainer,
   DialogTrigger,
@@ -44,6 +46,7 @@ import {
   NumberField,
   Picker,
   PickerItem,
+  Popover,
   ProgressBar,
   ProgressCircle,
   Radio,
@@ -67,6 +70,7 @@ import {
   Tooltip,
   TooltipTrigger,
 } from "@react-spectrum/s2";
+import Checkmark from '@react-spectrum/s2/illustrations/gradient/generic1/Checkmark';
 import Cloud from "@react-spectrum/s2/illustrations/linear/Cloud";
 import DropToUpload from "@react-spectrum/s2/illustrations/linear/DropToUpload";
 import Edit from "@react-spectrum/s2/icons/Edit";
@@ -247,15 +251,27 @@ export default function Lazy() {
           </Dialog>
         </DialogTrigger>
 
-        <DialogTrigger type="popover">
+        <DialogTrigger>
+          <ActionButton>Illustration</ActionButton>
+          <CustomDialog size="M">
+            <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})}>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>
+
+        <DialogTrigger>
           <ActionButton>Disk Status</ActionButton>
-          <Dialog>
-            <Heading>C://</Heading>
+          <Popover>
+            <Heading styles={style({font: 'heading', marginTop: 0, marginBottom: 20})}>C://</Heading>
 
-            <Content>
+            <Content styles={style({font: 'ui'})}>
               <Text>50% disk space remaining.</Text>
             </Content>
-          </Dialog>
+          </Popover>
         </DialogTrigger>
 
         <TooltipTrigger>

diff --git a/examples/s2-webpack-5-example/src/App.js b/examples/s2-webpack-5-example/src/App.js
@@ -87,7 +87,7 @@ function App() {
         })}
       >
         <Section title="Buttons">
-          <ButtonGroup>
+          <ButtonGroup align="center" styles={style({maxWidth: '[100vw]'})}>
             <Button variant="primary">Primary</Button>
             <Button variant="secondary">Secondary</Button>
             <ActionButton>

diff --git a/examples/s2-webpack-5-example/src/Lazy.js b/examples/s2-webpack-5-example/src/Lazy.js
@@ -13,6 +13,7 @@ import {
   ButtonGroup,
   Checkbox,
   CheckboxGroup,
+  CloseButton,
   ColorArea,
   ColorField,
   ColorSlider,
@@ -23,6 +24,7 @@ import {
   ComboBoxItem,
   Content,
   ContextualHelp,
+  CustomDialog,
   Dialog,
   DialogContainer,
   DialogTrigger,
@@ -44,6 +46,7 @@ import {
   NumberField,
   Picker,
   PickerItem,
+  Popover,
   ProgressBar,
   ProgressCircle,
   Radio,
@@ -67,6 +70,7 @@ import {
   Tooltip,
   TooltipTrigger,
 } from "@react-spectrum/s2";
+import Checkmark from '@react-spectrum/s2/illustrations/gradient/generic1/Checkmark';
 import Cloud from "@react-spectrum/s2/illustrations/linear/Cloud";
 import DropToUpload from "@react-spectrum/s2/illustrations/linear/DropToUpload";
 import Edit from "@react-spectrum/s2/icons/Edit";
@@ -247,15 +251,27 @@ export default function Lazy() {
           </Dialog>
         </DialogTrigger>
 
-        <DialogTrigger type="popover">
+        <DialogTrigger>
+          <ActionButton>Illustration</ActionButton>
+          <CustomDialog size="M">
+            <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})}>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>
+
+        <DialogTrigger>
           <ActionButton>Disk Status</ActionButton>
-          <Dialog>
-            <Heading>C://</Heading>
+          <Popover>
+            <Heading styles={style({font: 'heading', marginTop: 0, marginBottom: 20})}>C://</Heading>
 
-            <Content>
+            <Content styles={style({font: 'ui'})}>
               <Text>50% disk space remaining.</Text>
             </Content>
-          </Dialog>
+          </Popover>
         </DialogTrigger>
 
         <TooltipTrigger>