@itcase/forms 1.1.24 → 1.1.27

package/README.md

@@ -1,14 +1,14 @@
 # Forms components and functions
 
 ## Fields
-* **CheckboxField**
-* **DatePickerField**
+* **FormFieldCheckbox**
+* **FormFieldDatePicker**
 * **FileInput** and **FileField**
 * **InputTextField**
 * **RadioGroupField**
 * **SelectButtonField**
-* **SelectField**, **CheckboxOption** and **ValueContainer**
-* **TextAreaField**
+* **FormFieldSelect**, **CheckboxOption** and **ValueContainer**
+* **FormFieldTextarea**
 
 ## Field wrapper
 * **FieldWrapper**

package/dist/css/form/Field/Password/{Password.css → FormFieldPassword.css}

@@ -1,5 +1,3 @@
-/* @import './css/form-password.css'; */
-
 :root {
   --password-success-border: var(--color-success-border-primary);
   --password-success-border-hover: var(--color-surface-border-quaternary);

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

@@ -3,13 +3,16 @@
     &-inner {
       position: relative;
       display: flex;
+      & > input {
+        width: 100%;
+      }
     }
   }
   &__message {
     &-item {
-      height: var(--form-field-helptext-height);
-      line-height: var(--form-field-helptext-line-height);
-      padding: var(--form-field-helptext-padding);
+      height: var(--form-field-help-text-height);
+      line-height: var(--form-field-help-text-line-height);
+      padding: var(--form-field-help-text-padding);
       display: block;
     }
   }
@@ -24,7 +27,7 @@
 }
 .form {
   &^&-field_type_float {
-    padding: var(--form-field_type_float-padding, 12px 0 12px 0);
+    padding: 12px 0 12px 0;
     margin: var(--form-field_type_float-margin);
     position: relative;
     gap: var(--form-field_type_float-gap);
@@ -42,11 +45,16 @@
           opacity: 100%;
         }
       }
+      & .textarea {
+        &::placeholder {
+          opacity: 100%;
+        }
+      }      
     }
     & .form {
       &-field {
         &__label {
-          background: var(--color-surface-fill-primary);
+          background: #fff;
           padding: 0 4px;
           position: absolute;
           display: flex;
@@ -58,7 +66,7 @@
           transform-origin: top left;
         }
         &__message {
-          padding: var(--form-field-type-float-message-padding, 0 0 0 12px);
+          padding: 0 0 0 12px;
         }
       }
     }
@@ -68,24 +76,10 @@
         opacity: 0%;
       }
     }
-  }
-}
-.form-field {
-  &_type {
-    &_normal {
-      position: relative;
-      @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);
-          }
-        }
+    & .textarea {
+      &::placeholder {
+        transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
+        opacity: 0%;
       }
     }
   }
@@ -93,10 +87,10 @@
 .form-field {
   &_type {
     &_classic {
-      padding: var(--form-field_type_normal-padding);
-      margin: var(--form-field_type_normal-margin);
+      padding: var(--form-field_type_classic-padding);
+      margin: var(--form-field_type_classic-margin);
       position: relative;
-      gap: var(--form-field_type_normal-gap);
+      gap: var(--form-field_type_classic-gap);
     }
   }
 }
@@ -162,9 +156,3 @@
     }
   }
 }
-: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;
-}