Merge pull request #142 from lunit-io/ds-91-use-small-size

[DS-91] medium size 대신 small size 사용
lunit-io · Nov 30, 2023 · fcab3d3 · fcab3d3
2 parents 96f1bbd + 8791536
commit fcab3d3
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 30 deletions.
diff --git a/packages/design-system/src/components/Toggle/Toggle.styled.ts b/packages/design-system/src/components/Toggle/Toggle.styled.ts
@@ -1,10 +1,10 @@
 import { styled, Switch as MuiSwitch, SwitchProps } from "@mui/material";
 interface ToggleProps extends SwitchProps {
-  toggleSize: "medium" | "large";
+  toggleSize: "small" | "large";
 }
 
 const toggleStyles = {
-  medium: {
+  small: {
     root: {
       width: 28,
       height: 18,
@@ -65,7 +65,7 @@ const indeterminateStyles = {
       borderRadius: 2,
     },
   },
-  medium: {
+  small: {
     switchChecked: {
       top: 6,
       left: -4,

diff --git a/packages/design-system/src/components/Toggle/Toggle.tsx b/packages/design-system/src/components/Toggle/Toggle.tsx
@@ -1,18 +1,37 @@
-import React from 'react'
-import { CommonToggle, CommonIndeterminateToggle } from './Toggle.styled'
-import type { ToggleProps } from './Toggle.types'
-
+import React from "react";
+import { CommonToggle, CommonIndeterminateToggle } from "./Toggle.styled";
+import type { ToggleProps } from "./Toggle.types";
 
 const Toggle = (props: ToggleProps) => {
-  const { size = "medium", indeterminate = false, disableRipple, ...switchProps } = props
+  const {
+    size = "small",
+    indeterminate = false,
+    disableRipple,
+    ...switchProps
+  } = props;
 
   if (indeterminate) {
     const { checked: _, ...restProps } = switchProps;
     // can't use checked props with indeterminate
-      return <CommonIndeterminateToggle toggleSize={size} checked focusRipple={false} disableRipple={disableRipple} {...restProps} />
+    return (
+      <CommonIndeterminateToggle
+        toggleSize={size}
+        checked
+        focusRipple={false}
+        disableRipple={disableRipple}
+        {...restProps}
+      />
+    );
   }
 
-  return  <CommonToggle toggleSize={size} focusRipple={false} disableRipple={disableRipple} {...switchProps}/>
-}
+  return (
+    <CommonToggle
+      toggleSize={size}
+      focusRipple={false}
+      disableRipple={disableRipple}
+      {...switchProps}
+    />
+  );
+};
 
-export default Toggle
+export default Toggle;
diff --git a/packages/design-system/src/components/Toggle/Toggle.types.ts b/packages/design-system/src/components/Toggle/Toggle.types.ts
@@ -1,14 +1,14 @@
-import type { SwitchProps } from "@mui/material"
+import type { SwitchProps } from "@mui/material";
 
-export interface ToggleProps extends Omit<SwitchProps, "size" > {
+export interface ToggleProps extends Omit<SwitchProps, "size"> {
   /**
    * The size of the component.
-   * @default medium
+   * @default small
    */
-  size?: 'medium' | 'large'
+  size?: "small" | "large";
   /**
-  * If `true`, the component has consistent 'checked' value and change shape.
-  * @default false
-  */
-  indeterminate?: boolean
+   * If `true`, the component has consistent 'checked' value and change shape.
+   * @default false
+   */
+  indeterminate?: boolean;
 }
diff --git a/packages/design-system/src/stories/components/SelectControl/Toggle.stories.tsx b/packages/design-system/src/stories/components/SelectControl/Toggle.stories.tsx
@@ -45,7 +45,7 @@ export default {
     },
   },
   args: {
-    size: "medium",
+    size: "small",
     indeterminate: false,
     disabled: false,
   },
@@ -103,7 +103,7 @@ const Template: StoryFn<typeof Toggle> = (args) => (
     </TableHead>
     <TableBody>
       <TableRow>
-        <TableCell>MEDIUM DEFAULT</TableCell>
+        <TableCell>SMALL DEFAULT</TableCell>
         <TableCell>
           <Toggle {...args} checked />
         </TableCell>
@@ -115,7 +115,7 @@ const Template: StoryFn<typeof Toggle> = (args) => (
         </TableCell>
       </TableRow>
       <TableRow>
-        <TableCell>MEDIUM FOCUS</TableCell>
+        <TableCell>SMALL FOCUS</TableCell>
         <TableCell>
           <Toggle {...args} className="focus-test" checked />
         </TableCell>
@@ -166,15 +166,15 @@ const DisabledTemplate: StoryFn<typeof Toggle> = (args) => (
     </TableHead>
     <TableBody>
       <TableRow>
-        <TableCell>MEDIUM DEFAULT</TableCell>
+        <TableCell>SMALL DEFAULT</TableCell>
         <TableCell>
-          <Toggle {...args} checked />
+          <Toggle {...args} size="small" checked />
         </TableCell>
         <TableCell>
-          <Toggle {...args} indeterminate />
+          <Toggle {...args} size="small" indeterminate />
         </TableCell>
         <TableCell>
-          <Toggle {...args} />
+          <Toggle {...args} size="small" />
         </TableCell>
       </TableRow>
       <TableRow>
@@ -205,7 +205,7 @@ const TemplateWithLabel: StoryFn<typeof Toggle> = (args) => (
     </TableHead>
     <TableBody>
       <TableRow>
-        <TableCell>MEDIUM DEFAULT</TableCell>
+        <TableCell>SMALL DEFAULT</TableCell>
         <TableCell>
           <FormLabel label="Label 1" control={<Toggle {...args} checked />} />
         </TableCell>
@@ -223,7 +223,7 @@ const TemplateWithLabel: StoryFn<typeof Toggle> = (args) => (
         </TableCell>
       </TableRow>
       <TableRow>
-        <TableCell>MEDIUM FOCUS</TableCell>
+        <TableCell>SMALL FOCUS</TableCell>
         <TableCell>
           <FormLabel
             className="focus-test"
@@ -319,7 +319,7 @@ const IndeterminateTemplate: StoryFn<typeof Toggle> = (args) => {
     <Table>
       <TableHead>
         <TableRow>
-          <TableCell>MEDIUM</TableCell>
+          <TableCell>SMALL</TableCell>
           <TableCell>LARGE</TableCell>
         </TableRow>
       </TableHead>