update checkbox style

voyagegroup · Feb 3, 2025 · d27998a · d27998a
1 parent 4177f83
commit d27998a
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 15 deletions.
diff --git a/src/components/Checkbox/Checkbox.stories.tsx b/src/components/Checkbox/Checkbox.stories.tsx
@@ -7,6 +7,11 @@ export default {
   title: "Components/Inputs/Checkbox",
   component: Checkbox,
   argTypes: {
+    checkBoxSize: {
+      type: "select",
+      options: ["small", "medium"],
+    },
+    disabled: { control: "boolean" },
     onChange: { action: "changed" },
   },
 };
@@ -17,18 +22,39 @@ export const Example: StoryObj<CheckBoxProps> = {
 
 export const DesignSamples: StoryObj = {
   render: () => (
-    <Flex display="flex" flexDirection="column">
-      <Checkbox checked={false}>Not checked</Checkbox>
-      <Checkbox checked={true}>Checked</Checkbox>
-      <Checkbox indeterminate={true} checked={true}>
-        Checked(indeterminate)
-      </Checkbox>
-      <Checkbox disabled checked={false}>
-        Not checked(disabled)
-      </Checkbox>
-      <Checkbox disabled checked={true}>
-        Checked(disabled)
-      </Checkbox>
-    </Flex>
+    <>
+      <Flex display="flex" gap={3}>
+        <Flex display="flex" flexDirection="column" gap={1}>
+          <Checkbox checked={false} checkBoxSize="small">
+            Not checked
+          </Checkbox>
+          <Checkbox checked={true} checkBoxSize="small">
+            Checked
+          </Checkbox>
+          <Checkbox indeterminate={true} checked={true} checkBoxSize="small">
+            Checked(indeterminate)
+          </Checkbox>
+          <Checkbox disabled checked={false} checkBoxSize="small">
+            Not checked(disabled)
+          </Checkbox>
+          <Checkbox disabled checked={true} checkBoxSize="small">
+            Checked(disabled)
+          </Checkbox>
+        </Flex>
+        <Flex display="flex" flexDirection="column" gap={1}>
+          <Checkbox checked={false}>Not checked</Checkbox>
+          <Checkbox checked={true}>Checked</Checkbox>
+          <Checkbox indeterminate={true} checked={true}>
+            Checked(indeterminate)
+          </Checkbox>
+          <Checkbox disabled checked={false}>
+            Not checked(disabled)
+          </Checkbox>
+          <Checkbox disabled checked={true}>
+            Checked(disabled)
+          </Checkbox>
+        </Flex>
+      </Flex>
+    </>
   ),
 };
diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx
@@ -5,6 +5,8 @@ export type CheckBoxProps = React.ComponentPropsWithoutRef<"input"> & {
   indeterminate?: boolean;
   error?: boolean;
   inputRef?: React.Ref<HTMLInputElement>;
+  disabled?: boolean;
+  checkBoxSize?: "small" | "medium";
 };
 
 const Checkbox = React.forwardRef<HTMLLabelElement, CheckBoxProps>(
@@ -15,6 +17,7 @@ const Checkbox = React.forwardRef<HTMLLabelElement, CheckBoxProps>(
       error = false,
       disabled = false,
       inputRef,
+      checkBoxSize = "medium",
       ...rest
     },
     ref,
@@ -31,6 +34,7 @@ const Checkbox = React.forwardRef<HTMLLabelElement, CheckBoxProps>(
           {...rest}
         />
         <Styled.Span
+          checkBoxSize={checkBoxSize}
           error={error}
           indeterminate={indeterminate}
           hasChild={!!children}

diff --git a/src/components/Checkbox/styled.ts b/src/components/Checkbox/styled.ts
@@ -1,9 +1,11 @@
 import styled from "styled-components";
 import { getShadow } from "../../utils/getShadow";
+import { fontSize } from "../Typography/Typography";
 
 export const Checkbox = styled.input<{
   indeterminate: boolean;
   error: boolean;
+  disabled: boolean;
 }>`
   opacity: 0;
   -webkit-appearance: none;
@@ -33,6 +35,7 @@ export const Container = styled.label<{ disabled: boolean }>`
 `;
 
 export const Span = styled.span<{
+  checkBoxSize: string;
   hasChild: boolean;
   indeterminate: boolean;
   error: boolean;
@@ -43,11 +46,14 @@ export const Span = styled.span<{
     error
       ? ({ theme }) => theme.palette.danger.main
       : ({ theme }) => theme.palette.black};
+  font-size: ${({ checkBoxSize }) =>
+    checkBoxSize === "small" ? `${fontSize.sm}px` : `${fontSize.md}px`};
   &::before {
     flex-shrink: 0;
     content: "";
-    width: 18px;
-    height: 18px;
+    aspect-ratio: 1;
+    width: ${({ checkBoxSize }) =>
+      checkBoxSize === "small" ? "16px" : "18px"};
     border: 1px solid
       ${({ error, theme }) =>
         error ? theme.palette.danger.main : theme.palette.divider};