@itcase/forms 1.1.19 → 1.1.20

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
@@ -2384,7 +2385,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 +2397,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
@@ -2373,7 +2374,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 +2386,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.20",
   "description": "Forms fields, inputs, etc.",
   "keywords": [],
   "license": "MIT",