From 3881cea6b7940f08690b3d6f1bb836cab92d9ac5 Mon Sep 17 00:00:00 2001 From: Jonas Pardeyke Date: Thu, 2 Jul 2026 17:44:38 +0200 Subject: [PATCH 01/42] Implement Bootstrap 6 form markup Update generated markup for the upcoming Bootstrap 6 release, per the v5-to-v6 migration guide and the v6 forms documentation: - Selects: use form-control instead of form-select - Checkboxes/radios: form-field wrapper with check/radio input classes, labels without form-check-label; inline via d-inline-grid utilities - Switches: input wrapped in div.switch with role="switch" and the native switch attribute - Range fields: div.form-range wrapper with form-range-input class - Floating labels: label rendered before the control - Buttons: btn-solid theme-primary/theme-secondary instead of btn btn-primary/btn-secondary - Grid: new breakpoint prefix syntax (sm:col-2, sm:offset-2, sm:me-2) for default label/control cols and offset calculation - Alerts: alert theme-danger instead of alert alert-danger Update test suite and README examples to the new markup, add UPGRADE-6.0.md, and bump version to 6.0.0.alpha1. Co-Authored-By: Claude Fable 5 (cherry picked from commit ecdd35fb82de7ecf0b810e5340f3871b637d4161) --- README.md | 322 ++++++------ UPGRADE-6.0.md | 81 +++ lib/bootstrap_form/components/labels.rb | 2 +- lib/bootstrap_form/form_builder.rb | 8 +- lib/bootstrap_form/form_group.rb | 5 +- lib/bootstrap_form/helpers/bootstrap.rb | 2 +- lib/bootstrap_form/inputs/base.rb | 8 +- lib/bootstrap_form/inputs/check_box.rb | 16 +- .../inputs/collection_select.rb | 2 +- .../inputs/grouped_collection_select.rb | 2 +- .../inputs/inputs_collection.rb | 2 +- lib/bootstrap_form/inputs/radio_button.rb | 10 +- lib/bootstrap_form/inputs/select.rb | 2 +- lib/bootstrap_form/inputs/submit.rb | 6 +- lib/bootstrap_form/inputs/time_zone_select.rb | 2 +- lib/bootstrap_form/version.rb | 2 +- test/bootstrap_checkbox_test.rb | 142 +++--- test/bootstrap_collection_checkboxes_test.rb | 448 ++++++++--------- ...bootstrap_collection_radio_buttons_test.rb | 280 +++++------ test/bootstrap_fields_test.rb | 50 +- test/bootstrap_form_group_test.rb | 78 +-- test/bootstrap_form_test.rb | 472 +++++++++--------- test/bootstrap_other_components_test.rb | 62 +-- test/bootstrap_radio_button_test.rb | 106 ++-- test/bootstrap_selects_test.rb | 178 +++---- test/special_form_class_models_test.rb | 10 +- test/test_helper.rb | 4 +- 27 files changed, 1199 insertions(+), 1103 deletions(-) create mode 100644 UPGRADE-6.0.md diff --git a/README.md b/README.md index 5d8680032..ae1be91e6 100644 --- a/README.md +++ b/README.md @@ -3,7 +3,7 @@ [![Ruby](https://github.com/bootstrap-ruby/bootstrap_form/actions/workflows/ruby.yml/badge.svg)](https://github.com/bootstrap-ruby/bootstrap_form/actions/workflows/ruby.yml) [![Gem Version](https://badge.fury.io/rb/bootstrap_form.svg)](https://rubygems.org/gems/bootstrap_form) -`bootstrap_form` is a Rails form builder that makes it super easy to integrate Bootstrap v5-style forms into your Rails application. It provides form helpers that augment the Rails form helpers. `bootstrap_forms`'s form helpers generate the form field and its label and all the Bootstrap mark-up required for proper Bootstrap display. `bootstrap_form` also provides: +`bootstrap_form` is a Rails form builder that makes it super easy to integrate Bootstrap v6-style forms into your Rails application. It provides form helpers that augment the Rails form helpers. `bootstrap_forms`'s form helpers generate the form field and its label and all the Bootstrap mark-up required for proper Bootstrap display. `bootstrap_form` also provides: * [Validation error messages](#validation-and-errors) below the field they correspond to, by default. You can also put the error messages after the label, or turn off `bootstrap_form`'s validation error handling and do it yourself. _Note that this applies to Rails-generated validation messages._ HTML 5 client-side validation and Rails validation out of the box don't really work well together. One discussion of the challenges and some solutions is [here](https://www.jorgemanrubia.com/2019/02/16/form-validations-with-html5-and-modern-rails/) * Automatic [mark-up for the `required` attribute](#required-fields) on required fields. @@ -27,7 +27,7 @@ Some other nice things that `bootstrap_form` does for you are: * Ruby 3.2+ (https://www.ruby-lang.org/en/downloads/branches/) * Rails 7.2+ (https://guides.rubyonrails.org/maintenance_policy.html) -* Bootstrap 5.0+ +* Bootstrap 6.0+ ## Installation @@ -111,12 +111,12 @@ This generates the following HTML: -
+
- - + +
- + ``` @@ -142,7 +142,7 @@ This generates:
- + ``` @@ -173,12 +173,12 @@ This generates: A good password should be at least six characters long -
+
- - + +
- + ``` @@ -222,7 +222,7 @@ Generated HTML:
- + ``` @@ -475,7 +475,7 @@ You can also prepend and append buttons. Note: The buttons must contain the ![Example 12](demo/doc/screenshots/bootstrap/readme/12_example.png "Example 12") ```erb -<%= f.text_field :search, append: link_to("Go", "#", class: "btn btn-secondary") %> +<%= f.text_field :search, append: link_to("Go", "#", class: "btn-solid theme-secondary") %> ``` This generates: @@ -485,7 +485,7 @@ This generates:
- Go + Go
``` @@ -504,7 +504,7 @@ This generates:
- +
``` @@ -602,7 +602,7 @@ This generates: ```html
- @@ -633,25 +633,25 @@ This generates: ```html
-
- - +
+ +
-
- - +
+ +
-
- - +
+ +
Optional Help Text
-
+
- - + +
``` @@ -672,10 +672,10 @@ This generates: ```html
-
+
- -
@@ -698,22 +698,22 @@ This generates: ```html
-
- - +
+ +
-
- - +
+ +
-
- - +
+ +
``` -Check boxes and radio buttons are wrapped in a `div.form-check`. You can add classes to this `div` with the `:wrapper_class` option: +Check boxes and radio buttons are wrapped in a `div.form-field`. You can add classes to this `div` with the `:wrapper_class` option: ![Example 22](demo/doc/screenshots/bootstrap/readme/22_example.png "Example 22") ```erb @@ -723,9 +723,9 @@ Check boxes and radio buttons are wrapped in a `div.form-check`. You can add cla This generates: ```html -
- - +
+ +
``` @@ -740,20 +740,20 @@ You can also add a style to the tag using the `wrapper` option: This generates: ```html -
+
- - + +
-
- - +
+ +
``` ### Switches -To render checkboxes as switches with Bootstrap 4.2+, use `switch: true`: +To render checkboxes as switches, use `switch: true`: ![Example 24](demo/doc/screenshots/bootstrap/readme/24_example.png "Example 24") ```erb @@ -763,10 +763,12 @@ To render checkboxes as switches with Bootstrap 4.2+, use `switch: true`: This generates: ```html -
- - - +
+
+ + +
+
``` @@ -786,25 +788,25 @@ This generates: ```html
Skill level
-
- - +
+ +
-
- - +
+ +
Skills
-
- - +
+ +
-
- - +
+ +
``` @@ -834,13 +836,13 @@ This generates: ```html
Misc
-
- - +
+ +
-
- - +
+ +
``` @@ -859,7 +861,9 @@ This generates: ```html
- +
+ +
``` @@ -895,8 +899,8 @@ This generates: ```html
- -
+ +
@@ -972,7 +976,7 @@ this by defining these selects as `inline-block` and a width of `auto`. ## Submit Buttons -The `btn btn-secondary` CSS classes are automatically added to your submit +The `btn-solid theme-secondary` CSS classes are automatically added to your submit buttons. ![Example 33](demo/doc/screenshots/bootstrap/readme/33_example.png "Example 33") @@ -983,10 +987,10 @@ buttons. This generates: ```html - + ``` -You can also use the `primary` helper, which adds `btn btn-primary` to your +You can also use the `primary` helper, which adds `btn-solid theme-primary` to your submit button: ![Example 34](demo/doc/screenshots/bootstrap/readme/34_example.png "Example 34") @@ -997,20 +1001,20 @@ submit button: This generates: ```html - + ``` You can specify your own classes like this: ![Example 35](demo/doc/screenshots/bootstrap/readme/35_example.png "Example 35") ```erb -<%= f.submit "Log In", class: "btn btn-success" %> +<%= f.submit "Log In", class: "btn-solid theme-success" %> ``` This generates: ```html - + ``` If the `primary` helper receives a `render_as_button: true` option or a block, @@ -1031,10 +1035,10 @@ illustrative icons to them). For example, the following statements This generates: ```html - - ``` @@ -1042,7 +1046,7 @@ This generates: are equivalent, and each of them both be rendered as: ```html - + ``` If you wish to add additional CSS classes to your button, while keeping the @@ -1062,7 +1066,7 @@ you add. As an example, the following button declarations will be rendered as ```html - + ``` @@ -1183,14 +1187,14 @@ This generates:
-
+
- - + +
- +
``` @@ -1214,14 +1218,14 @@ This generates: 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`). +`control_col` css classes as well (they default to `sm:col-2` and `sm:col-10`). In the example below, the submit button has been wrapped in a `form_group` to keep it properly aligned. ![Example 42](demo/doc/screenshots/bootstrap/readme/42_example.png "Example 42") ```erb -<%= bootstrap_form_for(@user, layout: :horizontal, label_col: "col-sm-2", control_col: "col-sm-10") do |f| %> +<%= bootstrap_form_for(@user, layout: :horizontal, label_col: "sm:col-2", control_col: "sm:col-10") do |f| %> <%= f.email_field :email %> <%= f.password_field :password %> <%= f.check_box :remember_me %> @@ -1236,29 +1240,29 @@ This generates: ```html
- -
+ +
- -
+ +
-
-
+
+
- - + +
-
- +
+
@@ -1270,8 +1274,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, label_col: %w[col-sm-3 text-bg-info], control_col: %w[col-sm-3 text-bg-success] %> - <%= f.check_box :terms, label_col: "", control_col: "col-sm-11" %> + <%= f.text_field :age, label_col: %w[sm:col-3 text-bg-info], control_col: %w[sm:col-3 text-bg-success] %> + <%= f.check_box :terms, label_col: "", control_col: "sm:col-11" %> <%= f.form_group do %> <%= f.submit %> <% end %> @@ -1283,29 +1287,29 @@ This generates: ```html
- -
+ +
- -
+ +
-
-
+
+
- - + +
-
- +
+
@@ -1318,10 +1322,10 @@ or default value can be changed in initializer: module BootstrapForm class FormBuilder def default_label_col - 'col-sm-4' + 'sm:col-4' end def default_control_col - 'col-sm-8' + 'sm:col-8' end def default_layout # :vertical, :horizontal or :inline @@ -1349,20 +1353,20 @@ This generates: ```html
- -
+ +
- -
+ +
-
- +
+
@@ -1390,8 +1394,8 @@ This generates: ```html
- -
+ +
@@ -1410,13 +1414,13 @@ This generates:
-
+
- - + +
- + ``` @@ -1424,7 +1428,7 @@ A form-level `layout: :inline` can't be overridden because of the way Bootstrap ### Floating Labels -The `floating` option can be used to enable Bootstrap 5's floating labels. This option is supported on text fields +The `floating` option can be used to enable Bootstrap's floating labels. This option is supported on text fields and dropdowns. Here's an example: ![Example 46](demo/doc/screenshots/bootstrap/readme/46_example.png "Example 46") @@ -1443,26 +1447,26 @@ This generates: ```html
- +
- +
- +
- -
- +
``` @@ -1498,26 +1502,26 @@ Generated HTML:
Misc
-
- - +
+ +
-
- - +
+ +
is invalid
Preferences
-
- - +
+ +
-
- - +
+ +
is invalid
@@ -1586,7 +1590,7 @@ Which outputs: ```html
-
+

Please fix the errors below.

  • Email is invalid
    • @@ -1610,7 +1614,7 @@ This generates: ```html -
    Please fix the errors below.
    +
    Please fix the errors below.
    ``` @@ -1759,7 +1763,7 @@ Generated HTML:
    - @@ -1780,7 +1784,7 @@ Generated HTML:
    - +
    ``` @@ -1843,22 +1847,22 @@ Generated HTML:
-
- - +
+ +
-
+
- - + +
- @@ -1872,7 +1876,7 @@ Generated HTML:
- + ``` diff --git a/UPGRADE-6.0.md b/UPGRADE-6.0.md new file mode 100644 index 000000000..2c0490ab7 --- /dev/null +++ b/UPGRADE-6.0.md @@ -0,0 +1,81 @@ +# Upgrading to `bootstrap_form` 6.0 + +`bootstrap_form` 6.0 generates mark-up for Bootstrap 6. Bootstrap 6 renames and restructures many of the form-related classes, so the mark-up generated by this gem changes accordingly. If your application styles or scripts against the generated mark-up, or if you pass Bootstrap utility classes to the helpers, you will need to make changes. + +## Bootstrap 6 Changes + +Upgrading `bootstrap_form` to version 6 means you must upgrade your whole application to Bootstrap 6. Read the [Bootstrap 6 migration guide](https://github.com/twbs/bootstrap/blob/v6-dev/skills/bootstrap-v5-v6-migration/SKILL.md) and the [Bootstrap 6 forms documentation](https://v6-dev--twbs-bootstrap.netlify.app/docs/6.0/forms/overview/) to see what changes you have to make to your views. + +## Changes to Generated Mark-up + +### Selects + +Bootstrap 6 styles ` + +
+ +
+``` + +instead of the v5 `form-check form-switch` wrapper with a `form-check-input` class. + +### Range Fields + +Bootstrap 6 wraps range inputs in a component element. `range_field` now generates: + +```html +
+ +
+``` + +instead of a bare ``. + +### Floating Labels + +Bootstrap 6 requires the `