@wix/editor-react-components 1.2481.0 → 1.2483.0

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);
 }