Skip to content

Commit

Permalink
Change main branch to Bootstrap 5 (#611)
Browse files Browse the repository at this point in the history
* Start README for Bootstrap 5

* Preliminary support for Bootstrap 5 (#567)

* Switch demo bootstrap JS include URL

* Remove "custom-control" support from radios and check boxes

In 5.0 they are consolidated into the .form-check class, and no longer
need to be treated as separate cases. Relevant tests will be fixed or
removed in the next commit.

* Remove "custom-control" tests for radios and check boxes

* Rename ".custom-file" to ".form-file"

* Change all ".form-group" uses to ".mb-3"

Bootstrap 5 is now recommending using bottom margin utilities to
control group spacing, and has removed ".form-group" entirely.

* Replace ".form-row" with gutter utils (".g-3")

Some methods in FormGroup were refactored to meet a RuboCop lint
complexity requirement. I don't personally think the refactor is
necessary but it won't pass CI without it.

* Replace ".form-inline" where necessary

Bootstrap 5 removes ".form-inline" in favor of the usage of ".col-auto"
and the new gutter utilities.

* Remove wrapper divs for elements prepended/appended to input groups

Bootstrap 5 removes ".input-group-prepend" and ".input-group-append",
they are no longer necessary. You can now add buttons and
".input-group-text" as direct children of the input groups.

* Add ".form-label" to all generated label tags

* Fix broken tests after label class change

* Fix switch style check boxes

My heavy-handedness with the previous commits removed the ability to use
switch style checkboxes when I removed the custom check box classes.

* Update switch checkbox syntax in README.md

* Add anchors for stricter #classes_include_gutters?

* Handle string or array of classes for check boxes and radio buttons

The Rails view helpers that accept a `class` option accept both single
strings and arrays of strings, so this change makes the CSS class array
builder agnostic to the input type.

I'm now also noticing that the result already had `#flatten` called on
it, so this probably wasn't an issue, but this is nicer!

* Use only form-check-label class for check box and radio button labels

Thanks to @thimo for catching this one.

* Change select box class from "form-control" to "form-select"

This required some extra effort because all the select forms inherited
their control class from the base input class.

* Add upgrade doc and update gemspec

* Remove role="form" (#571)

* Fix tests in bootstrap-5 branch. Fixes #582 (#583)

* Fix tests for Rails updates

* Fix Rubocop offenses

Dangerfile:48:3: C: [Correctable] Style/SoleNestedConditional: Consider merging nested conditions into outer if conditions.
  if IO.read("CHANGELOG.md").scan(/^\s*[-\*] Your contribution here/i).count < 3
  ^^
Dangerfile:48:42: C: [Correctable] Style/RedundantRegexpEscape: Redundant escape inside regexp literal
  if IO.read("CHANGELOG.md").scan(/^\s*[-\*] Your contribution here/i).count < 3
                                         ^^
bootstrap_form.gemspec:27:3: W: Lint/ConstantDefinitionInBlock: Do not define constants this way within a block. (https://rubystyle.guide#no-constant-definition-in-block)
  REQUIRED_RAILS_VERSION = ">= 5.2".freeze
  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
demo/config/puma.rb:7:21: C: [Correctable] Style/RedundantFetchBlock: Use fetch("RAILS_MAX_THREADS", 5) instead of fetch("RAILS_MAX_THREADS") { 5 }. (/~https://github.com/JuanitoFatas/fast-ruby#hashfetch-with-argument-vs-hashfetch--block-code)
threads_count = ENV.fetch("RAILS_MAX_THREADS") { 5 }
                    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
demo/config/puma.rb:12:17: C: [Correctable] Style/RedundantFetchBlock: Use fetch("PORT", 3000) instead of fetch("PORT") { 3000 }. (/~https://github.com/JuanitoFatas/fast-ruby#hashfetch-with-argument-vs-hashfetch--block-code)
port        ENV.fetch("PORT") { 3000 }
                ^^^^^^^^^^^^^^^^^^^^^^
lib/bootstrap_form.rb:5:11: C: [Correctable] Style/StringConcatenation: Prefer string interpolation to string concatenation. (https://rubystyle.guide#string-interpolation)
  require Gem::Specification.find_by_name("actiontext").gem_dir + ...
          ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
lib/bootstrap_form/components/validation.rb:17:22: C: [Correctable] Style/ClassEqualityComparison: Use instance_of?(Class) instead of comparing classes. (https://rubystyle.guide#instance-of-vs-class-comparison)
        target = obj.class == Class ? obj : obj.class
                     ^^^^^^^^^^^^^^
lib/bootstrap_form/form_builder.rb:48:5: W: [Correctable] Lint/RedundantCopDisableDirective: Unnecessary disabling of Metrics/AbcSize.
    # rubocop:disable Metrics/AbcSize
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
lib/bootstrap_form/form_group_builder.rb:24:9: C: [Correctable] Style/ExplicitBlockArgument: Consider using explicit block argument in the surrounding method's signature over yield. (https://rubystyle.guide#block-argument)
        form_group(method, form_group_options) { yield }
        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
lib/bootstrap_form/form_group_builder.rb:32:59: C: [Correctable] Style/SoleNestedConditional: Consider merging nested conditions into outer unless conditions.
        options[:required] = form_group_required(options) if options.key?(:skip_required)
                                                          ^^
lib/bootstrap_form/form_group_builder.rb:60:7: C: [Correctable] Style/RedundantAssignment: Redundant assignment before returning detected.
      hash = { ...
      ^^^^^^^^
lib/bootstrap_form/helpers/bootstrap.rb:25:44: W: [Correctable] Lint/RedundantCopDisableDirective: Unnecessary disabling of Metrics/AbcSize.
      def alert_message(title, options={}) # rubocop:disable Metrics/AbcSize
                                           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
test/test_helper.rb:7:18: C: [Correctable] Style/RedundantFileExtensionInRequire: Redundant .rb file extension detected. (https://rubystyle.guide#no-explicit-rb-to-require)
require_relative "../demo/config/environment.rb"

* Update CHANGELOG

* Add gemfile for Rails 6.1

* Run Travis against latest Ruby versions

* Update tests to both handle Rails 5.2/6 and Rails 6.1

* Step down 1 minor version for Ruby as Travis is not yet ready

* Update changelog

* Support Bootstrap 5 floating labels. Fixes #573 (#584)

* Support floating labels

* Add tests for floating labels

* Update demo app with floating labels section

* Add floating labels to CHANGELOG

* Describe floating labels in README

* Fix rubop offense for block length

lib/bootstrap_form/inputs/base.rb:8:7: C: Metrics/BlockLength: Block has too many lines. [26/25]
      class_methods do ...
      ^^^^^^^^^^^^^^^^

* Fix capitalization

* Use <<~ instead of strip_heredoc

* Simplify rendering of file_field for Bootstrap 5. Fixes #572 (#581)

* Use Bootstrap 5 beta 3 CDN libraries in demo app

Links to both CSS and JS libraries taken from https://getbootstrap.com/docs/5.0/getting-started/introduction/

* Remove linking ../images

Folder doesn’t exist and causes the error "ActionView::Template::Error (link_tree argument must be a directory)"

* Cleanup generated HTML for file upload  as per Bootstrap 5

See #572

* Update tests for new file upload rendering

* Add changelog entry

* Fix Rubocop offense on whitespace

lib/bootstrap_form/inputs/file_field.rb:10:52: C: [Correctable] Layout/SpaceAroundEqualsInParameterDefault: Surrounding space detected in default value assignment. (https://rubystyle.guide#spaces-around-equals)
        def file_field_with_bootstrap(name, options = {})
                                                   ^^^

Co-authored-by: Larry Reid <lcreid@jadesystems.ca>

* Get rid of `heredoc` on `bootstrap-5` branch (#591)

* Ignore RubyMine config directory

* Initial setup of GitHb Actions

* Run tests for rails 5 and rails 6

* Run tests for rails 5 and rails 6 + run lint job

* GH Actions: Correct gemfile names

* GH Actions: Only run the test task in the matrix.  rubocop is run in the separate Lint job.

* GH Actions: Separate the Danger run for better output

* GH Actions: Run rubocop directly instead of as a Rake task.  Allow autocorrectable offences.

* GH Actions: Only run Danger for pull requests

* GH Actions: Try to calm RuboCop

* Use the default Gemfile to pick up rubocop.yml

* GH Actions: Ignore the vendor directory for rubocop

* Forward the options as keyword arguments

* Test Rails 6.1 and skip Rails 5.2 + Ruby 3.0

* Fix Rails 6.1 tests on master (#586)

* Fix tests for Rails 6.1

* Fix Rubocop offenses

bootstrap_form.gemspec:27:29: C: Gemspec/RequiredRubyVersion: required_ruby_version (2.5, declared in bootstrap_form.gemspec) and TargetRubyVersion (2.7, which may be specified in .rubocop.yml) should be equal.
  s.required_ruby_version = ">= 2.5"
                            ^^^^^^^^
lib/bootstrap_form/form_group.rb:14:30: C: [Correctable] Layout/ArgumentAlignment: Align the arguments of a method call if they span more than one line. (https://rubystyle.guide#no-double-indent)
                             :input_group_class, :label_col, :control_col,
                             ^^^^^^^^^^^^^^^^^^
lib/bootstrap_form/form_group.rb:15:30: C: [Correctable] Layout/ArgumentAlignment: Align the arguments of a method call if they span more than one line. (https://rubystyle.guide#no-double-indent)
                             :add_control_col_class, :layout, :prepend)) do
                             ^^^^^^^^^^^^^^^^^^^^^^
test/bootstrap_form_test.rb:123:103: C: [Correctable] Style/IfUnlessModifier: Modifier form of if makes the line too long. (https://rubystyle.guide#if-as-a-modifier)
        <form accept-charset="UTF-8" action="/users" method="post" role="form" #{'data-remote="true"' if ::Rails::VERSION::STRING < "6.1"}>
                                                                                                      ^^
test/bootstrap_form_test.rb:123:133: C: [Correctable] Style/StringLiteralsInInterpolation: Prefer single-quoted strings inside interpolations.
        <form accept-charset="UTF-8" action="/users" method="post" role="form" #{'data-remote="true"' if ::Rails::VERSION::STRING < "6.1"}>
                                                                                                                                    ^^^^^
test/bootstrap_rich_text_area_test.rb:23:54: C: [Correctable] Style/StringLiteralsInInterpolation: Prefer single-quoted strings inside interpolations.
      "http://test.host/rails/active_storage/blobs/#{"redirect/" if ::Rails::VERSION::STRING >= "6.1"}:signed_id/:filename"
                                                     ^^^^^^^^^^^
test/bootstrap_rich_text_area_test.rb:23:97: C: [Correctable] Style/StringLiteralsInInterpolation: Prefer single-quoted strings inside interpolations.
      "http://test.host/rails/active_storage/blobs/#{"redirect/" if ::Rails::VERSION::STRING >= "6.1"}:signed_id/:filename"
                                                                                                ^^^^^

* Include Rails 6.1 in Travis tests + update Ruby versions

* Update CHANGELOG

* Rails Edge requires Ruby 2.7+

* Remove rubocop_todo and fix Rubocop offenses

* Replace strip_heredoc with <<~ (#587)

* Replace strip_heredoc with <<~

Also fix newly detected Rubocop offenses on indentation

* Update CHANGELOG

* Simplify Dockerfile and add documentation (#588)

* Simplify Dockerfile and add documentation

* A few more additions to .gitignore

* Ignore gems placed when using Dockerfile (#590)

* Fix formatting and heredoc

* Fix bad merge

Co-authored-by: Uwe Kubosch <uwe@kubosch.no>
Co-authored-by: Uwe Kubosch <donv@users.noreply.github.com>
Co-authored-by: Thimo Jansen <thimo@defrog.nl>

* Cherry pick some commits from `main` (#594)

* Change default branch to `main` (#592)

* Change default branch to `main`

* Add GitHub token for Danger

* Change default branch to `main` (#592)

* Change default branch to `main`

* Add GitHub token for Danger

* Fix deprecation that I broke again

* Errors on invalid feedback (#580)

* Use "invalid-feedback" class name for errors_on

* Add custom class option for errors_on helper

* Improve tests, docs and changelog

Co-authored-by: Larry Reid <lcreid@jadesystems.ca>

* README: Use GH Actions badge, drop Travis badge, configuration file (#600)

* README: Use GH Actions badge, drop Travis badge

* Delete unused TravisCI configuration file

* Update README for release of 5.0

Co-authored-by: Taylor Thurlow <taylorthurlow@me.com>
Co-authored-by: Thimo Jansen <thimo@defrog.nl>
Co-authored-by: Uwe Kubosch <uwe@kubosch.no>
Co-authored-by: Uwe Kubosch <donv@users.noreply.github.com>
Co-authored-by: Chrıs Seelus <cseelus@gmail.com>
Co-authored-by: Olle Jonsson <olle.jonsson@gmail.com>
  • Loading branch information
7 people authored Nov 12, 2021
1 parent 0e763b7 commit 13af7bd
Show file tree
Hide file tree
Showing 34 changed files with 769 additions and 1,012 deletions.
15 changes: 15 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion Dangerfile
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion Gemfile
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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"
Expand Down
99 changes: 61 additions & 38 deletions README.md
Original file line number Diff line number Diff line change
@@ -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.
Expand All @@ -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:
Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -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="steve@example.com" 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>
Expand All @@ -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.
Expand All @@ -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
```

Expand Down Expand Up @@ -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.

Expand All @@ -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>
```
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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="test@email.com"/>
</div>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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.
Expand All @@ -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>
Expand Down Expand Up @@ -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 %>
Expand All @@ -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:
Expand All @@ -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
Expand Down Expand Up @@ -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
25 changes: 25 additions & 0 deletions UPGRADE-5.0.md
Original file line number Diff line number Diff line change
@@ -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' %>
```
6 changes: 2 additions & 4 deletions bootstrap_form.gemspec
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,11 @@ Gem::Specification.new do |s|
s.email = ["potenza@gmail.com", "carlos.el.lopes@gmail.com"]
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
Expand Down
9 changes: 0 additions & 9 deletions demo/app/assets/stylesheets/actiontext.scss
Original file line number Diff line number Diff line change
Expand Up @@ -36,12 +36,3 @@
}
}
}
label.required {
&:after {
color: red;
content: '*';
}
}
input[required="required"]{
border: 1px solid red;
}
28 changes: 13 additions & 15 deletions demo/app/views/bootstrap/form.html.erb
Original file line number Diff line number Diff line change
@@ -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 %>
Expand Down Expand Up @@ -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 changes: 3 additions & 3 deletions demo/app/views/layouts/application.html.erb
Original file line number Diff line number Diff line change
Expand Up @@ -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">

Expand Down Expand Up @@ -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/core@2.9.1/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>
Expand Down
Loading

0 comments on commit 13af7bd

Please sign in to comment.