fix(base-check-box): align items to flex-start (#2344)

contentful · Dec 2, 2022 · b5bdc78 · b5bdc78 · vercel · Dec 2, 2022
1 parent 505074f
commit b5bdc78
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 5 deletions.
diff --git a/.changeset/happy-zebras-help.md b/.changeset/happy-zebras-help.md
@@ -0,0 +1,5 @@
+---
+"@contentful/f36-forms": patch
+---
+
+fix(base-check-box): align items to flex-start
diff --git a/packages/components/forms/examples/FormControlCheckboxGroupExample.tsx b/packages/components/forms/examples/FormControlCheckboxGroupExample.tsx
@@ -6,10 +6,18 @@ export default function FormControlCheckboxGroupExample() {
     <FormControl as="fieldset" isRequired>
       <FormControl.Label as="legend">Checkbox group options</FormControl.Label>
       <Checkbox.Group name="checkbox-options">
-        <Checkbox value="option 1" id="option-1" helpText="Some help text">
+        <Checkbox
+          value="option 1"
+          id="checkbox-option-1"
+          helpText="Some help text"
+        >
           Option 1
         </Checkbox>
-        <Checkbox value="option 2" id="option-2" helpText="Another help text">
+        <Checkbox
+          value="option 2"
+          id="checkbox-option-2"
+          helpText="Another help text"
+        >
           Option 2
         </Checkbox>
       </Checkbox.Group>

diff --git a/packages/components/forms/examples/FormControlRadioGroupExample.tsx b/packages/components/forms/examples/FormControlRadioGroupExample.tsx
@@ -6,10 +6,18 @@ export default function FormControlRadioGroupExample() {
     <FormControl as="fieldset">
       <FormControl.Label as="legend">Radio group options</FormControl.Label>
       <Radio.Group name="radio-options" defaultValue="option 1">
-        <Radio value="option 1" id="option-1" helpText="Help text for option 1">
+        <Radio
+          value="option 1"
+          id="radio-option-1"
+          helpText="Help text for option 1"
+        >
           Option 1
         </Radio>
-        <Radio value="option 2" id="option-2" helpText="Help text for option 2">
+        <Radio
+          value="option 2"
+          id="radio-option-2"
+          helpText="Help text for option 2"
+        >
           Option 2
         </Radio>
       </Radio.Group>

diff --git a/packages/components/forms/src/BaseCheckbox/BaseCheckbox.tsx b/packages/components/forms/src/BaseCheckbox/BaseCheckbox.tsx
@@ -100,7 +100,7 @@ function _BaseCheckbox(
     : undefined;
 
   return (
-    <Flex flexDirection="column" className={className}>
+    <Flex alignItems="flex-start" flexDirection="column" className={className}>
       <Text
         as="label"
         fontColor="gray900"