lcreid
diff --git a/‎CHANGELOG.md‎
Lines changed: 15 additions & 0 deletions b/‎CHANGELOG.md‎
Lines changed: 15 additions & 0 deletions
diff --git a/‎Dangerfile‎
Lines changed: 1 addition & 1 deletion b/‎Dangerfile‎
Lines changed: 1 addition & 1 deletion
diff --git a/‎Gemfile‎
Lines changed: 1 addition & 1 deletion b/‎Gemfile‎
Lines changed: 1 addition & 1 deletion
diff --git a/‎README.md‎
Lines changed: 61 additions & 38 deletions b/‎README.md‎
Lines changed: 61 additions & 38 deletions
diff --git a/‎UPGRADE-5.0.md‎
Lines changed: 25 additions & 0 deletions b/‎UPGRADE-5.0.md‎
Lines changed: 25 additions & 0 deletions
diff --git a/‎bootstrap_form.gemspec‎
Lines changed: 2 additions & 4 deletions b/‎bootstrap_form.gemspec‎
Lines changed: 2 additions & 4 deletions
diff --git a/‎demo/app/assets/stylesheets/actiontext.scss‎
Lines changed: 0 additions & 9 deletions b/‎demo/app/assets/stylesheets/actiontext.scss‎
Lines changed: 0 additions & 9 deletions
diff --git a/‎demo/app/views/bootstrap/form.html.erb‎
Lines changed: 13 additions & 15 deletions b/‎demo/app/views/bootstrap/form.html.erb‎
Lines changed: 13 additions & 15 deletions
diff --git a/‎demo/app/views/layouts/application.html.erb‎
Lines changed: 3 additions & 3 deletions b/‎demo/app/views/layouts/application.html.erb‎
Lines changed: 3 additions & 3 deletions
@@ -6,6 +6,21 @@
 
 ### New features
 
+* [#572](https://github.com/bootstrap-ruby/bootstrap_form/issues/572): Simplify the formatting of the file upload control to follow the new Bootstrap 5 styles
+* [#573](https://github.com/bootstrap-ruby/bootstrap_form/issues/573): Add support for Bootstrap 5's floating labels
+
+### Bugfixes
+
+* [#582](https://github.com/bootstrap-ruby/bootstrap_form/issues/582): Fix tests in bootstrap-5 branch, removes Rubocop offenses, and adds testing with Rails 6.1.
+
+## [5.0.0.alpha1][]
+
+### Breaking changes
+
+* [#569] Remove `role="form"` from the default generated form HTML so forms pass W3C validation. (Only a breaking change if you depended on the `form` attribute. `bootstrap_form` doesn't depend on it.)
+
+### New features
+
 * Your contribution here!
 
 ### Bugfixes
 
@@ -44,7 +44,7 @@ end
 # ------------------------------------------------------------------------------
 # Did you remove the CHANGELOG's "Your contribution here!" line?
 # ------------------------------------------------------------------------------
-if has_changelog_changes && (IO.read("CHANGELOG.md").scan(/^\s*[-*] Your contribution here/i).count < 3)
+if has_changelog_changes && IO.read("CHANGELOG.md").scan(/^\s*[-*] Your contribution here/i).count < 3
   raise(
     "Please put the `- Your contribution here!` line back into CHANGELOG.md.",
     sticky: false
 
@@ -5,6 +5,7 @@ gemspec path: __dir__
 # Uncomment and change rails version for testing purposes
 # gem "rails", "~> 5.2.0"
 # gem "rails", "~> 6.0.0"
+# gem "rails", "~> 6.1.0"
 # gem "rails", git: "https://github.com/rails/rails.git"
 
 group :development do
@@ -17,7 +18,6 @@ group :development do
 end
 
 group :test do
-  # can relax version requirement for Rails 5.2.beta3+
   gem "diffy"
   gem "equivalent-xml"
   gem "mocha"
 
@@ -1,15 +1,9 @@
-If you are using Bootstrap v3, refer to the legacy [legacy-2.7](https://github.com/bootstrap-ruby/bootstrap_form/tree/legacy-2.7) branch.
-
-This is a new take on the `bootstrap_form` README. Please leave comments at: #520. You can go back to the traditional [README](/OLD-README.md).
-
----
-
 # bootstrap_form
 
 [![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 v4-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 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:
 
 * [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.
@@ -33,14 +27,14 @@ Some other nice things that `bootstrap_form` does for you are:
 
 * Ruby 2.5+
 * Rails 5.2+
-* Bootstrap 4.0+
+* Bootstrap 5.0+
 
 ## Installation
 
 Add it to your Gemfile:
 
 ```ruby
-gem "bootstrap_form", "~> 4.0"
+gem "bootstrap_form", "~> 5.0"
 ```
 
 Then:
@@ -79,12 +73,12 @@ This generates the following HTML:
 
 ```html
 <form accept-charset="UTF-8" action="/users" class="new_user" id="new_user" method="post">
-  <div class="form-group">
-    <label for="user_email">Email</label>
+  <div class="mb-3">
+    <label class="form-label" for="user_email">Email</label>
     <input class="form-control" id="user_email" name="user[email]" type="email">
   </div>
-  <div class="form-group">
-    <label for="user_password">Password</label>
+  <div class="mb-3">
+    <label class="form-label" for="user_password">Password</label>
     <input class="form-control" id="user_password" name="user[password]" type="password">
   </div>
   <div class="form-check">
@@ -125,14 +119,14 @@ To get started, just use the `bootstrap_form_with` helper in place of `form_with
 This generates:
 
 ```html
-<form role="form" action="/users" accept-charset="UTF-8" method="post">
+<form action="/users" accept-charset="UTF-8" method="post">
   <input name="utf8" type="hidden" value="&#x2713;" />
-  <div class="form-group">
-    <label class="required" for="user_email">Email</label>
+  <div class="mb-3">
+    <label class="form-label required" for="user_email">Email</label>
     <input class="form-control" type="email" value="[email protected]" name="user[email]" />
   </div>
-  <div class="form-group">
-    <label for="user_password">Password</label>
+  <div class="mb-3">
+    <label class="form-label" for="user_password">Password</label>
     <input class="form-control" type="password" name="user[password]" />
     <small class="form-text text-muted">A good password should be at least six characters long</small>
   </div>
@@ -150,7 +144,6 @@ in `form_with`.
 
 `form_with` has some important differences compared to `form_for` and `form_tag`, and these differences apply to `bootstrap_form_with`. A good summary of the differences can be found at: https://m.patrikonrails.com/rails-5-1s-form-with-vs-old-form-helpers-3a5f72a8c78a, or in the [Rails documentation](api.rubyonrails.org).
 
-
 ## Configuration
 
 `bootstrap_form` can be used out-of-the-box without any configuration. However, `bootstrap_form` does have an optional configuration file at `config/initializers/bootstrap_form.rb` for setting options that affect all generated forms in an application.
@@ -159,14 +152,14 @@ The current configuration options are:
 
 | Option | Default value | Description |
 |---------------------------|------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
-| `default_form_attributes` | `{role: "form"}` | version [2.2.0](https://github.com/bootstrap-ruby/bootstrap_form/blob/main/CHANGELOG.md#220-2014-09-16) added a role="form" attribute to all forms.   The W3C validator will raise a **warning** on forms with a role="form" attribute.   Set this option to `{}` to make forms be W3C compliant. |
-
+| `default_form_attributes` | | `bootstrap_form` versions 3 and 4 added a role="form" attribute to all forms. The W3C validator will raise a **warning** on forms with a role="form" attribute. `bootstrap_form` version 5 drops this attribute by default. Set this option to `{ role: "form" }` to make forms non-compliant with W3C, but generate the `role="form"` attribute like `bootstrap_form` versions 3 and 4. |
 
 Example:
+
 ```ruby
 # config/initializers/bootstrap_form.rb
 BootstrapForm.configure do |c|
-  c.default_form_attributes = {} # to make forms W3C compliant
+  c.default_form_attributes = { role: "form" } # to make forms non-compliant with W3C.
 end
 ```
 
@@ -319,7 +312,7 @@ To add a class to the input group wrapper, use the `:input_group_class` option.
 
 ### Additional Form Group Attributes
 
-Bootstrap mark-up dictates that most input field types have the label and input wrapped in a `div.form-group`.
+Bootstrap mark-up dictates that most input field types have the label and input wrapped in a `div.mb-3`.
 
 If you want to add an additional CSS class or any other attribute to the form group div, you can use the `wrapper: { class: 'additional-class', data: { foo: 'bar' } }` option.
 
@@ -330,8 +323,8 @@ If you want to add an additional CSS class or any other attribute to the form gr
 Which produces the following output:
 
 ```erb
-<div class="form-group has-warning" data-foo="bar">
-  <label class="form-control-label" for="user_name">Id</label>
+<div class="mb-3 has-warning" data-foo="bar">
+  <label class="form-label form-control-label" for="user_name">Id</label>
   <input class="form-control" id="user_name" name="user[name]" type="text">
 </div>
 ```
@@ -404,10 +397,10 @@ Check boxes and radio buttons are wrapped in a `div.form-check`. You can add cla
 
 ### Switches
 
-To render checkboxes as switches with Bootstrap 4.2+, use `custom: :switch`:
+To render checkboxes as switches with Bootstrap 4.2+, use `switch: true`:
 
 ```erb
-<%= f.check_box :remember_me, custom: :switch %>
+<%= f.check_box :remember_me, switch: true %>
 ```
 
 ### Collections
@@ -440,8 +433,8 @@ You can create a static control like this:
 Here's the output for a horizontal layout:
 
 ```html
-<div class="form-group">
-  <label class="col-sm-2 form-control-label" for="user_email">Email</label>
+<div class="mb-3">
+  <label class="form-label col-sm-2 form-control-label" for="user_email">Email</label>
   <div class="col-sm-10">
     <input class="form-control-plaintext" id="user_email" name="user[email]" readonly="readonly" type="text" value="[email protected]"/>
   </div>
@@ -553,8 +546,8 @@ If you're using Rails 6, `bootstrap_form` supports the `rich_text_area` helper.
 will be rendered as:
 
 ```html
-<div class="form-group">
-  <label for="user_life_story">Life story</label>
+<div class="mb-3">
+  <label class="form-label" for="user_life_story">Life story</label>
   <input type="hidden" name="user[life_story]" id="user_life_story_trix_input_user"/>
   <trix-editor id="user_life_story" data-blob-url-template="http://test.host/rails/active_storage/blobs/:signed_id/:filename" data-direct-upload-url="http://test.host/rails/active_storage/direct_uploads" input="user_life_story_trix_input_user" class="trix-content form-control"/>
   </trix-editor>
@@ -700,6 +693,21 @@ The `custom` option can be used to replace the browser default styles for check
 <% end %>
 ```
 
+### Floating Labels
+
+The `floating` option can be used to enable Bootstrap 5's floating labels. This option is supported on text fields
+and dropdowns. Here's an example:
+
+```erb
+<%= bootstrap_form_for(@user) do |f| %>
+  <%= f.email_field :email, floating: true %>
+  <%= f.password_field :password, floating: true %>
+  <%= f.password_field :password, floating: true %>
+  <%= f.select :status, [["Active", 1], ["Inactive", 2]], include_blank: "Select a value", floating: true %>
+  <%= f.submit "Log In" %>
+<% end %>
+```
+
 ## Validation and Errors
 
 Rails normally wraps fields with validation errors in a `div.field_with_errors`, but this behaviour isn't consistent with Bootstrap 4 styling. By default, `bootstrap_form` generations in-line errors which appear below the field. But it can also generate errors on the label, or not display any errors, leaving it up to you.
@@ -710,8 +718,8 @@ By default, fields that have validation errors will be outlined in red and the
 error will be displayed below the field. Here's an example:
 
 ```html
-<div class="form-group">
-  <label class="form-control-label" for="user_email">Email</label>
+<div class="mb-3">
+  <label class="form-label form-control-label" for="user_email">Email</label>
   <input class="form-control is-invalid" id="user_email" name="user[email]" type="email" value="">
   <small class="invalid-feedback">can't be blank</small>
 </div>
@@ -788,8 +796,7 @@ Which outputs:
 
 ### Errors On
 
-If you want to display a custom inline error for a specific attribute not
-represented by a form field, use the `errors_on` helper.
+If you want to display a custom inline error for a specific attribute not represented by a form field, use the `errors_on` helper.
 
 ```erb
 <%= f.errors_on :tasks %>
@@ -798,7 +805,7 @@ represented by a form field, use the `errors_on` helper.
 Which outputs:
 
 ```html
-<div class="alert alert-danger">Tasks can't be blank.</div>
+<div class="invalid-feedback">Tasks can't be blank.</div>
 ```
 
 You can hide the attribute name like this:
@@ -810,7 +817,19 @@ You can hide the attribute name like this:
 Which outputs:
 
 ```html
-<div class="alert alert-danger">can't be blank.</div>
+<div class="invalid-feedback">can't be blank.</div>
+```
+
+You can also use a custom class for the wrapping div, like this:
+
+```erb
+<%= f.errors_on :tasks, custom_class: 'custom-error' %>
+```
+
+Which outputs:
+
+```html
+<div class="custom-error">can't be blank.</div>
 ```
 
 ## Required Fields
@@ -874,6 +893,10 @@ If you're considering contributing to bootstrap_form,
 please review the [Contributing](/CONTRIBUTING.md)
 document first.
 
+## Previous Version
+
+If you're looking for `bootstrap_form` for Bootstrap 4, go [here](https://github.com/bootstrap-ruby/bootstrap_form/tree/bootstrap-4).
+
 ## License
 
-MIT License. Copyright 2012-2020 Stephen Potenza (https://github.com/potenza) and others
+MIT License. Copyright 2012-2021 Stephen Potenza (https://github.com/potenza) and others
@@ -0,0 +1,25 @@
+# Upgrading to `bootstrap_form` 5.0
+
+We made every effort to make the upgrade from `bootstrap_form` v4 (Bootstrap 4) to `bootstrap_form` 5.0 (Bootstrap 5) as easy as possible. However, Bootstrap 5 is fundamentally different from Bootstrap 4, so some changes may be necessary in your code.
+
+## Bootstrap 5 Changes
+
+Upgrading `bootstrap_form` to version 5 means you must upgrade your whole application to Bootstrap 5. Read the [Bootstrap 5 migration guide](https://v5.getbootstrap.com/docs/5.0/migration/) to see what changes you have to make to your views. This will also help you understand changes you might have to make to your `bootstrap_form` code.
+
+## `bootstrap_form` Version 5 Changes
+
+## No `role="form"` Attribute
+
+As explained in #560, the `role="form"` attribute generated by `bootstrap_4` caused the W3C validator to output a warning. The `role="form"` attribute was deprecated in the 4.5.0 and is being remove completely in 5.0.0. This has no impact on `bootstrap_form` code itself, but may affect your application if it depended on a form having this attribute set. (Issue #569)
+
+## Different behavior for `errors_on` helper
+
+The `errors_on` helper now wraps the error message in a CSS class `invalid-feedback`, instead of `alert` and `alert-danger`, as before.
+
+This will display the error as any other [Bootstrap inline form error](https://getbootstrap.com/docs/5.0/forms/validation/#server-side), instead of displaying it as an [Bootstrap alert](https://getbootstrap.com/docs/5.0/components/alerts/).
+
+You can use the `custom_class` options for this helper with `alert alert-danger` to restore the old behaviour:
+
+```erb
+<%= f.errors_on :tasks, custom_class: 'alert alert-danger' %>
+```
@@ -12,13 +12,11 @@ Gem::Specification.new do |s|
   s.email       = ["[email protected]", "[email protected]"]
   s.homepage    = "https://github.com/bootstrap-ruby/bootstrap_form"
   s.summary     = "Rails form builder that makes it easy to style forms using "\
-                  "Bootstrap 4"
+                  "Bootstrap 5"
   s.description = "bootstrap_form is a rails form builder that makes it super "\
-                  "easy to create beautiful-looking forms using Bootstrap 4"
+                  "easy to create beautiful-looking forms using Bootstrap 5"
   s.license     = "MIT"
 
-  s.post_install_message = "Default form attribute role=\"form\" will be dropped in 5.0.0"
-
   s.files = `git ls-files -z`.split("\x0").reject do |f|
     f.match(%r{^(test)/})
   end
 
@@ -36,12 +36,3 @@
     }
   }
 }
-label.required {
-  &:after {
-    color: red;
-    content: '*';
-  }
-}
-input[required="required"]{
-  border: 1px solid red;
-}
@@ -1,18 +1,3 @@
-<h3>Required fields test</h3>
-
-<%= form_with_source do %>
-  <%= bootstrap_form_with model: @user, layout: :horizontal, local: true do |form| %>
-    <%= form.text_field :email, placeholder: "Enter Email", label: "Email address", help: "Email pressence true" %>
-    <%= form.text_field :email, placeholder: "Enter Email", label: "Email address", help: "Email pressence true with required false", required: false %>
-    <%= form.text_field :email, placeholder: "Enter Email", label: "Email address", help: "Email pressence true with skip required false", skip_required: false %>
-    <%= form.text_field :email, placeholder: "Enter Email", label: "Email address", help: "Email pressence true with skip required true", skip_required: true %>
-    <%= form.text_field :misc, placeholder: "Enter Misc", label: "Misc", help: "Misc not required by model" %>
-    <%= form.text_field :misc, placeholder: "Enter Misc", label: "Misc", help: "Misc not required by model with required true", required: true %>
-    <%= form.text_field :misc, placeholder: "Enter Misc", label: "Misc", help: "Misc not required by model with required false", required: false %>
-    <%= form.submit %>
-  <% end %>
-<% end %>
-
 <h3>Horizontal Form</h3>
 
 <%= form_with_source do %>
@@ -67,3 +52,16 @@
     <%= form.submit %>
   <% end %>
 <% end %>
+
+<h3>Floating Labels</h3>
+
+<%= form_with_source do %>
+  <%= bootstrap_form_for @user do |form| %>
+    <%= form.email_field :email, placeholder: "Enter Email", label: "Email address", help: "We'll never share your email with anyone else", floating: true %>
+    <%= form.password_field :password, placeholder: "Password", floating: true %>
+    <%= form.text_field :misc, floating: true %>
+    <%= form.text_area :comments, floating: true %>
+    <%= form.select :status, [["Active", 1], ["Inactive", 2]], include_blank: "Select a value", floating: true %>
+    <%= form.submit %>
+  <% end %>
+<% end %>
@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
     <!-- Bootstrap CSS -->
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
 
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.33.0/codemirror.min.css">
 
@@ -44,8 +44,8 @@
     <!-- Optional JavaScript -->
     <!-- jQuery first, then Popper.js, then Bootstrap JS -->
     <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
-    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-SR1sx49pcuLnqZUnnPwx6FCym0wLsk5JZuNx2bPPENzswTNFaQU1RDvt3wT4gWFG" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.min.js" integrity="sha384-j0CNLUeiqtyaRmlzUHCPZ+Gy5fQu0dQ6eZ/xAww941Ai1SxSY+0EQqNXNE6DZiVc" crossorigin="anonymous"></script>
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.33.0/codemirror.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.33.0/mode/htmlmixed/htmlmixed.min.js"></script>
Original file line number	Diff line number	Diff line change
`@@ -36,12 +36,3 @@`
`36`	`36`	`}`
`37`	`37`	`}`
`38`	`38`	`}`
`39`		`-label.required {`
`40`		`- &:after {`
`41`		`- color: red;`
`42`		`- content: '*';`
`43`		`- }`
`44`		`-}`
`45`		`-input[required="required"]{`
`46`		`- border: 1px solid red;`
`47`		`-}`