@itcase/forms 1.0.56 → 1.0.58

package/dist/css/form/Field/Input/Input.css

@@ -19,6 +19,7 @@
         }
       }
     }
+
     &_error {
       & .input {
         border: solid 1px var(--input-error-border);

package/dist/css/form/Form/Form.css

@@ -7,40 +7,6 @@
     }
   }
 }
-.form {
-  &__header {
-    width: 100%;
-    position: relative;
-    &-wrapper {
-      position: relative;
-    }
-    &-title {
-      width: 100%;
-      position: relative;
-      &-text {
-        width: 100%;
-        max-width: var(--max);
-        color: var(--color-surface-text-primary);
-        margin: 0 auto;
-        position: relative;
-        align-self: center;
-        @mixin h4 500;
-      }
-      &-desc {
-        width: 100%;
-        color: var(--color-surface-text-primary);
-        padding: 12px 0 0 0;
-        position: relative;
-        @mixin text-xl;
-        @media (--mobile) {
-          padding: 24px 0 0 0;
-          grid-row-start: 3;
-          grid-column: 1 / 3;
-        }
-      }
-    }
-  }
-}
 .form {
   &__loader {
     width: 100%;
@@ -70,10 +36,6 @@
 .form {
   &__item {
     &&_state_required {
-      & ^&-inner {
-        &-item {
-        }
-      }
     }
   }
 }
@@ -153,10 +115,10 @@
 .form-notification {
   &_type {
     &_sticky {
-      z-index: 100;
       position: sticky;
-      top: 20px;
       left: 0;
+      top: 20px;
+      z-index: 100;
     }
     &_global {
       margin: 0 0 16px 0;
@@ -179,8 +141,8 @@
     ^&__button {
       width: 100%;
       position: fixed;
-      bottom: 0;
       left: 0;
+      bottom: 0;
       z-index: 100;
     }
   }

package/dist/css/form/Form/css/__item/form__item_state_required.css

@@ -1,10 +1,6 @@
 .form {
   &__item {
     &&_state_required {
-      & ^&-inner {
-        &-item {
-        }
-      }
     }
   }
 }

package/dist/css/form/Form/css/form-notification/form-notification.css

@@ -1,10 +1,10 @@
 .form-notification {
   &_type {
     &_sticky {
-      z-index: 100;
       position: sticky;
-      top: 20px;
       left: 0;
+      top: 20px;
+      z-index: 100;
     }
     &_global {
       margin: 0 0 16px 0;
@@ -15,3 +15,4 @@
     border-radius: 12px;
   }
 }
+

package/dist/itcase-forms.cjs.js

@@ -153,6 +153,9 @@ function FieldWrapperBase(props) {
     helpTextSize,
     helpTextWeight,
     helpTextColor,
+    errorBorderWidth,
+    errorBorderColor,
+    errorFill,
     message,
     messageTextColor,
     messageTextSize,
@@ -220,19 +223,19 @@ function FieldWrapperBase(props) {
   return /*#__PURE__*/React__default.default.createElement(Tag, {
     className: clsx__default.default(formFieldClass, 'form__item', 'form-field', type && `form-field_type_${type}`, set && `form-field_set_${set}`, sizeClass, fillClass, shapeClass, isDisabled && `form-field_state_disabled`, isHidden && `form-field_state_hidden`, directionClass, widthClass),
     "data-tour": dataTour,
-    "data-testid": `${inputName}Field`,
+    "data-test-id": `${inputName}Field`,
     style: formFieldStyles
   }, before, (label || labelHidden) && /*#__PURE__*/React__default.default.createElement("div", {
     htmlFor: id,
     className: clsx__default.default('form-field__label'),
-    "data-testid": `${inputName}FieldLabel`
+    "data-test-id": `${inputName}FieldLabel`
   }, /*#__PURE__*/React__default.default.createElement(Text.Text, {
     size: labelTextSize,
     textWeight: labelTextWidth,
     textColor: labelTextColor
   }, label, labelHidden && '\u00A0')), desc && /*#__PURE__*/React__default.default.createElement("div", {
     className: "form-field__desc",
-    "data-testid": `${inputName}FieldDesc`
+    "data-test-id": `${inputName}FieldDesc`
   }, /*#__PURE__*/React__default.default.createElement(Text.Text, {
     size: descTextSize,
     textWeight: descTextWidth,
@@ -249,7 +252,7 @@ function FieldWrapperBase(props) {
     fill: dividerFill
   })), showMessage && /*#__PURE__*/React__default.default.createElement("div", {
     className: "form-field__message",
-    "data-testid": `${inputName}FieldMessage`
+    "data-test-id": `${inputName}FieldMessage`
   }, Boolean(showError) && error && typeof error === 'string' && /*#__PURE__*/React__default.default.createElement(Text.Text, {
     className: "form-field__message-item form-field__message-item_type-error",
     size: errorMessageTextSize,
@@ -257,16 +260,16 @@ function FieldWrapperBase(props) {
     textColor: errorMessageTextColor,
     id: `${inputName}-error`,
     dataTestId: `${inputName}FieldMessageError`
-  }, error), Boolean(helpText) && (!error || typeof error !== 'string') && /*#__PURE__*/React__default.default.createElement(Text.Text, {
+  }, error), Boolean(helpText) && Boolean(!showError) && /*#__PURE__*/React__default.default.createElement(Text.Text, {
     className: "form-field__message-item form-field__message-item_type_help-text",
     size: helpTextSize,
     textWeight: helpTextWeight,
     textColor: helpTextColor,
     dataTestId: `${inputName}FieldMessageHelpText`
   }, helpText), (!showError && !helpText || showError && !helpText && (!error || typeof error !== 'string')) && /*#__PURE__*/React__default.default.createElement(Text.Text, {
-    className: "form-field__message-item form-field__message-item_type_message",
+    className: "form-field__message-item form-field__message-item_type_help-text",
     size: messageTextSize,
-    dataTestId: `${inputName}FieldMessagePlaceholder`
+    dataTestId: `${inputName}FieldMessageHelpText`
   }, '\u00A0')), after);
 }
 FieldWrapperBase.defaultProps = {
@@ -308,7 +311,7 @@ FieldWrapperBase.propTypes = {
   isRequired: PropTypes__default.default.bool,
   itemType: PropTypes__default.default.string,
   label: PropTypes__default.default.any,
-  labelHidden: PropTypes__default.default.string,
+  labelHidden: PropTypes__default.default.bool,
   labelTextColor: PropTypes__default.default.string,
   labelTextSize: PropTypes__default.default.string,
   labelTextWidth: PropTypes__default.default.string,
@@ -319,7 +322,7 @@ FieldWrapperBase.propTypes = {
   messageTextWeight: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.number]),
   messageTextWidth: PropTypes__default.default.string,
   metaActive: PropTypes__default.default.bool,
-  metaError: PropTypes__default.default.string,
+  metaError: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.bool]),
   metaModifiedSinceLastSubmit: PropTypes__default.default.bool,
   metaSubmitError: PropTypes__default.default.string,
   metaSubmitFailed: PropTypes__default.default.bool,
@@ -2240,7 +2243,9 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
         className: clsx__default.default(className, 'form', set && `form_set_${set}`, type && `form_type_${type}`, directionClass, fillClass, shapeClass, elevationClass),
         name: formName,
         "data-tour": dataTour,
-        "data-testId": dataTestId,
+        "data-test-id": dataTestId
+        // We no need set reference to html element, we need reference to "final-form" instance
+        ,
         ref: () => onRefFormInstance(form),
         onSubmit: handleSubmit,
         autoComplete: disableFieldsAutoComplete ? 'off' : undefined,

package/dist/itcase-forms.esm.js

@@ -143,6 +143,9 @@ function FieldWrapperBase(props) {
     helpTextSize,
     helpTextWeight,
     helpTextColor,
+    errorBorderWidth,
+    errorBorderColor,
+    errorFill,
     message,
     messageTextColor,
     messageTextSize,
@@ -210,19 +213,19 @@ function FieldWrapperBase(props) {
   return /*#__PURE__*/React.createElement(Tag, {
     className: clsx(formFieldClass, 'form__item', 'form-field', type && `form-field_type_${type}`, set && `form-field_set_${set}`, sizeClass, fillClass, shapeClass, isDisabled && `form-field_state_disabled`, isHidden && `form-field_state_hidden`, directionClass, widthClass),
     "data-tour": dataTour,
-    "data-testid": `${inputName}Field`,
+    "data-test-id": `${inputName}Field`,
     style: formFieldStyles
   }, before, (label || labelHidden) && /*#__PURE__*/React.createElement("div", {
     htmlFor: id,
     className: clsx('form-field__label'),
-    "data-testid": `${inputName}FieldLabel`
+    "data-test-id": `${inputName}FieldLabel`
   }, /*#__PURE__*/React.createElement(Text, {
     size: labelTextSize,
     textWeight: labelTextWidth,
     textColor: labelTextColor
   }, label, labelHidden && '\u00A0')), desc && /*#__PURE__*/React.createElement("div", {
     className: "form-field__desc",
-    "data-testid": `${inputName}FieldDesc`
+    "data-test-id": `${inputName}FieldDesc`
   }, /*#__PURE__*/React.createElement(Text, {
     size: descTextSize,
     textWeight: descTextWidth,
@@ -239,7 +242,7 @@ function FieldWrapperBase(props) {
     fill: dividerFill
   })), showMessage && /*#__PURE__*/React.createElement("div", {
     className: "form-field__message",
-    "data-testid": `${inputName}FieldMessage`
+    "data-test-id": `${inputName}FieldMessage`
   }, Boolean(showError) && error && typeof error === 'string' && /*#__PURE__*/React.createElement(Text, {
     className: "form-field__message-item form-field__message-item_type-error",
     size: errorMessageTextSize,
@@ -247,16 +250,16 @@ function FieldWrapperBase(props) {
     textColor: errorMessageTextColor,
     id: `${inputName}-error`,
     dataTestId: `${inputName}FieldMessageError`
-  }, error), Boolean(helpText) && (!error || typeof error !== 'string') && /*#__PURE__*/React.createElement(Text, {
+  }, error), Boolean(helpText) && Boolean(!showError) && /*#__PURE__*/React.createElement(Text, {
     className: "form-field__message-item form-field__message-item_type_help-text",
     size: helpTextSize,
     textWeight: helpTextWeight,
     textColor: helpTextColor,
     dataTestId: `${inputName}FieldMessageHelpText`
   }, helpText), (!showError && !helpText || showError && !helpText && (!error || typeof error !== 'string')) && /*#__PURE__*/React.createElement(Text, {
-    className: "form-field__message-item form-field__message-item_type_message",
+    className: "form-field__message-item form-field__message-item_type_help-text",
     size: messageTextSize,
-    dataTestId: `${inputName}FieldMessagePlaceholder`
+    dataTestId: `${inputName}FieldMessageHelpText`
   }, '\u00A0')), after);
 }
 FieldWrapperBase.defaultProps = {
@@ -298,7 +301,7 @@ FieldWrapperBase.propTypes = {
   isRequired: PropTypes.bool,
   itemType: PropTypes.string,
   label: PropTypes.any,
-  labelHidden: PropTypes.string,
+  labelHidden: PropTypes.bool,
   labelTextColor: PropTypes.string,
   labelTextSize: PropTypes.string,
   labelTextWidth: PropTypes.string,
@@ -309,7 +312,7 @@ FieldWrapperBase.propTypes = {
   messageTextWeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   messageTextWidth: PropTypes.string,
   metaActive: PropTypes.bool,
-  metaError: PropTypes.string,
+  metaError: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   metaModifiedSinceLastSubmit: PropTypes.bool,
   metaSubmitError: PropTypes.string,
   metaSubmitFailed: PropTypes.bool,
@@ -2230,7 +2233,9 @@ const FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
         className: clsx(className, 'form', set && `form_set_${set}`, type && `form_type_${type}`, directionClass, fillClass, shapeClass, elevationClass),
         name: formName,
         "data-tour": dataTour,
-        "data-testId": dataTestId,
+        "data-test-id": dataTestId
+        // We no need set reference to html element, we need reference to "final-form" instance
+        ,
         ref: () => onRefFormInstance(form),
         onSubmit: handleSubmit,
         autoComplete: disableFieldsAutoComplete ? 'off' : undefined,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/forms",
-  "version": "1.0.56",
+  "version": "1.0.58",
   "description": "Forms fields, inputs, etc.",
   "keywords": [],
   "license": "MIT",

package/dist/css/form/Form/css/__header/form__header.css

@@ -1,34 +0,0 @@
-.form {
-  &__header {
-    width: 100%;
-    position: relative;
-    &-wrapper {
-      position: relative;
-    }
-    &-title {
-      width: 100%;
-      position: relative;
-      &-text {
-        width: 100%;
-        max-width: var(--max);
-        color: var(--color-surface-text-primary);
-        margin: 0 auto;
-        position: relative;
-        align-self: center;
-        @mixin h4 500;
-      }
-      &-desc {
-        width: 100%;
-        color: var(--color-surface-text-primary);
-        padding: 12px 0 0 0;
-        position: relative;
-        @mixin text-xl;
-        @media (--mobile) {
-          padding: 24px 0 0 0;
-          grid-row-start: 3;
-          grid-column: 1 / 3;
-        }
-      }
-    }
-  }
-}