From 370efa2459a2b31fec89f488e81444824866f3f0 Mon Sep 17 00:00:00 2001
From: Travis Tidwell <travis@form.io>
Date: Fri, 19 Jan 2024 20:09:59 -0600
Subject: [PATCH] FIO-7773: Adding floating labels to Bootstrap 5 template.

---
 app/examples/floating.md                      | 130 ++++++++++++++++++
 src/Element.js                                |   1 +
 .../_classes/component/Component.js           |   1 +
 types/formio.d.ts                             |   1 +
 4 files changed, 133 insertions(+)
 create mode 100644 app/examples/floating.md

diff --git a/app/examples/floating.md b/app/examples/floating.md
new file mode 100644
index 0000000000..57aa1c9f8b
--- /dev/null
+++ b/app/examples/floating.md
@@ -0,0 +1,130 @@
+---
+title: Floating Labels
+layout: vtabs
+section: examples
+formioFull: true
+weight: 31
+---
+With the default template of Bootstrap 5, it is now possible to have Floating Labels feature where the labels are placeholders until the user clicks into component. The label, will then move to above the cursor improving the UI/UX of the form experience. To enable floating labels, you must first use the "default" Bootstrap 5 template, and then provide the following when embedding your form.
+
+```js
+Formio.createForm(document.getElementById('formio'), {...}, {
+  floatingLabels: true
+});
+```
+
+Here is an example.
+
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css">
+<script src="https://cdn.form.io/js/formio.embed.js"></script>
+<div id="formio"></div>
+```
+
+<div class="row">
+<div class="col col-sm-6">
+
+<pre>
+Formio.createForm(document.getElementById('formio'), {
+  components: [
+    {
+      type: 'textfield',
+      key: 'firstName',
+      label: 'First Name',
+      placeholder: 'Enter your first name.',
+      input: true,
+      validate: {
+        required: true
+      }
+    },
+    {
+      type: 'textfield',
+      key: 'lastName',
+      label: 'Last Name',
+      placeholder: 'Enter your last name',
+      input: true,
+      validate: {
+        required: true
+      }
+    },
+    {
+      type: 'email',
+      key: 'email',
+      label: 'Email',
+      placeholder: 'Enter your email',
+      input: true,
+      validateOn: 'blur'
+    },
+    {
+      type: 'button',
+      action: 'submit',
+      label: 'Submit',
+      theme: 'primary'
+    }
+  ]
+}, {
+  floatingLabels: true
+});
+</pre>
+
+</div>
+<div class="col col-sm-6">
+<h3>Result</h3>
+<div class="card card-body bg-light">
+<div id="formio"></div>
+<script type="text/javascript">
+Formio.createForm(document.getElementById('formio'), {
+  components: [
+    {
+      type: 'textfield',
+      key: 'firstName',
+      label: 'First Name',
+      placeholder: 'Enter your first name.',
+      input: true,
+      validate: {
+        required: true
+      }
+    },
+    {
+      type: 'textfield',
+      key: 'lastName',
+      label: 'Last Name',
+      placeholder: 'Enter your last name',
+      input: true,
+      validate: {
+        required: true
+      }
+    },
+    {
+      type: 'email',
+      key: 'email',
+      label: 'Email',
+      placeholder: 'Enter your email',
+      input: true,
+      validateOn: 'blur'
+    },
+    {
+      type: 'button',
+      action: 'submit',
+      label: 'Submit',
+      theme: 'primary'
+    }
+  ]
+}, {
+  floatingLabels: true
+}).then(function(form) {
+  form.on('change', function(changed) {
+    console.log('Changed!', changed);
+  });
+  
+  form.on('submit', function(submission) {
+    console.log('Submitted!', submission);
+  });
+});
+</script>
+</div>
+</div>
+</div>
+
+
diff --git a/src/Element.js b/src/Element.js
index 166ed0c7c8..17c890c388 100644
--- a/src/Element.js
+++ b/src/Element.js
@@ -567,6 +567,7 @@ export default class Element {
       token: Formio.getToken({
         decode: true
       }),
+      options: this.options,
       config: this.root && this.root.form && this.root.form.config
         ? this.root.form.config
         : this.options?.formConfig
diff --git a/src/components/_classes/component/Component.js b/src/components/_classes/component/Component.js
index fc9c57bbf0..6b3d460e7f 100644
--- a/src/components/_classes/component/Component.js
+++ b/src/components/_classes/component/Component.js
@@ -873,6 +873,7 @@ export default class Component extends Element {
     return !this.component.label ||
       ((!this.isInDataGrid && this.component.hideLabel) ||
       (this.isInDataGrid && !this.component.dataGridLabel) ||
+      this.options.floatingLabels ||
       this.options.inputsOnly) && !this.builderMode;
   }
 
diff --git a/types/formio.d.ts b/types/formio.d.ts
index 4f4826a8a5..91266641d9 100644
--- a/types/formio.d.ts
+++ b/types/formio.d.ts
@@ -34,6 +34,7 @@ export class Formio {
   static namespace: string;
   static formOnly?: boolean;
   static rulesEntities: any;
+  static options: any;
   delete(type: any, opts?: any): any;
   index(type: any, query?: any, opts?: any): any;
   save(type: any, data: any, opts?: any): any;