From 50a6a16c330a85cecbf857dabf2189ecc7eb2285 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Thu, 17 Sep 2020 12:04:18 -0700
Subject: [PATCH] Streamline and bulletproof some things

- Apply some optimizations from code review
- Removed unecessary properties from the label
- Add some comments for what properties are required
- Move from fixed height for labels to height 100% so we can support textareas
- Improve docs a little bit, add ToC
---
 scss/forms/_floating-labels.scss              | 12 ++++----
 .../content/docs/5.0/forms/floating-labels.md | 29 ++++++++++++++++---
 2 files changed, 30 insertions(+), 11 deletions(-)

diff --git a/scss/forms/_floating-labels.scss b/scss/forms/_floating-labels.scss
index 7660ec52b3b6..d95b3b9ff915 100644
--- a/scss/forms/_floating-labels.scss
+++ b/scss/forms/_floating-labels.scss
@@ -3,7 +3,6 @@
 .form-floating {
   position: relative;
 
-  > label,
   > .form-control,
   > .form-select {
     height: $form-floating-height;
@@ -14,13 +13,10 @@
     position: absolute;
     top: 0;
     left: 0;
-    display: block;
-    width: 100%;
-    margin-bottom: 0; // Override default `<label>` margin
+    height: 100%; // allow textareas
+    padding: $form-floating-padding-y $form-floating-padding-x;
     pointer-events: none;
-    cursor: text; // Match the input under the label
-    border: $input-border-width solid transparent;
-    @include border-radius(.25rem);
+    border: $input-border-width solid transparent; // Required for aligning label's text with the input as it affects inner box model
     @include transition(all .1s ease-in-out);
   }
 
@@ -29,6 +25,7 @@
       color: transparent;
     }
 
+    &:focus,
     &:not(:placeholder-shown) {
       padding-top: $form-floating-input-padding-t;
       padding-bottom: $form-floating-input-padding-b;
@@ -40,6 +37,7 @@
     padding-bottom: $form-floating-input-padding-b;
   }
 
+  > .form-control:focus,
   > .form-control:not(:placeholder-shown),
   > .form-select {
     ~ label {
diff --git a/site/content/docs/5.0/forms/floating-labels.md b/site/content/docs/5.0/forms/floating-labels.md
index f2d48f89755e..43393ae40e40 100644
--- a/site/content/docs/5.0/forms/floating-labels.md
+++ b/site/content/docs/5.0/forms/floating-labels.md
@@ -3,6 +3,7 @@ layout: docs
 title: Floating labels
 description: Create beautifully simple forms labels that float over your input fields.
 group: forms
+toc: true
 ---
 
 ## Example
@@ -16,7 +17,7 @@ This approach works in the new Microsoft Edge built on Chromium and gracefully d
   <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
   <label for="floatingInput">Email address</label>
 </div>
-<div class="form-floating mb-3">
+<div class="form-floating">
   <input type="password" class="form-control" id="floatingPassword" placeholder="Password">
   <label for="floatingPassword">Password</label>
 </div>
@@ -25,7 +26,7 @@ This approach works in the new Microsoft Edge built on Chromium and gracefully d
 When there's a `value` already defined, `<label>`s will automatically adjust to their floated position.
 
 {{< example >}}
-<form class="form-floating mb-3">
+<form class="form-floating">
   <input type="email" class="form-control" id="floatingInputValue" placeholder="name@example.com" value="test@example.com">
   <label for="floatingInputValue">Input with value</label>
 </form>
@@ -34,18 +35,38 @@ When there's a `value` already defined, `<label>`s will automatically adjust to
 Form validation styles also work as expected.
 
 {{< example >}}
-<form class="form-floating mb-3">
+<form class="form-floating">
   <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 >}}
 
+## Textareas
+
+By default, `<textarea>`s with `.form-control` will be the same height as `<input>`s.
+
+{{< example >}}
+<div class="form-floating">
+  <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"></textarea>
+  <label for="floatingTextarea">Comments</label>
+</div>
+{{< /example >}}
+
+To set a custom height on your `<textarea>`, do not use the `rows` attribute. Instead, set an explicit `height` (either inline or via custom CSS).
+
+{{< example >}}
+<div class="form-floating">
+  <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2" style="height: 100px"></textarea>
+  <label for="floatingTextarea2">Comments</label>
+</div>
+{{< /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">
+<div class="form-floating">
   <select class="form-select" id="floatingSelect" aria-label="Floating label select example">
     <option selected>Open this select menu</option>
     <option value="1">One</option>