@itcase/forms 1.1.3 → 1.1.4

package/dist/css/form/Field/Select/Select.css

@@ -17,16 +17,9 @@
   &_state_error {
     & .select__control {
       border: solid 1px var(--select-error-border);
+      &:hover {
+        border: solid 1px var(--select-error-border-hover);
+      }
     }
   }
 }
-
-:root {
-  --select-background: var(--color-surface-primary);
-  --select-background-hover: var(--color-surface-primary-hover);
-  --select-success-border: var(--color-success-border-primary);
-  --select-success-border-hover: var(--color-surface-border-quaternary);
-  --select-error-border: var(--color-error-border-primary);
-  --select-focus-background: var(--color-surface-primary);
-  --select-focus-border: var(--color-surface-border-quaternary);
-}

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

@@ -147,6 +147,24 @@
     }
   }
 }
+.form {
+  &_button-position {
+    &_bottom {
+      flex: 1;
+      justify-content: space-between;
+    }
+    &_sticky {
+      position: relative;
+      &^^&__button {
+        width: 100%;
+        position: fixed;
+        left: 0;
+        bottom: 0;
+        z-index: 100;
+      }
+    }
+  }
+}
 .form {
   width: 100%;
   &__wrapper {

package/dist/itcase-forms.cjs.js

@@ -507,28 +507,25 @@ const defaultChoiceProps = {
   labelTextColor: 'surfaceTextPrimary',
   labelTextColorDisabled: 'surfaceTextDisabled',
   labelTextSize: 'm',
-  // appearance depending on the type of error
-  // required
   requiredBorderColor: 'warningBorderPrimary',
-  shape: 'rounded',
-  size: 'normal'
+  shape: 'rounded'
 };
 
 const ChoiceField = /*#__PURE__*/React__default.default.memo(function ChoiceField(props) {
   const {
+    name,
+    initialValue,
+    label,
+    isDisabled,
     classNameGroupItem,
     fieldProps,
-    initialValue,
     inputProps,
-    isDisabled,
-    isCheckbox,
-    isRequired,
-    label,
     messageType,
-    name,
     options,
     placeholder,
     showMessage,
+    isCheckbox,
+    isRequired,
     onChange
   } = props;
   const {
@@ -580,30 +577,30 @@ const ChoiceField = /*#__PURE__*/React__default.default.memo(function ChoiceFiel
     });
     return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
       className: clsx__default.default('form-field_type_choice', 'form__item_type_choice', classNameGroupItem),
+      label: label,
       errorKey: errorKey,
       errorMessage: errorMessage,
+      isErrorState: isErrorState,
+      metaError: meta.error,
+      isDisabled: isDisabled,
       fieldClassName: "form-choice",
       inputName: input.name,
       inputValue: input.value || [],
-      isDisabled: isDisabled,
-      isErrorState: isErrorState,
-      isRequired: isRequired,
-      isValidState: isValidState,
-      label: label,
       messageType: messageType,
       metaActive: meta.active,
-      metaError: meta.error,
-      showMessage: showMessage
+      showMessage: showMessage,
+      isRequired: isRequired,
+      isValidState: isValidState
     }, fieldProps), /*#__PURE__*/React__default.default.createElement(Choice.Choice, Object.assign({
-      active: activeOption,
       className: clsx__default.default(meta.active && 'form-choice_state_focus', meta.error && meta.touched && `form-choice_state_${errorKey}`),
-      inputValue: input.value || [],
-      isCheckbox: isCheckbox,
-      isDisabled: isDisabled,
-      isRequired: isRequired,
       name: input.name,
+      isDisabled: isDisabled,
+      active: activeOption,
+      inputValue: input.value || [],
       options: options,
       placeholder: placeholder,
+      isCheckbox: isCheckbox,
+      isRequired: isRequired,
       setActiveSegment: setActiveSegment
     }, updatedInputProps)));
   });
@@ -1945,7 +1942,7 @@ const defaultSelectProps = {
   noOptionsTextSize: 'm',
   optionBorder: 'none',
   optionFill: 'surfacePrimary',
-  optionFillHover: 'surfacePrimaryHover',
+  optionFillHover: 'surfaceHover',
   optionShape: 'rounded',
   optionTextColor: 'surfaceTextPrimary',
   optionTextSize: 'm',
@@ -2332,7 +2329,7 @@ const defaultChipsProps = {
   fillActive: 'accentPrimary',
   fillActiveDisabled: 'surfaceTertiary',
   fillActiveHover: 'errorPrimary',
-  fillHover: 'surfacePrimaryHover',
+  fillHover: 'surfaceHover',
   iconItemFill: 'surfaceItemPrimary',
   iconSize: 14,
   indicatorFill: 'accentPrimary',
@@ -2717,6 +2714,7 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
     buttonDirection = 'vertical',
     buttonFill,
     buttonGap,
+    buttonPosition,
     buttonJustifyContent,
     buttonPadding,
     dataTestId,
@@ -2783,7 +2781,7 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
       modifiedSinceLastSubmit
     }) => {
       return /*#__PURE__*/React__default.default.createElement("form", {
-        className: clsx__default.default(className, 'form', set && `form_set_${set}`, type && `form_type_${type}`, directionClass, fillClass, shapeClass, elevationClass),
+        className: clsx__default.default(className, 'form', set && `form_set_${set}`, type && `form_type_${type}`, buttonPosition && `form_button-position_${buttonPosition}`, directionClass, fillClass, shapeClass, elevationClass),
         name: formName,
         autoCapitalize: disableFieldsAutoComplete ? 'off' : undefined,
         autoComplete: disableFieldsAutoComplete ? 'off' : undefined,

package/dist/itcase-forms.esm.js

@@ -496,28 +496,25 @@ const defaultChoiceProps = {
   labelTextColor: 'surfaceTextPrimary',
   labelTextColorDisabled: 'surfaceTextDisabled',
   labelTextSize: 'm',
-  // appearance depending on the type of error
-  // required
   requiredBorderColor: 'warningBorderPrimary',
-  shape: 'rounded',
-  size: 'normal'
+  shape: 'rounded'
 };
 
 const ChoiceField = /*#__PURE__*/React$1.memo(function ChoiceField(props) {
   const {
+    name,
+    initialValue,
+    label,
+    isDisabled,
     classNameGroupItem,
     fieldProps,
-    initialValue,
     inputProps,
-    isDisabled,
-    isCheckbox,
-    isRequired,
-    label,
     messageType,
-    name,
     options,
     placeholder,
     showMessage,
+    isCheckbox,
+    isRequired,
     onChange
   } = props;
   const {
@@ -569,30 +566,30 @@ const ChoiceField = /*#__PURE__*/React$1.memo(function ChoiceField(props) {
     });
     return /*#__PURE__*/React$1.createElement(FieldWrapper, Object.assign({
       className: clsx('form-field_type_choice', 'form__item_type_choice', classNameGroupItem),
+      label: label,
       errorKey: errorKey,
       errorMessage: errorMessage,
+      isErrorState: isErrorState,
+      metaError: meta.error,
+      isDisabled: isDisabled,
       fieldClassName: "form-choice",
       inputName: input.name,
       inputValue: input.value || [],
-      isDisabled: isDisabled,
-      isErrorState: isErrorState,
-      isRequired: isRequired,
-      isValidState: isValidState,
-      label: label,
       messageType: messageType,
       metaActive: meta.active,
-      metaError: meta.error,
-      showMessage: showMessage
+      showMessage: showMessage,
+      isRequired: isRequired,
+      isValidState: isValidState
     }, fieldProps), /*#__PURE__*/React$1.createElement(Choice, Object.assign({
-      active: activeOption,
       className: clsx(meta.active && 'form-choice_state_focus', meta.error && meta.touched && `form-choice_state_${errorKey}`),
-      inputValue: input.value || [],
-      isCheckbox: isCheckbox,
-      isDisabled: isDisabled,
-      isRequired: isRequired,
       name: input.name,
+      isDisabled: isDisabled,
+      active: activeOption,
+      inputValue: input.value || [],
       options: options,
       placeholder: placeholder,
+      isCheckbox: isCheckbox,
+      isRequired: isRequired,
       setActiveSegment: setActiveSegment
     }, updatedInputProps)));
   });
@@ -1934,7 +1931,7 @@ const defaultSelectProps = {
   noOptionsTextSize: 'm',
   optionBorder: 'none',
   optionFill: 'surfacePrimary',
-  optionFillHover: 'surfacePrimaryHover',
+  optionFillHover: 'surfaceHover',
   optionShape: 'rounded',
   optionTextColor: 'surfaceTextPrimary',
   optionTextSize: 'm',
@@ -2321,7 +2318,7 @@ const defaultChipsProps = {
   fillActive: 'accentPrimary',
   fillActiveDisabled: 'surfaceTertiary',
   fillActiveHover: 'errorPrimary',
-  fillHover: 'surfacePrimaryHover',
+  fillHover: 'surfaceHover',
   iconItemFill: 'surfaceItemPrimary',
   iconSize: 14,
   indicatorFill: 'accentPrimary',
@@ -2706,6 +2703,7 @@ const FinalForm = /*#__PURE__*/React$1.forwardRef(function FinalForm(props, ref)
     buttonDirection = 'vertical',
     buttonFill,
     buttonGap,
+    buttonPosition,
     buttonJustifyContent,
     buttonPadding,
     dataTestId,
@@ -2772,7 +2770,7 @@ const FinalForm = /*#__PURE__*/React$1.forwardRef(function FinalForm(props, ref)
       modifiedSinceLastSubmit
     }) => {
       return /*#__PURE__*/React$1.createElement("form", {
-        className: clsx(className, 'form', set && `form_set_${set}`, type && `form_type_${type}`, directionClass, fillClass, shapeClass, elevationClass),
+        className: clsx(className, 'form', set && `form_set_${set}`, type && `form_type_${type}`, buttonPosition && `form_button-position_${buttonPosition}`, directionClass, fillClass, shapeClass, elevationClass),
         name: formName,
         autoCapitalize: disableFieldsAutoComplete ? 'off' : undefined,
         autoComplete: disableFieldsAutoComplete ? 'off' : undefined,

package/package.json

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