fix: make children of FlexBox, Grid, ResponsiveGridLayout and Text optional (#3851)

Author: Lukas742

packages/main/src/components/FlexBox/index.tsx

@@ -42,7 +42,7 @@ export interface FlexBoxPropTypes extends CommonProps {
   /**
    * Content of the `FlexBox`.
    */
-  children: ReactNode | ReactNode[];
+  children?: ReactNode | ReactNode[];
   /**
    * Sets the components outer HTML tag.
    *

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

@@ -20,8 +20,9 @@ import { styles } from './Form.jss';
 
 export interface FormPropTypes extends CommonProps {
   /**
-   * Components that are placed into Form. Please use only `FormGroup` and `FormItem` in order to preserve the
-   * intended design.
+   * Components that are placed into Form.
+   *
+   * __Note:__ Although this prop accepts all HTML Elements, it is strongly recommended that you only use `FormGroup` or `FormItem` in order to preserve the intended design.
    */
   children: ReactNode | ReactNode[];
   /**

packages/main/src/components/FormGroup/index.tsx

@@ -8,7 +8,9 @@ export interface FormGroupPropTypes {
    */
   titleText: string;
   /**
-   * Contents of the FormGroup. Please use only `FormItem` to keep the intended design.
+   * Content of the FormGroup.
+   *
+   * __Note:__ Although this prop accepts all HTML Elements, it is strongly recommended that you only use `FormItem` in order to preserve the intended design.
    */
   children: ReactNode | ReactNode[];
 }

packages/main/src/components/Grid/index.tsx

@@ -39,7 +39,7 @@ export interface GridPropTypes extends CommonProps {
   /**
    * Components that are placed into Grid layout.
    */
-  children: ReactNode | ReactNode[];
+  children?: ReactNode | ReactNode[];
 }
 
 const INDENT_PATTERN =

packages/main/src/components/MessageBox/MessageBox.stories.mdx

@@ -174,7 +174,7 @@ const MessageBoxComponent = () => {
   <Story
     name="With Custom Action"
     args={{
-      actions: [MessageBoxActions.OK, 'Custom Action', MessageBoxActions.Cancel, <Button>Custom Button</Button>]
+      actions: [MessageBoxActions.OK, 'Custom Action', MessageBoxActions.Cancel, <Button key="0">Custom Button</Button>]
     }}
   >
     {(args) => {

packages/main/src/components/ResponsiveGridLayout/index.tsx

@@ -58,7 +58,7 @@ export interface ResponsiveGridLayoutPropTypes extends CommonProps {
    * Example: If you want one child to span across 4 columns, you can add this element style to the child element:
    * `style={{ gridColumn: 'span 4' }}`
    */
-  children: ReactNode | ReactNode[];
+  children?: ReactNode | ReactNode[];
 }
 
 const useStyles = createUseStyles(ResponsiveGridLayoutStyles, { name: 'ResponsiveGridLayout' });

packages/main/src/components/Text/index.tsx

@@ -8,7 +8,7 @@ export interface TextPropTypes extends CommonProps {
   /**
    * Pass the text as direct child of Text
    */
-  children: string | JSX.Element | ReactNode;
+  children?: ReactNode;
   /**
    * Defines how white-space inside <code>Text</code> is handled. If set to true, sequences of white space are preserved.
    */