Code Review fixes

fortanix · Nov 8, 2024 · 3a172fd · 3a172fd
1 parent 7ce6004
commit 3a172fd
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 17 deletions.
diff --git a/src/components/forms/fields/CheckboxField/CheckboxField.module.scss b/src/components/forms/fields/CheckboxField/CheckboxField.module.scss
@@ -8,19 +8,6 @@
   .bk-checkbox-field {
     @include bk.component-base(bk-checkbox-field);
 
-    .bk-checkbox-field__label {
-      color: bk.$theme-text-label-default;
-      cursor: pointer;
-      position: relative;
-      margin-left: bk.$spacing-2;
-      top: -4px;
-
-      .bk-checkbox-field__label__sublabel {
-        font-size: bk.$font-size-xs;
-        padding-left: 26px;
-      }
-    }
-
     .bk-checkbox-field__title {
       color: bk.$theme-text-label-default;
       font-weight: bk.$font-weight-semibold;
@@ -37,5 +24,22 @@
         margin-left: bk.$spacing-1;
       }
     }
+
+    .bk-checkbox-field__label {
+      display: flex;
+      align-items: flex-start;
+    }
+
+    .bk-checkbox-field__label__content {
+      color: bk.$theme-text-label-default;
+      cursor: pointer;
+      position: relative;
+      margin-left: bk.$spacing-2;
+      top: -2px;
+
+      .bk-checkbox-field__label__sublabel {
+        font-size: bk.$font-size-xs;
+      }
+    }
   }
 }
diff --git a/src/components/forms/fields/CheckboxField/CheckboxField.tsx b/src/components/forms/fields/CheckboxField/CheckboxField.tsx
@@ -83,7 +83,6 @@ export const CheckboxField = (props: CheckboxFieldProps) => {
     titleOptional,
     titleTooltip,
     className,
-    ...propsRest
   } = props;
 
   return (
@@ -101,18 +100,18 @@ export const CheckboxField = (props: CheckboxFieldProps) => {
         </CheckboxFieldTitle>
       )}
       {/* biome ignore lint/a11y/noLabelWithoutControl: the `<Checkbox>` will resolve to an `<input>` */}
-      <label>
+      <label className={cl['bk-checkbox-field__label']}>
         <Checkbox
           checked={props.checked}
           defaultChecked={props.defaultChecked}
           disabled={props.disabled}
         />
-        <span className={cl['bk-checkbox-field__label']}>
+        <div className={cl['bk-checkbox-field__label__content']}>
           {label}
           {sublabel && (
             <div className={cl['bk-checkbox-field__label__sublabel']}>{sublabel}</div>
           )}
-        </span>
+        </div>
       </label>
     </div>
   );