renameing to fieldgroup

docs/src/demos/components/TextField/textfield-group.demo.tsx

@@ -1,12 +1,12 @@
 import { useState } from 'react';
-import { Stack, TextField, FieldBaseGroup, Radio } from '@marigold/components';
+import { Stack, TextField, FieldGroup, Radio } from '@marigold/components';
 
 export const GroupTextField = () => {
   const [value, setValue] = useState<string>('');
   const error = value.length > 0 && !/^\d+$/.test(value);
 
   return (
-    <FieldBaseGroup labelWidth="20%">
+    <FieldGroup labelWidth="20%">
       <Stack space="small">
         <TextField label="Name" />
         <TextField
@@ -26,6 +26,6 @@ export const GroupTextField = () => {
           <Radio value="4">Four</Radio>
         </Radio.Group>
       </Stack>
-    </FieldBaseGroup>
+    </FieldGroup>
   );
 };

docs/src/pages/components/text-field.mdx

@@ -12,7 +12,7 @@ The `<TextField>` is a form component which allows user to enter text with a key
 
 It has many properties that it brings with it. You can set label for labeling the `<TextField>` itself, a `description` which behaves as help text. It is also possible to add error messages by adding the `error` and `errorMessage` prop. Another often used property is the `required` prop. You can also write all other HTML input properties down.
 
-The `<FieldBaseGroup>` is a component to layout the label and the fieldbase itself. On that you can use `labelWidth` which is a string type to set the width of the label. Because the label is set to the left side in the core theme, it has only an impact on that.
+The `<FieldGroup>` is a component to layout the label and the fieldbase itself. On that you can use `labelWidth` which is a string type to set the width of the label. Because the label is set to the left side in the core theme, it has only an impact on that.
 
 <Preview>
   <TextField label="Try me" description="You should really try this!" />
@@ -160,9 +160,9 @@ In this example you can see different types of inputs, like email, date or telep
 
 ```
 
-### Using with FieldBaseGroup
+### Using with FieldGroup
 
-This example shows how to use the `<FieldBaseGroup>` together with some form components like the `<TextField>` and `<Radio>`. It is build for the Core and has only impact of that.
+This example shows how to use the `<FieldGroup>` together with some form components like the `<TextField>` and `<Radio>`. It is build for the Core and has only impact of that.
 
 ```tsx preview file=components/TextField/textfield-group.demo.tsx
 

packages/components/src/FieldBase/FieldBase.stories.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import type { Meta, ComponentStory } from '@storybook/react';
 import { FieldBase } from './FieldBase';
 import { Select } from '../Select';
-import { FieldBaseGroup } from './FieldBaseGroup';
+import { FieldGroup } from './FieldGroup';
 import { TextField } from '../TextField';
 import { RadioGroup } from '../Radio/RadioGroup';
 import { Radio } from '../Radio';
@@ -62,7 +62,7 @@ export const Basic: ComponentStory<typeof FieldBase> = args => (
 );
 
 export const Complex: ComponentStory<typeof FieldBase> = args => (
-  <FieldBaseGroup labelWidth="30%">
+  <FieldGroup labelWidth="30%">
     <FieldBase {...args} label="This is my Label">
       <input type="text" />
     </FieldBase>
@@ -83,5 +83,5 @@ export const Complex: ComponentStory<typeof FieldBase> = args => (
       <Checkbox value="1">One</Checkbox>
       <Checkbox value="2">Two</Checkbox>
     </CheckboxGroup>
-  </FieldBaseGroup>
+  </FieldGroup>
 );

packages/components/src/FieldBase/FieldBase.tsx

@@ -8,7 +8,7 @@ import {
 
 import { Label, LabelProps } from '../Label';
 import { HelpText } from '../HelpText';
-import { useFieldBaseGroupContext } from './FieldBaseGroup';
+import { useFieldGroupContext } from './FieldGroup';
 export interface FieldBaseProps {
   children?: ReactNode;
   variant?: string;
@@ -52,7 +52,7 @@ export const FieldBase = ({
 
   const style = useComponentStyles('Field', { variant, size });
 
-  const { labelWidth } = useFieldBaseGroupContext();
+  const { labelWidth } = useFieldGroupContext();
 
   return (
     <Box

packages/components/src/FieldBase/FieldBaseGroup.test.tsx → packages/components/src/FieldBase/FieldGroup.test.tsx

@@ -2,55 +2,55 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 
 import { FieldBase } from './FieldBase';
-import { FieldBaseGroup } from './FieldBaseGroup';
+import { FieldGroup } from './FieldGroup';
 
-test('renders FieldBaseGroup', () => {
+test('renders FieldGroup', () => {
   render(
-    <FieldBaseGroup>
+    <FieldGroup>
       <FieldBase label="Label" description="Description">
         <input type="text" />
       </FieldBase>
-    </FieldBaseGroup>
+    </FieldGroup>
   );
 
   // eslint-disable-next-line testing-library/no-node-access
   const group = screen.getByText('Label').parentElement;
   expect(group).toBeInTheDocument();
 });
 
-test('renders FieldBaseGroup by default without label width', () => {
+test('renders FieldGroup by default without label width', () => {
   render(
-    <FieldBaseGroup>
+    <FieldGroup>
       <FieldBase label="Label" description="Description">
         <input type="text" />
       </FieldBase>
-    </FieldBaseGroup>
+    </FieldGroup>
   );
 
   const label = screen.getByText('Label');
   expect(label).not.toHaveAttribute('labelWidth');
 });
 
-test('renders FieldBaseGroup  with label width', () => {
+test('renders FieldGroup  with label width', () => {
   render(
-    <FieldBaseGroup labelWidth="20px">
+    <FieldGroup labelWidth="20px">
       <FieldBase label="Label" description="Description">
         <input type="text" />
       </FieldBase>
-    </FieldBaseGroup>
+    </FieldGroup>
   );
 
   const label = screen.getByText('Label');
   expect(label).toHaveStyle('width: 20px');
 });
 
-test('renders FieldBaseGroups children', () => {
+test('renders FieldGroups children', () => {
   render(
-    <FieldBaseGroup labelWidth="20px">
+    <FieldGroup labelWidth="20px">
       <FieldBase label="Label" description="Description">
         <input type="text" />
       </FieldBase>
-    </FieldBaseGroup>
+    </FieldGroup>
   );
 
   expect(screen.getByText('Label')).toBeInTheDocument();

packages/components/src/FieldBase/FieldGroup.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { createContext, ReactNode, useContext } from 'react';
+
+export interface FieldGroupContextProps {
+  labelWidth?: string;
+}
+
+export const FieldGroupContext = createContext<FieldGroupContextProps>({});
+export const useFieldGroupContext = () => useContext(FieldGroupContext);
+
+export interface FieldGroupProps {
+  labelWidth?: string;
+  children: ReactNode;
+}
+export const FieldGroup = ({ labelWidth, children }: FieldGroupProps) => {
+  return (
+    <FieldGroupContext.Provider value={{ labelWidth }}>
+      {children}
+    </FieldGroupContext.Provider>
+  );
+};

packages/components/src/FieldBase/index.ts

@@ -1,2 +1,2 @@
 export * from './FieldBase';
-export * from './FieldBaseGroup';
+export * from './FieldGroup';