feat(checkbox): adjust spacing and add more stories

vtex · Nov 22, 2023 · 069d183 · 069d183
1 parent dad60f3
commit 069d183
Show file tree

Hide file tree

Showing 3 changed files with 22 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
@@ -1,4 +1,5 @@
 @layer sl-components {
+
   [data-sl-field] {
     display: grid;
     grid-template-areas: var(--sl-element-template-areas);
@@ -30,7 +31,7 @@
       --sl-element-template-areas: 'input label' '- message';
       --sl-element-label-color: var(--sl-fg);
       --sl-element-vertical-gap: var(--sl-space-0);
-      --sl-element-horizontal-gap: var(--sl-space-2);
+      --sl-element-vertical-gap: calc(var(--sl-space-05) / 2);
     }
   }
 }