Merge branch 'main' into fix-radio-focus

marigold-ui · Dec 15, 2022 · 1bcfcf8 · 1bcfcf8
2 parents b346454 + 1bfe10c
commit 1bcfcf8
Show file tree

Hide file tree

Showing 20 changed files with 237 additions and 254 deletions.
diff --git a/.changeset/real-papayas-leave.md b/.changeset/real-papayas-leave.md
@@ -0,0 +1,8 @@
+---
+"@marigold/docs": minor
+"@marigold/components": minor
+"@marigold/theme-b2b": minor
+"@marigold/theme-unicorn": minor
+---
+
+feat: add <Fieldbase> to <RadioGroup> and <CheckboxGroup> to support errorMessage and helptext
diff --git a/docs/src/demos/components/Checkbox/checkbox-group.demo.tsx b/docs/src/demos/components/Checkbox/checkbox-group.demo.tsx
@@ -5,7 +5,11 @@ export const CheckboxGroupoDemo = () => {
   const [selected, setSelected] = useState<string[]>([]);
   return (
     <>
-      <CheckboxGroup label="Choose your toppings:" onChange={setSelected}>
+      <CheckboxGroup
+        label="Choose your toppings:"
+        onChange={setSelected}
+        description="Just click on the options"
+      >
         <Checkbox value="ham">🐖 Ham</Checkbox>
         <Checkbox value="beef" disabled>
           🐄 Beef (out of stock)

diff --git a/docs/src/demos/components/Radio/index.ts b/docs/src/demos/components/Radio/index.ts
@@ -1,3 +1,4 @@
 export * from './radio.demo';
 export * from './radio-disabled.demo';
 export * from './radio-required.demo';
+export * from './radio-error.demo';
diff --git a/docs/src/demos/components/Radio/radio-error.demo.tsx b/docs/src/demos/components/Radio/radio-error.demo.tsx
@@ -0,0 +1,16 @@
+import { Radio } from '@marigold/components';
+
+export const ErrorRadio = () => (
+  <Radio.Group
+    label="Radio Group"
+    error
+    errorMessage="Oh no! An error occured."
+  >
+    <Radio value="1">Option 1</Radio>
+    <Radio value="2">Option 2</Radio>
+    <Radio value="3" disabled>
+      Option 3
+    </Radio>
+    <Radio value="4">Option 4</Radio>
+  </Radio.Group>
+);
diff --git a/docs/src/pages/components/checkbox.mdx b/docs/src/pages/components/checkbox.mdx
@@ -150,6 +150,18 @@ import { Checkbox, CheckboxGroup } from '@marigold/components';
       type: '(value: string[]) => void',
       description: 'Handler that is called when the checkbox value changes.',
       default: 'none',
+    },
+    {
+      property: 'description',
+      type: 'string',
+      description: 'Sets a helptext for the group.',
+      default: 'none',
+    },
+    {
+      property: 'errorMessage',
+      type: 'string',
+      description: 'Sets a error message for the group if a error occured.',
+      default: 'none',
     }
 
 ]}
@@ -175,7 +187,7 @@ Use indeterminate state when it represents both selected and not selected values
 
 ### Group checkboxes
 
-In this example the `<Checkbox>` are wrapped within the `<CheckboxGroup>`. You see that the `onChange` property is also set.
+In this example the `<Checkbox>` are wrapped within the `<CheckboxGroup>`. You see that the `onChange` property is also set. It has also a helptext within which you can set with the `description` property for the `<CheckboxGroup>`.
 
 ```tsx preview file=components/Checkbox/checkbox-group.demo.tsx
 

diff --git a/docs/src/pages/components/radio.mdx b/docs/src/pages/components/radio.mdx
@@ -117,6 +117,18 @@ import { Radio } from '@marigold/components';
       description: 'Set the radio group disabled.',
       default: 'false',
     },
+    {
+      property: 'description',
+      type: 'string',
+      description: 'Set the radio group helptext.',
+      default: 'none',
+    },
+    {
+      property: 'errorMessage',
+      type: 'string',
+      description: 'Set the radio group error message if an error occures.',
+      default: 'none',
+    },
   ]}
 />
 
@@ -138,10 +150,18 @@ Here you can see a complete disabled `<Radio.Group>`. You can also just disable
 
 ```
 
-### Required radio with horizontal orientation
+### Required Radio with horizontal orientation
 
 In this example the `<Radio.Group>` is required and the `orientation` is set to `horizontal`. With these props you can determine the direction of the `<Radio>` options.
 
 ```tsx preview file=components/Radio/radio-required.demo.tsx
 
 ```
+
+### Error Radio
+
+In this example you can see how an `errorMessage` would look on a `<RadioGroup>`.
+
+```tsx preview file=components/Radio/radio-error.demo.tsx
+
+```
diff --git a/packages/components/src/Checkbox/Checkbox.tsx b/packages/components/src/Checkbox/Checkbox.tsx
@@ -173,8 +173,8 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
     const styles = useComponentStyles(
       'Checkbox',
       {
-        variant: groupState?.variant || variant,
-        size: groupState?.size || size,
+        variant,
+        size,
       },
       { parts: ['container', 'label', 'checkbox'] }
     );

diff --git a/packages/components/src/Checkbox/CheckboxGroup.stories.tsx b/packages/components/src/Checkbox/CheckboxGroup.stories.tsx
@@ -49,7 +49,37 @@ export const Basic: ComponentStory<typeof CheckboxGroup> = args => {
   const [selected, setSelected] = React.useState<string[]>([]);
   return (
     <>
-      <CheckboxGroup {...args} onChange={setSelected}>
+      <CheckboxGroup
+        {...args}
+        onChange={setSelected}
+        description="Choose your Options"
+        errorMessage="Oh no"
+      >
+        <Checkbox value="ham">Ham</Checkbox>
+        <Checkbox value="salami" disabled>
+          Salami
+        </Checkbox>
+        <Checkbox value="cheese">Cheese</Checkbox>
+        <Checkbox value="tomato">Tomate</Checkbox>
+        <Checkbox value="cucumber">Cucumber</Checkbox>
+        <Checkbox value="onions">Onions</Checkbox>
+      </CheckboxGroup>
+      <hr />
+      <pre>Selected values: {selected.join(', ')}</pre>
+    </>
+  );
+};
+
+export const Error: ComponentStory<typeof CheckboxGroup> = args => {
+  const [selected, setSelected] = React.useState<string[]>([]);
+  return (
+    <>
+      <CheckboxGroup
+        onChange={setSelected}
+        error
+        errorMessage="This is an error"
+        {...args}
+      >
         <Checkbox value="ham">Ham</Checkbox>
         <Checkbox value="salami" disabled>
           Salami

diff --git a/packages/components/src/Checkbox/CheckboxGroup.test.tsx b/packages/components/src/Checkbox/CheckboxGroup.test.tsx
@@ -97,73 +97,6 @@ test('label is optional (can use aria-label instead)', () => {
   expect(screen.getByText('three')).toBeInTheDocument();
 });
 
-test('allows styling container via theme', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <CheckboxGroup label="Group of Checkboxes">
-        <Checkbox value="one" data-testid="one">
-          one
-        </Checkbox>
-        <Checkbox value="two" data-testid="two">
-          two
-        </Checkbox>
-      </CheckboxGroup>
-    </ThemeProvider>
-  );
-
-  const container = screen.getByRole('group');
-  expect(container).toHaveStyle(`background: ${theme.colors.gray}`);
-
-  const group = screen.getByRole('presentation');
-  expect(group).toHaveStyle(`font-style: italic`);
-});
-
-test('supports styling via variant and size', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <CheckboxGroup label="Group of Checkboxes" variant="teal" size="large">
-        <Checkbox value="one" data-testid="one">
-          one
-        </Checkbox>
-        <Checkbox value="two" data-testid="two">
-          two
-        </Checkbox>
-      </CheckboxGroup>
-    </ThemeProvider>
-  );
-
-  const container = screen.getByRole('group');
-  expect(container).toHaveStyle(`background: ${theme.colors.teal}`);
-
-  const group = screen.getByRole('presentation');
-  expect(group).toHaveStyle(`font-size: ${theme.fontSizes['large-1']}px`);
-});
-
-test('passed down variant and size to checkboxes', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <CheckboxGroup label="Group of Checkboxes" variant="teal" size="large">
-        <Checkbox value="one" data-testid="one">
-          one
-        </Checkbox>
-        <Checkbox value="two" data-testid="two">
-          two
-        </Checkbox>
-      </CheckboxGroup>
-    </ThemeProvider>
-  );
-
-  expect(screen.getByText('one')).toHaveStyle(`color: ${theme.colors.teal}`);
-  expect(screen.getByText('one')).toHaveStyle(
-    `font-size: ${theme.fontSizes['small-1']}px`
-  );
-
-  expect(screen.getByText('two')).toHaveStyle(`color: ${theme.colors.teal}`);
-  expect(screen.getByText('two')).toHaveStyle(
-    `font-size: ${theme.fontSizes['small-1']}px`
-  );
-});
-
 test('passes down "disabled" to checkboxes', () => {
   render(
     <CheckboxGroup label="Group of Checkboxes" disabled>
@@ -260,3 +193,39 @@ test('controlled', () => {
   fireEvent.click(screen.getByTestId('three'));
   expect(onChange).toHaveBeenCalledWith(['one', 'two']);
 });
+
+test('accepts description', () => {
+  render(
+    <CheckboxGroup label="Group of Checkboxes" description="My description">
+      <Checkbox value="one" data-testid="one">
+        one
+      </Checkbox>
+      <Checkbox value="two" data-testid="two">
+        two
+      </Checkbox>
+      <Checkbox value="three" data-testid="three">
+        three
+      </Checkbox>
+    </CheckboxGroup>
+  );
+
+  expect(screen.getByText('My description')).toBeInTheDocument();
+});
+
+test('accepts error message', () => {
+  render(
+    <CheckboxGroup label="Group of Checkboxes" error errorMessage="My Error">
+      <Checkbox value="one" data-testid="one">
+        one
+      </Checkbox>
+      <Checkbox value="two" data-testid="two">
+        two
+      </Checkbox>
+      <Checkbox value="three" data-testid="three">
+        three
+      </Checkbox>
+    </CheckboxGroup>
+  );
+
+  expect(screen.getByText('My Error')).toBeInTheDocument();
+});
diff --git a/packages/components/src/Checkbox/CheckboxGroup.tsx b/packages/components/src/Checkbox/CheckboxGroup.tsx
@@ -6,21 +6,15 @@ import {
 } from '@react-stately/checkbox';
 import { AriaCheckboxGroupProps } from '@react-types/checkbox';
 
-import {
-  Box,
-  ThemeExtensionsWithParts,
-  useComponentStyles,
-} from '@marigold/system';
+import { Box, useStateProps } from '@marigold/system';
 import { ComponentProps } from '@marigold/types';
 
-import { Label } from '../Label';
+import { FieldBase } from '../FieldBase';
 
 // Context
 // ---------------
 export interface CheckboxGroupContextProps extends CheckboxGroupState {
   error?: boolean;
-  variant?: string;
-  size?: string;
 }
 
 /**
@@ -32,11 +26,6 @@ export const CheckboxGroupContext = createContext<CheckboxGroupContextProps>(
 );
 export const useCheckboxGroupContext = () => useContext(CheckboxGroupContext);
 
-// Theme Extension
-// ---------------
-export interface CheckboxGroupThemeExtension
-  extends ThemeExtensionsWithParts<'CheckboxGroup', ['container', 'group']> {}
-
 // Props
 // ---------------
 interface CheckboxGroupProps
@@ -59,8 +48,6 @@ interface CheckboxGroupProps
 // ---------------
 export const CheckboxGroup = ({
   children,
-  variant,
-  size,
   required,
   disabled,
   readOnly,
@@ -76,36 +63,41 @@ export const CheckboxGroup = ({
   } as const;
 
   const state = useCheckboxGroupState(props);
-  const { groupProps, labelProps } = useCheckboxGroup(props, state);
+  const { groupProps, labelProps, descriptionProps, errorMessageProps } =
+    useCheckboxGroup(props, state);
 
-  const styles = useComponentStyles(
-    'CheckboxGroup',
-    { variant, size },
-    { parts: ['container', 'group'] }
-  );
+  const stateProps = useStateProps({
+    disabled,
+    readOnly,
+    error,
+  });
 
   return (
-    <Box {...groupProps} css={styles.container}>
-      {props.label && (
-        <Label as="span" required={required} {...labelProps}>
-          {props.label}
-        </Label>
-      )}
+    <FieldBase
+      label={props.label}
+      labelProps={{ as: 'span', ...labelProps }}
+      description={props.description}
+      descriptionProps={descriptionProps}
+      error={error}
+      errorMessage={props.errorMessage}
+      errorMessageProps={errorMessageProps}
+      disabled={disabled}
+      stateProps={stateProps}
+      required={required}
+      {...groupProps}
+    >
       <Box
         role="presentation"
         __baseCSS={{
           display: 'flex',
           flexDirection: 'column',
           alignItems: 'start',
         }}
-        css={styles.group}
       >
-        <CheckboxGroupContext.Provider
-          value={{ variant, size, error, ...state }}
-        >
+        <CheckboxGroupContext.Provider value={{ error, ...state }}>
           {children}
         </CheckboxGroupContext.Provider>
       </Box>
-    </Box>
+    </FieldBase>
   );
 };
diff --git a/packages/components/src/Radio/Radio.stories.tsx b/packages/components/src/Radio/Radio.stories.tsx
@@ -51,7 +51,18 @@ export default {
 } as Meta;
 
 export const Basic: ComponentStory<typeof Radio.Group> = args => (
-  <Radio.Group {...args}>
+  <Radio.Group {...args} description="Hier steht ein HelpText">
+    <Radio value="1">Option 1</Radio>
+    <Radio value="2">Option 2</Radio>
+    <Radio value="3" disabled>
+      Option 3
+    </Radio>
+    <Radio value="4">Option 4</Radio>
+  </Radio.Group>
+);
+
+export const Error: ComponentStory<typeof Radio.Group> = args => (
+  <Radio.Group errorMessage="Das ist ein Error" error {...args}>
     <Radio value="1">Option 1</Radio>
     <Radio value="2">Option 2</Radio>
     <Radio value="3" disabled>