Bootstrap v4

CHANGELOG.md

@@ -6,6 +6,17 @@ Bugfixes:
 Features:
   - Your contribution here!
 
+## [Pending Release][] (2016-10-18)
+
+Bugfixes:
+  - 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:
+  - Update to Bootstrap v4
+
 ## [2.6.0][] (2017-02-03)
 
 Bugfixes:

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
 
@@ -55,13 +55,13 @@ This generates the following HTML:
     <label for="user_password">Password</label>
     <input class="form-control" id="user_password" name="user[password]" type="password">
   </div>
-  <div class="checkbox">
+  <div class="form-check">
     <label for="user_remember_me">
       <input name="user[remember_me]" type="hidden" value="0">
       <input id="user_remember_me" name="user[remember_me]" type="checkbox" value="1"> Remember me
     </label>
   </div>
-  <input class="btn btn-default" name="commit" type="submit" value="Log In">
+  <input class="btn btn-secondary" name="commit" type="submit" value="Log In">
 </form>
 ```
 
@@ -209,7 +209,7 @@ This automatically adds the `has-feedback` class to the `form-group`:
 
 ```html
 <div class="form-group has-feedback">
-  <label class="control-label" for="user_login">Login</label>
+  <label class="form-control-label" for="user_login">Login</label>
   <input class="form-control" id="user_login" name="user[login]" type="text" />
   <span class="glyphicon glyphicon-user form-control-feedback"></span>
 </div>
@@ -227,7 +227,7 @@ You can also prepend and append buttons. Note: The buttons must contain the
 `btn` class to generate the correct markup.
 
 ```erb
-<%= f.text_field :search, append: link_to("Go", "#", class: "btn btn-default") %>
+<%= f.text_field :search, append: link_to("Go", "#", class: "btn btn-secondary") %>
 ```
 
 To add a class to the input group wrapper, use `:input_group_class` option.
@@ -249,7 +249,7 @@ Which produces the following output:
 
 ```erb
 <div class="form-group has-warning" data-foo="bar">
-  <label class="control-label" for="user_name">Id</label>
+  <label class="form-control-label" for="user_name">Id</label>
   <input class="form-control" id="user_name" name="user[name]" type="text">
 </div>
 ```
@@ -330,7 +330,7 @@ Here's the output:
 
 ```html
 <div class="form-group">
-  <label class="col-sm-2 control-label" for="user_email">Email</label>
+  <label class="col-sm-2 form-control-label" for="user_email">Email</label>
   <div class="col-sm-10">
     <p class="form-control-static">test@email.com</p>
   </div>
@@ -355,7 +355,7 @@ this defining these selects as `inline-block` and a width of `auto`.
 
 ### Submit Buttons
 
-The `btn btn-default` css classes are automatically added to your submit
+The `btn btn-secondary` css classes are automatically added to your submit
 buttons.
 
 ```erb
@@ -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">
-  <label class="control-label" for="user_email">Email</label>
+<div class="form-group has-danger">
+  <label class="form-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
@@ -194,6 +195,7 @@ def form_group(*args, &block)
       name = args.first
 
       options[:class] = ["form-group", options[:class]].compact.join(' ')
+      options[:class] << " row" if get_group_layout(options[:layout]) == :horizontal
       options[:class] << " #{error_class}" if has_error?(name)
       options[:class] << " #{feedback_class}" if options[:icon]
 
@@ -259,11 +261,11 @@ def control_class
     end
 
     def label_class
-      "control-label"
+      "form-control-label"
     end
 
     def error_class
-      "has-error"
+      "has-danger"
     end
 
     def feedback_class
@@ -309,6 +311,7 @@ def form_group_builder(method, options, html_options = nil)
       css_options = html_options || options
       control_classes = css_options.delete(:control_class) { control_class }
       css_options[:class] = [control_classes, css_options[:class]].compact.join(" ")
+      css_options[:class] << " form-control-danger" if has_error?(method)
 
       options = convert_form_tag_options(method, options) if acts_like_form_tag
 
@@ -385,12 +388,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)

lib/bootstrap_form/helper.rb

@@ -10,15 +10,8 @@ def bootstrap_form_for(object, options = {}, &block)
       options[:html] ||= {}
       options[:html][:role] ||= 'form'
 
-      layout = case options[:layout]
-        when :inline
-          "form-inline"
-        when :horizontal
-          "form-horizontal"
-      end
-
-      if layout
-        options[:html][:class] = [options[:html][:class], layout].compact.join(" ")
+      if options[:layout] == :inline
+        options[:html][:class] = [options[:html][:class], "form-inline"].compact.join(" ")
       end
 
       temporarily_disable_field_error_proc do

lib/bootstrap_form/helpers/bootstrap.rb

@@ -2,7 +2,7 @@ module BootstrapForm
   module Helpers
     module Bootstrap
       def submit(name = nil, options = {})
-        options.reverse_merge! class: 'btn btn-default'
+        options.reverse_merge! class: 'btn btn-secondary'
         super(name, options)
       end