feat: removes `.form-text` display (#30598)

Co-authored-by: Martijn Cuppens <martijn.cuppens@gmail.com>

diff --git a/scss/_variables.scss b/scss/_variables.scss
index 419ff183003b767e9dcb76cb708690a0524214f4..a6e47b2857ccbd16edaa556a2c60a47aec7fc631 100644 (file)
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -570,7 +570,7 @@ $btn-transition:              color .15s ease-in-out, background-color .15s ease
 // Forms
 
 $form-text-margin-top:                  .25rem !default;
-$form-text-font-size:                   null !default;
+$form-text-font-size:                   $small-font-size !default;
 $form-text-font-style:                  null !default;
 $form-text-color:                       $text-muted !default;
 
@@ -772,7 +772,8 @@ $form-file-height-lg:             $input-height-lg !default;
 // Form validation
 
 $form-feedback-margin-top:          $form-text-margin-top !default;
-$form-feedback-font-size:           $small-font-size !default;
+$form-feedback-font-size:           $form-text-font-size !default;
+$form-feedback-font-style:          $form-text-font-style !default;
 $form-feedback-valid-color:         $success !default;
 $form-feedback-invalid-color:       $danger !default;
 

diff --git a/scss/forms/_form-text.scss b/scss/forms/_form-text.scss
index 3691afcfc3350b3a8ee893a468cf14c3384b80a2..e25bbeb1d83bff5413c482082c14f863d2e429e1 100644 (file)
--- a/scss/forms/_form-text.scss
+++ b/scss/forms/_form-text.scss
@@ -3,7 +3,6 @@
 //
 
 .form-text {
-  display: block;
   margin-top: $form-text-margin-top;
   @include font-size($form-text-font-size);
   font-style: $form-text-font-style;

diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss
index 7abfd23bfb25ac81d6c4b6d4af951c2b1bee7008..5166583714da0cc5d62754643cad74549c1b186e 100644 (file)
--- a/scss/mixins/_forms.scss
+++ b/scss/mixins/_forms.scss
@@ -19,6 +19,7 @@
     width: 100%;
     margin-top: $form-feedback-margin-top;
     @include font-size($form-feedback-font-size);
+    font-style: $form-feedback-font-style;
     color: $color;
   }
 

diff --git a/site/content/docs/4.3/forms/overview.md b/site/content/docs/4.3/forms/overview.md
index 6e83c99ceff7a2941fffa3a56caeebff7932a595..41db3a9f92a4205d9f6b01ee437ce95bb8f27a1f 100644 (file)
--- a/site/content/docs/4.3/forms/overview.md
+++ b/site/content/docs/4.3/forms/overview.md
@@ -37,7 +37,7 @@ Here's a quick example to demonstrate Bootstrap's form styles. Keep reading for
   <div class="mb-3">
     <label for="exampleInputEmail1" class="form-label">Email address</label>
     <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
-    <small id="emailHelp" class="form-text">We'll never share your email with anyone else.</small>
+    <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
   </div>
   <div class="mb-3">
     <label for="exampleInputPassword1" class="form-label">Password</label>
@@ -53,7 +53,7 @@ Here's a quick example to demonstrate Bootstrap's form styles. Keep reading for
 
 ## Form text
 
-Block-level form text in forms can be created using `.form-text`.
+Block-level or inline-level form text can be created using `.form-text`.
 
 {{< callout warning >}}
 ##### Associating form text with form controls
@@ -61,17 +61,17 @@ Block-level form text in forms can be created using `.form-text`.
 Form text should be explicitly associated with the form control it relates to using the `aria-describedby` attribute. This will ensure that assistive technologies—such as screen readers—will announce this form text when the user focuses or enters the control.
 {{< /callout >}}
 
-Form text below inputs can be styled with `.form-text`. This class includes `display: block` and adds some top margin for easy spacing from the inputs above.
+Form text below inputs can be styled with `.form-text`. If a block-level element will be used, a top margin is added for easy spacing from the inputs above.
 
 {{< example >}}
 <label for="inputPassword5" class="form-label">Password</label>
 <input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
-<small id="passwordHelpBlock" class="form-text">
+<div id="passwordHelpBlock" class="form-text">
   Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
-</small>
+</div>
 {{< /example >}}
 
-Inline text can use any typical inline HTML element (be it a `<small>`, `<span>`, or something else) with nothing more than a utility class.
+Inline text can use any typical inline HTML element (be it a `<span>`, `<small>`, or something else) with nothing more than the `.form-text` class.
 
 {{< example >}}
 <div class="row g-3 align-items-center">
@@ -82,9 +82,9 @@ Inline text can use any typical inline HTML element (be it a `<small>`, `<span>`
     <input type="password" id="inputPassword6" class="form-control" aria-describedby="passwordHelpInline">
   </div>
   <div class="col-auto">
-    <small id="passwordHelpInline" class="text-muted">
+    <span id="passwordHelpInline" class="form-text">
       Must be 8-20 characters long.
-    </small>
+    </span>
   </div>
 </div>
 {{< /example >}}