fix: checkbox adheres labelwidth when inside <FieldGroup> (#3268)

.changeset/rich-apricots-smell.md

@@ -0,0 +1,8 @@
+---
+"@marigold/storybook-config": minor
+"@marigold/docs": minor
+"@marigold/components": minor
+"@marigold/theme-core": minor
+---
+
+feat: checkbox adheres labelwidth when inside `<FieldGroup>`

config/storybook/.storybook/preview.tsx

@@ -68,7 +68,7 @@ export const decorators: any = [
           </>
         );
       }
-      default: {
+      case 'core': {
         return (
           <MarigoldProvider theme={THEME[theme as ThemeNames]}>
             <div className="h-screen p-6">
@@ -77,6 +77,13 @@ export const decorators: any = [
           </MarigoldProvider>
         );
       }
+      default: {
+        return (
+          <MarigoldProvider theme={THEME[theme as ThemeNames]}>
+            <div className="h-screen p-6">{Story()}</div>
+          </MarigoldProvider>
+        );
+      }
     }
   },
 ];

docs/theme/components/Popover.styles.ts

@@ -0,0 +1,12 @@
+import { ThemeComponent, cva } from '@marigold/system';
+
+export const Popover: ThemeComponent<'Popover'> = cva([''], {
+  variants: {
+    variant: {
+      top: ['mb-1'],
+      bottom: ['mt-1'],
+      right: [''],
+      left: [''],
+    },
+  },
+});

docs/theme/components/index.ts

@@ -6,6 +6,7 @@ export * from './Headline.styles';
 export * from './Link.styles';
 export * from './Menu.styles';
 export * from './Message.styles';
+export * from './Popover.styles';
 export * from './Tabs.styles';
 export * from './Table.styles';
 export * from './Text.styles';

packages/components/src/Checkbox/Checkbox.stories.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { Checkbox } from './Checkbox';
+import { FieldGroup } from '../FieldBase/FieldGroup';
 
 const meta = {
   title: 'Components/Checkbox',
@@ -68,3 +69,11 @@ type Story = StoryObj<typeof meta>;
 export const Basic: Story = {
   render: args => <Checkbox size="small" {...args} />,
 };
+
+export const WithFieldGroup: Story = {
+  render: args => (
+    <FieldGroup labelWidth="100px">
+      <Checkbox {...args} />
+    </FieldGroup>
+  ),
+};

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

@@ -4,6 +4,7 @@ import { fireEvent, screen } from '@testing-library/react';
 import { Theme, cva } from '@marigold/system';
 import { Checkbox } from './Checkbox';
 import { setup } from '../test.utils';
+import { FieldGroup } from '../FieldBase';
 
 const theme: Theme = {
   name: 'test',
@@ -28,6 +29,7 @@ const theme: Theme = {
         'data-[disabled]:border-checkbox-base-disabled data-[disabled]:bg-checkbox-base-disabledBackground',
       ]),
     },
+    Field: cva(),
   },
 };
 
@@ -171,3 +173,14 @@ test('forwards ref', () => {
 
   expect(ref.current).toBeInstanceOf(HTMLInputElement);
 });
+
+test('works with a <FieldGroup>', () => {
+  render(
+    <FieldGroup labelWidth="100px">
+      <Checkbox data-testid="checkbox">Check it</Checkbox>
+    </FieldGroup>
+  );
+
+  const checkbox = screen.getByTestId('checkbox');
+  expect(checkbox).toBeInTheDocument();
+});

packages/components/src/Checkbox/Checkbox.tsx

@@ -5,10 +5,18 @@ import { useHover } from '@react-aria/interactions';
 import { useObjectRef } from '@react-aria/utils';
 import { useToggleState } from '@react-stately/toggle';
 import { AriaCheckboxProps } from '@react-types/checkbox';
-import { StateAttrProps, useStateProps } from '@marigold/system';
+
 import { HtmlProps } from '@marigold/types';
+import {
+  useClassNames,
+  cn,
+  StateAttrProps,
+  useStateProps,
+} from '@marigold/system';
+
+import { useFieldGroupContext } from '../FieldBase';
+import { CheckboxField } from './CheckboxField';
 import { useCheckboxGroupContext } from './CheckboxGroup';
-import { useClassNames, cn } from '@marigold/system';
 
 // SVG Icon
 // ---------------
@@ -154,6 +162,8 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
     const { hoverProps, isHovered } = useHover({
       isDisabled: inputProps.disabled,
     });
+    const { labelWidth } = useFieldGroupContext();
+
     const { isFocusVisible, focusProps } = useFocusRing();
     const stateProps = useStateProps({
       hover: isHovered,
@@ -165,7 +175,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
       indeterminate,
     });
 
-    return (
+    const component = (
       <label
         className={cn(
           'group/checkbox relative flex items-center gap-[1ch]',
@@ -190,5 +200,11 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
         )}
       </label>
     );
+
+    return !groupState && labelWidth ? (
+      <CheckboxField labelWidth={labelWidth}>{component}</CheckboxField>
+    ) : (
+      component
+    );
   }
 );

packages/components/src/Checkbox/CheckboxField.tsx

@@ -0,0 +1,18 @@
+import { type ReactNode } from 'react';
+import { createVar, useClassNames } from '@marigold/system';
+
+export interface CheckboxFieldProps {
+  children: ReactNode;
+  labelWidth: string;
+}
+
+export const CheckboxField = ({ children, labelWidth }: CheckboxFieldProps) => {
+  const classNames = useClassNames({ component: 'Field' });
+
+  return (
+    <div className={classNames}>
+      <div className="w-[--labelWidth]" style={createVar({ labelWidth })} />
+      {children}
+    </div>
+  );
+};

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

@@ -5,6 +5,7 @@ import { Theme, cva } from '@marigold/system';
 import { Checkbox } from './Checkbox';
 import { CheckboxGroup } from './CheckboxGroup';
 import { setup } from '../test.utils';
+import { FieldGroup } from '../FieldBase';
 
 const theme: Theme = {
   name: 'checkbox group testing',
@@ -194,3 +195,20 @@ test('accepts error message', () => {
 
   expect(screen.getByText('My Error')).toBeInTheDocument();
 });
+
+test('works with a <FieldGroup>', () => {
+  render(
+    <FieldGroup labelWidth="100px">
+      <CheckboxGroup label="Group of Checkboxes">
+        <Checkbox value="one">one</Checkbox>
+        <Checkbox value="two">two</Checkbox>
+        <Checkbox value="three">three</Checkbox>
+      </CheckboxGroup>
+    </FieldGroup>
+  );
+
+  expect(screen.getByText('Group of Checkboxes')).toBeInTheDocument();
+  expect(screen.getByText('one')).toBeInTheDocument();
+  expect(screen.getByText('two')).toBeInTheDocument();
+  expect(screen.getByText('three')).toBeInTheDocument();
+});

themes/theme-core/src/components/Checkbox.styles.ts

@@ -8,7 +8,7 @@ export const Checkbox: ThemeComponent<'Checkbox'> = {
       },
     },
   }),
-  label: cva('group-disabled/checkbox:text-text-disabled leading-[1.125]'),
+  label: cva('group-disabled/checkbox:text-text-disabled leading-none'),
   checkbox: cva([
     'border-border-light rounded-[2] bg-white p-0.5',
     'group-hover/checkbox:border-border-hover',