improves dialog

figma · Jun 14, 2024 · d2bd395 · d2bd395
1 parent 1a64c50
commit d2bd395
Show file tree

Hide file tree

Showing 7 changed files with 69 additions and 23 deletions.
diff --git a/src/index.css b/src/index.css
@@ -9,6 +9,8 @@
   --global-line-height-paragraph: 1.4;
   --global-stack-top: 999;
   --global-stack-focus: 999;
+  --global-container-max-width: 75rem;
+  --global-dialog-max-width: 32rem;
 }
 
 .display-none-to-flex {
@@ -20,7 +22,7 @@
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --global-focus-ring-color: var(--sds-color-blue-300);
+    --global-focus-ring-color: rgb(0, 106, 255);
   }
 }
 

diff --git a/src/responsive.css b/src/responsive.css
@@ -8,7 +8,6 @@
   --sds-responsive-ratio-column-quarter-minor: 4;
   --sds-responsive-ratio-column-third-major: 3;
   --sds-responsive-ratio-column-third-minor: 3;
-  --sds-responsive-ratio-dialog-max: 2;
 }
 /* Responsive tablet */
 @media (min-width: 768px) {
@@ -21,7 +20,6 @@
     --sds-responsive-ratio-column-quarter-minor: 2;
     --sds-responsive-ratio-column-third-major: 3;
     --sds-responsive-ratio-column-third-minor: 3;
-    --sds-responsive-ratio-dialog-max: 0.85;
   }
 }
 /* responsive: desktop */
@@ -35,6 +33,5 @@
     --sds-responsive-ratio-column-quarter-minor: 1;
     --sds-responsive-ratio-column-third-major: 2;
     --sds-responsive-ratio-column-third-minor: 1;
-    --sds-responsive-ratio-dialog-max: 0.5;
   }
 }
diff --git a/src/stories/ui/primitives/Dialog.stories.tsx b/src/stories/ui/primitives/Dialog.stories.tsx
@@ -7,6 +7,7 @@ import {
   Dialog,
   DialogBody,
   DialogButton,
+  DialogClose,
   DialogDescription,
   DialogModal,
   DialogTitle,
@@ -28,10 +29,16 @@ export default meta;
 type Story = StoryObj<typeof Dialog>;
 
 export const Default: Story = {
-  render: () => (
-    <DialogButton variant="primary" icon={<IconMenu />} label="Open Dialog">
+  render: (args) => (
+    <DialogButton
+      {...args}
+      variant="primary"
+      icon={<IconMenu />}
+      label="Open Dialog"
+    >
       {({ close }) => (
         <>
+          <DialogClose onPress={close} />
           <DialogTitle>Open Dialog</DialogTitle>
           <DialogDescription>
             The refund will be reflected in the customer’s bank account 2 to 3

diff --git a/src/ui/layout/Flex/flex.css b/src/ui/layout/Flex/flex.css
@@ -1,6 +1,6 @@
 .flex-container {
   margin: 0 auto;
-  max-width: calc(var(--sds-responsive-width-device-min));
+  max-width: var(--global-container-max-width);
   width: 100%;
 }
 

diff --git a/src/ui/primitives/Dialog/Dialog.figma.tsx b/src/ui/primitives/Dialog/Dialog.figma.tsx
@@ -3,12 +3,13 @@ import { Dialog } from "./Dialog";
 
 figma.connect(Dialog, "<FIGMA_URL_DIALOG>", {
   props: {
+    type: figma.enum("Type", { Card: "card", Sheet: "sheet" }),
     description: figma.children("Text"),
     title: figma.children("Text Heading"),
-    buttons: figma.children(["Button Group"]),
+    buttons: figma.children("Button Group"),
   },
-  example: ({ title, description, buttons }) => (
-    <Dialog>
+  example: ({ title, type, description, buttons }) => (
+    <Dialog type={type}>
       {title}
       {description}
       {buttons}

diff --git a/src/ui/primitives/Dialog/Dialog.tsx b/src/ui/primitives/Dialog/Dialog.tsx
@@ -1,4 +1,5 @@
 import clsx from "clsx";
+import { IconX } from "icons";
 import {
   Dialog as RACDialog,
   DialogTrigger as RACDialogTrigger,
@@ -9,7 +10,10 @@ import {
   type ModalOverlayProps as RACModalOverlayProps,
 } from "react-aria-components";
 import { Button, ButtonProps } from "ui/primitives/Button/Button";
-import { IconButton } from "ui/primitives/IconButton/IconButton";
+import {
+  IconButton,
+  IconButtonProps,
+} from "ui/primitives/IconButton/IconButton";
 import {
   Text,
   TextHeading,
@@ -18,12 +22,27 @@ import {
 } from "ui/primitives/Text/Text";
 import "./dialog.css";
 
-export type DialogProps = RACDialogProps;
-export function Dialog({ className, ...props }: DialogProps) {
-  const classNames = clsx(className, "dialog");
+export type DialogProps = RACDialogProps & {
+  type?: "sheet" | "card";
+};
+export function Dialog({ className, type = "card", ...props }: DialogProps) {
+  const classNames = clsx(className, "dialog", `dialog-type-${type}`);
   return <RACDialog className={classNames} {...props} />;
 }
 
+export type DialogCloseProps = Pick<IconButtonProps, "onPress">;
+export const DialogClose = ({ onPress }: DialogCloseProps) => (
+  <IconButton
+    className="dialog-close"
+    aria-label="Dismiss dialog"
+    onPress={onPress}
+    variant="subtle"
+    size="small"
+  >
+    <IconX />
+  </IconButton>
+);
+
 export type DialogTriggerProps = RACDialogTriggerProps;
 export function DialogTrigger({ ...props }: DialogTriggerProps) {
   return <RACDialogTrigger {...props} />;
@@ -90,6 +109,7 @@ export type DialogModalProps = RACModalOverlayProps;
 export function DialogModal({
   children,
   className,
+  isDismissable,
   ...props
 }: DialogModalProps) {
   const classNames = clsx(className, "dialog-backdrop");

diff --git a/src/ui/primitives/Dialog/dialog.css b/src/ui/primitives/Dialog/dialog.css
@@ -13,7 +13,7 @@
 
 .dialog-backdrop {
   backdrop-filter: var(--sds-effects-backdrop-filter-blur-overlay);
-  background: var(--sds-color-white-600);
+  background: var(--sds-color-bg-utilities-scrim);
   bottom: 0;
   left: 0;
   position: fixed;
@@ -26,23 +26,42 @@
 .dialog {
   --dialog-padding-y: var(--sds-size-padding-xxl);
   background: var(--sds-color-bg-default-default);
-  border-radius: var(--sds-size-radius-base);
-  border: var(--sds-size-border-width) solid
-    var(--sds-color-border-default-default);
   box-shadow: var(--sds-effects-shadows-drop-shadow-400);
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
   padding-bottom: var(--dialog-padding-y);
-  max-width: calc(
-    var(--sds-responsive-ratio-dialog-max) *
-      var(--sds-responsive-width-device-min)
-  );
   padding-top: var(--dialog-padding-y);
-  width: 90%;
+  position: relative;
+
   &:focus {
     outline: none;
   }
+
+  .dialog-close {
+    position: absolute;
+    top: var(--sds-size-padding-sm);
+    right: var(--sds-size-padding-sm);
+  }
+}
+
+.dialog-type-card {
+  border-radius: var(--sds-size-radius-base);
+  border: var(--sds-size-border-width) solid
+    var(--sds-color-border-default-default);
+  max-width: var(--global-dialog-max-width);
+  width: 90%;
+}
+.dialog-type-sheet {
+  align-self: flex-end;
+  border-top: var(--sds-size-border-width) solid
+    var(--sds-color-border-default-default);
+  max-width: 100%;
+  width: 100%;
+  padding-left: calc((100% - min(var(--global-container-max-width), 100%)) / 2);
+  padding-right: calc(
+    (100% - min(var(--global-container-max-width), 100%)) / 2
+  );
 }
 
 .dialog-title,