feat: floating labels

Author: vdua

blocks/form/form.css

@@ -545,4 +545,40 @@ main .form .form-image-wrapper  img {
 main form .wizard > .current-wizard-step.panel-wrapper:first-of-type ~ .wizard-button-wrapper > .wizard-button-prev,
 main form .wizard > .current-wizard-step.panel-wrapper:last-of-type ~ .wizard-button-wrapper > .wizard-button-next {
     display: none;
+}
+
+/** custom css goes here */
+
+/* Base style for labels */
+main .form :not(.checkbox-wrapper, .radio-wrapper) > label {
+    margin: 15px 5px 0;
+    position: absolute;
+    transition: .3s cubic-bezier(.25,.8,.5,1);
+ }
+
+main .form [data-empty='true'] > input:not(:focus) {
+    color: transparent;
+}
+
+/* Style for labels when input is active or not empty */
+main .form [data-active='true'] > label,
+main .form [data-empty='false'] > label {
+    margin-left: 0;
+    font-size: var(--form-font-size-xs);
+    color: var(--label-color);
+    transform: translateY(-30px); /* move as per the height of input elements */
+    z-index: 1;
+}
+
+/* remove placeholder when not focused */
+main .form input:placeholder-shown:not(:focus)::placeholder {
+    color: transparent;
+}
+
+/* remove default browser placeholder for date field when not focused */
+input[type='date']:not(:focus):in-range::-webkit-datetime-edit-year-field,
+input[type='date']:not(:focus):in-range::-webkit-datetime-edit-month-field,
+input[type='date']:not(:focus):in-range::-webkit-datetime-edit-day-field,
+input[type='date']:not(:focus):in-range::-webkit-datetime-edit-text {
+    color: transparent;
 }

blocks/form/form.js

@@ -502,5 +502,32 @@ export default async function decorate(block) {
       form.dataset.formpath = formDef.properties['fd:path'];
     }
     container.replaceWith(form);
+
+    /** custom code starts here */
+
+    const inputs = document.querySelectorAll('.field-wrapper input, .field-wrapper textarea, .field-wrapper select');
+    // check if the input value is empty
+    // if the input is of type select then check if the selected option is empty
+    const isEmpty = (input) => (input.tagName !== 'SELECT' && !input.value)
+      || (input.tagName === 'SELECT' && input.querySelector('option[selected]') == null);
+
+    // exclude types that should not have the floating label effect
+    const excludeTypes = ['checkbox', 'radio'];
+
+    inputs.forEach((input) => {
+      if (!excludeTypes.includes(input.type)) {
+        const wrapper = input.closest('.field-wrapper');
+        input.addEventListener('focus', () => {
+          wrapper.dataset.active = 'true';
+          wrapper.dataset.empty = isEmpty(input);
+        });
+        input.addEventListener('blur', () => {
+          wrapper.removeAttribute('data-active');
+          wrapper.dataset.empty = isEmpty(input);
+        });
+        // Initialize the state based on the input's current value
+        wrapper.dataset.empty = isEmpty(input);
+      }
+    });
   }
 }