feat(Form): allow custom components as children

packages/main/src/components/Form/Form.cy.tsx

@@ -35,21 +35,21 @@ describe('Form', () => {
     cy.viewport(393, 852); // iPhone 14 Pro
     cy.mount(component);
     cy.findByText('item 1:').should('have.css', 'grid-column', '1 / span 12');
-    cy.findByTestId('formInput').parent().should('have.css', 'grid-column', 'auto / span 12');
+    cy.findByTestId('formInput').parent().should('have.css', 'grid-column', '1 / span 12');
   });
 
   it('size M - label should cover 2/12, field 10/12', () => {
     cy.viewport(834, 1194); // iPad Pro
     cy.mount(component);
     cy.findByText('item 1:').should('have.css', 'grid-column', '1 / span 2');
-    cy.findByTestId('formInput').parent().should('have.css', 'grid-column', 'auto / span 10');
+    cy.findByTestId('formInput').parent().should('have.css', 'grid-column', '3 / span 10');
   });
 
   it('size L - label should cover 1/3, field 2/3', () => {
     cy.viewport(1280, 1024);
     cy.mount(component);
     cy.findByText('item 1:').should('have.css', 'grid-column', '1 / span 4');
-    cy.findByTestId('formInput').parent().should('have.css', 'grid-column', 'auto / span 8');
+    cy.findByTestId('formInput').parent().should('have.css', 'grid-column', '5 / span 8');
   });
 
   it('size XL - render two columns with 1/3 and 2/3 each', () => {

packages/main/src/components/Form/Form.mdx

@@ -19,6 +19,122 @@ import * as ComponentStories from './Form.stories';
 
 <ControlsWithNote of={ComponentStories.Default} />
 
+# More Examples
+
+## Form with wrapped FormItems and FormGroups
+
+This feature is supported **since v1.17.0**.
+
+It is possible to nest `FormItem`s and `FormGroup`s in custom components, the only thing you have to take care of is that no other elements (e.g. `div` or `span`) are mounted outside of FilterItems, as this will most likely result in breaking the layout of the `Form`.
+
+<Canvas of={ComponentStories.FormWithCustomComponents} sourceState="none" />
+
+### Code
+
+<details>
+
+<summary>Show Code</summary>
+
+```jsx
+const CustomComponent = ({ children }) => {
+  return <>{children}</>;
+};
+
+const CustomComponent2 = () => {
+  return (
+    <CustomComponent>
+      <FormGroup titleText="Group 1 inside custom component2">
+        <CustomComponent>
+          <FormItem label="FormItem 1 within group">
+            <Input />
+          </FormItem>
+          <FormItem label="FormItem 2 within group">
+            <Input />
+          </FormItem>
+        </CustomComponent>
+      </FormGroup>
+      <FormGroup titleText="Group 2 inside custom component2">
+        <FormItem label="FormItem 1 within group">
+          <Input />
+        </FormItem>
+        <FormItem label="FormItem 2 within group">
+          <Input />
+        </FormItem>
+      </FormGroup>
+    </CustomComponent>
+  );
+};
+
+const FormComponent = (props) => {
+  return (
+    <Form {...props}>
+      <FormItem label="Standalone FormItem">
+        <Input />
+      </FormItem>
+      <FormGroup titleText="Standalone FormGroup">
+        <FormItem label="Standalone FormItem within group">
+          <Input />
+        </FormItem>
+        <FormItem label="Standalone FormItem within group">
+          <Input />
+        </FormItem>
+      </FormGroup>
+      <FormItem label="Standalone FormItem">
+        <Input />
+      </FormItem>
+      <CustomComponent>
+        <FormItem label="FormItem within custom component">
+          <Input />
+        </FormItem>
+      </CustomComponent>
+      <FormGroup titleText="Standalone FormGroup with custom component">
+        <CustomComponent>
+          <FormItem label="FormItem 1 within custom component">
+            <Input />
+          </FormItem>
+          <FormItem label="FormItem 2 within custom component">
+            <Input />
+          </FormItem>
+        </CustomComponent>
+      </FormGroup>
+      <CustomComponent>
+        <FormGroup titleText="FormGroup within custom component">
+          <FormItem label="FormItem 1 within group">
+            <Input />
+          </FormItem>
+          <FormItem label="FormItem 2 within group">
+            <Input />
+          </FormItem>
+        </FormGroup>
+      </CustomComponent>
+      <CustomComponent>
+        <FormGroup titleText="Group 1 inside custom component">
+          <CustomComponent>
+            <FormItem label="FormItem 1 within group">
+              <Input />
+            </FormItem>
+            <FormItem label="FormItem 2 within group">
+              <Input />
+            </FormItem>
+          </CustomComponent>
+        </FormGroup>
+        <FormGroup titleText="Group 2 inside custom component">
+          <FormItem label="FormItem 1 within group">
+            <Input />
+          </FormItem>
+          <FormItem label="FormItem 2 within group">
+            <Input />
+          </FormItem>
+        </FormGroup>
+      </CustomComponent>
+      <CustomComponent2 />
+    </Form>
+  );
+};
+```
+
+</details>
+
 <Markdown>{SubcomponentsSection}</Markdown>
 
 ## Form Group

packages/main/src/components/Form/Form.stories.tsx

@@ -60,13 +60,9 @@ export const Default: Story = {
               <Option>Italy</Option>
             </Select>
           </FormItem>
-          <FormItem
-            style={{ alignSelf: 'start' }}
-            label={<Label style={{ alignSelf: 'start', paddingTop: '0.25rem' }}>Additional Comment</Label>}
-          >
+          <FormItem label={<Label style={{ alignSelf: 'start', paddingTop: '0.25rem' }}>Additional Comment</Label>}>
             <TextArea
               rows={5}
-              style={{ width: '210px', '--_ui5_textarea_margin': 0 }}
               placeholder="The styles of the Label of the TextArea FormItem is set to: alignSelf: 'start', paddingTop: '0.25rem'"
             />
           </FormItem>
@@ -128,3 +124,101 @@ export const Default: Story = {
     );
   }
 };
+
+const CustomComponent = ({ children }) => {
+  return <>{children}</>;
+};
+
+const CustomComponent2 = () => {
+  return (
+    <CustomComponent>
+      <FormGroup titleText="Group 1 inside custom component2">
+        <CustomComponent>
+          <FormItem label="FormItem 1 within group">
+            <Input />
+          </FormItem>
+          <FormItem label="FormItem 2 within group">
+            <Input />
+          </FormItem>
+        </CustomComponent>
+      </FormGroup>
+      <FormGroup titleText="Group 2 inside custom component2">
+        <FormItem label="FormItem 1 within group">
+          <Input />
+        </FormItem>
+        <FormItem label="FormItem 2 within group">
+          <Input />
+        </FormItem>
+      </FormGroup>
+    </CustomComponent>
+  );
+};
+
+export const FormWithCustomComponents: Story = {
+  render: (args) => {
+    return (
+      <Form {...args}>
+        <FormItem label="Standalone FormItem">
+          <Input />
+        </FormItem>
+        <FormGroup titleText="Standalone FormGroup">
+          <FormItem label="Standalone FormItem within group">
+            <Input />
+          </FormItem>
+          <FormItem label="Standalone FormItem within group">
+            <Input />
+          </FormItem>
+        </FormGroup>
+        <FormItem label="Standalone FormItem">
+          <Input />
+        </FormItem>
+        <CustomComponent>
+          <FormItem label="FormItem within custom component">
+            <Input />
+          </FormItem>
+        </CustomComponent>
+        <FormGroup titleText="Standalone FormGroup with custom component">
+          <CustomComponent>
+            <FormItem label="FormItem 1 within custom component">
+              <Input />
+            </FormItem>
+            <FormItem label="FormItem 2 within custom component">
+              <Input />
+            </FormItem>
+          </CustomComponent>
+        </FormGroup>
+        <CustomComponent>
+          <FormGroup titleText="FormGroup within custom component">
+            <FormItem label="FormItem 1 within group">
+              <Input />
+            </FormItem>
+            <FormItem label="FormItem 2 within group">
+              <Input />
+            </FormItem>
+          </FormGroup>
+        </CustomComponent>
+        <CustomComponent>
+          <FormGroup titleText="Group 1 inside custom component">
+            <CustomComponent>
+              <FormItem label="FormItem 1 within group">
+                <Input />
+              </FormItem>
+              <FormItem label="FormItem 2 within group">
+                <Input />
+              </FormItem>
+            </CustomComponent>
+          </FormGroup>
+          <FormGroup titleText="Group 2 inside custom component">
+            <FormItem label="FormItem 1 within group">
+              <Input />
+            </FormItem>
+            <FormItem label="FormItem 2 within group">
+              <Input />
+            </FormItem>
+          </FormGroup>
+        </CustomComponent>
+        <CustomComponent2 />
+      </Form>
+    );
+  }
+};

packages/main/src/components/Form/FormContext.ts

@@ -1,7 +1,14 @@
 import { createContext, useContext } from 'react';
+import type { FormContextType, GroupContextType } from './types.js';
 
-export const FormContext = createContext({ labelSpan: null });
+export const FormContext = createContext<FormContextType>({ labelSpan: null });
 
 export function useFormContext() {
   return useContext(FormContext);
 }
+
+export const GroupContext = createContext<GroupContextType>({});
+
+export function useFormGroupContext() {
+  return useContext(GroupContext);
+}