From e18e2b46617fd7cf1bc754953b8d9c4cd5ba498d Mon Sep 17 00:00:00 2001
From: anitavincent <paes.anita@gmail.com>
Date: Tue, 21 Nov 2023 16:54:46 -0300
Subject: [PATCH] feat(checkbox): adjust spacing and add more stories

---
 .../components/src/checkbox/checkbox-group.tsx   |  5 ++++-
 .../src/checkbox/stories/checkbox.stories.tsx    | 16 ++++++++++++++++
 packages/components/src/field/field.css          |  2 +-
 3 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/checkbox/checkbox-group.tsx b/packages/components/src/checkbox/checkbox-group.tsx
index 6c7ed05ebc..0e3c5768ce 100644
--- a/packages/components/src/checkbox/checkbox-group.tsx
+++ b/packages/components/src/checkbox/checkbox-group.tsx
@@ -20,6 +20,7 @@ export const CheckboxGroup = forwardRef<HTMLInputElement, CheckboxGroupProps>(
     } = props
 
     const id = useId(defaultId)
+    const stackGap = direction === 'column' ? '$space-4' : '$space-5'
 
     return (
       <Field
@@ -30,7 +31,9 @@ export const CheckboxGroup = forwardRef<HTMLInputElement, CheckboxGroupProps>(
         {...otherProps}
       >
         <FieldLabel htmlFor={id}>{label}</FieldLabel>
-        <Stack direction={direction}>{children}</Stack>
+        <Stack direction={direction} space={stackGap}>
+          {children}
+        </Stack>
         <FieldMessage error={error} helpText={helpText} errorText={errorText} />
       </Field>
     )
diff --git a/packages/components/src/checkbox/stories/checkbox.stories.tsx b/packages/components/src/checkbox/stories/checkbox.stories.tsx
index 9976f4b992..929de654bb 100644
--- a/packages/components/src/checkbox/stories/checkbox.stories.tsx
+++ b/packages/components/src/checkbox/stories/checkbox.stories.tsx
@@ -62,6 +62,13 @@ export function AsField() {
       <CheckboxField helpText="By clicking you agree with terms and conditions">
         Terms and conditions
       </CheckboxField>
+      <CheckboxField
+        helpText="By clicking you agree with terms and conditions"
+        errorText="Something wrong"
+        error
+      >
+        Terms and conditions
+      </CheckboxField>
       <CheckboxField defaultChecked disabled>
         Disabled
       </CheckboxField>
@@ -91,6 +98,14 @@ export function Group() {
         <Checkbox>All at once</Checkbox>
         <Checkbox disabled>None</Checkbox>
       </CheckboxGroup>
+      <CheckboxGroup error label="Options" errorText="Bad choice">
+        <Checkbox error>Everything</Checkbox>
+        <Checkbox error>Everywhere</Checkbox>
+        <Checkbox error>All at once</Checkbox>
+        <Checkbox error disabled>
+          None
+        </Checkbox>
+      </CheckboxGroup>
       <CheckboxGroup
         error
         label={
@@ -99,6 +114,7 @@ export function Group() {
             <IconInfoFill />
           </>
         }
+        helpText="Choose one of these"
         errorText="Bad choice"
       >
         <Checkbox error>Everything</Checkbox>
diff --git a/packages/components/src/field/field.css b/packages/components/src/field/field.css
index 65e1f7b83d..0b671ed838 100644
--- a/packages/components/src/field/field.css
+++ b/packages/components/src/field/field.css
@@ -16,7 +16,7 @@
   [data-sl-field][data-variant='control'] {
     --sl-element-template-areas: 'input label' '- message';
     --sl-element-label-color: var(--sl-fg);
-    --sl-element-vertical-gap: var(--sl-space-0);
+    --sl-element-vertical-gap: calc(var(--sl-space-05) / 2);;
     --sl-element-horizontal-gap: var(--sl-space-2);
   }