feat(checkbox): adjust spacing and add more stories

vtex · Nov 21, 2023 · e18e2b4 · e18e2b4
1 parent 8e0ea11
commit e18e2b4
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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);
   }