Allow .form-row to replace .row in div.form-group.

CHANGELOG.md

@@ -20,6 +20,7 @@ In addition to these necessary markup changes, the bootstrap_form API itself has
 * `static_control` will also no longer accept a block, use the `value` option instead.
 * Your contribution here!
 * [#456](https://github.com/bootstrap-ruby/bootstrap_form/pull/456): Fix label `for` attribute when passing non-english characters using `collection_check_boxes` - [@ug0](https://github.com/ug0).
+* [#449](https://github.com/bootstrap-ruby/bootstrap_form/pull/449): Bootstrap 4 no longer mixes in `.row` in `.form-group`. `bootstrap_form` adds `.row` to `div.form-group` when layout is horizontal.
 
 ### New features
 
@@ -29,6 +30,7 @@ In addition to these necessary markup changes, the bootstrap_form API itself has
 * [#408](https://github.com/bootstrap-ruby/bootstrap_form/pull/408): Add option[:id] on static control #245 - [@duleorlovic](https://github.com/duleorlovic).
 * [#455](https://github.com/bootstrap-ruby/bootstrap_form/pull/455): Support for i18n `:html` subkeys in help text - [@jsaraiva](https://github.com/jsaraiva).
 * Adds support for `label_as_placeholder` option, which will set the label text as an input fields placeholder (and hiding the label for sr_only).
+* [#449](https://github.com/bootstrap-ruby/bootstrap_form/pull/449): Passing `.form-row` overrides default `.form-group.row` in horizontal layouts.
 * Your contribution here!
 
 ### Bugfixes

UPGRADE-4.0.md

@@ -0,0 +1,20 @@
+## `form-group` and Horizontal Forms
+In Bootstrap 3, `.form-group` mixed in `.row`. In Bootstrap 4, it doesn't. So `bootstrap_form` automatically adds `.row` to the `div.form-group`s that it creates, if the form group is in a horizontal layout. When migrating forms from the Bootstrap 3 version of `bootstrap_form` to the Bootstrap 4 version, check all horizontal forms to be sure they're being rendered properly.
+
+Bootstrap 4 also provides a `.form-row`, which has smaller gutters than `.row`. If you specify ".form-row", `bootstrap_form` will replace `.row` with `.form-row` on the `div.form-group`. When calling `form_group` directly, do something like this:
+```
+bootstrap_form_for(@user, layout: "horizontal") do |f|
+  f.form_group class: "form-row" do
+    ...
+  end
+end
+```
+For the other helpers, do something like this:
+```
+bootstrap_form_for(@user, layout: "horizontal") do |f|
+  f.form_group class: "form-row" do
+  f.text_field wrapper_class: "form-row" # or f.text_field wrapper: { class: "form-row" }
+    ...
+  end
+end
+```

lib/bootstrap_form/form_builder.rb

@@ -246,7 +246,8 @@ 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] << " row" if get_group_layout(options[:layout]) == :horizontal &&
+                                   !options[:class].split.include?("form-row")
       options[:class] << " form-inline" if field_inline_override?(options[:layout])
       options[:class] << " #{feedback_class}" if options[:icon]
 

test/bootstrap_fields_test.rb

@@ -225,6 +225,19 @@ class BootstrapFieldsTest < ActionView::TestCase
     assert_equivalent_xml expected, @builder.text_field(:email)
   end
 
+  test "text fields are wrapped correctly when horizontal and form-row given" do
+    expected = <<-HTML.strip_heredoc
+      <div class="form-group form-row">
+        <label class="col-form-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" />
+        </div>
+      </div>
+    HTML
+    assert_equivalent_xml expected, @horizontal_builder.text_field(:email, wrapper_class: "form-row")
+    assert_equivalent_xml expected, @horizontal_builder.text_field(:email, wrapper: { class: "form-row" })
+  end
+
   test "field 'id' attribute is used to specify label 'for' attribute" do
     expected = <<-HTML.strip_heredoc
       <div class="form-group">

test/bootstrap_form_group_test.rb

@@ -343,6 +343,21 @@ class BootstrapFormGroupTest < ActionView::TestCase
     assert_equivalent_xml expected, output
   end
 
+  test "form_group horizontal lets caller override .row" do
+    output = @horizontal_builder.form_group class: "form-row" do
+      %{<input class="form-control-plaintext" value="Bar">}.html_safe
+    end
+
+    expected = <<-HTML.strip_heredoc
+      <div class="form-group form-row">
+        <div class="col-sm-10 offset-sm-2">
+          <input class="form-control-plaintext" value="Bar">
+        </div>
+      </div>
+    HTML
+    assert_equivalent_xml expected, output
+  end
+
   test "form_group overrides the label's 'class' and 'for' attributes if others are passed" do
     output = @horizontal_builder.form_group nil, label: { text: 'Custom Control', class: 'foo', for: 'bar' } do
       %{<input class="form-control-plaintext" value="Bar">}.html_safe