Handle inline radio buttons and check boxes for Bootstrap 4. (bootstr…

…ap-ruby#410) * Inline checkboxes. * Rebase from PR bootstrap-ruby#409.
lcreid · Jun 4, 2018 · 7727ca9 · 7727ca9
1 parent 2b2c3d2
commit 7727ca9
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 55 deletions.
diff --git a/lib/bootstrap_form/form_builder.rb b/lib/bootstrap_form/form_builder.rb
@@ -136,19 +136,13 @@ def check_box_with_bootstrap(name, options = {}, checked_value = "1", unchecked_
           checkbox_html.concat(label(label_name, label_description, class: ["custom-control-label", label_class].compact.join(" ")))
         end
       else
-        if options[:inline]
-          label_class = " #{label_class}" if label_class
+        wrapper_class = "form-check"
+        wrapper_class += " form-check-inline" if options[:inline]
+        content_tag(:div, class: wrapper_class) do
           checkbox_html
             .concat(label(label_name,
                           label_description,
-                          { class: "form-check-inline#{label_class}" }.merge(options[:id].present? ? { for: options[:id] } : {})))
-        else
-          content_tag(:div, class: "form-check") do
-            checkbox_html
-              .concat(label(label_name,
-                            label_description,
-                            { class: ["form-check-label", label_class].compact.join(" ") }.merge(options[:id].present? ? { for: options[:id] } : {})))
-          end
+                          { class: ["form-check-label", label_class].compact.join(" ") }.merge(options[:id].present? ? { for: options[:id] } : {})))
         end
       end
     end
@@ -176,15 +170,12 @@ def radio_button_with_bootstrap(name, value, *args)
           radio_html.concat(label(name, options[:label], value: value, class: ["custom-control-label", label_class].compact.join(" ")))
         end
       else
-        label_class = " #{label_class}" if label_class
-        if options[:inline]
+        wrapper_class = "form-check"
+        wrapper_class += " form-check-inline" if options[:inline]
+        label_class = ["form-check-label", label_class].compact.join(" ")
+        content_tag(:div, class: "#{wrapper_class}#{disabled_class}") do
           radio_html
-            .concat(label(name, options[:label], { class: "form-check-label#{label_class}", value: value }.merge(options[:id].present? ? { for: options[:id] } : {})))
-        else
-          content_tag(:div, class: "form-check#{disabled_class}") do
-            radio_html
-              .concat(label(name, options[:label], { class: "form-check-label#{label_class}", value: value }.merge(options[:id].present? ? { for: options[:id] } : {})))
-          end
+            .concat(label(name, options[:label], { value: value, class: label_class }.merge(options[:id].present? ? { for: options[:id] } : {})))
         end
       end
     end

diff --git a/test/bootstrap_checkbox_test.rb b/test/bootstrap_checkbox_test.rb
@@ -98,33 +98,39 @@ class BootstrapCheckboxTest < ActionView::TestCase
 
   test "inline checkboxes" do
     expected = <<-HTML.strip_heredoc
-    <input name="user[terms]" type="hidden" value="0" />
-    <input class="form-check-input" id="user_terms" name="user[terms]" type="checkbox" value="1" />
-      <label class="form-check-inline" for="user_terms">
-        I agree to the terms
-      </label>
+      <div class="form-check form-check-inline">
+        <input name="user[terms]" type="hidden" value="0" />
+        <input class="form-check-input" id="user_terms" name="user[terms]" type="checkbox" value="1" />
+        <label class="form-check-label" for="user_terms">
+          I agree to the terms
+        </label>
+      </div>
     HTML
     assert_equivalent_xml expected, @builder.check_box(:terms, label: 'I agree to the terms', inline: true)
   end
 
   test "disabled inline check_box" do
     expected = <<-HTML.strip_heredoc
-    <input name="user[terms]" type="hidden" value="0" disabled="disabled" />
-    <input class="form-check-input" id="user_terms" name="user[terms]" type="checkbox" value="1" disabled="disabled" />
-      <label class="form-check-inline" for="user_terms">
-        I agree to the terms
-      </label>
+      <div class="form-check form-check-inline">
+        <input name="user[terms]" type="hidden" value="0" disabled="disabled" />
+        <input class="form-check-input" id="user_terms" name="user[terms]" type="checkbox" value="1" disabled="disabled" />
+        <label class="form-check-label" for="user_terms">
+          I agree to the terms
+        </label>
+      </div>
     HTML
     assert_equivalent_xml expected, @builder.check_box(:terms, label: 'I agree to the terms', inline: true, disabled: true)
   end
 
   test "inline checkboxes with custom label class" do
     expected = <<-HTML.strip_heredoc
-    <input name="user[terms]" type="hidden" value="0" />
-    <input class="form-check-input" id="user_terms" name="user[terms]" type="checkbox" value="1" />
-      <label class="form-check-inline btn" for="user_terms">
+    <div class="form-check form-check-inline">
+      <input name="user[terms]" type="hidden" value="0" />
+      <input class="form-check-input" id="user_terms" name="user[terms]" type="checkbox" value="1" />
+      <label class="form-check-label btn" for="user_terms">
         Terms
       </label>
+    </div>
     HTML
     assert_equivalent_xml expected, @builder.check_box(:terms, inline: true, label_class: 'btn')
   end
@@ -176,14 +182,18 @@ class BootstrapCheckboxTest < ActionView::TestCase
       <input id="user_misc" multiple="multiple" name="user[misc][]" type="hidden" value="" />
       <div class="form-group">
         <label for="user_misc">Misc</label>
-        <input class="form-check-input" id="user_misc_1" name="user[misc][]" type="checkbox" value="1" />
-        <label class="form-check-inline" for="user_misc_1">
-          Foo
-        </label>
-        <input class="form-check-input" id="user_misc_2" name="user[misc][]" type="checkbox" value="2" />
-        <label class="form-check-inline" for="user_misc_2">
-          Bar
-        </label>
+        <div class="form-check form-check-inline">
+          <input class="form-check-input" id="user_misc_1" name="user[misc][]" type="checkbox" value="1" />
+          <label class="form-check-label" for="user_misc_1">
+            Foo
+          </label>
+        </div>
+        <div class="form-check form-check-inline">
+          <input class="form-check-input" id="user_misc_2" name="user[misc][]" type="checkbox" value="2" />
+          <label class="form-check-label" for="user_misc_2">
+            Bar
+          </label>
+        </div>
       </div>
     HTML
 

diff --git a/test/bootstrap_radio_button_test.rb b/test/bootstrap_radio_button_test.rb
@@ -55,30 +55,36 @@ class BootstrapRadioButtonTest < ActionView::TestCase
 
   test "radio_button inline label is set correctly" do
     expected = <<-HTML.strip_heredoc
-      <input class="form-check-input" id="user_misc_1" name="user[misc]" type="radio" value="1" />
-      <label class="form-check-label" for="user_misc_1">
-        This is a radio button
-      </label>
+      <div class="form-check form-check-inline">
+        <input class="form-check-input" id="user_misc_1" name="user[misc]" type="radio" value="1" />
+        <label class="form-check-label" for="user_misc_1">
+          This is a radio button
+        </label>
+      </div>
     HTML
     assert_equivalent_xml expected, @builder.radio_button(:misc, '1', label: 'This is a radio button', inline: true)
   end
 
   test "radio_button disabled inline label is set correctly" do
     expected = <<-HTML.strip_heredoc
-      <input class="form-check-input" disabled="disabled" id="user_misc_1" name="user[misc]" type="radio" value="1" />
-      <label class="form-check-label" for="user_misc_1">
-        This is a radio button
-      </label>
+      <div class="form-check form-check-inline disabled">
+        <input class="form-check-input" disabled="disabled" id="user_misc_1" name="user[misc]" type="radio" value="1" />
+        <label class="form-check-label" for="user_misc_1">
+          This is a radio button
+        </label>
+      </div>
     HTML
     assert_equivalent_xml expected, @builder.radio_button(:misc, '1', label: 'This is a radio button', inline: true, disabled: true)
   end
 
   test "radio_button inline label class is set correctly" do
     expected = <<-HTML.strip_heredoc
-      <input class="form-check-input" id="user_misc_1" name="user[misc]" type="radio" value="1" />
-      <label class="form-check-label btn" for="user_misc_1">
-        This is a radio button
-      </label>
+      <div class="form-check form-check-inline">
+        <input class="form-check-input" id="user_misc_1" name="user[misc]" type="radio" value="1" />
+        <label class="form-check-label btn" for="user_misc_1">
+          This is a radio button
+        </label>
+      </div>
     HTML
     assert_equivalent_xml expected, @builder.radio_button(:misc, '1', label: 'This is a radio button', inline: true, label_class: 'btn')
   end
@@ -125,10 +131,14 @@ class BootstrapRadioButtonTest < ActionView::TestCase
     expected = <<-HTML.strip_heredoc
       <div class="form-group">
         <label for="user_misc">Misc</label>
-        <input class="form-check-input" id="user_misc_1" name="user[misc]" type="radio" value="1" />
-        <label class="form-check-label" for="user_misc_1"> Foo</label>
-        <input class="form-check-input" id="user_misc_2" name="user[misc]" type="radio" value="2" />
-        <label class="form-check-label" for="user_misc_2"> Bar</label>
+        <div class="form-check form-check-inline">
+          <input class="form-check-input" id="user_misc_1" name="user[misc]" type="radio" value="1" />
+          <label class="form-check-label" for="user_misc_1"> Foo</label>
+        </div>
+        <div class="form-check form-check-inline">
+          <input class="form-check-input" id="user_misc_2" name="user[misc]" type="radio" value="2" />
+          <label class="form-check-label" for="user_misc_2"> Bar</label>
+        </div>
       </div>
     HTML