@itcase/forms 1.1.36 → 1.1.38

package/dist/css/form/Field/FileInput/FileInput.css

@@ -7,7 +7,7 @@
     outline: 0;
     @mixin easing easeOutQuart, all, 0.2s;
     &_size {
-      @each $size in normal, compact {
+      @each $size in xl, l, m, s {
         &_$(size) {
           ^^&-wrapper {
             padding: var(--fileinput-size-$(size)-padding);
@@ -19,6 +19,7 @@
       display: grid;
       gap: 16px;
       grid-template-columns: repeat(3, minmax(0, 1fr));
+      transition: var(--fileinput-transition);
     }
     ^&__hint {
       width: 100%;
@@ -91,10 +92,10 @@
     }
     &-name {
       width: 100%;
+      white-space: wrap;
       padding: 12px 0 0 0;
-      grid-column-start: 2;
       align-self: flex-start;
-      white-space: wrap;
+      grid-column-start: 2;
       &-inner {
         display: inline-block;
         @mixin word-wrap;
@@ -116,7 +117,7 @@
 .form-dropzone {
   &_shape {
     &_rounded {
-      @each $size in normal, compact {
+      @each $size in xl, l, m, s {
         &.form-dropzone__dropzone_size_$(size) {
           & .form-dropzone__dropzone-wrapper {
             border-radius: var(--fileinput-size-$(size)-shape-rounded);
@@ -155,4 +156,5 @@
 :root {
   --fileinput-size-normal-padding: 16px 16px;
   --fileinput-size-normal-shape-rounded: 6px;
+  --fileinput-transition: all 0.2s ease 0s;
 }

package/dist/css/form/Field/Switch/FormFieldSwitch.css

@@ -1,13 +1,17 @@
 .form-field {
   &-switch {
     width: 100%;
-    flex-direction: row;
     padding: 8px 0;
+    display: grid !important;
+    grid-template-columns: 1fr auto;
     ^&__label {
-      flex: 1;
       display: flex;
+      flex: 1;
       align-items: center;
     }
+    ^&__message {
+      grid-column: 1 / span 2;
+    }
   }
 }
 

package/dist/css/form/FormField/FormField.css

@@ -59,7 +59,7 @@
           padding: 0 4px;
           position: absolute;
           display: flex;
-          top: 0;
+          top: 4px;
           z-index: 2;
           transform: scale(1) translate(8px, 20px);
           transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);

package/dist/itcase-forms.cjs.js

@@ -132,8 +132,8 @@ function useYupValidationSchema(schema, language) {
 function useFieldValidationState(props) {
   const {
     fieldProps = {},
-    meta = {},
-    input = {}
+    input = {},
+    meta = {}
   } = props;
   // Determines if there's a submission error that hasn't been rectified since the last submission.
   const submitError = !meta.modifiedSinceLastSubmit && meta.submitError;
@@ -179,10 +179,10 @@ function useFieldValidationState(props) {
   }, [meta.error, submitError]);
   return {
     errorKey,
-    successKey,
+    errorMessage,
     isErrorState,
-    isValidState,
-    errorMessage
+    successKey,
+    isValidState
   };
 }
 
@@ -371,13 +371,13 @@ function FieldWrapperBase(props) {
   const errorTextColor = props[`${errorKey}MessageTextColor`];
   const errorTextWeight = props[`${errorKey}MessageTextWeight`];
   return /*#__PURE__*/React__default.default.createElement(Tag, {
-    dataTestId: `${inputName}Field`,
-    dataTour: dataTour,
     className: clsx__default.default(formFieldClass, 'form__item', 'form-field', type && `form-field_type_${type}`, sizeClass, fillClass, shapeClass, isDisabled && `form-field_state_disabled`, isHidden && `form-field_state_hidden`, directionClass, widthClass),
+    "data-test-id": `${inputName}Field`,
+    "data-tour": dataTour,
     style: formFieldStyles
   }, before, (label || labelHidden) && /*#__PURE__*/React__default.default.createElement("div", {
-    dataTestId: `${inputName}FieldLabel`,
     className: clsx__default.default('form-field__label'),
+    "data-test-id": `${inputName}FieldLabel`,
     htmlFor: id
   }, /*#__PURE__*/React__default.default.createElement(Text.Text, {
     size: labelTextSize,
@@ -386,8 +386,8 @@ function FieldWrapperBase(props) {
     sizeMobile: labelTextSizeMobile,
     sizeTablet: labelTextSizeTablet
   }, label, labelHidden && '\u00A0')), desc && /*#__PURE__*/React__default.default.createElement("div", {
-    dataTestId: `${inputName}FieldDesc`,
-    className: "form-field__desc"
+    className: "form-field__desc",
+    "data-test-id": `${inputName}FieldDesc`
   }, /*#__PURE__*/React__default.default.createElement(Text.Text, {
     size: descTextSize,
     textColor: descTextColor,
@@ -403,8 +403,8 @@ function FieldWrapperBase(props) {
     size: dividerSize,
     fill: dividerFill
   })), showMessage && /*#__PURE__*/React__default.default.createElement("div", {
-    dataTestId: `${inputName}FieldMessage`,
-    className: "form-field__message"
+    className: "form-field__message",
+    "data-test-id": `${inputName}FieldMessage`
   }, isErrorState && errorMessage && /*#__PURE__*/React__default.default.createElement(Text.Text, {
     id: `${inputName}-error`,
     dataTestId: `${inputName}FieldMessageError`,
@@ -443,8 +443,9 @@ function FieldWrapper(props) {
 
 const defaultDropzoneProps = {
   fill: 'surfaceSecondary',
-  borderColor: 'surfaceBorderTertiary',
-  borderColorHover: 'surfaceBorderQuaternary',
+  fillHover: 'surfaceTertiary',
+  // borderColor: 'surfaceBorderTertiary',
+  // borderColorHover: 'surfaceBorderQuaternary',
   hintTitle: 'Перетащите изображение или выберите файл с компьютера',
   hintTitleTextColor: 'surfaceTextPrimary',
   hintTitleTextSize: 'm',
@@ -1834,7 +1835,7 @@ const defaultSegmentedProps = {
   // Error
   errorAppearance: 'errorPrimary sizeM solid rounded',
   // Required
-  requiredAppearance: 'requirePrimary sizeM solid rounded'
+  requiredAppearance: 'warningPrimary sizeM solid rounded'
 };
 
 function FormFieldSegmented(props) {
@@ -1920,6 +1921,8 @@ const defaultSelectProps = {
   // useValidationAppearanceInputProps
   // Error
   errorAppearance: 'errorPrimary sizeM solid rounded',
+  // Success
+  successAppearance: 'successPrimary sizeM solid rounded',
   // Required
   requiredAppearance: 'requirePrimary sizeM solid rounded'
 };
@@ -2042,6 +2045,8 @@ const defaultSwitchProps = {
   // useValidationAppearanceInputProps
   // Error
   errorAppearance: 'errorPrimary sizeL solid rounded',
+  // Success
+  successAppearance: 'successPrimary sizeL solid rounded',
   // Required
   requiredAppearance: 'requirePrimary sizeL solid rounded'
 };
@@ -2125,6 +2130,8 @@ const defaultTextareaProps = {
   // useValidationAppearanceInputProps
   // Error
   errorAppearance: 'errorPrimary sizeM solid rounded',
+  // Success
+  successAppearance: 'successPrimary sizeM solid rounded',
   // Required
   requiredAppearance: 'requirePrimary sizeM solid rounded'
 };

package/dist/itcase-forms.esm.js

@@ -121,8 +121,8 @@ function useYupValidationSchema(schema, language) {
 function useFieldValidationState(props) {
   const {
     fieldProps = {},
-    meta = {},
-    input = {}
+    input = {},
+    meta = {}
   } = props;
   // Determines if there's a submission error that hasn't been rectified since the last submission.
   const submitError = !meta.modifiedSinceLastSubmit && meta.submitError;
@@ -168,10 +168,10 @@ function useFieldValidationState(props) {
   }, [meta.error, submitError]);
   return {
     errorKey,
-    successKey,
+    errorMessage,
     isErrorState,
-    isValidState,
-    errorMessage
+    successKey,
+    isValidState
   };
 }
 
@@ -360,13 +360,13 @@ function FieldWrapperBase(props) {
   const errorTextColor = props[`${errorKey}MessageTextColor`];
   const errorTextWeight = props[`${errorKey}MessageTextWeight`];
   return /*#__PURE__*/React.createElement(Tag, {
-    dataTestId: `${inputName}Field`,
-    dataTour: dataTour,
     className: clsx(formFieldClass, 'form__item', 'form-field', type && `form-field_type_${type}`, sizeClass, fillClass, shapeClass, isDisabled && `form-field_state_disabled`, isHidden && `form-field_state_hidden`, directionClass, widthClass),
+    "data-test-id": `${inputName}Field`,
+    "data-tour": dataTour,
     style: formFieldStyles
   }, before, (label || labelHidden) && /*#__PURE__*/React.createElement("div", {
-    dataTestId: `${inputName}FieldLabel`,
     className: clsx('form-field__label'),
+    "data-test-id": `${inputName}FieldLabel`,
     htmlFor: id
   }, /*#__PURE__*/React.createElement(Text, {
     size: labelTextSize,
@@ -375,8 +375,8 @@ function FieldWrapperBase(props) {
     sizeMobile: labelTextSizeMobile,
     sizeTablet: labelTextSizeTablet
   }, label, labelHidden && '\u00A0')), desc && /*#__PURE__*/React.createElement("div", {
-    dataTestId: `${inputName}FieldDesc`,
-    className: "form-field__desc"
+    className: "form-field__desc",
+    "data-test-id": `${inputName}FieldDesc`
   }, /*#__PURE__*/React.createElement(Text, {
     size: descTextSize,
     textColor: descTextColor,
@@ -392,8 +392,8 @@ function FieldWrapperBase(props) {
     size: dividerSize,
     fill: dividerFill
   })), showMessage && /*#__PURE__*/React.createElement("div", {
-    dataTestId: `${inputName}FieldMessage`,
-    className: "form-field__message"
+    className: "form-field__message",
+    "data-test-id": `${inputName}FieldMessage`
   }, isErrorState && errorMessage && /*#__PURE__*/React.createElement(Text, {
     id: `${inputName}-error`,
     dataTestId: `${inputName}FieldMessageError`,
@@ -432,8 +432,9 @@ function FieldWrapper(props) {
 
 const defaultDropzoneProps = {
   fill: 'surfaceSecondary',
-  borderColor: 'surfaceBorderTertiary',
-  borderColorHover: 'surfaceBorderQuaternary',
+  fillHover: 'surfaceTertiary',
+  // borderColor: 'surfaceBorderTertiary',
+  // borderColorHover: 'surfaceBorderQuaternary',
   hintTitle: 'Перетащите изображение или выберите файл с компьютера',
   hintTitleTextColor: 'surfaceTextPrimary',
   hintTitleTextSize: 'm',
@@ -1823,7 +1824,7 @@ const defaultSegmentedProps = {
   // Error
   errorAppearance: 'errorPrimary sizeM solid rounded',
   // Required
-  requiredAppearance: 'requirePrimary sizeM solid rounded'
+  requiredAppearance: 'warningPrimary sizeM solid rounded'
 };
 
 function FormFieldSegmented(props) {
@@ -1909,6 +1910,8 @@ const defaultSelectProps = {
   // useValidationAppearanceInputProps
   // Error
   errorAppearance: 'errorPrimary sizeM solid rounded',
+  // Success
+  successAppearance: 'successPrimary sizeM solid rounded',
   // Required
   requiredAppearance: 'requirePrimary sizeM solid rounded'
 };
@@ -2031,6 +2034,8 @@ const defaultSwitchProps = {
   // useValidationAppearanceInputProps
   // Error
   errorAppearance: 'errorPrimary sizeL solid rounded',
+  // Success
+  successAppearance: 'successPrimary sizeL solid rounded',
   // Required
   requiredAppearance: 'requirePrimary sizeL solid rounded'
 };
@@ -2114,6 +2119,8 @@ const defaultTextareaProps = {
   // useValidationAppearanceInputProps
   // Error
   errorAppearance: 'errorPrimary sizeM solid rounded',
+  // Success
+  successAppearance: 'successPrimary sizeM solid rounded',
   // Required
   requiredAppearance: 'requirePrimary sizeM solid rounded'
 };

package/package.json

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