From 05b631959694b98d820158f2824bc99aa14e1555 Mon Sep 17 00:00:00 2001
From: Larry Reid <lcreid@jadesystems.ca>
Date: Sun, 28 Jan 2018 10:12:15 -0800
Subject: [PATCH] Use Bootstrap 4 radio button classes.

---
 lib/bootstrap_form/form_builder.rb  |  12 ++--
 test/bootstrap_radio_button_test.rb | 104 ++++++++++++++--------------
 2 files changed, 60 insertions(+), 56 deletions(-)

diff --git a/lib/bootstrap_form/form_builder.rb b/lib/bootstrap_form/form_builder.rb
index 5b23e1998..60cebf7bc 100644
--- a/lib/bootstrap_form/form_builder.rb
+++ b/lib/bootstrap_form/form_builder.rb
@@ -158,7 +158,11 @@ def check_box_with_bootstrap(name, options = {}, checked_value = "1", unchecked_
     def radio_button_with_bootstrap(name, value, *args)
       options = args.extract_options!.symbolize_keys!
       radio_options = options.except(:label, :label_class, :help, :inline, :custom)
-      radio_options[:class] = ["custom-control-input", options[:class]].compact.join(' ') if options[:custom]
+      if options[:custom]
+        radio_options[:class] = ["custom-control-input", options[:class]].compact.join(' ')
+      else
+        radio_options[:class] = ["form-check-input", options[:class]].compact.join(' ')
+      end
       args << radio_options
       radio_html = radio_button_without_bootstrap(name, value, *args)
 
@@ -172,14 +176,14 @@ 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]
-          label_class = " #{label_class}" if label_class
           radio_html
-            .concat(label(name, options[:label], { class: "radio-inline#{disabled_class}#{label_class}", value: value }.merge(options[:id].present? ? { for: options[:id] } : {})))
+            .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], { value: value, class: label_class }.merge(options[:id].present? ? { for: options[:id] } : {})))
+              .concat(label(name, options[:label], { class: "form-check-label#{label_class}", value: value }.merge(options[:id].present? ? { for: options[:id] } : {})))
           end
         end
       end
diff --git a/test/bootstrap_radio_button_test.rb b/test/bootstrap_radio_button_test.rb
index 9d5aad5c0..3eb3ab34e 100644
--- a/test/bootstrap_radio_button_test.rb
+++ b/test/bootstrap_radio_button_test.rb
@@ -8,8 +8,8 @@ class BootstrapRadioButtonTest < ActionView::TestCase
   test "radio_button is wrapped correctly" do
     expected = <<-HTML.strip_heredoc
       <div class="form-check">
-        <input id="user_misc_1" name="user[misc]" type="radio" value="1" />
-        <label for="user_misc_1">
+        <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>
@@ -20,8 +20,8 @@ class BootstrapRadioButtonTest < ActionView::TestCase
   test "radio_button disabled label is set correctly" do
     expected = <<-HTML.strip_heredoc
       <div class="form-check disabled">
-        <input disabled="disabled" id="user_misc_1" name="user[misc]" type="radio" value="1" />
-        <label for="user_misc_1">
+        <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>
@@ -32,8 +32,8 @@ class BootstrapRadioButtonTest < ActionView::TestCase
   test "radio_button label class is set correctly" do
     expected = <<-HTML.strip_heredoc
       <div class="form-check">
-        <input id="user_misc_1" name="user[misc]" type="radio" value="1" />
-        <label class="btn" for="user_misc_1">
+        <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>
@@ -44,8 +44,8 @@ class BootstrapRadioButtonTest < ActionView::TestCase
   test "radio_button 'id' attribute is used to specify label 'for' attribute" do
     expected = <<-HTML.strip_heredoc
       <div class="form-check">
-        <input id="custom_id" name="user[misc]" type="radio" value="1" />
-        <label for="custom_id">
+        <input class="form-check-input" id="custom_id" name="user[misc]" type="radio" value="1" />
+        <label class="form-check-label" for="custom_id">
           This is a radio button
         </label>
       </div>
@@ -55,8 +55,8 @@ class BootstrapRadioButtonTest < ActionView::TestCase
 
   test "radio_button inline label is set correctly" do
     expected = <<-HTML.strip_heredoc
-      <input id="user_misc_1" name="user[misc]" type="radio" value="1" />
-      <label class="radio-inline" for="user_misc_1">
+      <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>
     HTML
@@ -65,8 +65,8 @@ class BootstrapRadioButtonTest < ActionView::TestCase
 
   test "radio_button disabled inline label is set correctly" do
     expected = <<-HTML.strip_heredoc
-      <input disabled="disabled" id="user_misc_1" name="user[misc]" type="radio" value="1" />
-      <label class="radio-inline disabled" for="user_misc_1">
+      <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>
     HTML
@@ -75,8 +75,8 @@ class BootstrapRadioButtonTest < ActionView::TestCase
 
   test "radio_button inline label class is set correctly" do
     expected = <<-HTML.strip_heredoc
-      <input id="user_misc_1" name="user[misc]" type="radio" value="1" />
-      <label class="radio-inline btn" for="user_misc_1">
+      <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>
     HTML
@@ -89,8 +89,8 @@ class BootstrapRadioButtonTest < ActionView::TestCase
       <div class="form-group">
         <label for="user_misc">This is a radio button collection</label>
         <div class="form-check">
-          <input id="user_misc_1" name="user[misc]" type="radio" value="1" />
-          <label for="user_misc_1">
+          <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">
             Foobar
           </label>
         </div>
@@ -107,12 +107,12 @@ class BootstrapRadioButtonTest < ActionView::TestCase
       <div class="form-group">
         <label for="user_misc">Misc</label>
         <div class="form-check">
-          <input id="user_misc_1" name="user[misc]" type="radio" value="1" />
-          <label for="user_misc_1"> Foo</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>
         </div>
         <div class="form-check">
-          <input id="user_misc_2" name="user[misc]" type="radio" value="2" />
-          <label for="user_misc_2"> Bar</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>
       </div>
     HTML
@@ -125,10 +125,10 @@ class BootstrapRadioButtonTest < ActionView::TestCase
     expected = <<-HTML.strip_heredoc
       <div class="form-group">
         <label for="user_misc">Misc</label>
-        <input id="user_misc_1" name="user[misc]" type="radio" value="1" />
-        <label class="radio-inline" for="user_misc_1"> Foo</label>
-        <input id="user_misc_2" name="user[misc]" type="radio" value="2" />
-        <label class="radio-inline" for="user_misc_2"> Bar</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>
     HTML
 
@@ -141,12 +141,12 @@ class BootstrapRadioButtonTest < ActionView::TestCase
       <div class="form-group">
         <label for="user_misc">Misc</label>
         <div class="form-check">
-          <input checked="checked" id="user_misc_1" name="user[misc]" type="radio" value="1" />
-          <label for="user_misc_1"> Foo</label>
+          <input class="form-check-input" checked="checked" 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">
-          <input id="user_misc_2" name="user[misc]" type="radio" value="2" />
-          <label for="user_misc_2"> Bar</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>
       </div>
     HTML
@@ -160,8 +160,8 @@ class BootstrapRadioButtonTest < ActionView::TestCase
       <div class="form-group">
         <label for="user_misc">This is a radio button collection</label>
         <div class="form-check">
-          <input id="user_misc_1" name="user[misc]" type="radio" value="1" />
-          <label for="user_misc_1"> rabooF</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"> rabooF</label>
         </div>
         <small class="form-text text-muted">With a help!</small>
       </div>
@@ -176,8 +176,8 @@ class BootstrapRadioButtonTest < ActionView::TestCase
       <div class="form-group">
         <label for="user_misc">This is a radio button collection</label>
         <div class="form-check">
-          <input id="user_misc_address_1" name="user[misc]" type="radio" value="address_1" />
-          <label for="user_misc_address_1"> Foobar</label>
+          <input class="form-check-input" id="user_misc_address_1" name="user[misc]" type="radio" value="address_1" />
+          <label class="form-check-label" for="user_misc_address_1"> Foobar</label>
         </div>
         <small class="form-text text-muted">With a help!</small>
       </div>
@@ -192,12 +192,12 @@ class BootstrapRadioButtonTest < ActionView::TestCase
       <div class="form-group">
         <label for="user_misc">Misc</label>
         <div class="form-check">
-          <input id="user_misc_1" name="user[misc]" type="radio" value="1" />
-          <label for="user_misc_1"> ooF</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"> ooF</label>
         </div>
         <div class="form-check">
-          <input id="user_misc_2" name="user[misc]" type="radio" value="2" />
-          <label for="user_misc_2"> raB</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"> raB</label>
         </div>
       </div>
     HTML
@@ -211,12 +211,12 @@ class BootstrapRadioButtonTest < ActionView::TestCase
       <div class="form-group">
         <label for="user_misc">Misc</label>
         <div class="form-check">
-          <input id="user_misc_address_1" name="user[misc]" type="radio" value="address_1" />
-          <label for="user_misc_address_1"> Foo</label>
+          <input class="form-check-input" id="user_misc_address_1" name="user[misc]" type="radio" value="address_1" />
+          <label class="form-check-label" for="user_misc_address_1"> Foo</label>
         </div>
         <div class="form-check">
-          <input id="user_misc_address_2" name="user[misc]" type="radio" value="address_2" />
-          <label for="user_misc_address_2"> Bar</label>
+          <input class="form-check-input" id="user_misc_address_2" name="user[misc]" type="radio" value="address_2" />
+          <label class="form-check-label" for="user_misc_address_2"> Bar</label>
         </div>
       </div>
     HTML
@@ -230,8 +230,8 @@ class BootstrapRadioButtonTest < ActionView::TestCase
       <div class="form-group">
         <label for="user_misc">This is a radio button collection</label>
         <div class="form-check">
-          <input id="user_misc_1" name="user[misc]" type="radio" value="1" />
-          <label for="user_misc_1"> rabooF</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"> rabooF</label>
         </div>
         <small class="form-text text-muted">With a help!</small>
       </div>
@@ -246,8 +246,8 @@ class BootstrapRadioButtonTest < ActionView::TestCase
       <div class="form-group">
         <label for="user_misc">This is a radio button collection</label>
         <div class="form-check">
-          <input id="user_misc_address_1" name="user[misc]" type="radio" value="address_1" />
-          <label for="user_misc_address_1"> Foobar</label>
+          <input class="form-check-input" id="user_misc_address_1" name="user[misc]" type="radio" value="address_1" />
+          <label class="form-check-label" for="user_misc_address_1"> Foobar</label>
         </div>
         <small class="form-text text-muted">With a help!</small>
       </div>
@@ -262,12 +262,12 @@ class BootstrapRadioButtonTest < ActionView::TestCase
       <div class="form-group">
         <label for="user_misc">Misc</label>
         <div class="form-check">
-          <input id="user_misc_1" name="user[misc]" type="radio" value="1" />
-          <label for="user_misc_1"> ooF</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"> ooF</label>
         </div>
         <div class="form-check">
-          <input id="user_misc_2" name="user[misc]" type="radio" value="2" />
-          <label for="user_misc_2"> raB</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"> raB</label>
         </div>
       </div>
     HTML
@@ -281,12 +281,12 @@ class BootstrapRadioButtonTest < ActionView::TestCase
       <div class="form-group">
         <label for="user_misc">Misc</label>
         <div class="form-check">
-          <input id="user_misc_address_1" name="user[misc]" type="radio" value="address_1" />
-          <label for="user_misc_address_1"> Foo</label>
+          <input class="form-check-input" id="user_misc_address_1" name="user[misc]" type="radio" value="address_1" />
+          <label class="form-check-label" for="user_misc_address_1"> Foo</label>
         </div>
         <div class="form-check">
-          <input id="user_misc_address_2" name="user[misc]" type="radio" value="address_2" />
-          <label for="user_misc_address_2"> Bar</label>
+          <input class="form-check-input" id="user_misc_address_2" name="user[misc]" type="radio" value="address_2" />
+          <label class="form-check-label" for="user_misc_address_2"> Bar</label>
         </div>
       </div>
     HTML