diff --git a/packages/design-system/src/components/Dialog/Dialog.styled.ts b/packages/design-system/src/components/Dialog/Dialog.styled.ts index 3d82152a..feb49b01 100644 --- a/packages/design-system/src/components/Dialog/Dialog.styled.ts +++ b/packages/design-system/src/components/Dialog/Dialog.styled.ts @@ -7,7 +7,7 @@ export interface DialogElementStyle { [key: string]: CSSObject; } -export type DialogStyle = Pick; +export type DialogStyle = Pick; const DIALOG_WRAPPER_STYLE: DialogElementStyle = { small: { @@ -88,7 +88,7 @@ export const StyledBackdrop = styled("div")({ }); export const StyledDialog = styled("div")( - ({ theme, isSmall, nonModal, type }) => ({ + ({ theme, size, nonModal, type }) => ({ zIndex: 1001, maxHeight: "80vh", display: "flex", @@ -98,27 +98,27 @@ export const StyledDialog = styled("div")( backgroundColor: theme.palette.lunit_token.core.bg_03, color: theme.palette.lunit_token.core.text_normal, - ...DIALOG_WRAPPER_STYLE[isSmall ? "small" : "medium"], + ...DIALOG_WRAPPER_STYLE[size === "small" ? "small" : "medium"], ...DIALOG_WRAPPER_STYLE[nonModal ? "nonModal" : "modal"], "& #dialog-title": { - ...DIALOG_TITLE_STYLE[isSmall ? "small" : "medium"], + ...DIALOG_TITLE_STYLE[size === "small" ? "small" : "medium"], }, "& #dialog-content": { ...DIALOG_CONTENT_STYLE[ - isSmall && type !== "passive" + size === "small" && type !== "passive" ? "smallAction" - : isSmall + : size === "small" ? "small" - : !isSmall && type !== "passive" + : size === "medium" && type !== "passive" ? "mediumAction" : "medium" ], scrollbarGutter: "stable", "::-webkit-scrollbar": { - width: isSmall ? "10px" : "14px", + width: size === "small" ? "10px" : "14px", }, "::webkit-scrollbar-track": { background: "transparent", @@ -135,7 +135,7 @@ export const StyledDialog = styled("div")( }, "& #dialog-action": { - ...DIALOG_ACTION_STYLE[isSmall ? "small" : "medium"], + ...DIALOG_ACTION_STYLE[size === "small" ? "small" : "medium"], }, }) ); diff --git a/packages/design-system/src/components/Dialog/Dialog.tsx b/packages/design-system/src/components/Dialog/Dialog.tsx index eb36be8c..c64cbd8b 100644 --- a/packages/design-system/src/components/Dialog/Dialog.tsx +++ b/packages/design-system/src/components/Dialog/Dialog.tsx @@ -28,7 +28,7 @@ export interface DialogBase { actions?: React.ReactNode; enableBackButtonClose?: boolean; enableBackdropClose?: boolean; - isSmall?: boolean; // default true + size?: "small" | "medium"; // default "small" sx?: SxProps; style?: React.CSSProperties; className?: string; @@ -135,7 +135,7 @@ function DialogBase({ dialogProps }: { dialogProps: DialogBase }) { children, actions, type, - isSmall = false, + size = "small", sx, style, className, @@ -145,7 +145,7 @@ function DialogBase({ dialogProps }: { dialogProps: DialogBase }) { Lorem Ipsum is simply dummy text of the a printing and typesetting industry @@ -61,7 +60,6 @@ export const ActionModal: Story = { className={classNameFromGlobal} isOpen={Boolean(target)} onClose={close} - isSmall type="action" title="Title area" actions={ @@ -117,7 +115,6 @@ export const NonModal: Story = { isOpen={isOpen} nonModal type="action" - isSmall onClose={close} title="Title area" actions={ @@ -159,7 +156,7 @@ export const SmallFalse: Story = { type="passive" onClose={close} title="Title area" - isSmall={false} + size="medium" > Lorem Ipsum is simply dummy text of the a printing and typesetting industry @@ -181,7 +178,6 @@ export const WithTitleIcon: Story = {