Toggleのレイアウト調整 (#1529)

voyagegroup · Dec 5, 2023 · 3373f15 · 3373f15
1 parent 5594f26
commit 3373f15
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 17 deletions.
diff --git a/.changeset/long-buttons-complain.md b/.changeset/long-buttons-complain.md
@@ -0,0 +1,5 @@
+---
+"ingred-ui": patch
+---
+
+Modify toggle layout
diff --git a/src/components/ToggleButton/ToggleButton.tsx b/src/components/ToggleButton/ToggleButton.tsx
@@ -19,9 +19,9 @@ const ToggleButton = React.forwardRef<HTMLDivElement, ToggleButtonProps>(
       checked = false,
       disabled = false,
       onChange,
-      width = "56px",
-      checkedText = "ON",
-      unCheckedText = "OFF",
+      width = "48px",
+      checkedText = "",
+      unCheckedText = "",
       inputRef,
     } = props;
     return (

diff --git a/src/components/ToggleButton/__tests__/__snapshots__/ToggleButton.test.tsx.snap b/src/components/ToggleButton/__tests__/__snapshots__/ToggleButton.test.tsx.snap
@@ -3,12 +3,12 @@
 exports[`ToggleButton component testing ToggleButton 1`] = `
 <DocumentFragment>
   <div
-    class="sc-gsnTZi dImlRj"
-    width="56px"
+    class="sc-gsnTZi cFtvDM"
+    width="48px"
   >
     <label
-      class="sc-gKXOVf dUNjkq"
-      width="56px"
+      class="sc-gKXOVf hllYLd"
+      width="48px"
     >
       <input
         class="sc-iBkjds hZpMas"
@@ -22,9 +22,7 @@ exports[`ToggleButton component testing ToggleButton 1`] = `
           class="sc-bczRLJ glkMsN"
           color="#0B82F4"
           font-size="12px"
-        >
-          ON
-        </div>
+        />
       </div>
       <div
         class="sc-hKMtZM sc-jSMfEi fEjsWu kqRAsJ"
@@ -33,12 +31,10 @@ exports[`ToggleButton component testing ToggleButton 1`] = `
           class="sc-bczRLJ jjEXQA"
           color="#596978"
           font-size="12px"
-        >
-          OFF
-        </div>
+        />
       </div>
       <span
-        class="sc-dkzDqf kcKGiQ"
+        class="sc-dkzDqf dOoUqQ"
       />
     </label>
   </div>

diff --git a/src/components/ToggleButton/styled.ts b/src/components/ToggleButton/styled.ts
@@ -17,8 +17,8 @@ export const ToggleButton = styled.span<{
   top: 50%;
   left: 4px;
   transform: translateY(-50%);
-  width: 14px;
-  height: 14px;
+  width: 16px;
+  height: 16px;
   border-radius: 14px;
   background-color: ${({ checked, disabled, theme }) => {
     let backgroundColor = theme.palette.background.default;
@@ -104,7 +104,7 @@ export const Label = styled.label<LabelProps>`
     checked &&
     css`
       & > ${ToggleButton} {
-        left: calc(100% - 14px - 4px);
+        left: calc(100% - 14px - 6px);
       }
       & > ${CheckedLabelText} {
         opacity: 1;