From: Mark Otto <markdotto@gmail.com>
Date: Tue, 9 Feb 2016 09:10:05 +0000 (-0800)
Subject: .text-help is dead, long live .form-control-feedback
X-Git-Tag: v4.0.0-alpha.3~85^2~25
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=371fbdb0e89a8e6d53d5abca5bb7dd2aa95726f2;p=thirdparty%2Fbootstrap.git

.text-help is dead, long live .form-control-feedback

Uses a new more specific class, adds some basic spacing, and clarifies
that this class is only for validation feedback.

Clears up the help text class question in
https://github.com/twbs/bootstrap/pull/18704#issuecomment-168241731 and
addresses the vertical spacing in #18703.
---

diff --git a/docs/components/forms.md b/docs/components/forms.md
index 63dfd46b40..f1cfcd65e5 100644
--- a/docs/components/forms.md
+++ b/docs/components/forms.md
@@ -663,6 +663,8 @@ Block help text—for below inputs or for longer lines of help text—can be eas
 Bootstrap includes validation styles for danger, warning, and success states on form controls.
 
 - To use, add `.has-warning`, `.has-danger`, or `.has-success` to the parent element. Any `.form-control-label`, `.form-control`, and `.text-help` within that element will receive the validation styles.
+- To use, add `.has-warning`, `.has-danger`, or `.has-success` to the parent element. Any `.form-control-label`, `.form-control`, or custom form element will receive the validation styles.
+- Contextual validation text, in addition to your usual form field help text, can be added with the use of `.form-control-feedback`. This text will adapt to the parent `.has-*` class. By default it only includes a bit of `margin` for spacing and a modified `color` for each state.
 - Validation icons are `url()`s configured via Sass variables that are applied to `background-image` declarations for each state.
 - You may use your own base64 PNGs or SVGs by updating the Sass variables and recompiling.
 - Icons can also be disabled entirely by setting the variables to `none` or commenting out the source Sass.
diff --git a/scss/_forms.scss b/scss/_forms.scss
index 2614c119ff..c969531fba 100644
--- a/scss/_forms.scss
+++ b/scss/_forms.scss
@@ -265,6 +265,10 @@ input[type="checkbox"] {
 //
 // Apply contextual and semantic states to individual form controls.
 
+.form-control-feedback {
+  margin-top: .5rem;
+}
+
 .form-control-success,
 .form-control-warning,
 .form-control-danger {
diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss
index b87429c1b0..e0ab7dbcac 100644
--- a/scss/mixins/_forms.scss
+++ b/scss/mixins/_forms.scss
@@ -5,7 +5,7 @@
 
 @mixin form-control-validation($color) {
   // Color the label and help text
-  .text-help,
+  .form-control-feedback,
   .form-control-label,
   .radio,
   .checkbox,