feat: change isSmall prop to size

lunit-io · Apr 24, 2024 · ab83a02 · ab83a02
1 parent 2187b5b
commit ab83a02
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 19 deletions.
diff --git 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<DialogBase, "isSmall" | "type" | "nonModal">;
+export type DialogStyle = Pick<DialogBase, "size" | "type" | "nonModal">;
 
 const DIALOG_WRAPPER_STYLE: DialogElementStyle = {
   small: {
@@ -88,7 +88,7 @@ export const StyledBackdrop = styled("div")({
 });
 
 export const StyledDialog = styled("div")<DialogStyle>(
-  ({ theme, isSmall, nonModal, type }) => ({
+  ({ theme, size, nonModal, type }) => ({
     zIndex: 1001,
     maxHeight: "80vh",
     display: "flex",
@@ -98,27 +98,27 @@ export const StyledDialog = styled("div")<DialogStyle>(
     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")<DialogStyle>(
     },
 
     "& #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
@@ -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 }) {
     <StyledDialog
       role="dialog"
       aria-labelledby="dialog-title"
-      isSmall={isSmall}
+      size={size}
       nonModal={nonModal}
       type={type}
       sx={{

diff --git a/packages/design-system/src/stories/components/Dialog/Dialog.stories.tsx b/packages/design-system/src/stories/components/Dialog/Dialog.stories.tsx
@@ -38,7 +38,6 @@ export const PassiveModal: Story = {
           onClose={close}
           type="passive"
           title="Title area"
-          isSmall
         >
           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 = {
         <Dialog
           className={classNameFromGlobal}
           isOpen={Boolean(target)}
-          isSmall
           type="action"
           onClose={close}
           title="Title area"
@@ -227,7 +223,6 @@ export const WithCustomStyle: Story = {
         <Dialog
           className={classNameFromGlobal}
           isOpen={Boolean(target)}
-          isSmall
           type="passive"
           onClose={close}
           title="Title area"
@@ -259,7 +254,6 @@ export const WithScroll: Story = {
         <Dialog
           className={classNameFromGlobal}
           isOpen={Boolean(target)}
-          isSmall
           type="action"
           onClose={close}
           title="Title area"