Add classes to the div.form-check that wraps check boxes and radio buttons. (bootstrap-ruby#479)

* Rename div_class to make refactoring more obvious.

* Fix issue bootstrap-ruby#476 for check_boxes.

* Fix issue bootstrap-ruby#476 for radio buttons.

* Test for `:custom` option just once.

* Add wrapper_class for check boxes and radio buttons.

Author: lcreid

CHANGELOG.md

@@ -6,6 +6,7 @@
 
 ### New features
 
+* [#476] Give a way to pass classes to the `div.form-check` wrapper for check boxes and radio buttons - [@lcreid](https://github.com/lcreid).
 * [461](https://github.com/bootstrap-ruby/bootstrap_form/pull/461): default form-inline class applied to parent content div on date select helpers. Can override with a :skip_inline option on the field helper - [@lancecarlson](https://github.com/lancecarlson).
 * Your contribution here!
 * The `button`, `submit`, and `primary` helpers can now receive an additional option, `extra_class`. This option allows us to specify additional CSS classes to be added to the corresponding button/input, _while_ maintaining the original default ones. E.g., a primary button with an `extra_class` 'test-button' will have its final CSS classes declaration as 'btn btn-primary test-button'.

README.md

@@ -348,9 +348,15 @@ To display checkboxes and radios inline, pass the `inline: true` option:
 <% end %>
 ```
 
+Check boxes and radio buttons are wrapped in a `div.form-check`. You can add classes to this `div` with the `:wrapper_class` option:
+
+```erb
+<%= f.radio_button :skill_level, 0, label: "Novice", inline: true, wrapper_class: "w-auto" %>
+```
+
 #### Collections
 
-`bootstrap_form` also provides helpers that automatically creates the
+`bootstrap_form` also provides helpers that automatically create the
 `form_group` and the `radio_button`s or `check_box`es for you:
 
 ```erb

lib/bootstrap_form/form_builder.rb

@@ -130,14 +130,24 @@ def time_zone_select_with_bootstrap(method, priority_zones = nil, options = {},
 
     def check_box_with_bootstrap(name, options = {}, checked_value = "1", unchecked_value = "0", &block)
       options = options.symbolize_keys!
-      check_box_options = options.except(:label, :label_class, :error_message, :help, :inline, :custom, :hide_label, :skip_label)
+      check_box_options = options.except(:label, :label_class, :error_message, :help, :inline, :custom, :hide_label, :skip_label, :wrapper_class)
       check_box_classes = [check_box_options[:class]]
       check_box_classes << "position-static" if options[:skip_label] || options[:hide_label]
       check_box_classes << "is-invalid" if has_error?(name)
+
+      label_classes = [options[:label_class]]
+      label_classes << hide_class if options[:hide_label]
+
       if options[:custom]
         check_box_options[:class] = (["custom-control-input"] + check_box_classes).compact.join(' ')
+        wrapper_class = ["custom-control", "custom-checkbox"]
+        wrapper_class.append("custom-control-inline") if layout_inline?(options[:inline])
+        label_class = label_classes.prepend("custom-control-label").compact.join(" ")
       else
         check_box_options[:class] = (["form-check-input"] + check_box_classes).compact.join(' ')
+        wrapper_class = ["form-check"]
+        wrapper_class.append("form-check-inline") if layout_inline?(options[:inline])
+        label_class = label_classes.prepend("form-check-label").compact.join(" ")
       end
 
       checkbox_html = check_box_without_bootstrap(name, check_box_options, checked_value, unchecked_value)
@@ -153,103 +163,61 @@ def check_box_with_bootstrap(name, options = {}, checked_value = "1", unchecked_
           "#{name}_#{checked_value.to_s.gsub(/\s/, "_").gsub(/[^-[[:word:]]]/, "").mb_chars.downcase.to_s}"
       end
 
-      label_classes = [options[:label_class]]
-      label_classes << hide_class if options[:hide_label]
-
-      if options[:custom]
-        div_class = ["custom-control", "custom-checkbox"]
-        div_class.append("custom-control-inline") if layout_inline?(options[:inline])
-        label_class = label_classes.prepend("custom-control-label").compact.join(" ")
+      label_options = { class: label_class }
+      label_options[:for] = options[:id] if options[:id].present?
 
-        label_options = { class: label_class }
-        label_options[:for] = options[:id] if options[:id].present?
+      wrapper_class.append(options[:wrapper_class]) if options[:wrapper_class]
 
-        content_tag(:div, class: div_class.compact.join(" ")) do
-          html = if options[:skip_label]
-            checkbox_html
-          else
-            checkbox_html
-              .concat(label(label_name, label_description, label_options))
-          end
-          html.concat(generate_error(name)) if options[:error_message]
-          html
-        end
-      else
-        wrapper_class = "form-check"
-        wrapper_class += " form-check-inline" if layout_inline?(options[:inline])
-        label_class = label_classes.prepend("form-check-label").compact.join(" ")
-
-        label_options = { class: label_class }
-        label_options[:for] = options[:id] if options[:id].present?
-
-        content_tag(:div, class: wrapper_class) do
-          html = if options[:skip_label]
-            checkbox_html
-          else
-            checkbox_html
-              .concat(label(label_name, label_description, label_options))
-          end
-          html.concat(generate_error(name)) if options[:error_message]
-          html
+      content_tag(:div, class: wrapper_class.compact.join(" ")) do
+        html = if options[:skip_label]
+          checkbox_html
+        else
+          checkbox_html.concat(label(label_name, label_description, label_options))
         end
+        html.concat(generate_error(name)) if options[:error_message]
+        html
       end
     end
 
     bootstrap_method_alias :check_box
 
     def radio_button_with_bootstrap(name, value, *args)
       options = args.extract_options!.symbolize_keys!
-      radio_options = options.except(:label, :label_class, :error_message, :help, :inline, :custom, :hide_label, :skip_label)
+      radio_options = options.except(:label, :label_class, :error_message, :help, :inline, :custom, :hide_label, :skip_label, :wrapper_class)
       radio_classes = [options[:class]]
       radio_classes << "position-static" if options[:skip_label] || options[:hide_label]
       radio_classes << "is-invalid" if has_error?(name)
-      if options[:custom]
-        radio_options[:class] = radio_classes.prepend("custom-control-input").compact.join(' ')
-      else
-        radio_options[:class] = radio_classes.prepend("form-check-input").compact.join(' ')
-      end
-      radio_html = radio_button_without_bootstrap(name, value, radio_options)
 
-      disabled_class = " disabled" if options[:disabled]
       label_classes  = [options[:label_class]]
       label_classes << hide_class if options[:hide_label]
 
       if options[:custom]
-        div_class = ["custom-control", "custom-radio"]
-        div_class.append("custom-control-inline") if layout_inline?(options[:inline])
+        radio_options[:class] = radio_classes.prepend("custom-control-input").compact.join(' ')
+        wrapper_class = ["custom-control", "custom-radio"]
+        wrapper_class.append("custom-control-inline") if layout_inline?(options[:inline])
         label_class = label_classes.prepend("custom-control-label").compact.join(" ")
-
-        label_options = { value: value, class: label_class }
-        label_options[:for] = options[:id] if options[:id].present?
-
-        content_tag(:div, class: div_class.compact.join(" ")) do
-          html = if options[:skip_label]
-            radio_html
-          else
-            radio_html
-              .concat(label(name, options[:label], label_options))
-          end
-          html.concat(generate_error(name)) if options[:error_message]
-          html
-        end
       else
-        wrapper_class = "form-check"
-        wrapper_class += " form-check-inline" if layout_inline?(options[:inline])
+        radio_options[:class] = radio_classes.prepend("form-check-input").compact.join(' ')
+        wrapper_class = ["form-check"]
+        wrapper_class.append("form-check-inline") if layout_inline?(options[:inline])
+        wrapper_class.append("disabled") if options[:disabled]
         label_class = label_classes.prepend("form-check-label").compact.join(" ")
+      end
+      radio_html = radio_button_without_bootstrap(name, value, radio_options)
 
-        label_options = { value: value, class: label_class }
-        label_options[:for] = options[:id] if options[:id].present?
+      label_options = { value: value, class: label_class }
+      label_options[:for] = options[:id] if options[:id].present?
 
-        content_tag(:div, class: "#{wrapper_class}#{disabled_class}") do
-          html = if options[:skip_label]
-            radio_html
-          else
-            radio_html
-              .concat(label(name, options[:label], label_options))
-          end
-          html.concat(generate_error(name)) if options[:error_message]
-          html
+      wrapper_class.append(options[:wrapper_class]) if options[:wrapper_class]
+
+      content_tag(:div, class: wrapper_class.compact.join(" ")) do
+        html = if options[:skip_label]
+          radio_html
+        else
+          radio_html.concat(label(name, options[:label], label_options))
         end
+        html.concat(generate_error(name)) if options[:error_message]
+        html
       end
     end
 

test/bootstrap_checkbox_test.rb

@@ -658,4 +658,52 @@ class BootstrapCheckboxTest < ActionView::TestCase
     end
     assert_equivalent_xml expected, actual
   end
+
+  test "check box with custom wrapper class" do
+    expected = <<-HTML.strip_heredoc
+      <div class="form-check custom-class">
+        <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', wrapper_class: "custom-class")
+  end
+
+  test "inline check box with custom wrapper class" do
+    expected = <<-HTML.strip_heredoc
+      <div class="form-check form-check-inline custom-class">
+        <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, wrapper_class: "custom-class")
+  end
+
+  test "custom check box with custom wrapper class" do
+    expected = <<-HTML.strip_heredoc
+      <div class="custom-control custom-checkbox custom-class">
+        <input name="user[terms]" type="hidden" value="0" />
+        <input class="custom-control-input" id="user_terms" name="user[terms]" type="checkbox" value="1" />
+        <label class="custom-control-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', custom: true, wrapper_class: "custom-class"})
+  end
+
+  test "custom inline check box with custom wrapper class" do
+    expected = <<-HTML.strip_heredoc
+      <div class="custom-control custom-checkbox custom-control-inline custom-class">
+        <input name="user[terms]" type="hidden" value="0" />
+        <input class="custom-control-input" id="user_terms" name="user[terms]" type="checkbox" value="1" />
+        <label class="custom-control-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, custom: true, wrapper_class: "custom-class"})
+  end
 end

test/bootstrap_radio_button_test.rb

@@ -484,4 +484,48 @@ class BootstrapRadioButtonTest < ActionView::TestCase
     HTML
     assert_equivalent_xml expected, @builder.radio_button(:misc, '1', {label: 'This is a radio button', custom: true, hide_label: true})
   end
+
+  test "radio button with custom wrapper class" do
+    expected = <<-HTML.strip_heredoc
+      <div class="form-check custom-class">
+        <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', wrapper_class: "custom-class")
+  end
+
+  test "inline radio button with custom wrapper class" do
+    expected = <<-HTML.strip_heredoc
+      <div class="form-check form-check-inline custom-class">
+        <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, wrapper_class: "custom-class")
+  end
+
+  test "custom radio button with custom wrapper class" do
+    expected = <<-HTML.strip_heredoc
+      <div class="custom-control custom-radio custom-class">
+        <input class="custom-control-input" id="user_misc_1" name="user[misc]" type="radio" value="1" />
+        <label class="custom-control-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', custom: true, wrapper_class: "custom-class"})
+  end
+
+  test "custom inline radio button with custom wrapper class" do
+    expected = <<-HTML.strip_heredoc
+      <div class="custom-control custom-radio custom-control-inline custom-class">
+        <input class="custom-control-input" id="user_misc_1" name="user[misc]" type="radio" value="1" />
+        <label class="custom-control-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, custom: true, wrapper_class: "custom-class"})
+  end
 end