@itcase/forms 1.0.19 → 1.0.21

package/dist/css/form/Field/Checkbox/Checkbox.css

@@ -12,7 +12,7 @@
     }
     &_focus {
       & .checkbox__state {
-        background: var(--color-surface-primary);
+        /* border: solid 1px var(--color-error-border-primary); */
       }
     }
   }
@@ -30,7 +30,7 @@
       align-self: flex-start;
       grid-row: 1;
       &-inner {
-        padding: 4px 0 0 0;
+        padding: 2px 0 0 0;
       }
     }
     ^&__message {

package/dist/css/form/Field/Group/Group.css

@@ -1,14 +1,26 @@
-.form-textarea {
-  position: relative;
-  &&_state {
-    &_success {
-      border: solid 1px var(--color-success-border-primary);
-    }
-    &_error {
-      border: solid 1px var(--color-error-border-primary);
-    }
-    &_focus {
-      background: var(--color-surface-primary);
+.form {
+  &__group {
+    width: 100%;
+    margin: 0;
+    &-wrapper {
+      display: flex;
+      flex-flow: column nowrap;
+      ^&-label {
+      }
+      ^&-items {
+      }
+      ^&-message {
+        &_type_error {
+          color: var(--color-error-text-primary);
+        }
+        &_type_require {
+          color: var(--color-require-text-primary);
+        }
+        &_type_success {
+          color: var(--color-success-text-primary);
+        }
+      }
     }
   }
+
 }

package/dist/css/form/Field/Segmented/Segmented.css

@@ -1,12 +1,16 @@
 .form-segmented {
-  &_state_success {
+  &_state_error {
     & .segmented {
-      border: solid 1px var(--color-success-border-primary);
+      &__item-label-text {
+        color: var(--color-error-text-primary);
+      }
     }
   }
-  &_state_error {
+  &_state_required {
     & .segmented {
-      border: solid 1px var(--color-error-border-primary);
+      &__item-label-text {
+        color: var(--color-active-text-primary);
+      }
     }
   }
 }

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

@@ -7,20 +7,6 @@
     }
   }
 }
-.form {
-  &__group {
-    width: 100%;
-    margin: 0;
-    &-wrapper {
-      display: flex;
-      flex-flow: column nowrap;
-      ^&-label {
-      }
-      ^&-items {
-      }
-    }
-  }
-}
 .form {
   &__header {
     width: 100%;
@@ -217,6 +203,9 @@
       top: 20px;
       left: 0;
     }
+    &_global {
+      margin: 0 0 16px 0;
+    }
   }
   &__item {
     text-align: center;

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

@@ -6,6 +6,9 @@
       top: 20px;
       left: 0;
     }
+    &_global {
+      margin: 0 0 16px 0;
+    }
   }
   &__item {
     text-align: center;

package/dist/itcase-forms.cjs.js

@@ -56,9 +56,10 @@ var emailValidation = function emailValidation(value, context) {
 var addRequiredFieldsParamToSchema = function addRequiredFieldsParamToSchema(schema) {
   var fields = Object.entries(schema.fields);
   schema.requiredFields = fields.reduce(function (list, _ref) {
+    var _validationProps$excl;
     var fieldName = _ref[0],
       validationProps = _ref[1];
-    if (validationProps.exclusiveTests.required) {
+    if ((_validationProps$excl = validationProps.exclusiveTests) != null && _validationProps$excl.required) {
       list.push(fieldName);
     }
     return list;
@@ -1627,22 +1628,18 @@ var Group = /*#__PURE__*/React__default.default.memo(function Group(props) {
       textWeight: labelTextWeight
     }, label)), /*#__PURE__*/React__default.default.createElement("div", {
       className: "form__group-items"
-    }, children), after), Boolean(showError) && /*#__PURE__*/React__default.default.createElement("div", {
-      className: "form-field__message"
-    }, /*#__PURE__*/React__default.default.createElement(Text.Text, {
-      className: "form-field__message-item form-field__message-item_type-error",
+    }, children), after), Boolean(showError) && /*#__PURE__*/React__default.default.createElement(Text.Text, {
+      className: "form__group-message form__group-message_type-error",
       size: errorMessageTextSize,
       textWeight: errorMessageTextWeight,
       textColor: errorMessageTextColor,
       id: name + "-error"
-    }, error)), Boolean(message) && !showError && /*#__PURE__*/React__default.default.createElement("div", {
-      className: "form-field__message"
-    }, /*#__PURE__*/React__default.default.createElement(Text.Text, {
-      className: "form-field__message-item form-field__message-item_type_message",
+    }, error), Boolean(message) && !showError && /*#__PURE__*/React__default.default.createElement(Text.Text, {
+      className: "form__group-message",
       size: messageTextSize,
       textWeight: messageTextWeight,
       textColor: messageTextColor
-    }, message)));
+    }, message));
   });
 });
 Group.defaultProps = {
@@ -1650,7 +1647,9 @@ Group.defaultProps = {
   fieldProps: {},
   type: 'normal',
   errorMessageTextSize: 's',
-  errorMessageTextColor: 'errorTextSecondary'
+  errorMessageTextColor: 'errorTextPrimary',
+  messageTextSize: 's',
+  messageTextColor: 'surfaceTextTertiary'
 };
 Group.propTypes = {
   name: PropTypes__default.default.string.isRequired,
@@ -2575,10 +2574,12 @@ var FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalFor
         textColor: descriptionTextColor,
         textWeight: descriptionTextWeight
       }, description), submitError && !modifiedSinceLastSubmit && /*#__PURE__*/React__default.default.createElement("div", {
-        className: clsx__default.default('notification', 'form-notification', notificationType && "form-notification_type_" + notificationType)
+        className: clsx__default.default('notification', 'form-notification', notificationType ? "form-notification_type_" + notificationType : 'form-notification_type_global')
       }, /*#__PURE__*/React__default.default.createElement(Notification.NotificationItem, {
         className: "form-notification__item",
-        text: form.getState().submitError,
+        titleTextSize: "h6",
+        title: form.getState().submitError,
+        set: "form",
         status: "error"
       })), onChangeFormValues && /*#__PURE__*/React__default.default.createElement(reactFinalForm.FormSpy, {
         subscription: {

package/dist/itcase-forms.esm.js

@@ -46,9 +46,10 @@ var emailValidation = function emailValidation(value, context) {
 var addRequiredFieldsParamToSchema = function addRequiredFieldsParamToSchema(schema) {
   var fields = Object.entries(schema.fields);
   schema.requiredFields = fields.reduce(function (list, _ref) {
+    var _validationProps$excl;
     var fieldName = _ref[0],
       validationProps = _ref[1];
-    if (validationProps.exclusiveTests.required) {
+    if ((_validationProps$excl = validationProps.exclusiveTests) != null && _validationProps$excl.required) {
       list.push(fieldName);
     }
     return list;
@@ -1617,22 +1618,18 @@ var Group = /*#__PURE__*/React.memo(function Group(props) {
       textWeight: labelTextWeight
     }, label)), /*#__PURE__*/React.createElement("div", {
       className: "form__group-items"
-    }, children), after), Boolean(showError) && /*#__PURE__*/React.createElement("div", {
-      className: "form-field__message"
-    }, /*#__PURE__*/React.createElement(Text, {
-      className: "form-field__message-item form-field__message-item_type-error",
+    }, children), after), Boolean(showError) && /*#__PURE__*/React.createElement(Text, {
+      className: "form__group-message form__group-message_type-error",
       size: errorMessageTextSize,
       textWeight: errorMessageTextWeight,
       textColor: errorMessageTextColor,
       id: name + "-error"
-    }, error)), Boolean(message) && !showError && /*#__PURE__*/React.createElement("div", {
-      className: "form-field__message"
-    }, /*#__PURE__*/React.createElement(Text, {
-      className: "form-field__message-item form-field__message-item_type_message",
+    }, error), Boolean(message) && !showError && /*#__PURE__*/React.createElement(Text, {
+      className: "form__group-message",
       size: messageTextSize,
       textWeight: messageTextWeight,
       textColor: messageTextColor
-    }, message)));
+    }, message));
   });
 });
 Group.defaultProps = {
@@ -1640,7 +1637,9 @@ Group.defaultProps = {
   fieldProps: {},
   type: 'normal',
   errorMessageTextSize: 's',
-  errorMessageTextColor: 'errorTextSecondary'
+  errorMessageTextColor: 'errorTextPrimary',
+  messageTextSize: 's',
+  messageTextColor: 'surfaceTextTertiary'
 };
 Group.propTypes = {
   name: PropTypes.string.isRequired,
@@ -2565,10 +2564,12 @@ var FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
         textColor: descriptionTextColor,
         textWeight: descriptionTextWeight
       }, description), submitError && !modifiedSinceLastSubmit && /*#__PURE__*/React.createElement("div", {
-        className: clsx('notification', 'form-notification', notificationType && "form-notification_type_" + notificationType)
+        className: clsx('notification', 'form-notification', notificationType ? "form-notification_type_" + notificationType : 'form-notification_type_global')
       }, /*#__PURE__*/React.createElement(NotificationItem, {
         className: "form-notification__item",
-        text: form.getState().submitError,
+        titleTextSize: "h6",
+        title: form.getState().submitError,
+        set: "form",
         status: "error"
       })), onChangeFormValues && /*#__PURE__*/React.createElement(FormSpy, {
         subscription: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/forms",
-  "version": "1.0.19",
+  "version": "1.0.21",
   "description": "Forms fields, inputs, etc.",
   "keywords": [
     "forms",

package/dist/css/form/Form/css/__group/form__group.css

@@ -1,14 +0,0 @@
-.form {
-  &__group {
-    width: 100%;
-    margin: 0;
-    &-wrapper {
-      display: flex;
-      flex-flow: column nowrap;
-      ^&-label {
-      }
-      ^&-items {
-      }
-    }
-  }
-}