From 8224223918a19ccc57fb4a640c04c0f1a760c520 Mon Sep 17 00:00:00 2001
From: Mario Subotic <mario.subotic@gmail.com>
Date: Tue, 27 Apr 2021 14:10:48 +0800
Subject: [PATCH 1/3] feat(dynamic-form): adds an optional wrapping element for
 the form item

you can now wrap an element with the its label and decsription in a containing element to help with
the structure and styling of the form

BREAKING CHANGE: additonalProps which used to me mapped to the form element are now mapped to the
wrapping element to keep the same API as the sections. To map additional props to the form element
use the formElementAdditionalProps attribute instead.
---
 lib/src/hooks/useDynamicForm.tsx | 40 +++++++++++++++++++++++---------
 lib/src/index.json               | 16 ++++++-------
 2 files changed, 37 insertions(+), 19 deletions(-)

diff --git a/lib/src/hooks/useDynamicForm.tsx b/lib/src/hooks/useDynamicForm.tsx
index acbf0e677..fa28c7818 100644
--- a/lib/src/hooks/useDynamicForm.tsx
+++ b/lib/src/hooks/useDynamicForm.tsx
@@ -27,6 +27,10 @@ export interface DynamicFormItem {
     valueType?: "string" | "number";
     rulerKey?: string;
     condition?: DynamicFormInternalStateValue;
+    formElementAdditionalProps?: {
+        [k: string]: any;
+    };
+    wrappingElement?: "div" | "section" | "none";
     additionalProps?: {
         [k: string]: any;
     };
@@ -343,7 +347,7 @@ const DynamicFormItemComponent: React.FC<{
         onChange: props.onChange,
     };
 
-    const { additionalProps = {} }: DynamicFormItem = props.item;
+    const { formElementAdditionalProps = {} }: DynamicFormItem = props.item;
 
     let formItem: ReactNode;
 
@@ -355,18 +359,22 @@ const DynamicFormItemComponent: React.FC<{
 
     switch (controlType) {
         case "Textarea": {
+            const { value = "", ...rest } = commonProps;
+
             formItem = (
                 <>
-                    <Textarea {...commonProps} indicator={indicator} {...additionalProps} />
+                    <Textarea {...rest} indicator={indicator} {...formElementAdditionalProps} />
                     {descriptionItem}
                 </>
             );
             break;
         }
         case "Text": {
+            const { value = "", ...rest } = commonProps;
+
             formItem = (
                 <>
-                    <Textbox {...commonProps} indicator={indicator} type={props.item.valueType || "text"} {...additionalProps} />
+                    <Textbox {...rest} indicator={indicator} type={props.item.valueType || "text"} {...formElementAdditionalProps} />
                     {descriptionItem}
                 </>
             );
@@ -380,7 +388,7 @@ const DynamicFormItemComponent: React.FC<{
                 <>
                     {label && <label>{label}</label>}
                     <FeedbackIndicator type={indicator?.type} message={indicator?.message}>
-                        <RadioGroup {...{ name, onChange, value }} {...additionalProps}>
+                        <RadioGroup {...{ name, onChange, value }} {...formElementAdditionalProps}>
                             {props.item?.options?.map((option: DynamicFormOption, i) => (
                                 <RadioButton key={i} value={option?.value} {...(option?.additionalProps || {})}>
                                     {option?.label}
@@ -401,7 +409,7 @@ const DynamicFormItemComponent: React.FC<{
             formItem = (
                 <>
                     {label && <label>{label}</label>}
-                    <Dropdown {...{ name, onChange, placeholder, value }} indicator={indicator} multiple={props.item?.multi} {...additionalProps}>
+                    <Dropdown {...{ name, onChange, placeholder, value }} indicator={indicator} multiple={props.item?.multi} {...formElementAdditionalProps}>
                         {props.item?.options?.map((option: DynamicFormOption, i) => (
                             <option key={i} value={option?.value} {...(option?.additionalProps || {})}>
                                 {option?.label}
@@ -417,7 +425,7 @@ const DynamicFormItemComponent: React.FC<{
         case "Checkbox": {
             const { name, onChange, value } = commonProps;
             formItem = (
-                <Checkbox {...{ name, onChange }} indicator={indicator} checked={!!value} {...additionalProps}>
+                <Checkbox {...{ name, onChange }} indicator={indicator} checked={!!value} {...formElementAdditionalProps}>
                     {commonProps.label}
                     {descriptionItem}
                 </Checkbox>
@@ -431,7 +439,7 @@ const DynamicFormItemComponent: React.FC<{
                 <>
                     {label && <label>{label}</label>}
                     <FeedbackIndicator type={indicator?.type} message={indicator?.message}>
-                        <Datepicker {...{ value, onChange, name }} min={props.item?.min} max={props.item?.max} {...additionalProps} />
+                        <Datepicker {...{ value, onChange, name }} min={props.item?.min} max={props.item?.max} {...formElementAdditionalProps} />
                     </FeedbackIndicator>
                     {descriptionItem}
                 </>
@@ -440,7 +448,7 @@ const DynamicFormItemComponent: React.FC<{
         }
 
         case "Stepper": {
-            const { label, value } = commonProps;
+            const { label, value = 0 } = commonProps;
 
             formItem = (
                 <>
@@ -451,7 +459,7 @@ const DynamicFormItemComponent: React.FC<{
                         max={props.item?.max || 100}
                         onIncrease={() => props.onChange(value + 1)}
                         onDecrease={() => props.onChange(value - 1)}
-                        {...additionalProps}
+                        {...formElementAdditionalProps}
                     />
                     {descriptionItem}
                 </>
@@ -466,7 +474,7 @@ const DynamicFormItemComponent: React.FC<{
                 <>
                     {label && <label>{label}</label>}
                     <FeedbackIndicator type={indicator?.type} message={indicator?.message}>
-                        <div className="d-flex flex-wrap" role="group" {...additionalProps}>
+                        <div className="d-flex flex-wrap" role="group" {...formElementAdditionalProps}>
                             {props.item?.options?.map((option: DynamicFormOption, i) => {
                                 const active: boolean = !!(value as string[])?.find((e: string) => option.value === e);
                                 return (
@@ -513,5 +521,15 @@ const DynamicFormItemComponent: React.FC<{
             break;
     }
 
-    return <>{formItem}</>;
+    const { wrappingElement = "none", additionalProps = {} } = props.item;
+
+    switch (wrappingElement) {
+        case "div":
+            return <div {...additionalProps}>{formItem}</div>;
+        case "section":
+            return <section {...additionalProps}>{formItem}</section>;
+
+        default:
+            return <>{formItem}</>;
+    }
 };
diff --git a/lib/src/index.json b/lib/src/index.json
index 9fbd641a6..256567e48 100644
--- a/lib/src/index.json
+++ b/lib/src/index.json
@@ -12,7 +12,6 @@
         "Datepicker": "./src/Datepicker/index.ts",
         "Dropdown": "./src/Dropdown/index.ts",
         "FeedbackIndicator": "./src/FeedbackIndicator/index.ts",
-        "hooks": "./src/hooks/index.ts",
         "Image": "./src/Image/index.ts",
         "ImageCropper": "./src/ImageCropper/index.ts",
         "Loader": "./src/Loader/index.ts",
@@ -23,19 +22,20 @@
         "RadioButton": "./src/RadioButton/index.ts",
         "Rating": "./src/Rating/index.ts",
         "Slider": "./src/Slider/index.ts",
-        "Stepper": "./src/Stepper/index.ts",
         "StepTracker": "./src/StepTracker/index.ts",
+        "Stepper": "./src/Stepper/index.ts",
         "Table": "./src/Table/index.ts",
         "Tabs": "./src/Tabs/index.ts",
+        "TextLabel": "./src/TextLabel/index.ts",
         "Textarea": "./src/Textarea/index.ts",
         "Textbox": "./src/Textbox/index.ts",
-        "TextLabel": "./src/TextLabel/index.ts",
         "Timeline": "./src/Timeline/index.ts",
         "Timer": "./src/Timer/index.ts",
         "Toggle": "./src/Toggle/index.ts",
         "ToggleSelector": "./src/ToggleSelector/index.ts",
         "Tooltip": "./src/Tooltip/index.ts",
-        "Video": "./src/Video/index.ts"
+        "Video": "./src/Video/index.ts",
+        "hooks": "./src/hooks/index.ts"
     },
     "indexes": [
         "./src/Accordion/index.ts",
@@ -50,7 +50,6 @@
         "./src/Datepicker/index.ts",
         "./src/Dropdown/index.ts",
         "./src/FeedbackIndicator/index.ts",
-        "./src/hooks/index.ts",
         "./src/Image/index.ts",
         "./src/ImageCropper/index.ts",
         "./src/Loader/index.ts",
@@ -61,18 +60,19 @@
         "./src/RadioButton/index.ts",
         "./src/Rating/index.ts",
         "./src/Slider/index.ts",
-        "./src/Stepper/index.ts",
         "./src/StepTracker/index.ts",
+        "./src/Stepper/index.ts",
         "./src/Table/index.ts",
         "./src/Tabs/index.ts",
+        "./src/TextLabel/index.ts",
         "./src/Textarea/index.ts",
         "./src/Textbox/index.ts",
-        "./src/TextLabel/index.ts",
         "./src/Timeline/index.ts",
         "./src/Timer/index.ts",
         "./src/Toggle/index.ts",
         "./src/ToggleSelector/index.ts",
         "./src/Tooltip/index.ts",
-        "./src/Video/index.ts"
+        "./src/Video/index.ts",
+        "./src/hooks/index.ts"
     ]
 }

From 21c8bac30dcfd2d45874a993596ec5c0c1b66050 Mon Sep 17 00:00:00 2001
From: Mario Subotic <mario.subotic@gmail.com>
Date: Tue, 27 Apr 2021 14:12:33 +0800
Subject: [PATCH 2/3] docs(dynamic-forms): update docs to include a full
 example

include an example of a responsive form containing every possible element including labels,
descriptions and error messages
---
 docs/src/pages/docs/checkbox.tsx        |   4 +-
 docs/src/pages/docs/datepicker.tsx      |   2 +-
 docs/src/pages/docs/dynamic-forms.tsx   | 290 +++++++++++++++++++++++-
 docs/src/pages/docs/image.tsx           |   8 +-
 docs/src/pages/docs/slider.tsx          |   4 +-
 docs/src/pages/docs/stepper.tsx         |   2 +-
 docs/src/pages/docs/textarea.tsx        |   2 +-
 docs/src/pages/docs/textbox.tsx         |   2 +-
 docs/src/pages/docs/toggle-selector.tsx |   2 +-
 9 files changed, 301 insertions(+), 15 deletions(-)

diff --git a/docs/src/pages/docs/checkbox.tsx b/docs/src/pages/docs/checkbox.tsx
index 49da4d4f0..cacd8c838 100644
--- a/docs/src/pages/docs/checkbox.tsx
+++ b/docs/src/pages/docs/checkbox.tsx
@@ -38,7 +38,7 @@ const CheckboxPage: React.FC = (): React.ReactElement<void> => {
                     options: indicators,
                     controlType: "Radio",
                     value: indicators[0].value,
-                    additionalProps: { className: "indent pl-3 pt-2" },
+                    formElementAdditionalProps: { className: "indent pl-3 pt-2" },
                 },
                 {
                     key: "indicatorGrouping",
@@ -48,7 +48,7 @@ const CheckboxPage: React.FC = (): React.ReactElement<void> => {
                     condition: true,
                     options: indicatorGrouping,
                     value: indicatorGrouping[0].value,
-                    additionalProps: { className: "indent pl-3 pt-2" },
+                    formElementAdditionalProps: { className: "indent pl-3 pt-2" },
                 },
             ],
         },
diff --git a/docs/src/pages/docs/datepicker.tsx b/docs/src/pages/docs/datepicker.tsx
index 88fd94317..a30505aad 100644
--- a/docs/src/pages/docs/datepicker.tsx
+++ b/docs/src/pages/docs/datepicker.tsx
@@ -22,7 +22,7 @@ const DatepickerPage: React.FC = () => {
                     label: "Locale code:",
                     description: "Set a locale for the custom picker (defaults to system locale).",
                     controlType: "Text",
-                    additionalProps: { className: "indent pl-3 pt-2" },
+                    formElementAdditionalProps: { className: "indent pl-3 pt-2" },
                 },
             ],
         },
diff --git a/docs/src/pages/docs/dynamic-forms.tsx b/docs/src/pages/docs/dynamic-forms.tsx
index 62c73cc1a..d2a940a7c 100644
--- a/docs/src/pages/docs/dynamic-forms.tsx
+++ b/docs/src/pages/docs/dynamic-forms.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { Helmet } from "react-helmet";
 import Layout from "@common/Layout";
 import { CodeSnippet } from "@common/CodeSnippet";
-import { useDynamicForm, DynamicFormSection } from "@sebgroup/react-components/hooks";
+import { useDynamicForm, DynamicFormSection, DynamicFormItem, DynamicFormOption } from "@sebgroup/react-components/hooks";
 import { Table, TableBody, TableCell, TableHeader, TableHeaderCell, TableRow } from "@sebgroup/react-components/Table";
 import { Button } from "@sebgroup/react-components/Button";
 import { isEmpty } from "@sebgroup/frontend-tools";
@@ -131,6 +131,7 @@ export default ComponentConditionalRender;
                 <CodeSnippet language="javascript">
                     {`
 import { useDynamicForm } from "@sebgroup/react-components/hooks/useDynamicForm";
+import { isEmpty } from "@sebgroup/frontend-tools";
 
 const FormWithErrors: React.FC = () => {
     const sections: DynamicFormSection[] = [
@@ -187,6 +188,147 @@ export default FormWithErrors;
 
                 <hr />
 
+                <h2 className="pt-3 pb-3">Full example</h2>
+                <p>A complete example of every form element with label, description and optional error message. All form elements use responsive layout.</p>
+                <CodeSnippet language="javascript">
+                    {`
+import { useDynamicForm, DynamicFormSection, DynamicFormItem, DynamicFormOption } from "@sebgroup/react-components/hooks";
+
+const ShowMeEverything: React.FC = () => {
+    const COMMON_ITEM: Partial<DynamicFormItem> = {
+        wrappingElement: "div",
+        additionalProps: {
+            className: "col-12 col-sm-6 col-md-4 mb-2",
+        },
+    };
+
+    const valueItems: DynamicFormItem[] = (["Text", "Textarea", "Datepicker", "Stepper", "Checkbox"] as DynamicFormItem["controlType"][]).map(
+        (controlType: DynamicFormItem["controlType"], i: number) => {
+            return {
+                key: controlType,
+                label: \`\${controlType} label\`,
+                description: \`\${controlType} description\`,
+                order: i,
+                controlType,
+                ...COMMON_ITEM,
+            };
+        }
+    );
+
+    const options: DynamicFormOption[] = [
+        { key: "one", label: "One", value: "1" },
+        { key: "two", label: "Two", value: "2" },
+        { key: "three", label: "Three", value: "3" },
+    ];
+
+    const multiSingleItems: DynamicFormItem[] = (["Radio", "Dropdown"] as DynamicFormItem["controlType"][]).map((controlType: DynamicFormItem["controlType"], i: number) => {
+        return {
+            key: controlType,
+            label: \`\${controlType} label\`,
+            description: \`\${controlType} description\`,
+            multi: false,
+            order: i,
+            options: [
+                ...options.map((e) => {
+                    return { ...e, key: \`\${e.key}-multi-single\` };
+                }),
+            ],
+            controlType,
+            ...COMMON_ITEM,
+        };
+    });
+
+    const multiManyItems: DynamicFormItem[] = (["Dropdown", "Option"] as DynamicFormItem["controlType"][]).map((controlType: DynamicFormItem["controlType"], i: number) => {
+        return {
+            key: controlType,
+            label: \`\${controlType} label\`,
+            description: \`\${controlType} description\`,
+            multi: true,
+            order: i,
+            options: [
+                ...options.map((e) => {
+                    return { ...e, key: \`\${e.key}-multi-many\` };
+                }),
+            ],
+            controlType,
+            ...COMMON_ITEM,
+        };
+    });
+
+    const COMMON_SECTION: Partial<DynamicFormItem> = {
+        wrappingElement: "section",
+        additionalProps: {
+            className: "row d-flex flex-wrap mb-2",
+        },
+    };
+
+    const sections: DynamicFormSection[] = [
+        {
+            key: "value-items-section",
+            title: "Simple single values only",
+            items: valueItems,
+            ...COMMON_SECTION,
+        },
+        {
+            key: "multi-single-items-section",
+            title: "Choose one of many options",
+            items: multiSingleItems,
+            ...COMMON_SECTION,
+        },
+        {
+            key: "multi-many-items-section",
+            title: "Choose any of multiple options",
+            items: multiManyItems,
+            ...COMMON_SECTION,
+        },
+    ];
+
+    const [renderForm, state,, setErrors] = useDynamicForm(sections);
+
+    const validate = () => {
+        setErrors({
+            "value-items-section": {
+                Text: "Text error message",
+                Textarea: "Textarea error message",
+                Checkbox: "Checkbox error message",
+                Datepicker: "Datepicker error message",
+                Stepper: "Stepper error message",
+            },
+            "multi-single-items-section": {
+                Radio: "Radio error message",
+                Dropdown: "Dropdown error message",
+            },
+            "multi-many-items-section": {
+                Dropdown: "Dropdown error message",
+                Option: "Option error message",
+            },
+        });
+    };
+
+    return (
+        <>
+            <div>{renderForm()}</div>
+            <div>
+                <Button onClick={validate}>
+                    Show errors
+                </Button>
+                <Button className="ml-3" onClick={() => alert(JSON.stringify(state, null, 4))}>
+                    Show current values
+                </Button>
+            </div>
+        </>
+    );
+};
+
+export default ShowMeEverything;
+                    `}
+                </CodeSnippet>
+                <div className="p-3 rounded bg-white">
+                    <ShowMeEverything />
+                </div>
+
+                <hr />
+
                 <h2 className="pt-3 pb-3">Dynamic forms API</h2>
                 <h3 className="pt-3 pb-3">
                     <code>DynamicFormSection</code>
@@ -459,6 +601,26 @@ export default FormWithErrors;
                                 Any additional element props to be mapped to the element. Depends on the <b>controlType</b>. Must be a valid prop for that element.
                             </TableCell>
                         </TableRow>
+                        <TableRow>
+                            <TableCell>
+                                <b>wrappingElement</b>
+                            </TableCell>
+                            <TableCell>&#10004;</TableCell>
+                            <TableCell>
+                                <code>{`"div" | "section" | "none"`}</code>
+                            </TableCell>
+                            <TableCell>The wrapping element (if any) for the form item. It wraps the label, element, error message and description in the chosen element. Defaut: "none"'.</TableCell>
+                        </TableRow>
+                        <TableRow>
+                            <TableCell>
+                                <b>additionalProps</b>
+                            </TableCell>
+                            <TableCell>&#10004;</TableCell>
+                            <TableCell>
+                                <code>{`{ [k: string]: any; }`}</code>
+                            </TableCell>
+                            <TableCell>Any additional element props to be mapped to the wrappingElement (if one is enabled).</TableCell>
+                        </TableRow>
                     </TableBody>
                 </Table>
 
@@ -519,7 +681,7 @@ export default FormWithErrors;
                         </TableRow>
                         <TableRow>
                             <TableCell>
-                                <b>additionalProps</b>
+                                <b>formElementAdditionalProps</b>
                             </TableCell>
                             <TableCell>&#10004;</TableCell>
                             <TableCell>
@@ -650,3 +812,127 @@ const FormWithErrors: React.FC = () => {
         </>
     );
 };
+
+const ShowMeEverything: React.FC = () => {
+    const COMMON_ITEM: Partial<DynamicFormItem> = {
+        wrappingElement: "div",
+        additionalProps: {
+            className: "col-12 col-sm-6 col-md-4 mb-2",
+        },
+    };
+
+    const valueItems: DynamicFormItem[] = (["Text", "Textarea", "Datepicker", "Stepper", "Checkbox"] as DynamicFormItem["controlType"][]).map(
+        (controlType: DynamicFormItem["controlType"], i: number) => {
+            return {
+                key: controlType,
+                label: `${controlType} label`,
+                description: `${controlType} description`,
+                order: i,
+                controlType,
+                ...COMMON_ITEM,
+            };
+        }
+    );
+
+    const options: DynamicFormOption[] = [
+        { key: "one", label: "One", value: "1" },
+        { key: "two", label: "Two", value: "2" },
+        { key: "three", label: "Three", value: "3" },
+    ];
+
+    const multiSingleItems: DynamicFormItem[] = (["Radio", "Dropdown"] as DynamicFormItem["controlType"][]).map((controlType: DynamicFormItem["controlType"], i: number) => {
+        return {
+            key: controlType,
+            label: `${controlType} label`,
+            description: `${controlType} description`,
+            multi: false,
+            order: i,
+            options: [
+                ...options.map((e) => {
+                    return { ...e, key: `${e.key}-multi-single` };
+                }),
+            ],
+            controlType,
+            ...COMMON_ITEM,
+        };
+    });
+
+    const multiManyItems: DynamicFormItem[] = (["Dropdown", "Option"] as DynamicFormItem["controlType"][]).map((controlType: DynamicFormItem["controlType"], i: number) => {
+        return {
+            key: controlType,
+            label: `${controlType} label`,
+            description: `${controlType} description`,
+            multi: true,
+            order: i,
+            options: [
+                ...options.map((e) => {
+                    return { ...e, key: `${e.key}-multi-many` };
+                }),
+            ],
+            controlType,
+            ...COMMON_ITEM,
+        };
+    });
+
+    const COMMON_SECTION: Partial<DynamicFormItem> = {
+        wrappingElement: "section",
+        additionalProps: {
+            className: "row d-flex flex-wrap mb-2",
+        },
+    };
+
+    const sections: DynamicFormSection[] = [
+        {
+            key: "value-items-section",
+            title: "Simple single values only",
+            items: valueItems,
+            ...COMMON_SECTION,
+        },
+        {
+            key: "multi-single-items-section",
+            title: "Choose one of many options",
+            items: multiSingleItems,
+            ...COMMON_SECTION,
+        },
+        {
+            key: "multi-many-items-section",
+            title: "Choose any of multiple options",
+            items: multiManyItems,
+            ...COMMON_SECTION,
+        },
+    ];
+
+    const [renderForm, state, , setErrors] = useDynamicForm(sections);
+
+    const validate = () => {
+        setErrors({
+            "value-items-section": {
+                Text: "Text error message",
+                Textarea: "Textarea error message",
+                Checkbox: "Checkbox error message",
+                Datepicker: "Datepicker error message",
+                Stepper: "Stepper error message",
+            },
+            "multi-single-items-section": {
+                Radio: "Radio error message",
+                Dropdown: "Dropdown error message",
+            },
+            "multi-many-items-section": {
+                Dropdown: "Dropdown error message",
+                Option: "Option error message",
+            },
+        });
+    };
+
+    return (
+        <>
+            <div>{renderForm()}</div>
+            <div>
+                <Button onClick={validate}>Show errors</Button>
+                <Button className="ml-3" onClick={() => alert(JSON.stringify(state, null, 4))}>
+                    Show current values
+                </Button>
+            </div>
+        </>
+    );
+};
diff --git a/docs/src/pages/docs/image.tsx b/docs/src/pages/docs/image.tsx
index 0b3ca77bd..94627b758 100644
--- a/docs/src/pages/docs/image.tsx
+++ b/docs/src/pages/docs/image.tsx
@@ -30,8 +30,8 @@ const ImagePage: React.FC = (): React.ReactElement<void> => {
                     key: "bgFixed",
                     label: "bgFixed",
                     rulerKey: "imgType",
-                    additionalProps: { className: "indent pl-3 pt-2" },
-                    condition: imgTypes[1],
+                    formElementAdditionalProps: { className: "indent pl-3 pt-2" },
+                    condition: imgTypes[1].value,
                     description: "Fixing the background allows it to have parallax effect when scrolling. Only available for div image type.",
                     controlType: "Checkbox",
                 },
@@ -39,8 +39,8 @@ const ImagePage: React.FC = (): React.ReactElement<void> => {
                     key: "showChildren",
                     label: "Render children inside div image",
                     rulerKey: "imgType",
-                    additionalProps: { className: "indent pl-3 pt-2" },
-                    condition: imgTypes[1],
+                    formElementAdditionalProps: { className: "indent pl-3 pt-2" },
+                    condition: imgTypes[1].value,
                     description: "One advantage of a div image is that you can render children inside the image",
                     controlType: "Checkbox",
                 },
diff --git a/docs/src/pages/docs/slider.tsx b/docs/src/pages/docs/slider.tsx
index 0ffd569f9..aaeddb246 100644
--- a/docs/src/pages/docs/slider.tsx
+++ b/docs/src/pages/docs/slider.tsx
@@ -45,7 +45,7 @@ const SliderPage: React.FC = (): React.ReactElement<void> => {
                     condition: true,
                     options: indicators,
                     value: indicators[0].value,
-                    additionalProps: { className: "indent pl-3 pt-2" },
+                    formElementAdditionalProps: { className: "indent pl-3 pt-2" },
                 },
                 { key: "labels", label: "labels", controlType: "Checkbox", value: false, description: "Pass a list of positions and labels to be mapped" },
                 {
@@ -56,7 +56,7 @@ const SliderPage: React.FC = (): React.ReactElement<void> => {
                     description: "Show ticks for the lables",
                     rulerKey: "labels",
                     condition: true,
-                    additionalProps: { className: "indent pl-3 pt-2" },
+                    formElementAdditionalProps: { className: "indent pl-3 pt-2" },
                 },
             ],
         },
diff --git a/docs/src/pages/docs/stepper.tsx b/docs/src/pages/docs/stepper.tsx
index 3690b3044..e9fe71545 100644
--- a/docs/src/pages/docs/stepper.tsx
+++ b/docs/src/pages/docs/stepper.tsx
@@ -39,7 +39,7 @@ const StepTrackerPage: React.FC = React.memo(() => {
                     options: indicators,
                     controlType: "Radio",
                     value: indicators[0].value,
-                    additionalProps: { className: "indent pl-3 pt-2" },
+                    formElementAdditionalProps: { className: "indent pl-3 pt-2" },
                 },
             ],
         },
diff --git a/docs/src/pages/docs/textarea.tsx b/docs/src/pages/docs/textarea.tsx
index e051e23c6..0e87c6404 100644
--- a/docs/src/pages/docs/textarea.tsx
+++ b/docs/src/pages/docs/textarea.tsx
@@ -31,7 +31,7 @@ const TextareaPage: React.FC = React.memo(() => {
                     options: indicators,
                     controlType: "Radio",
                     value: indicators[0].value,
-                    additionalProps: { className: "indent pl-3 pt-2" },
+                    formElementAdditionalProps: { className: "indent pl-3 pt-2" },
                 },
             ],
         },
diff --git a/docs/src/pages/docs/textbox.tsx b/docs/src/pages/docs/textbox.tsx
index e85bd4918..d008cac47 100644
--- a/docs/src/pages/docs/textbox.tsx
+++ b/docs/src/pages/docs/textbox.tsx
@@ -36,7 +36,7 @@ const TextboxPage: React.FC = React.memo(() => {
                     options: indicators,
                     controlType: "Radio",
                     value: indicators[0].value,
-                    additionalProps: { className: "indent pl-3 pt-2" },
+                    formElementAdditionalProps: { className: "indent pl-3 pt-2" },
                 },
             ],
         },
diff --git a/docs/src/pages/docs/toggle-selector.tsx b/docs/src/pages/docs/toggle-selector.tsx
index 5fed5dfff..b118fc323 100644
--- a/docs/src/pages/docs/toggle-selector.tsx
+++ b/docs/src/pages/docs/toggle-selector.tsx
@@ -39,7 +39,7 @@ const ToggleSelectorPage: React.FC = (): React.ReactElement<void> => {
                     controlType: "Radio",
                     rulerKey: "indicator",
                     condition: true,
-                    additionalProps: { className: "indent pl-3 pt-2" },
+                    formElementAdditionalProps: { className: "indent pl-3 pt-2" },
                 },
                 { key: "icons", label: "With icons as children", controlType: "Checkbox", description: "Find this example in the notes" },
             ],

From 58e3d884072174d8a7c42290d27718b50eb75953 Mon Sep 17 00:00:00 2001
From: Mario Subotic <mario.subotic@gmail.com>
Date: Tue, 27 Apr 2021 14:34:24 +0800
Subject: [PATCH 3/3] docs(datepicker): fix control styles

---
 docs/src/pages/docs/datepicker.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/docs/src/pages/docs/datepicker.tsx b/docs/src/pages/docs/datepicker.tsx
index a30505aad..f5782a6e0 100644
--- a/docs/src/pages/docs/datepicker.tsx
+++ b/docs/src/pages/docs/datepicker.tsx
@@ -22,7 +22,8 @@ const DatepickerPage: React.FC = () => {
                     label: "Locale code:",
                     description: "Set a locale for the custom picker (defaults to system locale).",
                     controlType: "Text",
-                    formElementAdditionalProps: { className: "indent pl-3 pt-2" },
+                    wrappingElement: "div",
+                    additionalProps: { className: "indent pl-3 pt-2" },
                 },
             ],
         },