Bootstrap V4 Alpha checkbox fixes

CHANGELOG.md

@@ -1,10 +1,13 @@
-## [Pending Release][]
+## [Pending Release][] (2016-10-18)
 
 Bugfixes:
-  - Your contribution here!
+  - Change error class from `has-error` to `has-danger`
+  - Change validation text class from `help-block` to `form-control-feedback`
+  - Change help text class from `help-block` to `form-text text-muted`
+  - Change checkbox classes from `checkbox` to `form-check` and added `form-check-label` to labels
 
 Features:
-  - Your contribution here!
+  - Update to Bootstrap v4
 
 ## [2.5.2][] (2016-10-08)
 

README.md

@@ -10,7 +10,7 @@ twitter bootstrap-style forms into your rails application.
 
 * Ruby 1.9+
 * Rails 4.0+
-* Twitter Bootstrap 3.0+
+* Twitter Bootstrap 4.0+
 
 ## Installation
 
@@ -468,10 +468,10 @@ error will be displayed below the field. Rails normally wraps the fields in a
 div (field_with_errors), but this behavior is suppressed. Here's an example:
 
 ```html
-<div class="form-group has-error">
+<div class="form-group has-danger">
   <label class="control-label" for="user_email">Email</label>
   <input class="form-control" id="user_email" name="user[email]" type="email" value="">
-  <span class="help-block">can't be blank</span>
+  <div class="form-control-feedback">can't be blank</div>
 </div>
 ```
 

lib/bootstrap_form/form_builder.rb

@@ -111,6 +111,7 @@ 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, :help, :inline)
+      check_box_options[:class] = ["form-check-input", check_box_options[:class]].compact.join(' ')
 
       html = check_box_without_bootstrap(name, check_box_options, checked_value, unchecked_value)
       label_content = block_given? ? capture(&block) : options[:label]
@@ -126,13 +127,13 @@ def check_box_with_bootstrap(name, options = {}, checked_value = "1", unchecked_
       end
 
       disabled_class = " disabled" if options[:disabled]
-      label_class    = options[:label_class]
 
       if options[:inline]
-        label_class = " #{label_class}" if label_class
-        label(label_name, html, class: "checkbox-inline#{disabled_class}#{label_class}")
+        label_class = " #{options[:label_class]}" if options[:label_class]
+        label(label_name, html, class: "form-check-inline#{disabled_class}#{label_class}")
       else
-        content_tag(:div, class: "checkbox#{disabled_class}") do
+        label_class    = ["form-check-label", options[:label_class]].compact.join(' ')
+        content_tag(:div, class: "form-check#{disabled_class}") do
           label(label_name, html, class: label_class)
         end
       end
@@ -201,6 +202,7 @@ def form_group(*args, &block)
         label = generate_label(options[:id], name, options[:label], options[:label_col], options[:layout]) if options[:label]
         control = capture(&block).to_s
         control.concat(generate_help(name, options[:help]).to_s)
+        # TODO create `generate_error`
         control.concat(generate_icon(options[:icon])) if options[:icon]
 
         if get_group_layout(options[:layout]) == :horizontal
@@ -263,7 +265,7 @@ def label_class
     end
 
     def error_class
-      "has-error"
+      "has-danger"
     end
 
     def feedback_class
@@ -385,12 +387,19 @@ def generate_label(id, name, options, custom_label_col, group_layout)
     end
 
     def generate_help(name, help_text)
-      help_text = get_error_messages(name) if has_error?(name) && inline_errors
+      if is_error = has_error?(name) && inline_errors
+        help_text = get_error_messages(name)
+      end
       return if help_text === false
 
       help_text ||= get_help_text_by_i18n_key(name)
 
-      content_tag(:span, help_text, class: 'help-block') if help_text.present?
+      return if help_text.blank?
+      if is_error
+        content_tag(:div, help_text, class: 'form-control-feedback')
+      else
+        content_tag(:p, help_text, class: 'form-text text-muted')
+      end
     end
 
     def generate_icon(icon)

test/bootstrap_fields_test.rb

@@ -53,7 +53,7 @@ def setup
   end
 
   test "password fields are wrapped correctly" do
-    expected = %{<div class="form-group"><label class="control-label" for="user_password">Password</label><input class="form-control" id="user_password" name="user[password]" type="password" /><span class="help-block">A good password should be at least six characters long</span></div>}
+    expected = %{<div class="form-group"><label class="control-label" for="user_password">Password</label><input class="form-control" id="user_password" name="user[password]" type="password" /><p class="form-text text-muted">A good password should be at least six characters long</p></div>}
     assert_equal expected, @builder.password_field(:password)
   end
 

test/bootstrap_form_group_test.rb

@@ -77,17 +77,17 @@ def setup
   end
 
   test "help messages for default forms" do
-    expected = %{<div class="form-group"><label class="control-label required" for="user_email">Email</label><input class="form-control" id="user_email" name="user[email]" type="text" value="steve@example.com" /><span class="help-block">This is required</span></div>}
+    expected = %{<div class="form-group"><label class="control-label required" for="user_email">Email</label><input class="form-control" id="user_email" name="user[email]" type="text" value="steve@example.com" /><p class="form-text text-muted">This is required</p></div>}
     assert_equal expected, @builder.text_field(:email, help: 'This is required')
   end
 
   test "help messages for horizontal forms" do
-    expected = %{<div class="form-group"><label class="control-label col-sm-2 required" for="user_email">Email</label><div class="col-sm-10"><input class="form-control" id="user_email" name="user[email]" type="text" value="steve@example.com" /><span class="help-block">This is required</span></div></div>}
+    expected = %{<div class="form-group"><label class="control-label col-sm-2 required" for="user_email">Email</label><div class="col-sm-10"><input class="form-control" id="user_email" name="user[email]" type="text" value="steve@example.com" /><p class="form-text text-muted">This is required</p></div></div>}
     assert_equal expected, @horizontal_builder.text_field(:email, help: "This is required")
   end
 
   test "help messages to look up I18n automatically" do
-    expected = %{<div class="form-group"><label class="control-label" for="user_password">Password</label><input class="form-control" id="user_password" name="user[password]" type="text" value="secret" /><span class="help-block">A good password should be at least six characters long</span></div>}
+    expected = %{<div class="form-group"><label class="control-label" for="user_password">Password</label><input class="form-control" id="user_password" name="user[password]" type="text" value="secret" /><p class="form-text text-muted">A good password should be at least six characters long</p></div>}
     assert_equal expected, @builder.text_field(:password)
   end
 
@@ -176,7 +176,7 @@ def setup
       %{<p class="form-control-static">Bar</p>}.html_safe
     end
 
-    expected = %{<div class="form-group has-error"><p class="form-control-static">Bar</p><span class="help-block">can&#39;t be blank, is too short (minimum is 5 characters)</span></div>}
+    expected = %{<div class="form-group has-danger"><p class="form-control-static">Bar</p><div class="form-control-feedback">can&#39;t be blank, is too short (minimum is 5 characters)</div></div>}
     assert_equal expected, output
   end
 
@@ -189,7 +189,7 @@ def setup
     @user.email = nil
     @user.valid?
 
-    expected = %{<div class="form-group none-margin has-error"><div class="field_with_errors"><label class="control-label required" for="user_email">Email</label></div><div class="field_with_errors"><input class="form-control" id="user_email" name="user[email]" type="email" /></div><span class="help-block">can&#39;t be blank, is too short (minimum is 5 characters)</span></div>}
+    expected = %{<div class="form-group none-margin has-danger"><div class="field_with_errors"><label class="control-label required" for="user_email">Email</label></div><div class="field_with_errors"><input class="form-control" id="user_email" name="user[email]" type="email" /></div><div class="form-control-feedback">can&#39;t be blank, is too short (minimum is 5 characters)</div></div>}
     assert_equal expected, @builder.email_field(:email, wrapper_class: 'none-margin')
   end
 
@@ -201,7 +201,7 @@ def setup
       f.text_field(:email, help: 'This is required', wrapper_class: 'none-margin')
     end
 
-    expected = %{<form accept-charset="UTF-8" action="/users" class="new_user" id="new_user" method="post" role="form"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /></div><div class="form-group none-margin has-error"><label class="control-label required" for="user_email">Email</label><input class="form-control" id="user_email" name="user[email]" type="text" /><span class="help-block">can&#39;t be blank, is too short (minimum is 5 characters)</span></div></form>}
+    expected = %{<form accept-charset="UTF-8" action="/users" class="new_user" id="new_user" method="post" role="form"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /></div><div class="form-group none-margin has-danger"><label class="control-label required" for="user_email">Email</label><input class="form-control" id="user_email" name="user[email]" type="text" /><div class="form-control-feedback">can&#39;t be blank, is too short (minimum is 5 characters)</div></div></form>}
     assert_equal expected, output
   end
 

test/bootstrap_form_test.rb

@@ -43,23 +43,23 @@ def setup
   end
 
   test "bootstrap_form_tag allows an empty name for checkboxes" do
-    expected = %{<form accept-charset="UTF-8" action="/users" method="post" role="form"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /></div><div class="checkbox"><label for="_misc"><input name="[misc]" type="hidden" value="0" /><input id="_misc" name="[misc]" type="checkbox" value="1" /> Misc</label></div></form>}
+    expected = %{<form accept-charset="UTF-8" action="/users" method="post" role="form"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /></div><div class="form-check"><label class="form-check-label" for="_misc"><input name="[misc]" type="hidden" value="0" /><input class="form-check-input" id="_misc" name="[misc]" type="checkbox" value="1" /> Misc</label></div></form>}
     assert_equal expected, bootstrap_form_tag(url: '/users') { |f| f.check_box :misc }
   end
 
   test "errors display correctly and inline_errors are turned off by default when label_errors is true" do
     @user.email = nil
     @user.valid?
 
-    expected = %{<form accept-charset=\"UTF-8\" action=\"/users\" class=\"new_user\" id=\"new_user\" method=\"post\" role=\"form\"><div style=\"margin:0;padding:0;display:inline\"><input name=\"utf8\" type=\"hidden\" value=\"&#x2713;\" /></div><div class=\"form-group has-error\"><label class=\"control-label required\" for=\"user_email\">Email can&#39;t be blank, is too short (minimum is 5 characters)</label><input class=\"form-control\" id=\"user_email\" name=\"user[email]\" type=\"text\" /></div></form>}
+    expected = %{<form accept-charset=\"UTF-8\" action=\"/users\" class=\"new_user\" id=\"new_user\" method=\"post\" role=\"form\"><div style=\"margin:0;padding:0;display:inline\"><input name=\"utf8\" type=\"hidden\" value=\"&#x2713;\" /></div><div class=\"form-group has-danger\"><label class=\"control-label required\" for=\"user_email\">Email can&#39;t be blank, is too short (minimum is 5 characters)</label><input class=\"form-control\" id=\"user_email\" name=\"user[email]\" type=\"text\" /></div></form>}
     assert_equal expected, bootstrap_form_for(@user, label_errors: true) { |f| f.text_field :email }
   end
 
   test "errors display correctly and inline_errors can also be on when label_errors is true" do
     @user.email = nil
     @user.valid?
 
-    expected = %{<form accept-charset=\"UTF-8\" action=\"/users\" class=\"new_user\" id=\"new_user\" method=\"post\" role=\"form\"><div style=\"margin:0;padding:0;display:inline\"><input name=\"utf8\" type=\"hidden\" value=\"&#x2713;\" /></div><div class=\"form-group has-error\"><label class=\"control-label required\" for=\"user_email\">Email can&#39;t be blank, is too short (minimum is 5 characters)</label><input class=\"form-control\" id=\"user_email\" name=\"user[email]\" type=\"text\" /><span class=\"help-block\">can&#39;t be blank, is too short (minimum is 5 characters)</span></div></form>}
+    expected = %{<form accept-charset=\"UTF-8\" action=\"/users\" class=\"new_user\" id=\"new_user\" method=\"post\" role=\"form\"><div style=\"margin:0;padding:0;display:inline\"><input name=\"utf8\" type=\"hidden\" value=\"&#x2713;\" /></div><div class=\"form-group has-danger\"><label class=\"control-label required\" for=\"user_email\">Email can&#39;t be blank, is too short (minimum is 5 characters)</label><input class=\"form-control\" id=\"user_email\" name=\"user[email]\" type=\"text\" /><div class=\"form-control-feedback\">can&#39;t be blank, is too short (minimum is 5 characters)</div></div></form>}
     assert_equal expected, bootstrap_form_for(@user, label_errors: true, inline_errors: true) { |f| f.text_field :email }
   end
 
@@ -69,7 +69,7 @@ def setup
     @user.email = nil
     @user.valid?
 
-    expected = %{<form accept-charset=\"UTF-8\" action=\"/users\" class=\"new_user\" id=\"new_user\" method=\"post\" role=\"form\"><div style=\"margin:0;padding:0;display:inline\"><input name=\"utf8\" type=\"hidden\" value=\"&#x2713;\" /></div><div class=\"form-group has-error\"><label class=\"control-label required\" for=\"user_email\">Your e-mail address can&#39;t be blank, is too short (minimum is 5 characters)</label><input class=\"form-control\" id=\"user_email\" name=\"user[email]\" type=\"text\" /><span class=\"help-block\">can&#39;t be blank, is too short (minimum is 5 characters)</span></div></form>}
+    expected = %{<form accept-charset=\"UTF-8\" action=\"/users\" class=\"new_user\" id=\"new_user\" method=\"post\" role=\"form\"><div style=\"margin:0;padding:0;display:inline\"><input name=\"utf8\" type=\"hidden\" value=\"&#x2713;\" /></div><div class=\"form-group has-danger\"><label class=\"control-label required\" for=\"user_email\">Your e-mail address can&#39;t be blank, is too short (minimum is 5 characters)</label><input class=\"form-control\" id=\"user_email\" name=\"user[email]\" type=\"text\" /><div class=\"form-control-feedback\">can&#39;t be blank, is too short (minimum is 5 characters)</div></div></form>}
     assert_equal expected, bootstrap_form_for(@user, label_errors: true, inline_errors: true) { |f| f.text_field :email }
 
     I18n.backend.store_translations(:en, {activerecord: {attributes: {user: {email: nil}}}})
@@ -164,7 +164,7 @@ def setup
       f.text_field(:email, help: 'This is required')
     end
 
-    expected = %{<form accept-charset="UTF-8" action="/users" class="new_user" id="new_user" method="post" role="form"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /></div><div class="form-group has-error"><label class="control-label required" for="user_email">Email</label><input class="form-control" id="user_email" name="user[email]" type="text" /><span class="help-block">can&#39;t be blank, is too short (minimum is 5 characters)</span></div></form>}
+    expected = %{<form accept-charset="UTF-8" action="/users" class="new_user" id="new_user" method="post" role="form"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /></div><div class="form-group has-danger"><label class="control-label required" for="user_email">Email</label><input class="form-control" id="user_email" name="user[email]" type="text" /><div class="form-control-feedback">can&#39;t be blank, is too short (minimum is 5 characters)</div></div></form>}
     assert_equal expected, output
   end
 
@@ -176,7 +176,7 @@ def setup
       f.text_field(:email, help: 'This is required')
     end
 
-    expected = %{<form accept-charset="UTF-8" action="/users" class="new_user" id="new_user" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /></div><div class="form-group has-error"><div class="field_with_errors"><label class="control-label required" for="user_email">Email</label></div><div class="field_with_errors"><input class="form-control" id="user_email" name="user[email]" type="text" /></div><span class="help-block">can&#39;t be blank, is too short (minimum is 5 characters)</span></div></form>}
+    expected = %{<form accept-charset="UTF-8" action="/users" class="new_user" id="new_user" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /></div><div class="form-group has-danger"><div class="field_with_errors"><label class="control-label required" for="user_email">Email</label></div><div class="field_with_errors"><input class="form-control" id="user_email" name="user[email]" type="text" /></div><div class="form-control-feedback">can&#39;t be blank, is too short (minimum is 5 characters)</div></div></form>}
     assert_equal expected, output
   end
 
@@ -188,7 +188,7 @@ def setup
       f.text_field(:email, help: 'This is required')
     end
 
-    expected = %{<form accept-charset="UTF-8" action="/users" class="new_user" id="new_user" method="post" role="form"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /></div><div class="form-group has-error"><label class="control-label required" for="user_email">Email</label><input class="form-control" id="user_email" name="user[email]" type="text" /><span class="help-block">This is required</span></div></form>}
+    expected = %{<form accept-charset="UTF-8" action="/users" class="new_user" id="new_user" method="post" role="form"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /></div><div class="form-group has-danger"><label class="control-label required" for="user_email">Email</label><input class="form-control" id="user_email" name="user[email]" type="text" /><p class="form-text text-muted">This is required</p></div></form>}
     assert_equal expected, output
   end