Merge pull request #1286 from vtex/checkbox-qa-2

Checkbox design review
vtex · Nov 22, 2023 · 63bc656 · 63bc656 · vercel · Nov 22, 2023
2 parents 43b971e + ec8aabe
commit 63bc656
Show file tree

Hide file tree

Showing 7 changed files with 38 additions and 6 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/checkbox.css b/packages/components/src/checkbox/checkbox.css
@@ -6,7 +6,7 @@
 
 @layer sl-components {
   [data-sl-checkbox] {
-    color: var(--sl-color-fg);
+    color: var(--sl-fg);
     width: var(--sl-checkbox-size);
     height: var(--sl-checkbox-size);
     display: flex;

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
@@ -29,7 +29,7 @@
     &[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);
     }
   }

diff --git a/packages/components/src/menu/menu.css b/packages/components/src/menu/menu.css
@@ -1,7 +1,7 @@
 @layer sl-components {
   [data-sl-menu] {
     background: var(--sl-bg);
-    color: var(--sl-color-fg);
+    color: var(--sl-fg);
     outline: none;
     border: var(--sl-border);
     border-radius: var(--sl-border-radius-medium);

diff --git a/packages/components/src/radio/stories/radio.stories.tsx b/packages/components/src/radio/stories/radio.stories.tsx
@@ -104,10 +104,23 @@ export function Help() {
         <Radio value="opt4">Another pen</Radio>
       </RadioGroup>
 
+      <RadioGroup
+        label="Optional group"
+        errorText="Something is wrong"
+        helpText="Pen pinapple apple pen"
+      >
+        <Radio value="opt1">Pen</Radio>
+        <Radio value="opt2">Pineapple</Radio>
+        <Radio value="opt3">Apple</Radio>
+        <Radio value="opt4">Another pen</Radio>
+      </RadioGroup>
+
+
       <RadioGroup
         label="Optional group (optional)"
         errorText="Something is wrong"
         helpText="Pen pinapple apple pen"
+        error
       >
         <Radio value="opt1">Pen</Radio>
         <Radio value="opt2">Pineapple</Radio>

diff --git a/packages/components/src/table/table.css b/packages/components/src/table/table.css
@@ -6,7 +6,7 @@
 
 @layer sl-components {
   [data-sl-table] {
-    color: var(--sl-color-fg);
+    color: var(--sl-fg);
     border-collapse: collapse;
     width: 100%;
     display: grid;
@@ -18,7 +18,7 @@
       overflow: unset;
 
       [data-sl-table-header-cell] {
-        color: var(--sl-color-fg);
+        color: var(--sl-fg);
         position: sticky;
         top: 0;
         z-index: 1;