fix: Pass down appearance props and use context from CheckboxGroup to…

… apply label width (#4032)

* fix([DST-501]): Pass down appearance props and use context from CheckboxGroup to apply label width

* Create itchy-berries-flash.md

.changeset/itchy-berries-flash.md

@@ -0,0 +1,5 @@
+---
+"@marigold/components": patch
+---
+
+fix([DST-501]): Pass down appearance props and use context from CheckboxGroup to apply label width

packages/components/src/Checkbox/Checkbox.tsx

@@ -1,13 +1,13 @@
-import { forwardRef, useContext } from 'react';
+import { forwardRef } from 'react';
 import { Checkbox } from 'react-aria-components';
 import type RAC from 'react-aria-components';
-import { CheckboxGroupStateContext } from 'react-aria-components';
 
 import { StateAttrProps, cn, useClassNames } from '@marigold/system';
 import { HtmlProps } from '@marigold/types';
 
 import { useFieldGroupContext } from '../FieldBase';
 import { CheckboxField } from './CheckBoxField';
+import { useCheckboxGroupContext } from './Context';
 
 // SVG Icon
 const CheckMark = () => (
@@ -19,6 +19,7 @@ const CheckMark = () => (
     />
   </svg>
 );
+
 const IndeterminateMark = () => (
   <svg width="12" height="3" viewBox="0 0 12 3">
     <path
@@ -43,7 +44,7 @@ const Icon = ({ className, checked, indeterminate, ...props }: IconProps) => {
         'flex shrink-0 grow-0 basis-4 items-center justify-center',
         'h-4 w-4 p-px',
         'bg-white',
-        'rounded-[3px] border border-solid border-black ',
+        'rounded-[3px] border border-solid border-black',
         className
       )}
       {...props}
@@ -114,9 +115,13 @@ const _Checkbox = forwardRef<HTMLLabelElement, CheckboxProps>(
     } as const;
 
     const { labelWidth } = useFieldGroupContext();
-    const classNames = useClassNames({ component: 'Checkbox', variant, size });
-
-    const state = useContext(CheckboxGroupStateContext);
+    const group = useCheckboxGroupContext();
+    console.log(group);
+    const classNames = useClassNames({
+      component: 'Checkbox',
+      variant: variant || group?.variant,
+      size: size || group?.size,
+    });
 
     const component = (
       <Checkbox
@@ -141,7 +146,8 @@ const _Checkbox = forwardRef<HTMLLabelElement, CheckboxProps>(
       </Checkbox>
     );
 
-    return !state && labelWidth ? (
+    // Checkbox is not within a group and should indented based on the labelWidth
+    return !group && !!labelWidth ? (
       <CheckboxField labelWidth={labelWidth}>{component}</CheckboxField>
     ) : (
       component

packages/components/src/Checkbox/CheckboxGroup.test.tsx

@@ -14,7 +14,7 @@ const theme: Theme = {
       container: cva([], {
         variants: {
           size: {
-            small: 'py-1',
+            small: 'text-sm',
           },
         },
       }),
@@ -251,9 +251,7 @@ test('works with a <FieldGroup>', () => {
 test('horiziontal orientation style', () => {
   render(
     <CheckboxGroup label="Group of Checkboxes" orientation="horizontal">
-      <Checkbox value="one" data-testid="checkbox">
-        one
-      </Checkbox>
+      <Checkbox value="one">one</Checkbox>
       <Checkbox value="two">two</Checkbox>
       <Checkbox value="three">three</Checkbox>
     </CheckboxGroup>
@@ -266,3 +264,19 @@ test('horiziontal orientation style', () => {
 
   expect(presentation[0].className).toContain('flex-row gap-[1.5ch]');
 });
+
+test('pass down variant and size to <Checkbox>', () => {
+  render(
+    <CheckboxGroup label="Group of Checkboxes" size="small">
+      <Checkbox value="one" data-testid="one">
+        one
+      </Checkbox>
+    </CheckboxGroup>
+  );
+
+  const one = screen
+    .getAllByTestId('one')
+    .filter(el => el.classList.contains('group/checkbox'))[0];
+
+  expect(one).toHaveClass('text-sm');
+});

packages/components/src/Checkbox/Context.tsx

@@ -8,7 +8,6 @@ export interface CheckboxGroupContextProps {
   width?: WidthProp['width'];
 }
 
-export const CheckboxGroupContext = createContext<CheckboxGroupContextProps>(
-  null as any
-);
+export const CheckboxGroupContext =
+  createContext<CheckboxGroupContextProps | null>(null);
 export const useCheckboxGroupContext = () => useContext(CheckboxGroupContext);