From e5643fd31952f88532eead96e9cf9fc413349d73 Mon Sep 17 00:00:00 2001
From: okakyo <0622okakyo@gmail.com>
Date: Sat, 27 Jan 2024 22:36:25 +0900
Subject: [PATCH 1/3] =?UTF-8?q?[#1196]=20CheckboxNew=20=E3=81=AB=20marginY?=
 =?UTF-8?q?=E3=81=AE=E4=BD=8D=E7=BD=AE=E3=82=92=E8=AA=BF=E6=95=B4=E3=81=99?=
 =?UTF-8?q?=E3=82=8B=20props=20=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/styles/bases/checkbox-new.css.ts     |  9 -------
 .../base/inputs/checkbox-new/checkbox-new.vue | 15 ++++++++----
 .../checkbox-new/components/checkbox-new.tsx  | 24 ++++++++++++-------
 3 files changed, 26 insertions(+), 22 deletions(-)

diff --git a/packages/styles/bases/checkbox-new.css.ts b/packages/styles/bases/checkbox-new.css.ts
index 3d780b197..88b79ecbf 100644
--- a/packages/styles/bases/checkbox-new.css.ts
+++ b/packages/styles/bases/checkbox-new.css.ts
@@ -75,15 +75,6 @@ const inputShapeStyle = style({
   borderRadius: "2px",
 });
 
-export const inputMarginStyle = styleVariants({
-  default: {
-    margin: "0.05rem 0",
-  },
-  bordered: {
-    margin: "0.25rem 0",
-  },
-});
-
 export const inputStyle = style([
   inputShapeStyle,
   {
diff --git a/packages/wiz-ui-next/src/components/base/inputs/checkbox-new/checkbox-new.vue b/packages/wiz-ui-next/src/components/base/inputs/checkbox-new/checkbox-new.vue
index b934f4f59..e781ba591 100644
--- a/packages/wiz-ui-next/src/components/base/inputs/checkbox-new/checkbox-new.vue
+++ b/packages/wiz-ui-next/src/components/base/inputs/checkbox-new/checkbox-new.vue
@@ -2,16 +2,18 @@
   <label :class="labelClass">
     <input
       type="checkbox"
-      :class="[styles.inputStyle, styles.inputMarginStyle[borderState]]"
+      :class="[styles.inputStyle]"
       :checked="actualChecked"
       :value="value"
       :id="id"
       :name="name"
       :disabled="disabled"
       @change="handleChange"
+      :style="{ margin: `${checkboxInputMargin} 0` }"
     />
     <div
-      :class="[styles.iconWrapperStyle, styles.inputMarginStyle[borderState]]"
+      :class="[styles.iconWrapperStyle]"
+      :style="{ margin: `${checkboxInputMargin} 0` }"
     >
       <div :class="styles.iconPositionStyle">
         <WizIcon :icon="WizICheckBold" color="white.800" size="md" />
@@ -36,6 +38,7 @@ interface Props {
   strikeThrough?: boolean;
   bordered?: boolean;
   error?: boolean;
+  checkboxInputMarginY?: string;
 }
 const props = defineProps<Props>();
 
@@ -81,7 +84,9 @@ const handleChange = (e: Event) => {
   }
 };
 
-const borderState: "bordered" | "default" = props.bordered
-  ? "bordered"
-  : "default";
+const checkboxInputMargin = computed(() => {
+  if (props.checkboxInputMarginY) return props.checkboxInputMarginY;
+  if (props.bordered) return "5px";
+  return "0px";
+});
 </script>
diff --git a/packages/wiz-ui-react/src/components/base/inputs/checkbox-new/components/checkbox-new.tsx b/packages/wiz-ui-react/src/components/base/inputs/checkbox-new/components/checkbox-new.tsx
index f64265897..5ced6f918 100644
--- a/packages/wiz-ui-react/src/components/base/inputs/checkbox-new/components/checkbox-new.tsx
+++ b/packages/wiz-ui-react/src/components/base/inputs/checkbox-new/components/checkbox-new.tsx
@@ -29,6 +29,7 @@ type Props = BaseProps & {
   bordered?: boolean;
   error?: boolean;
   children?: ReactNode;
+  checkboxInputMarginY?: string;
   onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
 };
 
@@ -41,6 +42,7 @@ const CheckboxNew = forwardRef<HTMLInputElement, Props>(
       children,
       strikeThrough,
       bordered,
+      checkboxInputMarginY,
       error,
       onChange,
       ...props
@@ -66,6 +68,12 @@ const CheckboxNew = forwardRef<HTMLInputElement, Props>(
       [isControlled, onChange]
     );
 
+    const inputMarginStyle = () => {
+      if (checkboxInputMarginY) return checkboxInputMarginY;
+      if (bordered) return "5px";
+      return "0px";
+    };
+
     const labelClassName = useMemo(() => {
       const borderedState = (() => {
         if (props.disabled) {
@@ -101,18 +109,18 @@ const CheckboxNew = forwardRef<HTMLInputElement, Props>(
           {...props}
           ref={ref}
           type="checkbox"
-          className={clsx(
-            styles.inputStyle,
-            styles.inputMarginStyle[bordered ? "bordered" : "default"]
-          )}
+          className={clsx(styles.inputStyle)}
           checked={actualChecked}
           onChange={handleChange}
+          style={{
+            margin: `${inputMarginStyle()} 0px`,
+          }}
         />
         <div
-          className={clsx(
-            styles.iconWrapperStyle,
-            styles.inputMarginStyle[bordered ? "bordered" : "default"]
-          )}
+          className={clsx(styles.iconWrapperStyle)}
+          style={{
+            margin: `${inputMarginStyle()} 0px`,
+          }}
         >
           {actualChecked && (
             <div className={styles.iconPositionStyle}>

From 0884005fbd185bf2141964f96637ae318be62c43 Mon Sep 17 00:00:00 2001
From: okakyo <0622okakyo@gmail.com>
Date: Sat, 27 Jan 2024 22:40:07 +0900
Subject: [PATCH 2/3] =?UTF-8?q?[#1196]=20SearchInput=20=E3=81=AE=20checkbo?=
 =?UTF-8?q?x=20=E3=81=AE=E4=BD=8D=E7=BD=AE=E3=82=92=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/base/inputs/search-input/search-input.vue     | 1 +
 .../src/components/base/inputs/search-input/search-popup.vue     | 1 +
 .../base/inputs/search-input/components/search-popup-panel.tsx   | 1 +
 3 files changed, 3 insertions(+)

diff --git a/packages/wiz-ui-next/src/components/base/inputs/search-input/search-input.vue b/packages/wiz-ui-next/src/components/base/inputs/search-input/search-input.vue
index cf5722c0d..6d7318ae5 100644
--- a/packages/wiz-ui-next/src/components/base/inputs/search-input/search-input.vue
+++ b/packages/wiz-ui-next/src/components/base/inputs/search-input/search-input.vue
@@ -92,6 +92,7 @@
                 :checked="checkValues.includes(item.value)"
                 :value="item.value"
                 :id="`${item.label}_${item.value}`"
+                checkbox-input-margin-y="5px"
                 @update:checked="handleClickCheckbox(item.value)"
               >
                 <WizHStack width="100%" align="center" nowrap gap="xs2">
diff --git a/packages/wiz-ui-next/src/components/base/inputs/search-input/search-popup.vue b/packages/wiz-ui-next/src/components/base/inputs/search-input/search-popup.vue
index 2a70196b5..d7b3e288d 100644
--- a/packages/wiz-ui-next/src/components/base/inputs/search-input/search-popup.vue
+++ b/packages/wiz-ui-next/src/components/base/inputs/search-input/search-popup.vue
@@ -83,6 +83,7 @@
                 :checked="checkValues.includes(item.value)"
                 :value="item.value"
                 :id="`${item.label}_${item.value}`"
+                checkbox-input-margin-y="5px"
                 @update:checked="handleClickCheckbox(item.value)"
               >
                 <WizHStack width="100%" align="center" nowrap gap="xs2">
diff --git a/packages/wiz-ui-react/src/components/base/inputs/search-input/components/search-popup-panel.tsx b/packages/wiz-ui-react/src/components/base/inputs/search-input/components/search-popup-panel.tsx
index 2ee0d1bd3..d1e7ed057 100644
--- a/packages/wiz-ui-react/src/components/base/inputs/search-input/components/search-popup-panel.tsx
+++ b/packages/wiz-ui-react/src/components/base/inputs/search-input/components/search-popup-panel.tsx
@@ -125,6 +125,7 @@ export const SearchPopupPanel: FC<Props> = ({
                       value={option.value}
                       id={`${option.label}-${option.value}`}
                       checked={values.includes(option.value)}
+                      checkboxInputMarginY="5px"
                       onChange={(e) => {
                         handleChangeValues(option.value, e.target.checked);
                       }}

From 5c11dd5bfaa53cb0a5b854a2479699b37e2dec0b Mon Sep 17 00:00:00 2001
From: okakyo <0622okakyo@gmail.com>
Date: Sat, 27 Jan 2024 22:41:41 +0900
Subject: [PATCH 3/3] [#1196] add changeset

---
 .changeset/lazy-deers-dream.md | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 .changeset/lazy-deers-dream.md

diff --git a/.changeset/lazy-deers-dream.md b/.changeset/lazy-deers-dream.md
new file mode 100644
index 000000000..e3e63108e
--- /dev/null
+++ b/.changeset/lazy-deers-dream.md
@@ -0,0 +1,7 @@
+---
+"@wizleap-inc/wiz-ui-react": minor
+"@wizleap-inc/wiz-ui-next": minor
+"@wizleap-inc/wiz-ui-styles": minor
+---
+
+[#1196] Checkbox の位置を調整するための Props 追加