Restore `.form-text` (#30565)

diff --git a/scss/_forms.scss b/scss/_forms.scss
index fe95fd27972610433841d2f0bc702ea22a2c6973..39ba90d672c348a95d054ab8bef5dc8c159378dd 100644 (file)
--- a/scss/_forms.scss
+++ b/scss/_forms.scss
@@ -1,4 +1,5 @@
 @import "forms/labels";
+@import "forms/form-text";
 @import "forms/form-control";
 @import "forms/form-select";
 @import "forms/form-check";

diff --git a/scss/_variables.scss b/scss/_variables.scss
index 8d7c56afa2603a08b2a3e8234c287e80a1a57a22..6597e10adf5f31397450304028f85471a623e0dd 100644 (file)
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -565,6 +565,11 @@ $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-style:                  null !default;
+$form-text-color:                       $text-muted !default;
+
 $form-label-margin-bottom:              .5rem !default;
 $form-label-font-size:                  null !default;
 $form-label-font-style:                 null !default;
@@ -669,8 +674,6 @@ $form-switch-checked-color:       $component-active-color !default;
 $form-switch-checked-bg-image:    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-checked-color}'/></svg>") !default;
 $form-switch-checked-bg-position: right center !default;
 
-$form-text-margin-top:                  .25rem !default;
-
 $form-check-inline-margin-right:        1rem !default;
 
 $input-group-addon-color:               $input-color !default;

diff --git a/scss/forms/_form-text.scss b/scss/forms/_form-text.scss
new file mode 100644 (file)
index 0000000..3691afc
--- /dev/null
+++ b/scss/forms/_form-text.scss
@@ -0,0 +1,11 @@
+//
+// Form text
+//
+
+.form-text {
+  display: block;
+  margin-top: $form-text-margin-top;
+  @include font-size($form-text-font-size);
+  font-style: $form-text-font-style;
+  color: $form-text-color;
+}

diff --git a/site/content/docs/4.3/forms/layout.md b/site/content/docs/4.3/forms/layout.md
index fb3cd68cb721fda2abc0927c745094a9cad1a5be..3133a2f195d1600570420e2d32988289ffa220d3 100644 (file)
--- a/site/content/docs/4.3/forms/layout.md
+++ b/site/content/docs/4.3/forms/layout.md
@@ -18,7 +18,7 @@ Since Bootstrap applies `display: block` and `width: 100%` to almost all our for
 
 ## Utilities
 
-[Margin utilities]({{< docsref "/utilities/spacing" >}}) are the easiest way to add some structure to forms. They provide basic grouping of labels, controls, optional help text, and form validation messaging. We recommend sticking to `margin-bottom` utilities, and using a single direction throughout the form for consistency.
+[Margin utilities]({{< docsref "/utilities/spacing" >}}) are the easiest way to add some structure to forms. They provide basic grouping of labels, controls, optional form text, and form validation messaging. We recommend sticking to `margin-bottom` utilities, and using a single direction throughout the form for consistency.
 
 Feel free to build your forms however you like, with `<fieldset>`s, `<div>`s, or nearly any other element.
 

diff --git a/site/content/docs/4.3/forms/overview.md b/site/content/docs/4.3/forms/overview.md
index a4cc7800848a6312b50529bda97e2bd59adb915b..6e83c99ceff7a2941fffa3a56caeebff7932a595 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 text-muted">We'll never share your email with anyone else.</small>
+    <small id="emailHelp" class="form-text">We'll never share your email with anyone else.</small>
   </div>
   <div class="mb-3">
     <label for="exampleInputPassword1" class="form-label">Password</label>
@@ -51,22 +51,22 @@ Here's a quick example to demonstrate Bootstrap's form styles. Keep reading for
 </form>
 {{< /example >}}
 
-## Help text
+## Form text
 
-Block-level help text in forms can be created using `.form-text` (previously known as `.help-block` in v3). Inline help text can be flexibly implemented using any inline HTML element and utility classes like `.text-muted`.
+Block-level form text in forms can be created using `.form-text`.
 
 {{< callout warning >}}
-##### Associating help text with form controls
+##### Associating form text with form controls
 
-Help 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 help text when the user focuses or enters the control.
+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 >}}
 
-Help 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`. This class includes `display: block` and adds some top margin 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 text-muted">
+<small 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>
 {{< /example >}}

diff --git a/site/content/docs/4.3/migration.md b/site/content/docs/4.3/migration.md
index 2d73328d199dca5dccabfcb57c13c5bf4330d22e..736115af2e2b10612124f9795e3865f0b86e0d73 100644 (file)
--- a/site/content/docs/4.3/migration.md
+++ b/site/content/docs/4.3/migration.md
@@ -101,7 +101,6 @@ Changes to Reboot, typography, tables, and more.
 - Dropped `.form-row` for the more flexible grid gutters.
 - Dropped `.form-inline` for the more flexible grid.
 - Dropped support for `.form-control-plaintext` inside `.input-group`s.
-- Dropped `.form-text` as existing utilities cover this use class's former use case (e.g., `.mt-2`, `.text-small`, and/or `.text-muted`).
 - Dropped `.input-group-append` and `.input-group-prepend`. You can now just add buttons and `.input-group-text` as direct children of the input groups.
 - Form labels now require the `.form-label` class. Sass variables are now available to style form labels to your needs. [See #30476](https://github.com/twbs/bootstrap/pull/30476)