diff --git a/CHANGELOG.md b/CHANGELOG.md index e29b499e6..b1ab6b572 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/UPGRADE-4.0.md b/UPGRADE-4.0.md new file mode 100644 index 000000000..8e195bbe3 --- /dev/null +++ b/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 +``` diff --git a/lib/bootstrap_form/form_builder.rb b/lib/bootstrap_form/form_builder.rb index dae4de2d2..0164e4843 100644 --- a/lib/bootstrap_form/form_builder.rb +++ b/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] diff --git a/test/bootstrap_fields_test.rb b/test/bootstrap_fields_test.rb index 04e2df629..a26d544f4 100644 --- a/test/bootstrap_fields_test.rb +++ b/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 +
+ +
+ +
+
+ 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
diff --git a/test/bootstrap_form_group_test.rb b/test/bootstrap_form_group_test.rb index 24d11d9cf..a484ad751 100644 --- a/test/bootstrap_form_group_test.rb +++ b/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 + %{}.html_safe + end + + expected = <<-HTML.strip_heredoc +
+
+ +
+
+ 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 %{}.html_safe