From 132817b4a4c0ecfaee8589dc1312d084fea0131a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mauro=20Mascarenhas=20de=20Ara=C3=BAjo?=
 <mauromascarenhas@users.noreply.github.com>
Date: Sat, 17 Jun 2023 19:37:50 -0300
Subject: [PATCH 1/2] feat(floating label): suport to placeholders

Allow placeholders to be used with floating labels.

- Floating label inputs must have a single white space as placeholder;
- Label no longer overlap Inputs with "useful" placeholders.
---
 sass/components/forms/_input-fields.scss | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/sass/components/forms/_input-fields.scss b/sass/components/forms/_input-fields.scss
index 2c3733c5ad..57d501d7d9 100644
--- a/sass/components/forms/_input-fields.scss
+++ b/sass/components/forms/_input-fields.scss
@@ -89,6 +89,7 @@ textarea.materialize-textarea {
       color: $input-focus-color;
     }
     &:focus:not([readonly]) + label,
+    &:not([placeholder=' ']) + label,
     &:not(:placeholder-shown) + label {
       //font-size: 12px; // md.sys.typescale.body-small.size
       // https://stackoverflow.com/questions/34717492/css-transition-font-size-avoid-jittering-wiggling
@@ -187,6 +188,7 @@ textarea.materialize-textarea {
         color: $input-focus-color;
       }
       &:focus:not([readonly]) + label,
+      &:not([placeholder=' ']) + label,
       &:not(:placeholder-shown) + label {
         top: -8px;
         left: 16px;

From 85297dc49e35488d0c2b753a03232534965484a7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mauro=20Mascarenhas=20de=20Ara=C3=BAjo?=
 <mauromascarenhas@users.noreply.github.com>
Date: Sat, 17 Jun 2023 19:49:36 -0300
Subject: [PATCH 2/2] docs(floating label): update doc description

Documentation for the usage of floating labels is simpler to understand:

- Updated code samples;
- Updated feature descriptions.
---
 pug/contents/text_inputs_content.html | 45 ++++++++++++++++++++++-----
 1 file changed, 37 insertions(+), 8 deletions(-)

diff --git a/pug/contents/text_inputs_content.html b/pug/contents/text_inputs_content.html
index 9e535ba1f5..42cc3d6892 100644
--- a/pug/contents/text_inputs_content.html
+++ b/pug/contents/text_inputs_content.html
@@ -124,17 +124,46 @@ <h3 class="header">Input fields</h3>
     &lt;/form>
   &lt;/div>
         </code></pre>
-        <h5>Floating Labels with CSS only</h5>
-        <p>There should not be any problems with initializing the inputs properly, since the floating Labels are rendered with CSS only. The CSS Technique requires to use an empty placeholder in the HTML. You have to put an emtpy space in the placeholder. Putting an empty string wont work.</p>
-          <div class="input-field outline">
-            <input value="Daniel" id="first_name2" type="text" class="validate" placeholder=" ">
-            <label class="active" for="first_name2">First Name</label>
+        <h5 id="floating-labels">Floating Labels</h5>
+        <p>
+          Since <b>MaterializeCSS v2</b>, floating Labels are rendered with CSS only by default.
+          However, it is required to use a placeholder with a single white space (" ") in the HTML
+          (providing an empty string will not work!).
+        </p>
+        <p>
+          <strong><b>Important:</b></strong> If you provide a value different than a single white space,
+          the CSS rules will treat it as a "important" placeholder value and will always render the
+          labels in "active" state.
+        </p>
+          <div class="row">
+            <div class="col s12 m6">
+              <div class="input-field outlined" style="margin: 0 4px;">
+                <input id="first_name2" type="text" class="validate" placeholder=" ">
+                <label class="active" for="first_name2">First Name</label>
+              </div>
+            </div>
+            <div class="col s12 m6">
+              <div class="input-field outlined" style="margin: 0 4px;">
+                <input id="last_name2" type="text" class="validate" placeholder="Doe...">
+                <label class="active" for="last_name2">Last Name</label>
+              </div>
+            </div>
           </div>
 
         <pre><code class="language-markup">
-&lt;div class="input-field">
-  &lt;input value="Daniel" id="first_name2" type="text" class="validate" placeholder=" ">
-  &lt;label class="active" for="first_name2">First Name&lt;/label>
+&lt;div class="row">
+  &lt;div class="col s12 m6">
+    &lt;div class="input-field outlined" style="margin: 0 4px;">
+      &lt;input id="first_name2" type="text" class="validate" placeholder=" ">
+      &lt;label class="active" for="first_name2">First Name&lt;/label>
+    &lt;/div>
+  &lt;/div>
+  &lt;div class="col s12 m6">
+    &lt;div class="input-field outlined" style="margin: 0 4px;">
+      &lt;input id="last_name2" type="text" class="validate" placeholder="Doe...">
+      &lt;label class="active" for="last_name2">Last Name&lt;/label>
+    &lt;/div>
+  &lt;/div>
 &lt;/div>
         </code></pre>