Merge pull request #177 from lunit-io/DS-13-dialog-style

[DS-13] Dialog 디자인 검수 & 스타일 수정
lunit-io · Jun 25, 2024 · 14108dd · 14108dd
2 parents 70f810c + ff6edb8
commit 14108dd
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 20 deletions.
diff --git a/packages/design-system/src/components/Dialog/Dialog.styled.ts b/packages/design-system/src/components/Dialog/Dialog.styled.ts
@@ -20,47 +20,49 @@ const DIALOG_WRAPPER_STYLE: DialogElementStyle = {
   },
   modal: {
     position: "relative",
-    boxShadow:
-      "0px 12px 24px 8px rgba(0, 0, 0, 0.12), 0px 12px 44px 3px rgba(0, 0, 0, 0.18)",
   },
   nonModal: {
     position: "fixed",
     top: "30px",
     right: "30px",
-    boxShadow:
-      "0px 12px 24px 8px rgba(0, 0, 0, 0.36), 0px 12px 44px 3px rgba(0, 0, 0, 0.48)",
   },
 };
 
 const DIALOG_TITLE_STYLE: DialogElementStyle = {
   small: {
+    display: "flex",
+    alignItems: "center",
     height: "52px",
     maxHeight: "100%",
-    padding: "20px 20px 8px 20px",
+    padding: "20px 20px 4px 20px", // Title's X button pluses 2px to paddingTop and Bottom
   },
   medium: {
+    display: "flex",
+    alignItems: "center",
     height: "64px",
     maxHeight: "100%",
-    padding: "30px 32px 6px 32px",
+    padding: "30px 32px 6px 32px", // Title's X button pluses 2px to paddingTop and Bottom
   },
 };
 
 const DIALOG_CONTENT_STYLE: DialogElementStyle = {
   small: {
     paddingInline: "20px calc(20px - 10px)",
+    paddingTop: "8px",
     paddingBottom: "28px",
   },
   smallAction: {
     paddingInline: "20px calc(20px - 10px)",
-    paddingBottom: "8px",
+    paddingBlock: "8px",
   },
   medium: {
     paddingInline: "32px calc(32px - 14px)",
+    paddingTop: "16px",
     paddingBottom: "32px",
   },
   mediumAction: {
     paddingInline: "32px calc(32px - 14px)",
-    paddingBottom: "16px",
+    paddingBlock: "16px",
   },
 };
 
@@ -154,8 +156,13 @@ export const StyledDialogTitleIconWrapper = styled("div")({
   justifyContent: "center",
   width: "20px",
   height: "20px",
-  position: "relative",
-  marginBottom: "1px",
+  "& .MuiSvgIcon-root": {
+    display: "flex",
+    justifyContent: "center",
+    width: "20px",
+    height: "20px",
+    fontSize: "20px",
+  },
 });
 
 export const StyledDialogContent = styled("div")(({ theme }) => ({

diff --git a/packages/design-system/src/components/Dialog/Dialog.tsx b/packages/design-system/src/components/Dialog/Dialog.tsx
@@ -26,7 +26,7 @@ export interface DialogBase {
   titleVariant?: TypographyProps["variant"];
   children: React.ReactNode;
   actions?: React.ReactNode;
-  enableBackButtonClose?: boolean;
+  enableBackButtonClose?: boolean; // only for passive dialog
   enableBackdropClose?: boolean;
   size?: "small" | "medium"; // default "small"
   sx?: SxProps;
@@ -43,7 +43,7 @@ export interface PassiveDialogType extends DialogBase {
 export interface ActionDialogType extends DialogBase {
   type: "action";
   actions: React.ReactNode;
-  enableBackButtonClose?: boolean;
+  enableBackButtonClose?: false;
   enableBackdropClose?: boolean;
 }
 
@@ -84,12 +84,7 @@ function Dialog(props: DialogProps) {
   }
 
   useEffect(() => {
-    const isClosable =
-      isOpen &&
-      (isPassiveModal ||
-        (isActionModal && props.enableBackdropClose) ||
-        (isActionNonModal && props.enableBackButtonClose));
-
+    const isClosable = isOpen && isPassiveModal;
     if (!isClosable) return;
 
     function handleEscClose(event: KeyboardEvent) {
@@ -152,7 +147,7 @@ function DialogBase({ dialogProps }: { dialogProps: DialogBase }) {
         ...sx,
       }}
       style={style}
-      className={`dialog ${className ?? ""}`}
+      className={`dialog elevation2 ${className ?? ""}`}
     >
       <StyledDialogTitle id="dialog-title" className="dialog-title-wrapper">
         {titleIcon && (

diff --git a/packages/design-system/src/components/Dialog/components/DialogAction.tsx b/packages/design-system/src/components/Dialog/components/DialogAction.tsx
@@ -12,7 +12,7 @@ const StyledDialogActions = styled("div")({
   flex: "0 0 auto",
   alignItems: "center",
   justifyContent: "flex-end",
-  gap: 8,
+  gap: 12,
 });
 
 export function DialogAction(props: DialogActionProps) {