Move the input groups validation workaround in docs.

diff --git a/site/docs/4.4/assets/scss/_component-examples.scss b/site/docs/4.4/assets/scss/_component-examples.scss
index 169100c34072903003ac161cce3bf3e0e8f5f6f3..41360d6c459083677f46f58d54a021b93d61523e 100644 (file)
--- a/site/docs/4.4/assets/scss/_component-examples.scss
+++ b/site/docs/4.4/assets/scss/_component-examples.scss
@@ -333,6 +333,10 @@
   }
 }
 
+.bd-example-forms-input-group-workaround .fix-rounded-right {
+  @include border-right-radius(.2rem !important);
+}
+
 //
 // Code snippets
 //

diff --git a/site/docs/4.4/components/forms.md b/site/docs/4.4/components/forms.md
index c138268f91797ceb2c9a021509acd5236f95eac5..e57eb580ce6658f42c7317eafe6a6ced18b2e9ea 100644 (file)
--- a/site/docs/4.4/components/forms.md
+++ b/site/docs/4.4/components/forms.md
@@ -752,6 +752,12 @@ We currently recommend using custom validation styles, as native browser default
 {% endcapture %}
 {% include callout.html content=callout type="warning" %}
 
+{% capture callout %}
+##### Input group validation
+Input groups have difficulty with validation styles, unfortunately. Our recommendation is to place feedback messages as sibling elements of the `.input-group` that has `.is-{valid|invalid}`. Placing feedback messages within input groups breaks the `border-radius`. [See this workaround](#input-group-validation-workaround).
+{% endcapture %}
+{% include callout.html content=callout type="warning" %}
+
 ### How it works
 
 Here's how form validation works with Bootstrap:
@@ -976,12 +982,6 @@ Validation styles are available for the following form controls and components:
 - `.custom-checkbox`s and `.custom-radio`s
 - `.custom-file`
 
-{% capture callout %}
-##### Input group validation
-Input groups have difficulty with validation styles, unfortunately. Our recommendation is to place feedback messages as sibling elements of the `.input-group` that has `.is-{valid|invalid}`. Placing feedback messages within input groups breaks the `border-radius`. [See this comment for a workaround](https://github.com/twbs/bootstrap/issues/25110#issuecomment-586565165).
-{% endcapture %}
-{% include callout.html content=callout type="warning" %}
-
 {% capture example %}
 <form class="was-validated">
   <div class="mb-3">
@@ -1153,6 +1153,68 @@ $form-validation-states: map-merge(
 }
 {% endhighlight %}
 
+### Input group validation workaround
+
+When you are using a medium size input group and don't customize the default border radius values, add `.rounded-right` to the missing border radius elements:
+
+{% highlight html %}
+<div class="input-group">
+  <div class="input-group-prepend">
+    <span class="input-group-text">@</span>
+  </div>
+  <input type="text" class="form-control rounded-right" required>
+  <div class="invalid-feedback">
+    Please choose a username.
+  </div>
+</div>
+{% endhighlight %}
+
+<div class="bd-example bd-example-forms-input-group-workaround">
+  <div class="input-group">
+    <div class="input-group-prepend">
+      <span class="input-group-text">@</span>
+    </div>
+    <input type="text" class="form-control is-invalid rounded-right" required>
+    <div class="invalid-feedback">
+      Please choose a username.
+    </div>
+  </div>
+</div>
+
+When you are using a small or large input-group or customizing the default border radius values, add custom CSS to the missing border radius elements:
+
+{% highlight css %}
+/* Change values to match the radius of your form control */
+.fix-rounded-right {
+  border-top-right-radius: .2rem !important;
+  border-bottom-right-radius: .2rem !important;
+}
+{% endhighlight %}
+
+{% highlight html %}
+<div class="input-group input-group-sm">
+  <div class="input-group-prepend">
+    <span class="input-group-text">@</span>
+  </div>
+  <input type="text" class="form-control fix-rounded-right" required>
+  <div class="invalid-feedback">
+    Please choose a username.
+  </div>
+</div>
+{% endhighlight %}
+
+<div class="bd-example bd-example-forms-input-group-workaround">
+  <div class="input-group input-group-sm">
+    <div class="input-group-prepend">
+      <span class="input-group-text">@</span>
+    </div>
+    <input type="text" class="form-control is-invalid fix-rounded-right" required>
+    <div class="invalid-feedback">
+      Please choose a username.
+    </div>
+  </div>
+</div>
+
 ## Custom forms
 
 For even more customization and cross browser consistency, use our completely custom form elements to replace the browser defaults. They're built on top of semantic and accessible markup, so they're solid replacements for any default form control.