From 855e2a270be87c88ef59ebb11bfaeada27467860 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Wed, 25 Mar 2020 13:01:11 -0700
Subject: [PATCH] Update floating labels to support .form-select, make inputs
 and selects more consistent

- To do this, I made the .form-control and .form-select consistent in min-height vs height
- Removed some unused variables now
- Updated -color to be the -color because I don't know why this was any different before
- Update page to include some examples for layout, validation, and value
- Rewrite styles to not modify padding, but instead transform and opacity
---
 scss/_variables.scss                          | 10 ++--
 scss/forms/_floating-labels.scss              | 23 ++++---
 scss/forms/_form-select.scss                  |  2 +-
 .../content/docs/4.3/forms/floating-labels.md | 60 +++++++++++++++++++
 4 files changed, 80 insertions(+), 15 deletions(-)

diff --git a/scss/_variables.scss b/scss/_variables.scss
index a78e97f4f11a..8035e1adfc5c 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -578,7 +578,7 @@ $input-bg:                              $white !default;
 $input-disabled-bg:                     $gray-200 !default;
 $input-disabled-border-color:           null !default;
 
-$input-color:                           $gray-700 !default;
+$input-color:                           $body-color !default;
 $input-border-color:                    $gray-400 !default;
 $input-border-width:                    $input-btn-border-width !default;
 $input-box-shadow:                      $box-shadow-inset !default;
@@ -756,14 +756,12 @@ $form-file-padding-x-lg:          $input-padding-x-lg !default;
 $form-file-font-size-lg:          $input-font-size-lg !default;
 $form-file-height-lg:             $input-height-lg !default;
 
-$form-floating-height:            3.5rem !default;
+$form-floating-height:            add(3.75rem, $input-height-border) !default;
 $form-floating-padding-x:         $input-padding-x !default;
 $form-floating-padding-y:         1rem !default;
-$form-floating-input-padding-t:   1.625rem !default;
-$form-floating-input-padding-b:   .375rem !default;
-$form-floating-label-padding-y:   $form-floating-input-padding-b !default;
+$form-floating-input-padding-t:   1.75rem !default;
+$form-floating-input-padding-b:   .5rem !default;
 $form-floating-label-font-size:   .85rem !default;
-$form-floating-label-color:       $gray-500 !default;
 
 
 // Form validation
diff --git a/scss/forms/_floating-labels.scss b/scss/forms/_floating-labels.scss
index 418b37bf6ad7..7660ec52b3b6 100644
--- a/scss/forms/_floating-labels.scss
+++ b/scss/forms/_floating-labels.scss
@@ -4,7 +4,8 @@
   position: relative;
 
   > label,
-  > .form-control {
+  > .form-control,
+  > .form-select {
     height: $form-floating-height;
     padding: $form-floating-padding-y $form-floating-padding-x;
   }
@@ -16,7 +17,6 @@
     display: block;
     width: 100%;
     margin-bottom: 0; // Override default `<label>` margin
-    // color: inherit;
     pointer-events: none;
     cursor: text; // Match the input under the label
     border: $input-border-width solid transparent;
@@ -32,13 +32,20 @@
     &:not(:placeholder-shown) {
       padding-top: $form-floating-input-padding-t;
       padding-bottom: $form-floating-input-padding-b;
+    }
+  }
+
+  > .form-select {
+    padding-top: $form-floating-input-padding-t;
+    padding-bottom: $form-floating-input-padding-b;
+  }
 
-      ~ label {
-        padding-top: $form-floating-label-padding-y;
-        padding-bottom: $form-floating-label-padding-y;
-        @include font-size($form-floating-label-font-size);
-        color: $form-floating-label-color;
-      }
+  > .form-control:not(:placeholder-shown),
+  > .form-select {
+    ~ label {
+      @include font-size($form-floating-label-font-size);
+      opacity: .65;
+      transform: translate3d(0, -.75rem, 0);
     }
   }
 }
diff --git a/scss/forms/_form-select.scss b/scss/forms/_form-select.scss
index 8c410c97bf26..d85f84e2e980 100644
--- a/scss/forms/_form-select.scss
+++ b/scss/forms/_form-select.scss
@@ -6,7 +6,7 @@
 .form-select {
   display: block;
   width: 100%;
-  height: $form-select-height;
+  min-height: $form-select-height;
   padding: $form-select-padding-y ($form-select-padding-x + $form-select-indicator-padding) $form-select-padding-y $form-select-padding-x;
   font-family: $form-select-font-family;
   @include font-size($form-select-font-size);
diff --git a/site/content/docs/4.3/forms/floating-labels.md b/site/content/docs/4.3/forms/floating-labels.md
index a2154e359d7a..f2d48f89755e 100644
--- a/site/content/docs/4.3/forms/floating-labels.md
+++ b/site/content/docs/4.3/forms/floating-labels.md
@@ -21,3 +21,63 @@ This approach works in the new Microsoft Edge built on Chromium and gracefully d
   <label for="floatingPassword">Password</label>
 </div>
 {{< /example >}}
+
+When there's a `value` already defined, `<label>`s will automatically adjust to their floated position.
+
+{{< example >}}
+<form class="form-floating mb-3">
+  <input type="email" class="form-control" id="floatingInputValue" placeholder="name@example.com" value="test@example.com">
+  <label for="floatingInputValue">Input with value</label>
+</form>
+{{< /example >}}
+
+Form validation styles also work as expected.
+
+{{< example >}}
+<form class="form-floating mb-3">
+  <input type="email" class="form-control is-invalid" id="floatingInputInvalid" placeholder="name@example.com" value="test@example.com">
+  <label for="floatingInputInvalid">Invalid input</label>
+</form>
+{{< /example >}}
+
+## Selects
+
+Other than `.form-control`, floating labels only available on `.form-select`s. They work in the same way, but unlike `<input>`s, they'll always show the `<label>` in its floated state.
+
+{{< example >}}
+<div class="form-floating mb-3">
+  <select class="form-select" id="floatingSelect" aria-label="Floating label select example">
+    <option selected>Open this select menu</option>
+    <option value="1">One</option>
+    <option value="2">Two</option>
+    <option value="3">Three</option>
+  </select>
+  <label for="floatingSelect">Works with selects</label>
+</div>
+{{< /example >}}
+
+## Layout
+
+When working with the Bootstrap grid system, be sure to place form elements within column classes.
+
+{{< example >}}
+<div class="row g-2">
+  <div class="col-md">
+    <div class="form-floating">
+      <input type="email" class="form-control" id="floatingInputGrid" placeholder="name@example.com" value="mdo@example.com">
+      <label for="floatingInputGrid">Email address</label>
+    </div>
+  </div>
+  <div class="col-md">
+    <div class="form-floating">
+      <select class="form-select" id="floatingSelectGrid" aria-label="Floating label select example">
+        <option selected>Open this select menu</option>
+        <option value="1">One</option>
+        <option value="2">Two</option>
+        <option value="3">Three</option>
+      </select>
+      <label for="floatingSelectGrid">Works with selects</label>
+    </div>
+  </div>
+</div>
+{{< /example >}}