diff --git a/README.md b/README.md index d01fa62bd..29d7652ab 100644 --- a/README.md +++ b/README.md @@ -258,7 +258,7 @@ This generates: ```html
- +
@@ -275,7 +275,7 @@ This generates: ```html
- +
``` @@ -291,7 +291,7 @@ This generates: ```html
- +
``` @@ -787,7 +787,7 @@ This generates: ```html
- +
@@ -1049,17 +1049,19 @@ This generates: ```html
- +
- +
-
- - - +
+
+ + + +
@@ -1088,17 +1090,15 @@ To use a horizontal-layout form with labels to the left of the control, use the `layout: :horizontal` option. You should specify both `label_col` and `control_col` css classes as well (they default to `col-sm-2` and `col-sm-10`). -In the example below, the checkbox and submit button have been wrapped in a -`form_group` to keep them properly aligned. +In the example below, the submit button has been wrapped in a `form_group` to +keep it properly aligned. ![Example 38](demo/doc/screenshots/bootstrap/readme/38_example.png "Example 38") ```erb <%= bootstrap_form_for(@user, layout: :horizontal, label_col: "col-sm-2", control_col: "col-sm-10") do |f| %> <%= f.email_field :email %> <%= f.password_field :password %> - <%= f.form_group do %> - <%= f.check_box :remember_me %> - <% end %> + <%= f.check_box :remember_me %> <%= f.form_group do %> <%= f.submit %> <% end %> @@ -1110,13 +1110,13 @@ This generates: ```html
- +
- +
@@ -1144,7 +1144,8 @@ The `label_col` and `control_col` css classes can also be changed per control: ```erb <%= bootstrap_form_for(@user, layout: :horizontal) do |f| %> <%= f.email_field :email %> - <%= f.text_field :age, control_col: "col-sm-3" %> + <%= f.text_field :age, label_col: "col-sm-3", control_col: "col-sm-3" %> + <%= f.check_box :terms, label_col: "", control_col: "col-sm-11" %> <%= f.form_group do %> <%= f.submit %> <% end %> @@ -1156,17 +1157,26 @@ This generates: ```html
- +
- +
+
+
+
+ + + +
+
+
@@ -1213,13 +1223,13 @@ This generates: ```html
- +
- +
@@ -1240,11 +1250,12 @@ The form-level `layout` can be overridden per field, unless the form-level layou ```erb <%= bootstrap_form_for(@user, layout: :horizontal) do |f| %> <%= f.email_field :email %> - <%= f.text_field :feet, layout: :default %> - <%= f.text_field :inches, layout: :default %> - <%= f.form_group do %> - <%= f.submit %> - <% end %> +
+
<%= f.text_field :feet, layout: :default %>
+
<%= f.text_field :inches, layout: :default %>
+
+ <%= f.check_box :terms, layout: :default %> + <%= f.submit %> <% end %> ``` @@ -1253,24 +1264,33 @@ This generates: ```html
- +
-
- - +
+
+
+ + +
+
+
+
+ + +
+
- - -
-
-
- +
+ + +
+ ``` diff --git a/demo/doc/screenshots/bootstrap/index/00_horizontal_form.png b/demo/doc/screenshots/bootstrap/index/00_horizontal_form.png index a80947b93..532bff724 100644 Binary files a/demo/doc/screenshots/bootstrap/index/00_horizontal_form.png and b/demo/doc/screenshots/bootstrap/index/00_horizontal_form.png differ diff --git a/demo/doc/screenshots/bootstrap/index/01_with_validation_error.png b/demo/doc/screenshots/bootstrap/index/01_with_validation_error.png index 6859834de..074b935e2 100644 Binary files a/demo/doc/screenshots/bootstrap/index/01_with_validation_error.png and b/demo/doc/screenshots/bootstrap/index/01_with_validation_error.png differ diff --git a/demo/doc/screenshots/bootstrap/index/02_inline_form.png b/demo/doc/screenshots/bootstrap/index/02_inline_form.png index b142e4a08..f07c87564 100644 Binary files a/demo/doc/screenshots/bootstrap/index/02_inline_form.png and b/demo/doc/screenshots/bootstrap/index/02_inline_form.png differ diff --git a/demo/doc/screenshots/bootstrap/readme/05_example.png b/demo/doc/screenshots/bootstrap/readme/05_example.png index 4408648d0..b11cab725 100644 Binary files a/demo/doc/screenshots/bootstrap/readme/05_example.png and b/demo/doc/screenshots/bootstrap/readme/05_example.png differ diff --git a/demo/doc/screenshots/bootstrap/readme/36_example.png b/demo/doc/screenshots/bootstrap/readme/36_example.png index 79277fa34..2dd87500a 100644 Binary files a/demo/doc/screenshots/bootstrap/readme/36_example.png and b/demo/doc/screenshots/bootstrap/readme/36_example.png differ diff --git a/demo/doc/screenshots/bootstrap/readme/39_example.png b/demo/doc/screenshots/bootstrap/readme/39_example.png index 27d20558d..a460a337d 100644 Binary files a/demo/doc/screenshots/bootstrap/readme/39_example.png and b/demo/doc/screenshots/bootstrap/readme/39_example.png differ diff --git a/demo/doc/screenshots/bootstrap/readme/41_example.png b/demo/doc/screenshots/bootstrap/readme/41_example.png index 5194c0da2..985394761 100644 Binary files a/demo/doc/screenshots/bootstrap/readme/41_example.png and b/demo/doc/screenshots/bootstrap/readme/41_example.png differ diff --git a/lib/bootstrap_form/components/labels.rb b/lib/bootstrap_form/components/labels.rb index 2ba7cc779..8aee89942 100644 --- a/lib/bootstrap_form/components/labels.rb +++ b/lib/bootstrap_form/components/labels.rb @@ -23,7 +23,9 @@ def generate_label(id, name, options, custom_label_col, group_layout) end def label_classes(name, options, custom_label_col, group_layout) - classes = ["form-label", options[:class], label_layout_classes(custom_label_col, group_layout)] + classes = [options[:class] || label_layout_classes(custom_label_col, group_layout)] + add_class = options.delete(:add_class) + classes.prepend(add_class) if add_class classes << "required" if required_field_options(options, name)[:required] options.delete(:required) classes << "text-danger" if label_errors && error?(name) @@ -34,7 +36,9 @@ def label_layout_classes(custom_label_col, group_layout) if layout_horizontal?(group_layout) ["col-form-label", (custom_label_col || label_col)] elsif layout_inline?(group_layout) - ["me-sm-2"] + %w[form-label me-sm-2] + else + "form-label" end end diff --git a/lib/bootstrap_form/form_group.rb b/lib/bootstrap_form/form_group.rb index e89707881..7cf1525e4 100644 --- a/lib/bootstrap_form/form_group.rb +++ b/lib/bootstrap_form/form_group.rb @@ -13,10 +13,8 @@ def form_group(*args, &block) tag.div(**options.except(:append, :id, :label, :help, :icon, :input_group_class, :label_col, :control_col, :add_control_col_class, :layout, :prepend, :floating)) do - form_group_content( - generate_label(options[:id], name, options[:label], options[:label_col], options[:layout]), - generate_help(name, options[:help]), options, &block - ) + label = generate_label(options[:id], name, options[:label], options[:label_col], options[:layout]) + form_group_content(label, generate_help(name, options[:help]), options, &block) end end diff --git a/lib/bootstrap_form/inputs/check_box.rb b/lib/bootstrap_form/inputs/check_box.rb index 1fa498c99..08a23d762 100644 --- a/lib/bootstrap_form/inputs/check_box.rb +++ b/lib/bootstrap_form/inputs/check_box.rb @@ -10,12 +10,13 @@ module CheckBox def check_box_with_bootstrap(name, options={}, checked_value="1", unchecked_value="0", &block) options = options.symbolize_keys! - tag.div(class: check_box_wrapper_class(options), **options[:wrapper].to_h.except(:class)) do + content = tag.div(class: check_box_wrapper_class(options), **options[:wrapper].to_h.except(:class)) do html = check_box_without_bootstrap(name, check_box_options(name, options), checked_value, unchecked_value) html << check_box_label(name, options, checked_value, &block) unless options[:skip_label] html << generate_error(name) if options[:error_message] html end + wrapper(content, options) end bootstrap_alias :check_box @@ -23,6 +24,16 @@ def check_box_with_bootstrap(name, options={}, checked_value="1", unchecked_valu private + def wrapper(content, options) + if layout == :inline && !options[:multiple] + tag.div(class: "col") { content } + elsif layout == :horizontal && !options[:multiple] + form_group(layout: layout_in_effect(options[:layout]), label_col: options[:label_col]) { content } + else + content + end + end + def check_box_options(name, options) check_box_options = options.except(:class, :label, :label_class, :error_message, :help, :inline, :hide_label, :skip_label, :wrapper, :wrapper_class, :switch) @@ -71,7 +82,7 @@ def check_box_label_class(options) def check_box_wrapper_class(options) classes = ["form-check"] classes << "form-check-inline" if layout_inline?(options[:inline]) - classes << "mb-3" unless options[:multiple] || layout == :horizontal + classes << "mb-3" unless options[:multiple] || %i[horizontal inline].include?(layout) classes << "form-switch" if options[:switch] classes << options.dig(:wrapper, :class).presence classes << options[:wrapper_class].presence diff --git a/lib/bootstrap_form/inputs/inputs_collection.rb b/lib/bootstrap_form/inputs/inputs_collection.rb index e6fc4c637..737a66f9a 100644 --- a/lib/bootstrap_form/inputs/inputs_collection.rb +++ b/lib/bootstrap_form/inputs/inputs_collection.rb @@ -6,6 +6,7 @@ module InputsCollection private def inputs_collection(name, collection, value, text, options={}) + options[:label] ||= { class: group_label_class(options[:layout]) } options[:inline] ||= layout_inline?(options[:layout]) form_group_builder(name, options) do @@ -21,6 +22,15 @@ def inputs_collection(name, collection, value, text, options={}) end end + def group_label_class(field_layout) + if layout_horizontal?(field_layout) + group_label_class = "col-form-label #{label_col} pt-0" + elsif layout_inline?(field_layout) + group_label_class = "form-check form-check-inline ps-0" + end + group_label_class + end + # FIXME: Find a way to reduce the parameter list size # rubocop:disable Metrics/ParameterLists def form_group_collection_input_options(options, text, obj, index, input_value, collection) diff --git a/test/bootstrap_checkbox_test.rb b/test/bootstrap_checkbox_test.rb index e6e279b3a..e9ea7e23f 100644 --- a/test/bootstrap_checkbox_test.rb +++ b/test/bootstrap_checkbox_test.rb @@ -125,12 +125,12 @@ class BootstrapCheckboxTest < ActionView::TestCase expected = <<~HTML
#{'' unless ::Rails::VERSION::STRING >= '6'} -
- - - +
+
+ + + +
HTML @@ -218,15 +218,11 @@ class BootstrapCheckboxTest < ActionView::TestCase
- +
- +
HTML diff --git a/test/bootstrap_fields_test.rb b/test/bootstrap_fields_test.rb index 7838f4d42..308246581 100644 --- a/test/bootstrap_fields_test.rb +++ b/test/bootstrap_fields_test.rb @@ -218,7 +218,7 @@ class BootstrapFieldsTest < ActionView::TestCase test "text fields are wrapped correctly when horizontal and gutter classes are given" do expected = <<~HTML
- +
@@ -231,7 +231,7 @@ class BootstrapFieldsTest < ActionView::TestCase test "text fields are wrapped correctly when horizontal and multiple wrapper classes specified" do expected = <<~HTML
- +
@@ -244,7 +244,7 @@ class BootstrapFieldsTest < ActionView::TestCase test "text fields are wrapped correctly when horizontal and wrapper class specified" do expected = <<~HTML
- +
@@ -256,7 +256,7 @@ class BootstrapFieldsTest < ActionView::TestCase test "text fields are wrapped correctly when horizontal and multiple wrapper classes specified (reverse order)" do expected = <<~HTML
- +
@@ -383,7 +383,7 @@ class BootstrapFieldsTest < ActionView::TestCase
#{'' unless ::Rails::VERSION::STRING >= '6'}
- +
diff --git a/test/bootstrap_form_group_test.rb b/test/bootstrap_form_group_test.rb index d457c9b2b..92dd97091 100644 --- a/test/bootstrap_form_group_test.rb +++ b/test/bootstrap_form_group_test.rb @@ -28,7 +28,7 @@ class BootstrapFormGroupTest < ActionView::TestCase test "hiding a label" do expected = <<~HTML
- +
HTML @@ -38,7 +38,7 @@ class BootstrapFormGroupTest < ActionView::TestCase test "adding a custom label class via the label_class parameter" do expected = <<~HTML
- +
HTML @@ -48,7 +48,7 @@ class BootstrapFormGroupTest < ActionView::TestCase test "adding a custom label class via the html_options label hash" do expected = <<~HTML
- +
HTML @@ -58,7 +58,7 @@ class BootstrapFormGroupTest < ActionView::TestCase test "adding a custom label and changing the label text via the html_options label hash" do expected = <<~HTML
- +
HTML @@ -109,7 +109,7 @@ class BootstrapFormGroupTest < ActionView::TestCase test "label as placeholder" do expected = <<~HTML
- +
HTML @@ -210,7 +210,7 @@ class BootstrapFormGroupTest < ActionView::TestCase test "help messages for horizontal forms" do expected = <<~HTML
- +
This is required @@ -287,7 +287,7 @@ class BootstrapFormGroupTest < ActionView::TestCase expected = <<~HTML
- +
@@ -318,7 +318,7 @@ class BootstrapFormGroupTest < ActionView::TestCase expected = <<~HTML
- +
@@ -373,13 +373,13 @@ class BootstrapFormGroupTest < ActionView::TestCase 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 + output = @horizontal_builder.form_group nil, label: { text: "Custom Control", add_class: "foo", for: "bar" } do ''.html_safe end expected = <<~HTML
- +
@@ -538,7 +538,7 @@ class BootstrapFormGroupTest < ActionView::TestCase
Hallo
- +
diff --git a/test/bootstrap_form_test.rb b/test/bootstrap_form_test.rb index 481c363d8..719620418 100644 --- a/test/bootstrap_form_test.rb +++ b/test/bootstrap_form_test.rb @@ -19,7 +19,7 @@ class BootstrapFormTest < ActionView::TestCase #{'' unless ::Rails::VERSION::STRING >= '6'}
- +
@@ -30,7 +30,7 @@ class BootstrapFormTest < ActionView::TestCase
- +
@@ -43,7 +43,7 @@ class BootstrapFormTest < ActionView::TestCase
- +
@@ -132,13 +132,15 @@ class BootstrapFormTest < ActionView::TestCase
-
- - - +
+
+ + + +
- +
@@ -174,18 +176,22 @@ class BootstrapFormTest < ActionView::TestCase #{'' unless ::Rails::VERSION::STRING >= '6'}
- +
-
- - - +
+
+
+ + + +
+
- +
@@ -198,7 +204,7 @@ class BootstrapFormTest < ActionView::TestCase
- +
-
- - - +
+
+
+ + + +
+
@@ -274,13 +284,17 @@ class BootstrapFormTest < ActionView::TestCase
-
- - - +
+
+
+ + + +
+
- +
@@ -317,7 +331,7 @@ class BootstrapFormTest < ActionView::TestCase #{'' unless ::Rails::VERSION::STRING >= '6'}
- +
@@ -600,7 +614,7 @@ class BootstrapFormTest < ActionView::TestCase #{'' unless ::Rails::VERSION::STRING >= '6'}
- +
@@ -648,7 +662,7 @@ class BootstrapFormTest < ActionView::TestCase #{'' unless ::Rails::VERSION::STRING >= '6'}
- +
@@ -664,7 +678,7 @@ class BootstrapFormTest < ActionView::TestCase #{'' unless ::Rails::VERSION::STRING >= '6'}
- +
diff --git a/test/bootstrap_other_components_test.rb b/test/bootstrap_other_components_test.rb index 3f90955d2..a7c337e87 100644 --- a/test/bootstrap_other_components_test.rb +++ b/test/bootstrap_other_components_test.rb @@ -10,7 +10,7 @@ class BootstrapOtherComponentsTest < ActionView::TestCase expected = <<~HTML
- +
@@ -24,7 +24,7 @@ class BootstrapOtherComponentsTest < ActionView::TestCase expected = <<~HTML
- +
@@ -38,7 +38,7 @@ class BootstrapOtherComponentsTest < ActionView::TestCase expected = <<~HTML
- +
@@ -52,7 +52,7 @@ class BootstrapOtherComponentsTest < ActionView::TestCase expected = <<~HTML
- +
@@ -66,7 +66,7 @@ class BootstrapOtherComponentsTest < ActionView::TestCase expected = <<~HTML
- +
@@ -80,7 +80,7 @@ class BootstrapOtherComponentsTest < ActionView::TestCase expected = <<~HTML
- +
@@ -96,7 +96,7 @@ class BootstrapOtherComponentsTest < ActionView::TestCase expected = <<~HTML
- +
this is a test
HTML @@ -110,7 +110,7 @@ class BootstrapOtherComponentsTest < ActionView::TestCase expected = <<~HTML
- +
this is a test
HTML @@ -124,7 +124,7 @@ class BootstrapOtherComponentsTest < ActionView::TestCase expected = <<~HTML
- +
Custom Control
HTML diff --git a/test/bootstrap_selects_test.rb b/test/bootstrap_selects_test.rb index 19dba2ff1..38ceb731a 100644 --- a/test/bootstrap_selects_test.rb +++ b/test/bootstrap_selects_test.rb @@ -390,7 +390,7 @@ def options_range(start: 1, stop: 31, selected: nil, months: false) #{'' unless ::Rails::VERSION::STRING >= '6'}
- +