fix alignment of Option with checkbox and description

user-interviews · Jul 10, 2024 · 26a0bf5 · 26a0bf5
1 parent 2f3717b
commit 26a0bf5
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 10 deletions.
diff --git a/src/Select/Option.jsx b/src/Select/Option.jsx
@@ -17,14 +17,16 @@ import './Option.scss';
 const Option = forwardRef(({ indeterminate, ...props }, ref) => (
   <components.Option {...props}>
     <div className="Option">
-      <CheckboxButton
-        checked={props.isSelected}
-        className="Checkbox"
-        id={props.label}
-        indeterminate={indeterminate}
-        ref={ref}
-        onChange={() => null}
-      />
+      <div className="CheckboxContainer">
+        <CheckboxButton
+          checked={props.isSelected}
+          className="Checkbox"
+          id={props.label}
+          indeterminate={indeterminate}
+          ref={ref}
+          onChange={() => null}
+        />
+      </div>
       <div className="TitleDescriptionContainer">
         <label
           className={classNames({

diff --git a/src/Select/Option.scss b/src/Select/Option.scss
@@ -1,8 +1,8 @@
 .Option {
   display: flex;
-  align-items: center;
-
+
   .Checkbox {
+    margin-top: var(--synth-spacing-1);
     margin-right: var(--synth-spacing-3);
   }