input_groups: add .has-validation, move feedback

New .has-validation class was added so validation feedback can move inside input-group. This works ok for simple_form, but the plain HTML version with both .valid-feedback and .invalid-feedback divs loses the rounded end on the input group. See twbs/bootstrap#25110
mhw · Apr 6, 2021 · 1c003de · 1c003de
1 parent 05f9e4e
commit 1c003de
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 17 deletions.
diff --git a/app/views/examples/input_groups/_bootstrap.html.erb b/app/views/examples/input_groups/_bootstrap.html.erb
@@ -3,46 +3,46 @@
 
   <div class="mb-3">
     <label for="exampleInputName" class="form-label">Name</label>
-    <div class="input-group">
+    <div class="input-group has-validation">
       <span class="input-group-text" id="basic-addon1">@</span>
       <input type="text" class="form-control" id="exampleInputName" placeholder="Your name" required>
+      <div class="invalid-feedback">Name can't be blank</div>
+      <div class="valid-feedback">Looks good!</div>
     </div>
-    <div class="invalid-feedback">Name can't be blank</div>
-    <div class="valid-feedback">Looks good!</div>
     <div class="form-text">Text input example</div>
   </div>
 
   <div class="mb-3">
     <label for="exampleInputEmail" class="form-label">Email</label>
-    <div class="input-group">
+    <div class="input-group has-validation">
       <span class="input-group-text" id="basic-addon1">example-</span>
       <input type="email" class="form-control" id="exampleInputEmail" placeholder="Enter email" autocomplete="email" required>
       <span class="input-group-text" id="basic-addon1">@gmail.com</span>
+      <div class="invalid-feedback">Email can't be blank</div>
+      <div class="valid-feedback">Looks good!</div>
     </div>
-    <div class="invalid-feedback">Email can't be blank</div>
-    <div class="valid-feedback">Looks good!</div>
     <div class="form-text">We'll never share your email with anyone else.</div>
   </div>
 
   <div class="mb-3">
     <label for="exampleInputPassword" class="form-label">Password</label>
-    <div class="input-group">
+    <div class="input-group has-validation">
       <input type="password" class="form-control" id="exampleInputPassword" placeholder="Password" autocomplete="current-password" required>
       <span class="input-group-text" id="basic-addon1">🙊</span>
+      <div class="invalid-feedback">Please provide a valid value.</div>
+      <div class="valid-feedback">Looks good!</div>
     </div>
-    <div class="invalid-feedback">Please provide a valid value.</div>
-    <div class="valid-feedback">Looks good!</div>
     <div class="form-text">Password input example</div>
   </div>
 
   <div class="mb-3">
     <label for="exampleTextareaBio" class="form-label">Bio</label>
-    <div class="input-group">
+    <div class="input-group has-validation">
       <span class="input-group-text">With textarea</span>
       <textarea class="form-control" id="exampleTextareaBio" rows="2" placeholder="Tell us your story" required></textarea>
+      <div class="invalid-feedback">Please provide a valid value.</div>
+      <div class="valid-feedback">Looks good!</div>
     </div>
-    <div class="invalid-feedback">Please provide a valid value.</div>
-    <div class="valid-feedback">Looks good!</div>
     <div class="form-text">Textarea input example</div>
   </div>
 

diff --git a/config/initializers/simple_form_bootstrap.rb b/config/initializers/simple_form_bootstrap.rb
@@ -302,12 +302,12 @@
     b.optional :min_max
     b.optional :readonly
     b.use :label, class: 'form-label'
-    b.wrapper :input_group_tag, tag: 'div', class: 'input-group' do |ba|
+    b.wrapper :input_group_tag, tag: 'div', class: 'input-group has-validation' do |ba|
       ba.optional :prepend
       ba.use :input, class: 'form-control', error_class: 'is-invalid', valid_class: 'is-valid'
       ba.optional :append
+      ba.use :full_error, wrap_with: { tag: 'div', class: 'invalid-feedback' }
     end
-    b.use :full_error, wrap_with: { tag: 'div', class: 'invalid-feedback d-block' }
     b.use :hint, wrap_with: { tag: 'div', class: 'form-text' }
   end
 

diff --git a/test/simple_form-bootstrap/input_group_test.rb b/test/simple_form-bootstrap/input_group_test.rb
@@ -11,7 +11,7 @@ def test_input_group_prepend
     expected = <<-HTML
       <div class="mb-3 string required user_name">
         <label class="form-label string required" for="user_name">Name <abbr title="required">*</abbr></label>
-        <div class="input-group">
+        <div class="input-group has-validation">
           <span class="input-group-text">$</span>
           <input class="form-control string required" id="user_name" name="user[name]" placeholder="Your name" type="text"/>
         </div>
@@ -26,7 +26,7 @@ def test_input_group_append
     expected = <<-HTML
       <div class="mb-3 string required user_name">
         <label class="form-label string required" for="user_name">Name <abbr title="required">*</abbr></label>
-        <div class="input-group">
+        <div class="input-group has-validation">
           <input class="form-control string required" id="user_name" name="user[name]" placeholder="Your name" type="text"/>
           <span class="input-group-text">.00</span>
         </div>
@@ -41,7 +41,7 @@ def test_input_group_prepend_and_append
     expected = <<-HTML
       <div class="mb-3 string required user_name">
         <label class="form-label string required" for="user_name">Name <abbr title="required">*</abbr></label>
-        <div class="input-group">
+        <div class="input-group has-validation">
           <span class="input-group-text">$</span>
           <input class="form-control string required" id="user_name" name="user[name]" placeholder="Your name" type="text"/>
           <span class="input-group-text">.00</span>