@itcase/forms 1.1.19 → 1.1.21

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

@@ -6,11 +6,10 @@
     }
   }
   &__message {
-    padding: 4px 0 0 0;
     &-item {
       height: var(--form-field-helptext-height);
       line-height: var(--form-field-helptext-line-height);
-      padding: var(--form-field-helptext-padding, 0);
+      padding: var(--form-field-helptext-padding);
       display: block;
     }
   }
@@ -75,16 +74,16 @@
   &_type {
     &_normal {
       position: relative;
-      &.form-field {
-        &_type {
-          &_input {
-            @each $size in s, m, l, xl {
-              &.form-field_size_$(size) {
-                gap: var(--form-field_type_normal_$(size)-gap, 4px);
-                margin: var(--form-field_type_normal_$(size)-margin);
-                padding: var(--form-field_type_normal_$(size)padding);
-              }
-            }
+      @each $size in xl, l, m, s {
+        &.form-field_size_$(size) {
+          gap: var(--form-field_type_normal_$(size)-gap);
+          padding: var(--form-field_type_normal_$(size)-padding);
+          margin: var(--form-field_type_normal_$(size)-margin);
+          ^^^&__label {
+            padding: var(--form-field_type_normal_$(size)-label-padding);
+          }
+          ^^^&__message {
+            padding: var(--form-field_type_normal_$(size)-message-padding);
           }
         }
       }
@@ -94,10 +93,10 @@
 .form-field {
   &_type {
     &_classic {
-      position: relative;
-      gap: var(--form-field_type_normal-gap, 4px);
-      margin: var(--form-field_type_normal-margin);
       padding: var(--form-field_type_normal-padding);
+      margin: var(--form-field_type_normal-margin);
+      position: relative;
+      gap: var(--form-field_type_normal-gap);
     }
   }
 }
@@ -163,3 +162,9 @@
     }
   }
 }
+:root {
+  --form-field_type_normal_m-gap: 0.5m;
+  --form-field_type_normal_m-padding: 1.5m 0;
+  --form-field_type_normal_m-label-padding: 0 0.5m;
+  --form-field_type_normal_m-message-padding: 0 1.5m;
+}

package/dist/itcase-forms.cjs.js

@@ -23,7 +23,6 @@ var castArray = require('lodash/castArray');
 var reactDropzone = require('react-dropzone');
 var common = require('@itcase/common');
 var Button = require('@itcase/ui/components/Button');
-var Group$1 = require('@itcase/ui/components/Group');
 var Loader = require('@itcase/ui/components/Loader');
 var Title = require('@itcase/ui/components/Title');
 var Input = require('@itcase/ui/components/Input');
@@ -34,6 +33,7 @@ var Switch = require('@itcase/ui/components/Switch');
 var Textarea = require('@itcase/ui/components/Textarea');
 var reactImask = require('react-imask');
 var Chips = require('@itcase/ui/components/Chips');
+var Group$1 = require('@itcase/ui/components/Group');
 var Notification = require('@itcase/ui/components/Notification');
 var createDecorator = require('final-form-focus');
 
@@ -130,15 +130,16 @@ function useYupValidationSchema(schema, language) {
 const defaultFieldProps = {
   width: 'fill',
   direction: 'vertical',
+  size: 'm',
   labelTextColor: 'surfaceTextPrimary',
-  labelTextSize: 'm',
+  labelTextSize: 's',
+  messageTextColor: 'surfaceTextSecondary',
+  messageTextSize: 's',
   errorMessageTextColor: 'errorTextSecondary',
   errorMessageTextSize: 's',
   dividerFill: 'errorPrimary',
   helpTextColor: 'surfaceTextQuaternary',
   helpTextSize: 's',
-  messageTextColor: 'surfaceTextSecondary',
-  messageTextSize: 's',
   requiredMessageTextColor: 'warningTextSecondary',
   requiredMessageTextSize: 's',
   showMessage: true
@@ -870,8 +871,10 @@ const defaultDropzoneProps = {
   hintTitle: 'Перетащите изображение или выберите файл с компьютера',
   hintTitleTextColor: 'surfaceTextPrimary',
   hintTitleTextSize: 'm',
-  removeThumbAppearance: 'dangerPrimary sizeM',
-  removeThumbShape: 'rounded',
+  removeThumbText: 'удалить',
+  removeThumbTextColor: 'errorTextPrimary',
+  removeThumbTextHoverColor: 'errorTextPrimaryHover',
+  removeThumbTextSize: 's',
   shape: 'rounded',
   showFilename: true,
   thumbBorderColor: 'surfaceBorderTertiary',
@@ -1070,7 +1073,7 @@ const FileInputDropzone = /*#__PURE__*/React__default.default.memo(function File
   }), /*#__PURE__*/React__default.default.createElement("input", Object.assign({}, getInputProps(), {
     name: inputName
   })), /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default('form-dropzone__dropzone-wrapper', thumbColumn && `form-dropzone__dropzone-wrapper_column_${thumbColumn}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, borderColorClass && `border-color_${borderColorClass}`, borderColorHoverClass && `border-color_hover_${borderColorHoverClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass)
+    className: clsx__default.default('form-dropzone__dropzone-wrapper', thumbColumn && `form-dropzone__dropzone-wrapper_column_${thumbColumn}`, fillClass, fillHoverClass, borderWidthClass, borderColorClass, borderColorHoverClass, borderTypeClass)
   }, filesList.map((file, index) => /*#__PURE__*/React__default.default.createElement("aside", {
     className: clsx__default.default('form-dropzone__thumb', fillClass, thumbDirectionClass, thumbBorderWidthClass, thumbBorderColorClass, thumbBorderColorHoverClass, thumbBorderTypeClass),
     key: file.id || `${file.name}_${index}`
@@ -2384,7 +2387,11 @@ function ChipsField(props) {
       showMessage: showMessage,
       isRequired: isRequired,
       isValidState: isValidState
-    }, fieldProps), options.length ? options.map(option => /*#__PURE__*/React__default.default.createElement(Chips.Chips, Object.assign({
+    }, fieldProps), options.length ? /*#__PURE__*/React__default.default.createElement(Chips.ChipsGroup, {
+      direction: "horizontal",
+      gap: "1m",
+      wrap: "wrap"
+    }, options.map(option => /*#__PURE__*/React__default.default.createElement(Chips.Chips, Object.assign({
       className: clsx__default.default(meta.active && 'form-chips_state_focus', meta.error && meta.touched && `form-chips_state_${errorKey}`),
       key: option.value,
       label: option.label,
@@ -2392,7 +2399,7 @@ function ChipsField(props) {
       value: option.value,
       isActive: activeOptionsList.some(activeOption => activeOption.value === option.value),
       onClick: () => onChangeSomeInput(input.value, option.value)
-    }, updatedInputProps))) : /*#__PURE__*/React__default.default.createElement(Text.Text, {
+    }, updatedInputProps)))) : /*#__PURE__*/React__default.default.createElement(Text.Text, {
       size: emptyMessageTextSize,
       textColor: emptyMessageTextColor
     }, emptyMessage));

package/dist/itcase-forms.esm.js

@@ -22,7 +22,6 @@ import castArray from 'lodash/castArray';
 import { useDropzone, ErrorCode } from 'react-dropzone';
 import { createFileFromDataURL } from '@itcase/common';
 import { Button } from '@itcase/ui/components/Button';
-import { Group as Group$1 } from '@itcase/ui/components/Group';
 import { Loader } from '@itcase/ui/components/Loader';
 import { Title } from '@itcase/ui/components/Title';
 import { Input } from '@itcase/ui/components/Input';
@@ -32,7 +31,8 @@ import { Select } from '@itcase/ui/components/Select';
 import { Switch } from '@itcase/ui/components/Switch';
 import { Textarea } from '@itcase/ui/components/Textarea';
 import { useIMask } from 'react-imask';
-import { Chips } from '@itcase/ui/components/Chips';
+import { ChipsGroup, Chips } from '@itcase/ui/components/Chips';
+import { Group as Group$1 } from '@itcase/ui/components/Group';
 import { Notification } from '@itcase/ui/components/Notification';
 import createDecorator from 'final-form-focus';
 
@@ -119,15 +119,16 @@ function useYupValidationSchema(schema, language) {
 const defaultFieldProps = {
   width: 'fill',
   direction: 'vertical',
+  size: 'm',
   labelTextColor: 'surfaceTextPrimary',
-  labelTextSize: 'm',
+  labelTextSize: 's',
+  messageTextColor: 'surfaceTextSecondary',
+  messageTextSize: 's',
   errorMessageTextColor: 'errorTextSecondary',
   errorMessageTextSize: 's',
   dividerFill: 'errorPrimary',
   helpTextColor: 'surfaceTextQuaternary',
   helpTextSize: 's',
-  messageTextColor: 'surfaceTextSecondary',
-  messageTextSize: 's',
   requiredMessageTextColor: 'warningTextSecondary',
   requiredMessageTextSize: 's',
   showMessage: true
@@ -859,8 +860,10 @@ const defaultDropzoneProps = {
   hintTitle: 'Перетащите изображение или выберите файл с компьютера',
   hintTitleTextColor: 'surfaceTextPrimary',
   hintTitleTextSize: 'm',
-  removeThumbAppearance: 'dangerPrimary sizeM',
-  removeThumbShape: 'rounded',
+  removeThumbText: 'удалить',
+  removeThumbTextColor: 'errorTextPrimary',
+  removeThumbTextHoverColor: 'errorTextPrimaryHover',
+  removeThumbTextSize: 's',
   shape: 'rounded',
   showFilename: true,
   thumbBorderColor: 'surfaceBorderTertiary',
@@ -1059,7 +1062,7 @@ const FileInputDropzone = /*#__PURE__*/React$1.memo(function FileInputDropzone(p
   }), /*#__PURE__*/React$1.createElement("input", Object.assign({}, getInputProps(), {
     name: inputName
   })), /*#__PURE__*/React$1.createElement("div", {
-    className: clsx('form-dropzone__dropzone-wrapper', thumbColumn && `form-dropzone__dropzone-wrapper_column_${thumbColumn}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, borderColorClass && `border-color_${borderColorClass}`, borderColorHoverClass && `border-color_hover_${borderColorHoverClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass)
+    className: clsx('form-dropzone__dropzone-wrapper', thumbColumn && `form-dropzone__dropzone-wrapper_column_${thumbColumn}`, fillClass, fillHoverClass, borderWidthClass, borderColorClass, borderColorHoverClass, borderTypeClass)
   }, filesList.map((file, index) => /*#__PURE__*/React$1.createElement("aside", {
     className: clsx('form-dropzone__thumb', fillClass, thumbDirectionClass, thumbBorderWidthClass, thumbBorderColorClass, thumbBorderColorHoverClass, thumbBorderTypeClass),
     key: file.id || `${file.name}_${index}`
@@ -2373,7 +2376,11 @@ function ChipsField(props) {
       showMessage: showMessage,
       isRequired: isRequired,
       isValidState: isValidState
-    }, fieldProps), options.length ? options.map(option => /*#__PURE__*/React$1.createElement(Chips, Object.assign({
+    }, fieldProps), options.length ? /*#__PURE__*/React$1.createElement(ChipsGroup, {
+      direction: "horizontal",
+      gap: "1m",
+      wrap: "wrap"
+    }, options.map(option => /*#__PURE__*/React$1.createElement(Chips, Object.assign({
       className: clsx(meta.active && 'form-chips_state_focus', meta.error && meta.touched && `form-chips_state_${errorKey}`),
       key: option.value,
       label: option.label,
@@ -2381,7 +2388,7 @@ function ChipsField(props) {
       value: option.value,
       isActive: activeOptionsList.some(activeOption => activeOption.value === option.value),
       onClick: () => onChangeSomeInput(input.value, option.value)
-    }, updatedInputProps))) : /*#__PURE__*/React$1.createElement(Text, {
+    }, updatedInputProps)))) : /*#__PURE__*/React$1.createElement(Text, {
       size: emptyMessageTextSize,
       textColor: emptyMessageTextColor
     }, emptyMessage));

package/package.json

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