@wix/editor-react-components 1.2482.0 → 1.2483.0

package/dist/site/components/TextInput/TextInput.types.d.ts

@@ -1,3 +1,4 @@
+import { Direction } from '@wix/editor-react-types';
 import { CorvidTypes } from '../../../types/vendored/editor-elements-types-corvid';
 import { DefaultCompPlatformProps } from '../../../types/vendored/editor-elements-types-thunderbolt';
 import { IReadOnlyPropSDK } from '../../../common/sdk/props-factories/readOnlyPropsSDKFactory';
@@ -79,6 +80,10 @@ export type ITextInputMapperProps = {
     label?: string;
     placeholder?: string;
     tooltip?: string;
+    description?: string;
+    direction?: Direction;
+    labelDirection?: Direction;
+    inputDirection?: Direction;
     readOnly: boolean;
     required: boolean;
     isDisabled: boolean;

package/dist/site/components/TextInput/component.js

@@ -6,6 +6,7 @@ import { E as EnvironmentDefinition } from "../chunks/index2.js";
 import { b as getAccessibilityAttributes, H as HAS_CUSTOM_FOCUS_CLASSNAME } from "../chunks/a11y.js";
 import { a as getDataAttributes } from "../chunks/dataUtils.js";
 import { u as useValidatedField, R as RequiredIndicator } from "../chunks/RequiredIndicator.js";
+import { d as directionStyles } from "../chunks/direction.module.js";
 import { s as selectors, T as TestIds, V as VALUE_MISSING_MESSAGE } from "../chunks/constants3.js";
 import { useService } from "@wix/services-manager-react";
 import { T as TranslationsDefinition } from "../chunks/index6.js";
@@ -475,6 +476,7 @@ const input = "input__fyTfx";
 const hideNumberSpinner = "hideNumberSpinner__nYhia";
 const hasPrefix = "hasPrefix__RXMKp";
 const validationIndication = "validationIndication__GE20D";
+const helperText = "helperText__SfMAH";
 const label = "label__mbGIM";
 const labelRow = "labelRow__tN4T-";
 const tooltipButton = "tooltipButton__7D4vU";
@@ -490,6 +492,7 @@ const style = {
   hideNumberSpinner,
   hasPrefix,
   validationIndication,
+  helperText,
   label,
   labelRow,
   tooltipButton,
@@ -589,6 +592,10 @@ const TextInput = (props, ref) => {
     label: label2,
     tooltip: tooltip2,
     placeholder,
+    description,
+    direction,
+    labelDirection,
+    inputDirection,
     readOnly,
     required,
     isDisabled,
@@ -647,6 +654,13 @@ const TextInput = (props, ref) => {
       setSdkValue(boundValue);
     }
   }, [boundValue]);
+  const defaultValue = props.defaultValue;
+  React.useEffect(() => {
+    if (boundValue === void 0 && defaultValue !== void 0) {
+      setValue(defaultValue);
+      setSdkValue(defaultValue);
+    }
+  }, [defaultValue]);
   const isTextInputAutoFillFixExperimentEnabled = isExperimentOpen(
     "specs.thunderbolt.TextInputAutoFillFix"
   );
@@ -814,10 +828,16 @@ const TextInput = (props, ref) => {
       onMouseLeave(event);
     }
   };
-  const containerClasses = clsx(style.root, selectors.root, className, {
-    [style.hasLabel]: !!label2,
-    [style.validationIndication]: showErrorIndication
-  });
+  const containerClasses = clsx(
+    style.root,
+    selectors.root,
+    className,
+    !direction && directionStyles.fallbackDirection,
+    {
+      [style.hasLabel]: !!label2,
+      [style.validationIndication]: showErrorIndication
+    }
+  );
   const getMaxLength = () => {
     let updatedMaxLength = maxLength === null ? void 0 : maxLength;
     if (activePhoneFormat) {
@@ -830,11 +850,17 @@ const TextInput = (props, ref) => {
     ariaAttributes: { "aria-label": ariaLabel, ...restAriaAttributes }
   } = getAccessibilityAttributes({ ariaAttributes });
   const hasFocus = () => !!inputRef.current && inputRef.current === document.activeElement;
-  const inputClasses = clsx(style.input, HAS_CUSTOM_FOCUS_CLASSNAME, {
-    [style.hideNumberSpinner]: numberSpinnerHidden,
-    [style.hasPrefix]: !!prefix2
-  });
-  const labelClasses = clsx(style.label);
+  const descriptionId = description ? `description_${id}` : void 0;
+  const inputClasses = clsx(
+    style.input,
+    selectors.input,
+    HAS_CUSTOM_FOCUS_CLASSNAME,
+    {
+      [style.hideNumberSpinner]: numberSpinnerHidden,
+      [style.hasPrefix]: !!prefix2
+    }
+  );
+  const labelClasses = clsx(style.label, selectors.label);
   const textFieldProps = {
     value: formattedValue,
     onChange: getOnChangeFn({
@@ -863,13 +889,20 @@ const TextInput = (props, ref) => {
     max: max === null ? void 0 : max,
     className: inputClasses,
     id: `input_${id}`,
+    dir: inputDirection || void 0,
     onFocus,
     onKeyDown: onKeyPress,
     onBlur: _onBlur,
     "aria-invalid": isInvalid,
     ...ariaLabel && { "aria-label": ariaLabel },
     ...!required && { "aria-required": false },
-    ...restAriaAttributes
+    ...restAriaAttributes,
+    ...descriptionId || restAriaAttributes["aria-describedby"] ? {
+      "aria-describedby": [
+        restAriaAttributes["aria-describedby"],
+        descriptionId
+      ].filter(Boolean).join(" ")
+    } : {}
   };
   return /* @__PURE__ */ jsx(
     "div",
@@ -878,6 +911,7 @@ const TextInput = (props, ref) => {
       ...getDataAttributes(props),
       ref: contentRef,
       className: containerClasses,
+      dir: direction || void 0,
       "data-testid": dataTestId,
       onClick: _onClick,
       onDoubleClick: _onDblClick,
@@ -886,19 +920,27 @@ const TextInput = (props, ref) => {
       lang: language,
       children: /* @__PURE__ */ jsxs($bcdf0525bf22703d$export$2c73285ae9390cec, { ...textFieldProps, children: [
         (label2 || tooltip2) && /* @__PURE__ */ jsxs("div", { className: style.labelRow, children: [
-          label2 && /* @__PURE__ */ jsxs($01b77f81d0f07f68$export$b04be29aa201d4f5, { className: labelClasses, htmlFor: `input_${id}`, children: [
-            label2,
-            required && /* @__PURE__ */ jsx(
-              RequiredIndicator,
-              {
-                className: clsx(
-                  style.requiredIndicator,
-                  selectors.requiredIndicator
-                ),
-                "data-testid": TestIds.requiredIndicator
-              }
-            )
-          ] }),
+          label2 && /* @__PURE__ */ jsxs(
+            $01b77f81d0f07f68$export$b04be29aa201d4f5,
+            {
+              className: labelClasses,
+              htmlFor: `input_${id}`,
+              dir: labelDirection || void 0,
+              children: [
+                label2,
+                required && /* @__PURE__ */ jsx(
+                  RequiredIndicator,
+                  {
+                    className: clsx(
+                      style.requiredIndicator,
+                      selectors.requiredIndicator
+                    ),
+                    "data-testid": TestIds.requiredIndicator
+                  }
+                )
+              ]
+            }
+          ),
           tooltip2 && /* @__PURE__ */ jsxs($4e3b923658d69c60$export$8c610744efcf8a1d, { delay: 0, children: [
             /* @__PURE__ */ jsx(
               $d2b4bc8c273e7be6$export$353f5b6fc5456de1,
@@ -913,9 +955,25 @@ const TextInput = (props, ref) => {
           ] })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: style.inputWrapper, children: [
-          prefix2 && /* @__PURE__ */ jsx("div", { className: style.prefix, "data-testid": "prefix", children: prefix2 }),
+          prefix2 && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: clsx(style.prefix, selectors.prefix),
+              "data-testid": "prefix",
+              children: prefix2
+            }
+          ),
           /* @__PURE__ */ jsx($3985021b0ad6602f$export$f5b8910cec6cf069, { ...inputProps })
         ] }),
+        description && /* @__PURE__ */ jsx(
+          "p",
+          {
+            id: descriptionId,
+            className: clsx(style.helperText, selectors.helperText),
+            "data-testid": "helper-text",
+            children: description
+          }
+        ),
         /* @__PURE__ */ jsx(
           InlineErrorMessage,
           {

package/dist/site/components/TextInput/constants.d.ts

@@ -1,5 +1,9 @@
 export declare const selectors: {
     readonly root: "textInput";
+    readonly label: "textInput__label";
+    readonly input: "textInput__input";
+    readonly prefix: "textInput__prefix";
+    readonly helperText: "textInput__helper";
     readonly requiredIndicator: "textInput__required-indicator";
 };
 export declare const TestIds: {
@@ -14,30 +18,38 @@ export declare const TestIds: {
  */
 export declare const VALUE_MISSING_MESSAGE = "This field is required";
 export declare const DesignStates: {
-    readonly root: {
+    readonly input: {
         readonly hover: {
             readonly displayName: "Hover";
-            readonly className: "textInput--hover";
+            readonly className: "textInput__input--hover";
         };
         readonly focus: {
             readonly displayName: "Focus";
-            readonly className: "textInput--focus";
+            readonly className: "textInput__input--focus";
         };
         readonly error: {
             readonly displayName: "Error";
-            readonly className: "textInput--error";
+            readonly className: "textInput__input--error";
         };
         readonly disabled: {
             readonly displayName: "Disabled";
-            readonly className: "textInput--disabled";
+            readonly className: "textInput__input--disabled";
         };
     };
 };
 export declare const DisplayNames: {
     root: {
         elementDisplayName: string;
+        elements: {
+            label: string;
+            input: string;
+            prefix: string;
+            helperText: string;
+        };
     };
     cssCustomProperties: {
+        helperFont: string;
+        helperColor: string;
         textColor: string;
         placeholderTextColor: string;
         requiredTextColor: string;
@@ -47,7 +59,6 @@ export declare const DisplayNames: {
         labelMarginBottom: string;
         labelPaddingInlineStart: string;
         labelPaddingInlineEnd: string;
-        align: string;
         labelAlign: string;
         inputAlign: string;
     };
@@ -70,6 +81,7 @@ export declare const DisplayNames: {
         label: string;
         placeholder: string;
         tooltip: string;
+        description: string;
         autoComplete: string;
         readOnly: string;
         required: string;

package/dist/site/components/TextInput/css.css

@@ -28,7 +28,7 @@
   --textPaddingInlineStart: 0.75rem;
   --textPaddingInlineEnd: 0.75rem;
   --textPaddingTop: 0.5rem;
-  --inputAlign: inherit;
+  --inputAlign: left;
   --labelBottomMargin: 0.5rem;
   --labelPaddingInlineStart: 0;
   --labelPaddingInlineEnd: 0;
@@ -49,7 +49,12 @@
     normal normal normal 14px/1.6em madefor-text, helveticaneuew01-45ligh,
     helveticaneuew02-45ligh, helveticaneuew10-45ligh, sans-serif;
   --labelTextColor: #222222;
+  --helperFont:
+    normal normal normal 14px/1.4em madefor-text, helveticaneuew01-45ligh,
+    helveticaneuew02-45ligh, helveticaneuew10-45ligh, sans-serif;
+  --helperColor: #868686;
   --prefixWidth: 50px;
+  --inputHeight: 42px;
   display: flex;
   flex-direction: column;
   text-align: var(--align, start);
@@ -87,7 +92,7 @@
   flex: 1;
   text-overflow: ellipsis;
   text-align: var(--inputAlign, "inherit");
-  min-height: 100%;
+  min-height: var(--inputHeight, 42px);
   border-radius: var(--borderRadius);
   background: var(--background);
   color: var(--textColor);
@@ -132,22 +137,22 @@
   border-color: var(--focusBorderColor, #a3d9f6);
   border-width: var(--focusBorderWidth, 1px);
 }
-.root__zQlRz.textInput--hover .input__fyTfx {
+.root__zQlRz .input__fyTfx.textInput__input--hover {
   background-color: var(--hoverBackground, #ffffff);
   border-color: var(--hoverBorderColor, #a3d9f6);
   border-width: var(--hoverBorderWidth, 1px);
 }
-.root__zQlRz.textInput--focus .input__fyTfx {
+.root__zQlRz .input__fyTfx.textInput__input--focus {
   background-color: var(--focusBackground, #ffffff);
   border-color: var(--focusBorderColor, #a3d9f6);
   border-width: var(--focusBorderWidth, 1px);
 }
-.root__zQlRz.textInput--error .input__fyTfx {
+.root__zQlRz .input__fyTfx.textInput__input--error {
   background-color: var(--errorBackground, #ffffff);
   border-color: var(--errorBorderColor, #e3e3e3);
   border-width: var(--errorBorderWidth, 1px);
 }
-.root__zQlRz.textInput--disabled .input__fyTfx {
+.root__zQlRz .input__fyTfx.textInput__input--disabled {
   background-color: var(--disabledBackground, #f5f5f5);
   color: var(--disabledTextColor, #999);
   border-color: var(--disabledBorderColor, #e3e3e3);
@@ -165,6 +170,12 @@
   border-color: #a3d9f6;
   border-width: 1px;
 }
+.root__zQlRz .helperText__SfMAH {
+  margin: 0.25rem 0 0;
+  font: var(--helperFont);
+  color: var(--helperColor);
+  text-align: var(--align, start);
+}
 .root__zQlRz .label__mbGIM {
   display: none;
 }
@@ -231,4 +242,7 @@
   margin-inline-start: 0.2em;
   vertical-align: super;
   color: inherit;
+}
+.fallbackDirection__HeRgn:not([dir]) {
+  direction: var(--wix-opt-in-direction);
 }

package/dist/site/components/TextInput/manifest.js

@@ -1,9 +1,15 @@
-import { I as INTERACTIONS, D as DATA, C as CSS_PROPERTIES, b as DISPLAY_GROUPS, N as NativeStateType, L as LAYOUT, A as Archetype } from "../chunks/chunk-V7QOLP3D.js";
+import { I as INTERACTIONS, D as DATA, b as DISPLAY_GROUPS, C as CSS_PROPERTIES, E as ELEMENTS, N as NativeStateType, L as LAYOUT, A as Archetype } from "../chunks/chunk-V7QOLP3D.js";
 import { D as DesignStates, a as DisplayNames, s as selectors } from "../chunks/constants3.js";
 import { w as withSpec, g as getSelector } from "../chunks/manifest.js";
 import { I as IS_SUPPORT_DESIGN_STATE_SPEC } from "../chunks/specs.js";
 import { m as manifestFocusable, b as manifestInputable, a as manifestChangeable } from "../chunks/manifestSdkMixins.js";
 import { m as manifestValidation } from "../chunks/manifest2.js";
+const designState = (s, pseudoClass) => withSpec({
+  spec: IS_SUPPORT_DESIGN_STATE_SPEC,
+  displayName: s.displayName,
+  className: s.className,
+  ...pseudoClass ? { pseudoClass } : {}
+});
 const manifest = {
   id: "e95f3cfd-a78d-4d7c-addb-c93182193857",
   type: "wixEditorElements.TextInput__DEV__v2",
@@ -15,8 +21,7 @@ const manifest = {
         pixels: 280
       },
       height: {
-        sizingType: LAYOUT.SIZING_TYPE.pixels,
-        pixels: 42
+        sizingType: LAYOUT.SIZING_TYPE.content
       }
     }
   },
@@ -37,35 +42,259 @@ const manifest = {
     archetype: Archetype.TextInput,
     layout: {
       resizeDirection: LAYOUT.RESIZE_DIRECTION.horizontalAndVertical,
-      contentResizeDirection: LAYOUT.CONTENT_RESIZE_DIRECTION.horizontal,
-      disableStretching: false,
+      contentResizeDirection: LAYOUT.CONTENT_RESIZE_DIRECTION.vertical,
+      disableStretching: true,
       disablePositioning: false
     },
-    states: {
-      hover: withSpec({
-        spec: IS_SUPPORT_DESIGN_STATE_SPEC,
-        displayName: DesignStates.root.hover.displayName,
-        className: DesignStates.root.hover.className,
-        pseudoClass: NativeStateType.hover
-      }),
-      focus: withSpec({
-        spec: IS_SUPPORT_DESIGN_STATE_SPEC,
-        displayName: DesignStates.root.focus.displayName,
-        className: DesignStates.root.focus.className,
-        pseudoClass: NativeStateType.focus
-      }),
-      error: withSpec({
-        spec: IS_SUPPORT_DESIGN_STATE_SPEC,
-        displayName: DesignStates.root.error.displayName,
-        className: DesignStates.root.error.className
-      }),
-      disabled: withSpec({
-        spec: IS_SUPPORT_DESIGN_STATE_SPEC,
-        displayName: DesignStates.root.disabled.displayName,
-        className: DesignStates.root.disabled.className,
-        pseudoClass: NativeStateType.disabled,
-        props: { isDisabled: true }
-      })
+    elements: {
+      label: {
+        elementType: ELEMENTS.ELEMENT_TYPE.inlineElement,
+        inlineElement: {
+          displayName: DisplayNames.root.elements.label,
+          selector: getSelector(selectors.label),
+          behaviors: { selectable: false },
+          displayGroups: {
+            labelPaddingGroup: {
+              groupType: DISPLAY_GROUPS.GROUP_TYPE.padding,
+              padding: {
+                left: "labelPaddingInlineStart",
+                right: "labelPaddingInlineEnd"
+              }
+            }
+          },
+          cssCustomProperties: {
+            labelFont: {
+              displayName: DisplayNames.cssCustomProperties.labelFont,
+              cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.font
+            },
+            labelTextColor: {
+              displayName: DisplayNames.cssCustomProperties.labelTextColor,
+              cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.color
+            },
+            requiredTextColor: {
+              displayName: DisplayNames.cssCustomProperties.requiredTextColor,
+              cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.color
+            },
+            labelMarginBottom: {
+              displayName: DisplayNames.cssCustomProperties.labelMarginBottom,
+              cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.marginBottom
+            },
+            labelPaddingInlineStart: {
+              displayName: DisplayNames.cssCustomProperties.labelPaddingInlineStart,
+              cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.paddingInlineStart
+            },
+            labelPaddingInlineEnd: {
+              displayName: DisplayNames.cssCustomProperties.labelPaddingInlineEnd,
+              cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.paddingInlineEnd
+            },
+            labelAlign: {
+              displayName: DisplayNames.cssCustomProperties.labelAlign,
+              cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.customEnum,
+              defaultValue: "start",
+              customEnum: {
+                cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.string,
+                options: [
+                  {
+                    value: "start",
+                    displayName: DisplayNames.options.start,
+                    appliedStyles: [
+                      { property: "--labelAlign", value: "start" },
+                      {
+                        property: "--labelPadding_start",
+                        value: "var(--labelPadding)"
+                      },
+                      { property: "--labelPadding_end", value: "20" }
+                    ]
+                  },
+                  {
+                    value: "center",
+                    displayName: DisplayNames.options.center,
+                    appliedStyles: [
+                      { property: "--labelAlign", value: "center" },
+                      { property: "--labelPadding_start", value: "0" },
+                      { property: "--labelPadding_end", value: "0" }
+                    ]
+                  },
+                  {
+                    value: "end",
+                    displayName: DisplayNames.options.end,
+                    appliedStyles: [
+                      { property: "--labelAlign", value: "end" },
+                      { property: "--labelPadding_start", value: "20" },
+                      {
+                        property: "--labelPadding_end",
+                        value: "var(--labelPadding)"
+                      }
+                    ]
+                  }
+                ]
+              }
+            }
+          }
+        }
+      },
+      input: {
+        elementType: ELEMENTS.ELEMENT_TYPE.inlineElement,
+        inlineElement: {
+          displayName: DisplayNames.root.elements.input,
+          selector: getSelector(selectors.input),
+          behaviors: { selectable: false },
+          states: {
+            hover: designState(
+              DesignStates.input.hover,
+              NativeStateType.hover
+            ),
+            focus: designState(
+              DesignStates.input.focus,
+              NativeStateType.focus
+            ),
+            error: designState(DesignStates.input.error),
+            disabled: {
+              ...designState(
+                DesignStates.input.disabled,
+                NativeStateType.disabled
+              ),
+              props: { isDisabled: true }
+            }
+          },
+          displayGroups: {
+            textPaddingGroup: {
+              groupType: DISPLAY_GROUPS.GROUP_TYPE.padding,
+              padding: {
+                top: "textPaddingTop",
+                bottom: "textPaddingBottom",
+                left: "textPaddingInlineStart",
+                right: "textPaddingInlineEnd"
+              }
+            },
+            borderGroup: {
+              groupType: DISPLAY_GROUPS.GROUP_TYPE.border,
+              border: {
+                width: "borderWidth",
+                color: "borderColor"
+              }
+            }
+          },
+          cssCustomProperties: {
+            boxShadow: {
+              cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.boxShadow
+            },
+            borderRadius: {
+              cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.borderRadius
+            },
+            font: {
+              cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.font
+            },
+            borderWidth: {
+              cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.borderWidth
+            },
+            borderColor: {
+              cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.borderColor
+            },
+            background: {
+              cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.background
+            },
+            textColor: {
+              displayName: DisplayNames.cssCustomProperties.textColor,
+              cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.color
+            },
+            placeholderTextColor: {
+              displayName: DisplayNames.cssCustomProperties.placeholderTextColor,
+              cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.color
+            },
+            textPaddingTop: {
+              cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.paddingTop
+            },
+            textPaddingBottom: {
+              cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.paddingBottom
+            },
+            textPaddingInlineStart: {
+              cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.paddingInlineStart
+            },
+            textPaddingInlineEnd: {
+              cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.paddingInlineEnd
+            },
+            inputAlign: {
+              displayName: DisplayNames.cssCustomProperties.inputAlign,
+              cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.customEnum,
+              defaultValue: "start",
+              customEnum: {
+                cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.string,
+                options: [
+                  {
+                    value: "start",
+                    displayName: DisplayNames.options.start,
+                    appliedStyles: [
+                      { property: "--inputAlign", value: "left" },
+                      { property: "--textPadding", value: "3" },
+                      { property: "--textPadding_start", value: "3" },
+                      { property: "--textPadding_end", value: "3" }
+                    ]
+                  },
+                  {
+                    value: "center",
+                    displayName: DisplayNames.options.center,
+                    appliedStyles: [
+                      { property: "--inputAlign", value: "center" },
+                      { property: "--textPadding", value: "3" },
+                      {
+                        property: "--textPadding_start",
+                        value: "var(--textPadding)"
+                      },
+                      { property: "--textPadding_end", value: "3" }
+                    ]
+                  },
+                  {
+                    value: "end",
+                    displayName: DisplayNames.options.end,
+                    appliedStyles: [
+                      { property: "--inputAlign", value: "right" },
+                      { property: "--textPadding", value: "3" },
+                      { property: "--textPadding_start", value: "3" },
+                      {
+                        property: "--textPadding_end",
+                        value: "var(--textPadding)"
+                      }
+                    ]
+                  }
+                ]
+              }
+            }
+          }
+        }
+      },
+      prefix: {
+        elementType: ELEMENTS.ELEMENT_TYPE.inlineElement,
+        inlineElement: {
+          displayName: DisplayNames.root.elements.prefix,
+          selector: getSelector(selectors.prefix),
+          behaviors: { selectable: false },
+          cssCustomProperties: {
+            prefixFont: {
+              displayName: DisplayNames.cssCustomProperties.prefixFont,
+              cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.font
+            }
+          }
+        }
+      },
+      helperText: {
+        elementType: ELEMENTS.ELEMENT_TYPE.inlineElement,
+        inlineElement: {
+          displayName: DisplayNames.root.elements.helperText,
+          selector: getSelector(selectors.helperText),
+          behaviors: { selectable: false },
+          cssCustomProperties: {
+            helperFont: {
+              displayName: DisplayNames.cssCustomProperties.helperFont,
+              cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.font
+            },
+            helperColor: {
+              displayName: DisplayNames.cssCustomProperties.helperColor,
+              cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.color
+            }
+          }
+        }
+      }
     },
     displayGroups: {
       orderedDataGroup: {
@@ -81,6 +310,7 @@ const manifest = {
             "label",
             "placeholder",
             "tooltip",
+            "description",
             "prefix",
             "autocompleteToken",
             "pattern",
@@ -93,277 +323,6 @@ const manifest = {
             "errorMessageType"
           ]
         }
-      },
-      textPaddingGroup: {
-        groupType: DISPLAY_GROUPS.GROUP_TYPE.padding,
-        padding: {
-          top: "textPaddingTop",
-          bottom: "textPaddingBottom",
-          left: "textPaddingInlineStart",
-          right: "textPaddingInlineEnd"
-        }
-      },
-      labelPaddingGroup: {
-        groupType: DISPLAY_GROUPS.GROUP_TYPE.padding,
-        padding: {
-          left: "labelPaddingInlineStart",
-          right: "labelPaddingInlineEnd"
-        }
-      },
-      borderGroup: {
-        groupType: DISPLAY_GROUPS.GROUP_TYPE.border,
-        border: {
-          width: "borderWidth",
-          color: "borderColor"
-        }
-      }
-    },
-    cssCustomProperties: {
-      boxShadow: {
-        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.boxShadow
-      },
-      borderRadius: {
-        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.borderRadius
-      },
-      font: {
-        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.font
-      },
-      borderWidth: {
-        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.borderWidth
-      },
-      borderColor: {
-        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.borderColor
-      },
-      background: {
-        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.background
-      },
-      textColor: {
-        displayName: DisplayNames.cssCustomProperties.textColor,
-        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.color
-      },
-      placeholderTextColor: {
-        displayName: DisplayNames.cssCustomProperties.placeholderTextColor,
-        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.color
-      },
-      requiredTextColor: {
-        displayName: DisplayNames.cssCustomProperties.requiredTextColor,
-        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.color
-      },
-      textPaddingTop: {
-        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.paddingTop
-      },
-      textPaddingBottom: {
-        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.paddingBottom
-      },
-      textPaddingInlineStart: {
-        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.paddingInlineStart
-      },
-      textPaddingInlineEnd: {
-        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.paddingInlineEnd
-      },
-      prefixFont: {
-        displayName: DisplayNames.cssCustomProperties.prefixFont,
-        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.font
-      },
-      labelFont: {
-        displayName: DisplayNames.cssCustomProperties.labelFont,
-        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.font
-      },
-      labelTextColor: {
-        displayName: DisplayNames.cssCustomProperties.labelTextColor,
-        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.color
-      },
-      labelMarginBottom: {
-        displayName: DisplayNames.cssCustomProperties.labelMarginBottom,
-        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.marginBottom
-      },
-      labelPaddingInlineStart: {
-        displayName: DisplayNames.cssCustomProperties.labelPaddingInlineStart,
-        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.paddingInlineStart
-      },
-      labelPaddingInlineEnd: {
-        displayName: DisplayNames.cssCustomProperties.labelPaddingInlineEnd,
-        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.paddingInlineEnd
-      },
-      align: {
-        displayName: DisplayNames.cssCustomProperties.align,
-        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.customEnum,
-        defaultValue: "left",
-        customEnum: {
-          cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.string,
-          options: [
-            {
-              value: "start",
-              displayName: DisplayNames.options.start,
-              appliedStyles: [
-                {
-                  property: "--align",
-                  value: "start"
-                }
-              ]
-            },
-            {
-              value: "center",
-              displayName: DisplayNames.options.center,
-              appliedStyles: [
-                {
-                  property: "--align",
-                  value: "center"
-                }
-              ]
-            },
-            {
-              value: "end",
-              displayName: DisplayNames.options.end,
-              appliedStyles: [
-                {
-                  property: "--align",
-                  value: "end"
-                }
-              ]
-            }
-          ]
-        }
-      },
-      labelAlign: {
-        displayName: DisplayNames.cssCustomProperties.labelAlign,
-        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.customEnum,
-        defaultValue: "left",
-        customEnum: {
-          cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.string,
-          options: [
-            {
-              value: "start",
-              displayName: DisplayNames.options.start,
-              appliedStyles: [
-                {
-                  property: "--labelAlign",
-                  value: "start"
-                },
-                {
-                  property: "--labelPadding_start",
-                  value: "var(--labelPadding)"
-                },
-                {
-                  property: "--labelPadding_end",
-                  value: "20"
-                }
-              ]
-            },
-            {
-              value: "center",
-              displayName: DisplayNames.options.center,
-              appliedStyles: [
-                {
-                  property: "--labelAlign",
-                  value: "center"
-                },
-                {
-                  property: "--labelPadding_start",
-                  value: "0"
-                },
-                {
-                  property: "--labelPadding_end",
-                  value: "0"
-                }
-              ]
-            },
-            {
-              value: "end",
-              displayName: DisplayNames.options.end,
-              appliedStyles: [
-                {
-                  property: "--labelAlign",
-                  value: "end"
-                },
-                {
-                  property: "--labelPadding_start",
-                  value: "20"
-                },
-                {
-                  property: "--labelPadding_end",
-                  value: "var(--labelPadding)"
-                }
-              ]
-            }
-          ]
-        }
-      },
-      inputAlign: {
-        displayName: DisplayNames.cssCustomProperties.inputAlign,
-        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.customEnum,
-        defaultValue: "left",
-        customEnum: {
-          cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.string,
-          options: [
-            {
-              value: "start",
-              displayName: DisplayNames.options.start,
-              appliedStyles: [
-                {
-                  property: "--inputAlign",
-                  value: "start"
-                },
-                {
-                  property: "--textPadding",
-                  value: "3"
-                },
-                {
-                  property: "--textPadding_start",
-                  value: "3"
-                },
-                {
-                  property: "--textPadding_end",
-                  value: "3"
-                }
-              ]
-            },
-            {
-              value: "center",
-              displayName: DisplayNames.options.center,
-              appliedStyles: [
-                {
-                  property: "--inputAlign",
-                  value: "center"
-                },
-                {
-                  property: "--textPadding",
-                  value: "3"
-                },
-                {
-                  property: "--textPadding_start",
-                  value: "var(--textPadding)"
-                },
-                {
-                  property: "--textPadding_end",
-                  value: "3"
-                }
-              ]
-            },
-            {
-              value: "end",
-              displayName: DisplayNames.options.end,
-              appliedStyles: [
-                {
-                  property: "--inputAlign",
-                  value: "end"
-                },
-                {
-                  property: "--textPadding",
-                  value: "3"
-                },
-                {
-                  property: "--textPadding_start",
-                  value: "3"
-                },
-                {
-                  property: "--textPadding_end",
-                  value: "var(--textPadding)"
-                }
-              ]
-            }
-          ]
-        }
       }
     },
     data: {
@@ -400,6 +359,7 @@ const manifest = {
       inputType: {
         displayName: DisplayNames.data.inputType,
         dataType: DATA.DATA_TYPE.textEnum,
+        defaultValue: "text",
         [DATA.DATA_TYPE.textEnum]: {
           options: [
             { value: "text", displayName: DisplayNames.options.text },
@@ -476,6 +436,14 @@ const manifest = {
           maxLength: 400
         }
       },
+      description: {
+        displayName: DisplayNames.data.description,
+        dataType: DATA.DATA_TYPE.text,
+        defaultValue: "",
+        [DATA.DATA_TYPE.text]: {
+          maxLength: 400
+        }
+      },
       // Accessibility
       a11y: {
         dataType: DATA.DATA_TYPE.a11y,

package/dist/site/components/chunks/constants3.js

@@ -1,5 +1,9 @@
 const selectors = {
   root: "textInput",
+  label: "textInput__label",
+  input: "textInput__input",
+  prefix: "textInput__prefix",
+  helperText: "textInput__helper",
   requiredIndicator: "textInput__required-indicator"
 };
 const TestIds = {
@@ -8,18 +12,29 @@ const TestIds = {
 };
 const VALUE_MISSING_MESSAGE = "This field is required";
 const DesignStates = {
-  root: {
-    hover: { displayName: "Hover", className: "textInput--hover" },
-    focus: { displayName: "Focus", className: "textInput--focus" },
-    error: { displayName: "Error", className: "textInput--error" },
-    disabled: { displayName: "Disabled", className: "textInput--disabled" }
+  input: {
+    hover: { displayName: "Hover", className: "textInput__input--hover" },
+    focus: { displayName: "Focus", className: "textInput__input--focus" },
+    error: { displayName: "Error", className: "textInput__input--error" },
+    disabled: {
+      displayName: "Disabled",
+      className: "textInput__input--disabled"
+    }
   }
 };
 const DisplayNames = {
   root: {
-    elementDisplayName: "TextInput"
+    elementDisplayName: "TextInput",
+    elements: {
+      label: "Label",
+      input: "Input",
+      prefix: "Prefix",
+      helperText: "Helper text"
+    }
   },
   cssCustomProperties: {
+    helperFont: "Helper text font",
+    helperColor: "Helper text color",
     textColor: "Text color",
     placeholderTextColor: "Placeholder text color",
     requiredTextColor: "Required text color",
@@ -29,7 +44,6 @@ const DisplayNames = {
     labelMarginBottom: "Label bottom margin",
     labelPaddingInlineStart: "Label left padding",
     labelPaddingInlineEnd: "Label right padding",
-    align: "Alignment",
     labelAlign: "Label alignment",
     inputAlign: "Input alignment"
   },
@@ -52,6 +66,7 @@ const DisplayNames = {
     label: "Label text",
     placeholder: "Placeholder text",
     tooltip: "Tooltip",
+    description: "Helper text",
     autoComplete: "Autocomplete",
     readOnly: "Read only",
     required: "Required",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/editor-react-components",
-  "version": "1.2482.0",
+  "version": "1.2483.0",
   "description": "React components for the Wix Editor",
   "license": "MIT",
   "type": "module",
@@ -197,5 +197,5 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "falconPackageHash": "b747799e602beb519b1cf73c00ce222b5a928999eb3f20f857f9e21b"
+  "falconPackageHash": "6d1cc6d0b86f756faf4c894fa6ceef9f06d5ebe66f24de48cf6ce204"
 }