From faa194a9c67d288e9d99122b2ec8e67ff57a2d95 Mon Sep 17 00:00:00 2001
From: Gervwyk <gervwyk@gmail.com>
Date: Mon, 16 Nov 2020 15:37:43 +0200
Subject: [PATCH] feat(blocksAntd): update TextInput to work with validation

---
 .../blocksAntd/demo/examples/TextInput.yaml   |    4 +
 .../src/blocks/TextInput/TextInput.js         |    4 +-
 .../src/blocks/TextInput/TextInput.json       |    4 +
 .../__snapshots__/TextInput.test.js.snap      | 1891 ++++++++++++++++-
 4 files changed, 1860 insertions(+), 43 deletions(-)

diff --git a/packages/blocksAntd/demo/examples/TextInput.yaml b/packages/blocksAntd/demo/examples/TextInput.yaml
index 5763ca4e3..0baddfeeb 100644
--- a/packages/blocksAntd/demo/examples/TextInput.yaml
+++ b/packages/blocksAntd/demo/examples/TextInput.yaml
@@ -38,6 +38,10 @@
   type: TextInput
   properties:
     size: large
+- id: 'properties.size: small'
+  type: TextInput
+  properties:
+    size: small
 - id: 'properties.suffix: Suffix to the text'
   type: TextInput
   properties:
diff --git a/packages/blocksAntd/src/blocks/TextInput/TextInput.js b/packages/blocksAntd/src/blocks/TextInput/TextInput.js
index 8535058b1..630a61a1f 100644
--- a/packages/blocksAntd/src/blocks/TextInput/TextInput.js
+++ b/packages/blocksAntd/src/blocks/TextInput/TextInput.js
@@ -21,7 +21,7 @@ import { blockDefaultProps } from '@lowdefy/block-tools';
 import Label from '../Label/Label';
 import Icon from '../Icon/Icon';
 
-const TextInput = ({ blockId, loading, methods, properties, required, validate, value }) => {
+const TextInput = ({ blockId, loading, methods, properties, required, validation, value }) => {
   return (
     <Label
       blockId={blockId}
@@ -29,7 +29,7 @@ const TextInput = ({ blockId, loading, methods, properties, required, validate,
       methods={methods}
       properties={{ title: properties.title, size: properties.size, ...properties.label }}
       required={required}
-      validate={validate}
+      validation={validation}
       content={{
         content: () => {
           return (
diff --git a/packages/blocksAntd/src/blocks/TextInput/TextInput.json b/packages/blocksAntd/src/blocks/TextInput/TextInput.json
index 192e1291b..8198a1758 100644
--- a/packages/blocksAntd/src/blocks/TextInput/TextInput.json
+++ b/packages/blocksAntd/src/blocks/TextInput/TextInput.json
@@ -2,6 +2,10 @@
   "valueType": "string",
   "category": "input",
   "loading": false,
+  "test": {
+    "validation": true,
+    "required": true
+  },
   "schema": {
     "properties": {
       "type": "object",
diff --git a/packages/blocksAntd/tests/__snapshots__/TextInput.test.js.snap b/packages/blocksAntd/tests/__snapshots__/TextInput.test.js.snap
index cf10c3ff0..98f16edfb 100644
--- a/packages/blocksAntd/tests/__snapshots__/TextInput.test.js.snap
+++ b/packages/blocksAntd/tests/__snapshots__/TextInput.test.js.snap
@@ -10,11 +10,11 @@ exports[`Render default 1`] = `
   }
 >
   <div
-    className="ant-col ant-form-item-label ant-form-item-label-left ant-col-xs-24 ant-col-sm-24"
+    className="ant-col ant-form-item-label ant-form-item-label-left {\\"style\\":{\\"whiteSpace\\":\\"normal\\",\\"marginBottom\\":8}} ant-col-xs-24 ant-col-sm-24"
     style={Object {}}
   >
     <label
-      className="{}"
+      className="{\\"style\\":[{\\"height\\":\\"100% !important\\"},null]}"
       htmlFor="default_input"
       title="default"
     >
@@ -89,11 +89,11 @@ exports[`Render properties.allowClear: false 1`] = `
   }
 >
   <div
-    className="ant-col ant-form-item-label ant-form-item-label-left ant-col-xs-24 ant-col-sm-24"
+    className="ant-col ant-form-item-label ant-form-item-label-left {\\"style\\":{\\"whiteSpace\\":\\"normal\\",\\"marginBottom\\":8}} ant-col-xs-24 ant-col-sm-24"
     style={Object {}}
   >
     <label
-      className="{}"
+      className="{\\"style\\":[{\\"height\\":\\"100% !important\\"},null]}"
       htmlFor="properties.allowClear: false_input"
       title="properties.allowClear: false"
     >
@@ -136,11 +136,11 @@ exports[`Render properties.autoFocus: true 1`] = `
   }
 >
   <div
-    className="ant-col ant-form-item-label ant-form-item-label-left ant-col-xs-24 ant-col-sm-24"
+    className="ant-col ant-form-item-label ant-form-item-label-left {\\"style\\":{\\"whiteSpace\\":\\"normal\\",\\"marginBottom\\":8}} ant-col-xs-24 ant-col-sm-24"
     style={Object {}}
   >
     <label
-      className="{}"
+      className="{\\"style\\":[{\\"height\\":\\"100% !important\\"},null]}"
       htmlFor="properties.autoFocus: true_input"
       title="properties.autoFocus: true"
     >
@@ -216,11 +216,11 @@ exports[`Render properties.disabled: true 1`] = `
   }
 >
   <div
-    className="ant-col ant-form-item-label ant-form-item-label-left ant-col-xs-24 ant-col-sm-24"
+    className="ant-col ant-form-item-label ant-form-item-label-left {\\"style\\":{\\"whiteSpace\\":\\"normal\\",\\"marginBottom\\":8}} ant-col-xs-24 ant-col-sm-24"
     style={Object {}}
   >
     <label
-      className="{}"
+      className="{\\"style\\":[{\\"height\\":\\"100% !important\\"},null]}"
       htmlFor="properties.disabled: true_input"
       title="properties.disabled: true"
     >
@@ -296,11 +296,11 @@ exports[`Render properties.label align: right 1`] = `
   }
 >
   <div
-    className="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-24"
+    className="ant-col ant-form-item-label {\\"style\\":{\\"whiteSpace\\":\\"normal\\",\\"marginBottom\\":8}} ant-col-xs-24 ant-col-sm-24"
     style={Object {}}
   >
     <label
-      className="{}"
+      className="{\\"style\\":[{\\"height\\":\\"100% !important\\"},null]}"
       htmlFor="properties.label align: right_input"
       title="properties.label align: right"
     >
@@ -375,11 +375,11 @@ exports[`Render properties.label colon: false 1`] = `
   }
 >
   <div
-    className="ant-col ant-form-item-label ant-form-item-label-left ant-col-xs-24 ant-col-sm-24"
+    className="ant-col ant-form-item-label ant-form-item-label-left {\\"style\\":{\\"whiteSpace\\":\\"normal\\",\\"marginBottom\\":8}} ant-col-xs-24 ant-col-sm-24"
     style={Object {}}
   >
     <label
-      className="ant-form-item-no-colon {}"
+      className="ant-form-item-no-colon {\\"style\\":[{\\"height\\":\\"100% !important\\"},null]}"
       htmlFor="properties.label colon: false_input"
       title="properties.label colon: false"
     >
@@ -521,11 +521,11 @@ exports[`Render properties.label extra: showing extra 1`] = `
   }
 >
   <div
-    className="ant-col ant-form-item-label ant-form-item-label-left ant-col-xs-24 ant-col-sm-24"
+    className="ant-col ant-form-item-label ant-form-item-label-left {\\"style\\":{\\"whiteSpace\\":\\"normal\\",\\"marginBottom\\":8}} ant-col-xs-24 ant-col-sm-24"
     style={Object {}}
   >
     <label
-      className="{}"
+      className="{\\"style\\":[{\\"height\\":\\"100% !important\\"},null]}"
       htmlFor="properties.label extra: showing extra_input"
       title="properties.label extra: showing extra"
     >
@@ -587,7 +587,7 @@ exports[`Render properties.label extra: showing extra 1`] = `
       </div>
     </div>
     <div
-      className="ant-form-item-extra {\\"style\\":[{\\"marginTop\\":0},null]}"
+      className="ant-form-item-explain ant-form-item-extra {\\"style\\":[{\\"marginTop\\":0},null]}"
     >
       showing extra
     </div>
@@ -605,7 +605,7 @@ exports[`Render properties.label inline: true 1`] = `
   }
 >
   <div
-    className="ant-col ant-form-item-label ant-form-item-label-left"
+    className="ant-col ant-form-item-label ant-form-item-label-left {\\"style\\":{\\"overflow\\":\\"inherit\\",\\"whiteSpace\\":false,\\"marginBottom\\":8}}"
     style={
       Object {
         "flex": "0 1 auto",
@@ -613,7 +613,7 @@ exports[`Render properties.label inline: true 1`] = `
     }
   >
     <label
-      className="{}"
+      className="{\\"style\\":[{\\"height\\":\\"100% !important\\"},null]}"
       htmlFor="properties.label inline: true_input"
       title="properties.label inline: true"
     >
@@ -692,11 +692,11 @@ exports[`Render properties.label span: 12 1`] = `
   }
 >
   <div
-    className="ant-col ant-form-item-label ant-form-item-label-left ant-col-xs-24 ant-col-sm-24 ant-col-md-12"
+    className="ant-col ant-form-item-label ant-form-item-label-left {\\"style\\":{\\"whiteSpace\\":\\"normal\\",\\"marginBottom\\":8}} ant-col-xs-24 ant-col-sm-24 ant-col-md-12"
     style={Object {}}
   >
     <label
-      className="{}"
+      className="{\\"style\\":[{\\"height\\":\\"100% !important\\"},null]}"
       htmlFor="properties.label span: 12_input"
       title="properties.label span: 12"
     >
@@ -771,11 +771,11 @@ exports[`Render properties.placeholder: Type your text here 1`] = `
   }
 >
   <div
-    className="ant-col ant-form-item-label ant-form-item-label-left ant-col-xs-24 ant-col-sm-24"
+    className="ant-col ant-form-item-label ant-form-item-label-left {\\"style\\":{\\"whiteSpace\\":\\"normal\\",\\"marginBottom\\":8}} ant-col-xs-24 ant-col-sm-24"
     style={Object {}}
   >
     <label
-      className="{}"
+      className="{\\"style\\":[{\\"height\\":\\"100% !important\\"},null]}"
       htmlFor="properties.placeholder: Type your text here_input"
       title="properties.placeholder: Type your text here"
     >
@@ -851,11 +851,11 @@ exports[`Render properties.prefix: Prefix to the text 1`] = `
   }
 >
   <div
-    className="ant-col ant-form-item-label ant-form-item-label-left ant-col-xs-24 ant-col-sm-24"
+    className="ant-col ant-form-item-label ant-form-item-label-left {\\"style\\":{\\"whiteSpace\\":\\"normal\\",\\"marginBottom\\":8}} ant-col-xs-24 ant-col-sm-24"
     style={Object {}}
   >
     <label
-      className="{}"
+      className="{\\"style\\":[{\\"height\\":\\"100% !important\\"},null]}"
       htmlFor="properties.prefix: Prefix to the text_input"
       title="properties.prefix: Prefix to the text"
     >
@@ -935,11 +935,11 @@ exports[`Render properties.prefixIcon.size: 24 1`] = `
   }
 >
   <div
-    className="ant-col ant-form-item-label ant-form-item-label-left ant-col-xs-24 ant-col-sm-24"
+    className="ant-col ant-form-item-label ant-form-item-label-left {\\"style\\":{\\"whiteSpace\\":\\"normal\\",\\"marginBottom\\":8}} ant-col-xs-24 ant-col-sm-24"
     style={Object {}}
   >
     <label
-      className="{}"
+      className="{\\"style\\":[{\\"height\\":\\"100% !important\\"},null]}"
       htmlFor="properties.prefixIcon.size: 24_input"
       title="properties.prefixIcon.size: 24"
     >
@@ -970,9 +970,16 @@ exports[`Render properties.prefixIcon.size: 24 1`] = `
               id="undefined_id"
               list={Array []}
               menus={Array []}
+              required={false}
               role="img"
               user={Object {}}
-              validate={Array []}
+              validation={
+                Object {
+                  "errors": Array [],
+                  "status": null,
+                  "warnings": Array [],
+                }
+              }
             >
               <svg
                 aria-hidden="true"
@@ -1044,11 +1051,11 @@ exports[`Render properties.prefixIcon: AccountBookFilled 1`] = `
   }
 >
   <div
-    className="ant-col ant-form-item-label ant-form-item-label-left ant-col-xs-24 ant-col-sm-24"
+    className="ant-col ant-form-item-label ant-form-item-label-left {\\"style\\":{\\"whiteSpace\\":\\"normal\\",\\"marginBottom\\":8}} ant-col-xs-24 ant-col-sm-24"
     style={Object {}}
   >
     <label
-      className="{}"
+      className="{\\"style\\":[{\\"height\\":\\"100% !important\\"},null]}"
       htmlFor="properties.prefixIcon: AccountBookFilled_input"
       title="properties.prefixIcon: AccountBookFilled"
     >
@@ -1079,9 +1086,16 @@ exports[`Render properties.prefixIcon: AccountBookFilled 1`] = `
               id="undefined_id"
               list={Array []}
               menus={Array []}
+              required={false}
               role="img"
               user={Object {}}
-              validate={Array []}
+              validation={
+                Object {
+                  "errors": Array [],
+                  "status": null,
+                  "warnings": Array [],
+                }
+              }
             >
               <svg
                 aria-hidden="true"
@@ -1153,11 +1167,11 @@ exports[`Render properties.size: large 1`] = `
   }
 >
   <div
-    className="ant-col ant-form-item-label ant-form-item-label-left ant-col-xs-24 ant-col-sm-24"
+    className="ant-col ant-form-item-label ant-form-item-label-left {\\"style\\":{\\"whiteSpace\\":\\"normal\\",\\"marginBottom\\":8}} ant-col-xs-24 ant-col-sm-24"
     style={Object {}}
   >
     <label
-      className="{}"
+      className="{\\"style\\":[{\\"height\\":\\"100% !important\\"},null]}"
       htmlFor="properties.size: large_input"
       title="properties.size: large"
     >
@@ -1222,6 +1236,85 @@ exports[`Render properties.size: large 1`] = `
 </div>
 `;
 
+exports[`Render properties.size: small 1`] = `
+<div
+  className="ant-row ant-form-item {\\"style\\":{}}"
+  style={
+    Object {
+      "marginBottom": 0,
+    }
+  }
+>
+  <div
+    className="ant-col ant-form-item-label ant-form-item-label-left {\\"style\\":{\\"whiteSpace\\":\\"normal\\",\\"marginBottom\\":8}} ant-col-xs-24 ant-col-sm-24"
+    style={Object {}}
+  >
+    <label
+      className="{\\"style\\":[{\\"height\\":\\"100% !important\\"},null]}"
+      htmlFor="properties.size: small_input"
+      title="properties.size: small"
+    >
+      properties.size: small
+    </label>
+  </div>
+  <div
+    className="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-24"
+    style={Object {}}
+  >
+    <div
+      className="ant-form-item-control-input"
+    >
+      <div
+        className="ant-form-item-control-input-content"
+      >
+        <span
+          className="{} ant-input-affix-wrapper ant-input-affix-wrapper-sm"
+          onMouseUp={[Function]}
+        >
+          <input
+            className="ant-input ant-input-sm"
+            id="properties.size: small_input"
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            onKeyDown={[Function]}
+            style={null}
+            type="text"
+            value=""
+          />
+          <span
+            className="ant-input-suffix"
+          >
+            <span
+              aria-label="close-circle"
+              className="anticon anticon-close-circle ant-input-clear-icon ant-input-clear-icon-hidden"
+              onClick={[Function]}
+              role="button"
+              tabIndex={-1}
+            >
+              <svg
+                aria-hidden="true"
+                className=""
+                data-icon="close-circle"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
+                />
+              </svg>
+            </span>
+          </span>
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`Render properties.suffix: Suffix to the text 1`] = `
 <div
   className="ant-row ant-form-item {\\"style\\":{}}"
@@ -1232,11 +1325,11 @@ exports[`Render properties.suffix: Suffix to the text 1`] = `
   }
 >
   <div
-    className="ant-col ant-form-item-label ant-form-item-label-left ant-col-xs-24 ant-col-sm-24"
+    className="ant-col ant-form-item-label ant-form-item-label-left {\\"style\\":{\\"whiteSpace\\":\\"normal\\",\\"marginBottom\\":8}} ant-col-xs-24 ant-col-sm-24"
     style={Object {}}
   >
     <label
-      className="{}"
+      className="{\\"style\\":[{\\"height\\":\\"100% !important\\"},null]}"
       htmlFor="properties.suffix: Suffix to the text_input"
       title="properties.suffix: Suffix to the text"
     >
@@ -1312,11 +1405,11 @@ exports[`Render properties.suffixIcon.size 24 1`] = `
   }
 >
   <div
-    className="ant-col ant-form-item-label ant-form-item-label-left ant-col-xs-24 ant-col-sm-24"
+    className="ant-col ant-form-item-label ant-form-item-label-left {\\"style\\":{\\"whiteSpace\\":\\"normal\\",\\"marginBottom\\":8}} ant-col-xs-24 ant-col-sm-24"
     style={Object {}}
   >
     <label
-      className="{}"
+      className="{\\"style\\":[{\\"height\\":\\"100% !important\\"},null]}"
       htmlFor="properties.suffixIcon.size 24_input"
       title="properties.suffixIcon.size 24"
     >
@@ -1380,9 +1473,16 @@ exports[`Render properties.suffixIcon.size 24 1`] = `
               id="undefined_id"
               list={Array []}
               menus={Array []}
+              required={false}
               role="img"
               user={Object {}}
-              validate={Array []}
+              validation={
+                Object {
+                  "errors": Array [],
+                  "status": null,
+                  "warnings": Array [],
+                }
+              }
             >
               <svg
                 aria-hidden="true"
@@ -1417,11 +1517,11 @@ exports[`Render properties.suffixIcon: AlertFilled 1`] = `
   }
 >
   <div
-    className="ant-col ant-form-item-label ant-form-item-label-left ant-col-xs-24 ant-col-sm-24"
+    className="ant-col ant-form-item-label ant-form-item-label-left {\\"style\\":{\\"whiteSpace\\":\\"normal\\",\\"marginBottom\\":8}} ant-col-xs-24 ant-col-sm-24"
     style={Object {}}
   >
     <label
-      className="{}"
+      className="{\\"style\\":[{\\"height\\":\\"100% !important\\"},null]}"
       htmlFor="properties.suffixIcon: AlertFilled_input"
       title="properties.suffixIcon: AlertFilled"
     >
@@ -1485,9 +1585,16 @@ exports[`Render properties.suffixIcon: AlertFilled 1`] = `
               id="undefined_id"
               list={Array []}
               menus={Array []}
+              required={false}
               role="img"
               user={Object {}}
-              validate={Array []}
+              validation={
+                Object {
+                  "errors": Array [],
+                  "status": null,
+                  "warnings": Array [],
+                }
+              }
             >
               <svg
                 aria-hidden="true"
@@ -1522,11 +1629,1709 @@ exports[`Render properties.title: My TextInput Title 1`] = `
   }
 >
   <div
-    className="ant-col ant-form-item-label ant-form-item-label-left ant-col-xs-24 ant-col-sm-24"
+    className="ant-col ant-form-item-label ant-form-item-label-left {\\"style\\":{\\"whiteSpace\\":\\"normal\\",\\"marginBottom\\":8}} ant-col-xs-24 ant-col-sm-24"
     style={Object {}}
   >
     <label
-      className="{}"
+      className="{\\"style\\":[{\\"height\\":\\"100% !important\\"},null]}"
+      htmlFor="properties.title: My TextInput Title_input"
+      title="My TextInput Title"
+    >
+      My TextInput Title
+    </label>
+  </div>
+  <div
+    className="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-24"
+    style={Object {}}
+  >
+    <div
+      className="ant-form-item-control-input"
+    >
+      <div
+        className="ant-form-item-control-input-content"
+      >
+        <span
+          className="{} ant-input-affix-wrapper"
+          onMouseUp={[Function]}
+        >
+          <input
+            className="ant-input"
+            id="properties.title: My TextInput Title_input"
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            onKeyDown={[Function]}
+            style={null}
+            type="text"
+            value=""
+          />
+          <span
+            className="ant-input-suffix"
+          >
+            <span
+              aria-label="close-circle"
+              className="anticon anticon-close-circle ant-input-clear-icon ant-input-clear-icon-hidden"
+              onClick={[Function]}
+              role="button"
+              tabIndex={-1}
+            >
+              <svg
+                aria-hidden="true"
+                className=""
+                data-icon="close-circle"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
+                />
+              </svg>
+            </span>
+          </span>
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Render required = true default 1`] = `
+<div
+  className="ant-row ant-form-item {\\"style\\":{}}"
+  style={
+    Object {
+      "marginBottom": 0,
+    }
+  }
+>
+  <div
+    className="ant-col ant-form-item-label ant-form-item-label-left {\\"style\\":{\\"whiteSpace\\":\\"normal\\",\\"marginBottom\\":8}} ant-col-xs-24 ant-col-sm-24"
+    style={Object {}}
+  >
+    <label
+      className="ant-form-item-required {\\"style\\":[{\\"height\\":\\"100% !important\\"},null]}"
+      htmlFor="default_input"
+      title="default"
+    >
+      default
+    </label>
+  </div>
+  <div
+    className="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-24"
+    style={Object {}}
+  >
+    <div
+      className="ant-form-item-control-input"
+    >
+      <div
+        className="ant-form-item-control-input-content"
+      >
+        <span
+          className="{} ant-input-affix-wrapper"
+          onMouseUp={[Function]}
+        >
+          <input
+            className="ant-input"
+            id="default_input"
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            onKeyDown={[Function]}
+            style={null}
+            type="text"
+            value=""
+          />
+          <span
+            className="ant-input-suffix"
+          >
+            <span
+              aria-label="close-circle"
+              className="anticon anticon-close-circle ant-input-clear-icon ant-input-clear-icon-hidden"
+              onClick={[Function]}
+              role="button"
+              tabIndex={-1}
+            >
+              <svg
+                aria-hidden="true"
+                className=""
+                data-icon="close-circle"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
+                />
+              </svg>
+            </span>
+          </span>
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Render required = true properties.allowClear: false 1`] = `
+<div
+  className="ant-row ant-form-item {\\"style\\":{}}"
+  style={
+    Object {
+      "marginBottom": 0,
+    }
+  }
+>
+  <div
+    className="ant-col ant-form-item-label ant-form-item-label-left {\\"style\\":{\\"whiteSpace\\":\\"normal\\",\\"marginBottom\\":8}} ant-col-xs-24 ant-col-sm-24"
+    style={Object {}}
+  >
+    <label
+      className="ant-form-item-required {\\"style\\":[{\\"height\\":\\"100% !important\\"},null]}"
+      htmlFor="properties.allowClear: false_input"
+      title="properties.allowClear: false"
+    >
+      properties.allowClear: false
+    </label>
+  </div>
+  <div
+    className="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-24"
+    style={Object {}}
+  >
+    <div
+      className="ant-form-item-control-input"
+    >
+      <div
+        className="ant-form-item-control-input-content"
+      >
+        <input
+          className="ant-input {}"
+          id="properties.allowClear: false_input"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          type="text"
+          value=""
+        />
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Render required = true properties.autoFocus: true 1`] = `
+<div
+  className="ant-row ant-form-item {\\"style\\":{}}"
+  style={
+    Object {
+      "marginBottom": 0,
+    }
+  }
+>
+  <div
+    className="ant-col ant-form-item-label ant-form-item-label-left {\\"style\\":{\\"whiteSpace\\":\\"normal\\",\\"marginBottom\\":8}} ant-col-xs-24 ant-col-sm-24"
+    style={Object {}}
+  >
+    <label
+      className="ant-form-item-required {\\"style\\":[{\\"height\\":\\"100% !important\\"},null]}"
+      htmlFor="properties.autoFocus: true_input"
+      title="properties.autoFocus: true"
+    >
+      properties.autoFocus: true
+    </label>
+  </div>
+  <div
+    className="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-24"
+    style={Object {}}
+  >
+    <div
+      className="ant-form-item-control-input"
+    >
+      <div
+        className="ant-form-item-control-input-content"
+      >
+        <span
+          className="{} ant-input-affix-wrapper"
+          onMouseUp={[Function]}
+        >
+          <input
+            autoFocus={true}
+            className="ant-input"
+            id="properties.autoFocus: true_input"
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            onKeyDown={[Function]}
+            style={null}
+            type="text"
+            value=""
+          />
+          <span
+            className="ant-input-suffix"
+          >
+            <span
+              aria-label="close-circle"
+              className="anticon anticon-close-circle ant-input-clear-icon ant-input-clear-icon-hidden"
+              onClick={[Function]}
+              role="button"
+              tabIndex={-1}
+            >
+              <svg
+                aria-hidden="true"
+                className=""
+                data-icon="close-circle"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
+                />
+              </svg>
+            </span>
+          </span>
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Render required = true properties.disabled: true 1`] = `
+<div
+  className="ant-row ant-form-item {\\"style\\":{}}"
+  style={
+    Object {
+      "marginBottom": 0,
+    }
+  }
+>
+  <div
+    className="ant-col ant-form-item-label ant-form-item-label-left {\\"style\\":{\\"whiteSpace\\":\\"normal\\",\\"marginBottom\\":8}} ant-col-xs-24 ant-col-sm-24"
+    style={Object {}}
+  >
+    <label
+      className="ant-form-item-required {\\"style\\":[{\\"height\\":\\"100% !important\\"},null]}"
+      htmlFor="properties.disabled: true_input"
+      title="properties.disabled: true"
+    >
+      properties.disabled: true
+    </label>
+  </div>
+  <div
+    className="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-24"
+    style={Object {}}
+  >
+    <div
+      className="ant-form-item-control-input"
+    >
+      <div
+        className="ant-form-item-control-input-content"
+      >
+        <span
+          className="{} ant-input-affix-wrapper ant-input-affix-wrapper-disabled"
+          onMouseUp={[Function]}
+        >
+          <input
+            className="ant-input ant-input-disabled"
+            disabled={true}
+            id="properties.disabled: true_input"
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            onKeyDown={[Function]}
+            style={null}
+            type="text"
+            value=""
+          />
+          <span
+            className="ant-input-suffix"
+          >
+            <span
+              aria-label="close-circle"
+              className="anticon anticon-close-circle ant-input-clear-icon ant-input-clear-icon-hidden"
+              onClick={[Function]}
+              role="button"
+              tabIndex={-1}
+            >
+              <svg
+                aria-hidden="true"
+                className=""
+                data-icon="close-circle"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
+                />
+              </svg>
+            </span>
+          </span>
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Render required = true properties.label align: right 1`] = `
+<div
+  className="ant-row ant-form-item {\\"style\\":{}}"
+  style={
+    Object {
+      "marginBottom": 0,
+    }
+  }
+>
+  <div
+    className="ant-col ant-form-item-label {\\"style\\":{\\"whiteSpace\\":\\"normal\\",\\"marginBottom\\":8}} ant-col-xs-24 ant-col-sm-24"
+    style={Object {}}
+  >
+    <label
+      className="ant-form-item-required {\\"style\\":[{\\"height\\":\\"100% !important\\"},null]}"
+      htmlFor="properties.label align: right_input"
+      title="properties.label align: right"
+    >
+      properties.label align: right
+    </label>
+  </div>
+  <div
+    className="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-24"
+    style={Object {}}
+  >
+    <div
+      className="ant-form-item-control-input"
+    >
+      <div
+        className="ant-form-item-control-input-content"
+      >
+        <span
+          className="{} ant-input-affix-wrapper"
+          onMouseUp={[Function]}
+        >
+          <input
+            className="ant-input"
+            id="properties.label align: right_input"
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            onKeyDown={[Function]}
+            style={null}
+            type="text"
+            value=""
+          />
+          <span
+            className="ant-input-suffix"
+          >
+            <span
+              aria-label="close-circle"
+              className="anticon anticon-close-circle ant-input-clear-icon ant-input-clear-icon-hidden"
+              onClick={[Function]}
+              role="button"
+              tabIndex={-1}
+            >
+              <svg
+                aria-hidden="true"
+                className=""
+                data-icon="close-circle"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
+                />
+              </svg>
+            </span>
+          </span>
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Render required = true properties.label colon: false 1`] = `
+<div
+  className="ant-row ant-form-item {\\"style\\":{}}"
+  style={
+    Object {
+      "marginBottom": 0,
+    }
+  }
+>
+  <div
+    className="ant-col ant-form-item-label ant-form-item-label-left {\\"style\\":{\\"whiteSpace\\":\\"normal\\",\\"marginBottom\\":8}} ant-col-xs-24 ant-col-sm-24"
+    style={Object {}}
+  >
+    <label
+      className="ant-form-item-required ant-form-item-no-colon {\\"style\\":[{\\"height\\":\\"100% !important\\"},null]}"
+      htmlFor="properties.label colon: false_input"
+      title="properties.label colon: false"
+    >
+      properties.label colon: false
+    </label>
+  </div>
+  <div
+    className="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-24"
+    style={Object {}}
+  >
+    <div
+      className="ant-form-item-control-input"
+    >
+      <div
+        className="ant-form-item-control-input-content"
+      >
+        <span
+          className="{} ant-input-affix-wrapper"
+          onMouseUp={[Function]}
+        >
+          <input
+            className="ant-input"
+            id="properties.label colon: false_input"
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            onKeyDown={[Function]}
+            style={null}
+            type="text"
+            value=""
+          />
+          <span
+            className="ant-input-suffix"
+          >
+            <span
+              aria-label="close-circle"
+              className="anticon anticon-close-circle ant-input-clear-icon ant-input-clear-icon-hidden"
+              onClick={[Function]}
+              role="button"
+              tabIndex={-1}
+            >
+              <svg
+                aria-hidden="true"
+                className=""
+                data-icon="close-circle"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
+                />
+              </svg>
+            </span>
+          </span>
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Render required = true properties.label disabled: true 1`] = `
+<div
+  className="ant-row ant-form-item {\\"style\\":{}}"
+  style={
+    Object {
+      "marginBottom": 0,
+    }
+  }
+>
+  <div
+    className="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-24"
+    style={Object {}}
+  >
+    <div
+      className="ant-form-item-control-input"
+    >
+      <div
+        className="ant-form-item-control-input-content"
+      >
+        <span
+          className="{} ant-input-affix-wrapper"
+          onMouseUp={[Function]}
+        >
+          <input
+            className="ant-input"
+            id="properties.label disabled: true_input"
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            onKeyDown={[Function]}
+            style={null}
+            type="text"
+            value=""
+          />
+          <span
+            className="ant-input-suffix"
+          >
+            <span
+              aria-label="close-circle"
+              className="anticon anticon-close-circle ant-input-clear-icon ant-input-clear-icon-hidden"
+              onClick={[Function]}
+              role="button"
+              tabIndex={-1}
+            >
+              <svg
+                aria-hidden="true"
+                className=""
+                data-icon="close-circle"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
+                />
+              </svg>
+            </span>
+          </span>
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Render required = true properties.label extra: showing extra 1`] = `
+<div
+  className="ant-row ant-form-item {\\"style\\":{}}"
+  style={
+    Object {
+      "marginBottom": 0,
+    }
+  }
+>
+  <div
+    className="ant-col ant-form-item-label ant-form-item-label-left {\\"style\\":{\\"whiteSpace\\":\\"normal\\",\\"marginBottom\\":8}} ant-col-xs-24 ant-col-sm-24"
+    style={Object {}}
+  >
+    <label
+      className="ant-form-item-required {\\"style\\":[{\\"height\\":\\"100% !important\\"},null]}"
+      htmlFor="properties.label extra: showing extra_input"
+      title="properties.label extra: showing extra"
+    >
+      properties.label extra: showing extra
+    </label>
+  </div>
+  <div
+    className="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-24"
+    style={Object {}}
+  >
+    <div
+      className="ant-form-item-control-input"
+    >
+      <div
+        className="ant-form-item-control-input-content"
+      >
+        <span
+          className="{} ant-input-affix-wrapper"
+          onMouseUp={[Function]}
+        >
+          <input
+            className="ant-input"
+            id="properties.label extra: showing extra_input"
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            onKeyDown={[Function]}
+            style={null}
+            type="text"
+            value=""
+          />
+          <span
+            className="ant-input-suffix"
+          >
+            <span
+              aria-label="close-circle"
+              className="anticon anticon-close-circle ant-input-clear-icon ant-input-clear-icon-hidden"
+              onClick={[Function]}
+              role="button"
+              tabIndex={-1}
+            >
+              <svg
+                aria-hidden="true"
+                className=""
+                data-icon="close-circle"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
+                />
+              </svg>
+            </span>
+          </span>
+        </span>
+      </div>
+    </div>
+    <div
+      className="ant-form-item-explain ant-form-item-extra {\\"style\\":[{\\"marginTop\\":0},null]}"
+    >
+      showing extra
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Render required = true properties.label inline: true 1`] = `
+<div
+  className="ant-row ant-form-item {\\"style\\":{\\"flexWrap\\":\\"inherit\\"}}"
+  style={
+    Object {
+      "marginBottom": 0,
+    }
+  }
+>
+  <div
+    className="ant-col ant-form-item-label ant-form-item-label-left {\\"style\\":{\\"overflow\\":\\"inherit\\",\\"whiteSpace\\":false,\\"marginBottom\\":8}}"
+    style={
+      Object {
+        "flex": "0 1 auto",
+      }
+    }
+  >
+    <label
+      className="ant-form-item-required {\\"style\\":[{\\"height\\":\\"100% !important\\"},null]}"
+      htmlFor="properties.label inline: true_input"
+      title="properties.label inline: true"
+    >
+      properties.label inline: true
+    </label>
+  </div>
+  <div
+    className="ant-col ant-form-item-control"
+    style={
+      Object {
+        "flex": "1 1 auto",
+      }
+    }
+  >
+    <div
+      className="ant-form-item-control-input"
+    >
+      <div
+        className="ant-form-item-control-input-content"
+      >
+        <span
+          className="{} ant-input-affix-wrapper"
+          onMouseUp={[Function]}
+        >
+          <input
+            className="ant-input"
+            id="properties.label inline: true_input"
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            onKeyDown={[Function]}
+            style={null}
+            type="text"
+            value=""
+          />
+          <span
+            className="ant-input-suffix"
+          >
+            <span
+              aria-label="close-circle"
+              className="anticon anticon-close-circle ant-input-clear-icon ant-input-clear-icon-hidden"
+              onClick={[Function]}
+              role="button"
+              tabIndex={-1}
+            >
+              <svg
+                aria-hidden="true"
+                className=""
+                data-icon="close-circle"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
+                />
+              </svg>
+            </span>
+          </span>
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Render required = true properties.label span: 12 1`] = `
+<div
+  className="ant-row ant-form-item {\\"style\\":{}}"
+  style={
+    Object {
+      "marginBottom": 0,
+    }
+  }
+>
+  <div
+    className="ant-col ant-form-item-label ant-form-item-label-left {\\"style\\":{\\"whiteSpace\\":\\"normal\\",\\"marginBottom\\":8}} ant-col-xs-24 ant-col-sm-24 ant-col-md-12"
+    style={Object {}}
+  >
+    <label
+      className="ant-form-item-required {\\"style\\":[{\\"height\\":\\"100% !important\\"},null]}"
+      htmlFor="properties.label span: 12_input"
+      title="properties.label span: 12"
+    >
+      properties.label span: 12
+    </label>
+  </div>
+  <div
+    className="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-24 ant-col-md-12"
+    style={Object {}}
+  >
+    <div
+      className="ant-form-item-control-input"
+    >
+      <div
+        className="ant-form-item-control-input-content"
+      >
+        <span
+          className="{} ant-input-affix-wrapper"
+          onMouseUp={[Function]}
+        >
+          <input
+            className="ant-input"
+            id="properties.label span: 12_input"
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            onKeyDown={[Function]}
+            style={null}
+            type="text"
+            value=""
+          />
+          <span
+            className="ant-input-suffix"
+          >
+            <span
+              aria-label="close-circle"
+              className="anticon anticon-close-circle ant-input-clear-icon ant-input-clear-icon-hidden"
+              onClick={[Function]}
+              role="button"
+              tabIndex={-1}
+            >
+              <svg
+                aria-hidden="true"
+                className=""
+                data-icon="close-circle"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
+                />
+              </svg>
+            </span>
+          </span>
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Render required = true properties.placeholder: Type your text here 1`] = `
+<div
+  className="ant-row ant-form-item {\\"style\\":{}}"
+  style={
+    Object {
+      "marginBottom": 0,
+    }
+  }
+>
+  <div
+    className="ant-col ant-form-item-label ant-form-item-label-left {\\"style\\":{\\"whiteSpace\\":\\"normal\\",\\"marginBottom\\":8}} ant-col-xs-24 ant-col-sm-24"
+    style={Object {}}
+  >
+    <label
+      className="ant-form-item-required {\\"style\\":[{\\"height\\":\\"100% !important\\"},null]}"
+      htmlFor="properties.placeholder: Type your text here_input"
+      title="properties.placeholder: Type your text here"
+    >
+      properties.placeholder: Type your text here
+    </label>
+  </div>
+  <div
+    className="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-24"
+    style={Object {}}
+  >
+    <div
+      className="ant-form-item-control-input"
+    >
+      <div
+        className="ant-form-item-control-input-content"
+      >
+        <span
+          className="{} ant-input-affix-wrapper"
+          onMouseUp={[Function]}
+        >
+          <input
+            className="ant-input"
+            id="properties.placeholder: Type your text here_input"
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            onKeyDown={[Function]}
+            placeholder="Type your text here"
+            style={null}
+            type="text"
+            value=""
+          />
+          <span
+            className="ant-input-suffix"
+          >
+            <span
+              aria-label="close-circle"
+              className="anticon anticon-close-circle ant-input-clear-icon ant-input-clear-icon-hidden"
+              onClick={[Function]}
+              role="button"
+              tabIndex={-1}
+            >
+              <svg
+                aria-hidden="true"
+                className=""
+                data-icon="close-circle"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
+                />
+              </svg>
+            </span>
+          </span>
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Render required = true properties.prefix: Prefix to the text 1`] = `
+<div
+  className="ant-row ant-form-item {\\"style\\":{}}"
+  style={
+    Object {
+      "marginBottom": 0,
+    }
+  }
+>
+  <div
+    className="ant-col ant-form-item-label ant-form-item-label-left {\\"style\\":{\\"whiteSpace\\":\\"normal\\",\\"marginBottom\\":8}} ant-col-xs-24 ant-col-sm-24"
+    style={Object {}}
+  >
+    <label
+      className="ant-form-item-required {\\"style\\":[{\\"height\\":\\"100% !important\\"},null]}"
+      htmlFor="properties.prefix: Prefix to the text_input"
+      title="properties.prefix: Prefix to the text"
+    >
+      properties.prefix: Prefix to the text
+    </label>
+  </div>
+  <div
+    className="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-24"
+    style={Object {}}
+  >
+    <div
+      className="ant-form-item-control-input"
+    >
+      <div
+        className="ant-form-item-control-input-content"
+      >
+        <span
+          className="{} ant-input-affix-wrapper"
+          onMouseUp={[Function]}
+        >
+          <span
+            className="ant-input-prefix"
+          >
+            Prefix to the text
+          </span>
+          <input
+            className="ant-input"
+            id="properties.prefix: Prefix to the text_input"
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            onKeyDown={[Function]}
+            style={null}
+            type="text"
+            value=""
+          />
+          <span
+            className="ant-input-suffix"
+          >
+            <span
+              aria-label="close-circle"
+              className="anticon anticon-close-circle ant-input-clear-icon ant-input-clear-icon-hidden"
+              onClick={[Function]}
+              role="button"
+              tabIndex={-1}
+            >
+              <svg
+                aria-hidden="true"
+                className=""
+                data-icon="close-circle"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
+                />
+              </svg>
+            </span>
+          </span>
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Render required = true properties.prefixIcon.size: 24 1`] = `
+<div
+  className="ant-row ant-form-item {\\"style\\":{}}"
+  style={
+    Object {
+      "marginBottom": 0,
+    }
+  }
+>
+  <div
+    className="ant-col ant-form-item-label ant-form-item-label-left {\\"style\\":{\\"whiteSpace\\":\\"normal\\",\\"marginBottom\\":8}} ant-col-xs-24 ant-col-sm-24"
+    style={Object {}}
+  >
+    <label
+      className="ant-form-item-required {\\"style\\":[{\\"height\\":\\"100% !important\\"},null]}"
+      htmlFor="properties.prefixIcon.size: 24_input"
+      title="properties.prefixIcon.size: 24"
+    >
+      properties.prefixIcon.size: 24
+    </label>
+  </div>
+  <div
+    className="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-24"
+    style={Object {}}
+  >
+    <div
+      className="ant-form-item-control-input"
+    >
+      <div
+        className="ant-form-item-control-input-content"
+      >
+        <span
+          className="{} ant-input-affix-wrapper"
+          onMouseUp={[Function]}
+        >
+          <span
+            className="ant-input-prefix"
+          >
+            <span
+              aria-label="loading-3-quarters"
+              className="anticon anticon-loading-3-quarters {}"
+              content={Object {}}
+              id="undefined_id"
+              list={Array []}
+              menus={Array []}
+              required={false}
+              role="img"
+              user={Object {}}
+              validation={
+                Object {
+                  "errors": Array [],
+                  "status": null,
+                  "warnings": Array [],
+                }
+              }
+            >
+              <svg
+                aria-hidden="true"
+                className="anticon-spin"
+                data-icon="loading-3-quarters"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="0 0 1024 1024"
+                width="1em"
+              >
+                <path
+                  d="M512 1024c-69.1 0-136.2-13.5-199.3-40.2C251.7 958 197 921 150 874c-47-47-84-101.7-109.8-162.7C13.5 648.2 0 581.1 0 512c0-19.9 16.1-36 36-36s36 16.1 36 36c0 59.4 11.6 117 34.6 171.3 22.2 52.4 53.9 99.5 94.3 139.9 40.4 40.4 87.5 72.2 139.9 94.3C395 940.4 452.6 952 512 952c59.4 0 117-11.6 171.3-34.6 52.4-22.2 99.5-53.9 139.9-94.3 40.4-40.4 72.2-87.5 94.3-139.9C940.4 629 952 571.4 952 512c0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.2C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3s-13.5 136.2-40.2 199.3C958 772.3 921 827 874 874c-47 47-101.8 83.9-162.7 109.7-63.1 26.8-130.2 40.3-199.3 40.3z"
+                />
+              </svg>
+            </span>
+          </span>
+          <input
+            className="ant-input"
+            id="properties.prefixIcon.size: 24_input"
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            onKeyDown={[Function]}
+            style={null}
+            type="text"
+            value=""
+          />
+          <span
+            className="ant-input-suffix"
+          >
+            <span
+              aria-label="close-circle"
+              className="anticon anticon-close-circle ant-input-clear-icon ant-input-clear-icon-hidden"
+              onClick={[Function]}
+              role="button"
+              tabIndex={-1}
+            >
+              <svg
+                aria-hidden="true"
+                className=""
+                data-icon="close-circle"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
+                />
+              </svg>
+            </span>
+          </span>
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Render required = true properties.prefixIcon: AccountBookFilled 1`] = `
+<div
+  className="ant-row ant-form-item {\\"style\\":{}}"
+  style={
+    Object {
+      "marginBottom": 0,
+    }
+  }
+>
+  <div
+    className="ant-col ant-form-item-label ant-form-item-label-left {\\"style\\":{\\"whiteSpace\\":\\"normal\\",\\"marginBottom\\":8}} ant-col-xs-24 ant-col-sm-24"
+    style={Object {}}
+  >
+    <label
+      className="ant-form-item-required {\\"style\\":[{\\"height\\":\\"100% !important\\"},null]}"
+      htmlFor="properties.prefixIcon: AccountBookFilled_input"
+      title="properties.prefixIcon: AccountBookFilled"
+    >
+      properties.prefixIcon: AccountBookFilled
+    </label>
+  </div>
+  <div
+    className="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-24"
+    style={Object {}}
+  >
+    <div
+      className="ant-form-item-control-input"
+    >
+      <div
+        className="ant-form-item-control-input-content"
+      >
+        <span
+          className="{} ant-input-affix-wrapper"
+          onMouseUp={[Function]}
+        >
+          <span
+            className="ant-input-prefix"
+          >
+            <span
+              aria-label="loading-3-quarters"
+              className="anticon anticon-loading-3-quarters {}"
+              content={Object {}}
+              id="undefined_id"
+              list={Array []}
+              menus={Array []}
+              required={false}
+              role="img"
+              user={Object {}}
+              validation={
+                Object {
+                  "errors": Array [],
+                  "status": null,
+                  "warnings": Array [],
+                }
+              }
+            >
+              <svg
+                aria-hidden="true"
+                className="anticon-spin"
+                data-icon="loading-3-quarters"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="0 0 1024 1024"
+                width="1em"
+              >
+                <path
+                  d="M512 1024c-69.1 0-136.2-13.5-199.3-40.2C251.7 958 197 921 150 874c-47-47-84-101.7-109.8-162.7C13.5 648.2 0 581.1 0 512c0-19.9 16.1-36 36-36s36 16.1 36 36c0 59.4 11.6 117 34.6 171.3 22.2 52.4 53.9 99.5 94.3 139.9 40.4 40.4 87.5 72.2 139.9 94.3C395 940.4 452.6 952 512 952c59.4 0 117-11.6 171.3-34.6 52.4-22.2 99.5-53.9 139.9-94.3 40.4-40.4 72.2-87.5 94.3-139.9C940.4 629 952 571.4 952 512c0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.2C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3s-13.5 136.2-40.2 199.3C958 772.3 921 827 874 874c-47 47-101.8 83.9-162.7 109.7-63.1 26.8-130.2 40.3-199.3 40.3z"
+                />
+              </svg>
+            </span>
+          </span>
+          <input
+            className="ant-input"
+            id="properties.prefixIcon: AccountBookFilled_input"
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            onKeyDown={[Function]}
+            style={null}
+            type="text"
+            value=""
+          />
+          <span
+            className="ant-input-suffix"
+          >
+            <span
+              aria-label="close-circle"
+              className="anticon anticon-close-circle ant-input-clear-icon ant-input-clear-icon-hidden"
+              onClick={[Function]}
+              role="button"
+              tabIndex={-1}
+            >
+              <svg
+                aria-hidden="true"
+                className=""
+                data-icon="close-circle"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
+                />
+              </svg>
+            </span>
+          </span>
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Render required = true properties.size: large 1`] = `
+<div
+  className="ant-row ant-form-item {\\"style\\":{}}"
+  style={
+    Object {
+      "marginBottom": 0,
+    }
+  }
+>
+  <div
+    className="ant-col ant-form-item-label ant-form-item-label-left {\\"style\\":{\\"whiteSpace\\":\\"normal\\",\\"marginBottom\\":8}} ant-col-xs-24 ant-col-sm-24"
+    style={Object {}}
+  >
+    <label
+      className="ant-form-item-required {\\"style\\":[{\\"height\\":\\"100% !important\\"},null]}"
+      htmlFor="properties.size: large_input"
+      title="properties.size: large"
+    >
+      properties.size: large
+    </label>
+  </div>
+  <div
+    className="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-24"
+    style={Object {}}
+  >
+    <div
+      className="ant-form-item-control-input"
+    >
+      <div
+        className="ant-form-item-control-input-content"
+      >
+        <span
+          className="{} ant-input-affix-wrapper ant-input-affix-wrapper-lg"
+          onMouseUp={[Function]}
+        >
+          <input
+            className="ant-input ant-input-lg"
+            id="properties.size: large_input"
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            onKeyDown={[Function]}
+            style={null}
+            type="text"
+            value=""
+          />
+          <span
+            className="ant-input-suffix"
+          >
+            <span
+              aria-label="close-circle"
+              className="anticon anticon-close-circle ant-input-clear-icon ant-input-clear-icon-hidden"
+              onClick={[Function]}
+              role="button"
+              tabIndex={-1}
+            >
+              <svg
+                aria-hidden="true"
+                className=""
+                data-icon="close-circle"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
+                />
+              </svg>
+            </span>
+          </span>
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Render required = true properties.size: small 1`] = `
+<div
+  className="ant-row ant-form-item {\\"style\\":{}}"
+  style={
+    Object {
+      "marginBottom": 0,
+    }
+  }
+>
+  <div
+    className="ant-col ant-form-item-label ant-form-item-label-left {\\"style\\":{\\"whiteSpace\\":\\"normal\\",\\"marginBottom\\":8}} ant-col-xs-24 ant-col-sm-24"
+    style={Object {}}
+  >
+    <label
+      className="ant-form-item-required {\\"style\\":[{\\"height\\":\\"100% !important\\"},null]}"
+      htmlFor="properties.size: small_input"
+      title="properties.size: small"
+    >
+      properties.size: small
+    </label>
+  </div>
+  <div
+    className="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-24"
+    style={Object {}}
+  >
+    <div
+      className="ant-form-item-control-input"
+    >
+      <div
+        className="ant-form-item-control-input-content"
+      >
+        <span
+          className="{} ant-input-affix-wrapper ant-input-affix-wrapper-sm"
+          onMouseUp={[Function]}
+        >
+          <input
+            className="ant-input ant-input-sm"
+            id="properties.size: small_input"
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            onKeyDown={[Function]}
+            style={null}
+            type="text"
+            value=""
+          />
+          <span
+            className="ant-input-suffix"
+          >
+            <span
+              aria-label="close-circle"
+              className="anticon anticon-close-circle ant-input-clear-icon ant-input-clear-icon-hidden"
+              onClick={[Function]}
+              role="button"
+              tabIndex={-1}
+            >
+              <svg
+                aria-hidden="true"
+                className=""
+                data-icon="close-circle"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
+                />
+              </svg>
+            </span>
+          </span>
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Render required = true properties.suffix: Suffix to the text 1`] = `
+<div
+  className="ant-row ant-form-item {\\"style\\":{}}"
+  style={
+    Object {
+      "marginBottom": 0,
+    }
+  }
+>
+  <div
+    className="ant-col ant-form-item-label ant-form-item-label-left {\\"style\\":{\\"whiteSpace\\":\\"normal\\",\\"marginBottom\\":8}} ant-col-xs-24 ant-col-sm-24"
+    style={Object {}}
+  >
+    <label
+      className="ant-form-item-required {\\"style\\":[{\\"height\\":\\"100% !important\\"},null]}"
+      htmlFor="properties.suffix: Suffix to the text_input"
+      title="properties.suffix: Suffix to the text"
+    >
+      properties.suffix: Suffix to the text
+    </label>
+  </div>
+  <div
+    className="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-24"
+    style={Object {}}
+  >
+    <div
+      className="ant-form-item-control-input"
+    >
+      <div
+        className="ant-form-item-control-input-content"
+      >
+        <span
+          className="{} ant-input-affix-wrapper"
+          onMouseUp={[Function]}
+        >
+          <input
+            className="ant-input"
+            id="properties.suffix: Suffix to the text_input"
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            onKeyDown={[Function]}
+            style={null}
+            type="text"
+            value=""
+          />
+          <span
+            className="ant-input-suffix"
+          >
+            <span
+              aria-label="close-circle"
+              className="anticon anticon-close-circle ant-input-clear-icon ant-input-clear-icon-hidden"
+              onClick={[Function]}
+              role="button"
+              tabIndex={-1}
+            >
+              <svg
+                aria-hidden="true"
+                className=""
+                data-icon="close-circle"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
+                />
+              </svg>
+            </span>
+            Suffix to the text
+          </span>
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Render required = true properties.suffixIcon.size 24 1`] = `
+<div
+  className="ant-row ant-form-item {\\"style\\":{}}"
+  style={
+    Object {
+      "marginBottom": 0,
+    }
+  }
+>
+  <div
+    className="ant-col ant-form-item-label ant-form-item-label-left {\\"style\\":{\\"whiteSpace\\":\\"normal\\",\\"marginBottom\\":8}} ant-col-xs-24 ant-col-sm-24"
+    style={Object {}}
+  >
+    <label
+      className="ant-form-item-required {\\"style\\":[{\\"height\\":\\"100% !important\\"},null]}"
+      htmlFor="properties.suffixIcon.size 24_input"
+      title="properties.suffixIcon.size 24"
+    >
+      properties.suffixIcon.size 24
+    </label>
+  </div>
+  <div
+    className="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-24"
+    style={Object {}}
+  >
+    <div
+      className="ant-form-item-control-input"
+    >
+      <div
+        className="ant-form-item-control-input-content"
+      >
+        <span
+          className="{} ant-input-affix-wrapper"
+          onMouseUp={[Function]}
+        >
+          <input
+            className="ant-input"
+            id="properties.suffixIcon.size 24_input"
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            onKeyDown={[Function]}
+            style={null}
+            type="text"
+            value=""
+          />
+          <span
+            className="ant-input-suffix"
+          >
+            <span
+              aria-label="close-circle"
+              className="anticon anticon-close-circle ant-input-clear-icon ant-input-clear-icon-hidden"
+              onClick={[Function]}
+              role="button"
+              tabIndex={-1}
+            >
+              <svg
+                aria-hidden="true"
+                className=""
+                data-icon="close-circle"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
+                />
+              </svg>
+            </span>
+            <span
+              aria-label="loading-3-quarters"
+              className="anticon anticon-loading-3-quarters {}"
+              content={Object {}}
+              id="undefined_id"
+              list={Array []}
+              menus={Array []}
+              required={false}
+              role="img"
+              user={Object {}}
+              validation={
+                Object {
+                  "errors": Array [],
+                  "status": null,
+                  "warnings": Array [],
+                }
+              }
+            >
+              <svg
+                aria-hidden="true"
+                className="anticon-spin"
+                data-icon="loading-3-quarters"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="0 0 1024 1024"
+                width="1em"
+              >
+                <path
+                  d="M512 1024c-69.1 0-136.2-13.5-199.3-40.2C251.7 958 197 921 150 874c-47-47-84-101.7-109.8-162.7C13.5 648.2 0 581.1 0 512c0-19.9 16.1-36 36-36s36 16.1 36 36c0 59.4 11.6 117 34.6 171.3 22.2 52.4 53.9 99.5 94.3 139.9 40.4 40.4 87.5 72.2 139.9 94.3C395 940.4 452.6 952 512 952c59.4 0 117-11.6 171.3-34.6 52.4-22.2 99.5-53.9 139.9-94.3 40.4-40.4 72.2-87.5 94.3-139.9C940.4 629 952 571.4 952 512c0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.2C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3s-13.5 136.2-40.2 199.3C958 772.3 921 827 874 874c-47 47-101.8 83.9-162.7 109.7-63.1 26.8-130.2 40.3-199.3 40.3z"
+                />
+              </svg>
+            </span>
+          </span>
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Render required = true properties.suffixIcon: AlertFilled 1`] = `
+<div
+  className="ant-row ant-form-item {\\"style\\":{}}"
+  style={
+    Object {
+      "marginBottom": 0,
+    }
+  }
+>
+  <div
+    className="ant-col ant-form-item-label ant-form-item-label-left {\\"style\\":{\\"whiteSpace\\":\\"normal\\",\\"marginBottom\\":8}} ant-col-xs-24 ant-col-sm-24"
+    style={Object {}}
+  >
+    <label
+      className="ant-form-item-required {\\"style\\":[{\\"height\\":\\"100% !important\\"},null]}"
+      htmlFor="properties.suffixIcon: AlertFilled_input"
+      title="properties.suffixIcon: AlertFilled"
+    >
+      properties.suffixIcon: AlertFilled
+    </label>
+  </div>
+  <div
+    className="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-24"
+    style={Object {}}
+  >
+    <div
+      className="ant-form-item-control-input"
+    >
+      <div
+        className="ant-form-item-control-input-content"
+      >
+        <span
+          className="{} ant-input-affix-wrapper"
+          onMouseUp={[Function]}
+        >
+          <input
+            className="ant-input"
+            id="properties.suffixIcon: AlertFilled_input"
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            onKeyDown={[Function]}
+            style={null}
+            type="text"
+            value=""
+          />
+          <span
+            className="ant-input-suffix"
+          >
+            <span
+              aria-label="close-circle"
+              className="anticon anticon-close-circle ant-input-clear-icon ant-input-clear-icon-hidden"
+              onClick={[Function]}
+              role="button"
+              tabIndex={-1}
+            >
+              <svg
+                aria-hidden="true"
+                className=""
+                data-icon="close-circle"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
+                />
+              </svg>
+            </span>
+            <span
+              aria-label="loading-3-quarters"
+              className="anticon anticon-loading-3-quarters {}"
+              content={Object {}}
+              id="undefined_id"
+              list={Array []}
+              menus={Array []}
+              required={false}
+              role="img"
+              user={Object {}}
+              validation={
+                Object {
+                  "errors": Array [],
+                  "status": null,
+                  "warnings": Array [],
+                }
+              }
+            >
+              <svg
+                aria-hidden="true"
+                className="anticon-spin"
+                data-icon="loading-3-quarters"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="0 0 1024 1024"
+                width="1em"
+              >
+                <path
+                  d="M512 1024c-69.1 0-136.2-13.5-199.3-40.2C251.7 958 197 921 150 874c-47-47-84-101.7-109.8-162.7C13.5 648.2 0 581.1 0 512c0-19.9 16.1-36 36-36s36 16.1 36 36c0 59.4 11.6 117 34.6 171.3 22.2 52.4 53.9 99.5 94.3 139.9 40.4 40.4 87.5 72.2 139.9 94.3C395 940.4 452.6 952 512 952c59.4 0 117-11.6 171.3-34.6 52.4-22.2 99.5-53.9 139.9-94.3 40.4-40.4 72.2-87.5 94.3-139.9C940.4 629 952 571.4 952 512c0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.2C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3s-13.5 136.2-40.2 199.3C958 772.3 921 827 874 874c-47 47-101.8 83.9-162.7 109.7-63.1 26.8-130.2 40.3-199.3 40.3z"
+                />
+              </svg>
+            </span>
+          </span>
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Render required = true properties.title: My TextInput Title 1`] = `
+<div
+  className="ant-row ant-form-item {\\"style\\":{}}"
+  style={
+    Object {
+      "marginBottom": 0,
+    }
+  }
+>
+  <div
+    className="ant-col ant-form-item-label ant-form-item-label-left {\\"style\\":{\\"whiteSpace\\":\\"normal\\",\\"marginBottom\\":8}} ant-col-xs-24 ant-col-sm-24"
+    style={Object {}}
+  >
+    <label
+      className="ant-form-item-required {\\"style\\":[{\\"height\\":\\"100% !important\\"},null]}"
       htmlFor="properties.title: My TextInput Title_input"
       title="My TextInput Title"
     >
@@ -1651,6 +3456,10 @@ exports[`Test Schema properties.size: large 1`] = `true`;
 
 exports[`Test Schema properties.size: large 2`] = `null`;
 
+exports[`Test Schema properties.size: small 1`] = `true`;
+
+exports[`Test Schema properties.size: small 2`] = `null`;
+
 exports[`Test Schema properties.suffix: Suffix to the text 1`] = `true`;
 
 exports[`Test Schema properties.suffix: Suffix to the text 2`] = `null`;