bootstrap_form 4.2.0 → 5.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/.editorconfig +13 -0
- data/.github/workflows/ruby.yml +46 -0
- data/.gitignore +16 -1
- data/.rubocop.yml +20 -17
- data/CHANGELOG.md +59 -1
- data/CONTRIBUTING.md +72 -6
- data/Dangerfile +5 -7
- data/Dockerfile +26 -0
- data/Gemfile +10 -13
- data/OLD-README.md +12 -1
- data/README.md +140 -60
- data/RELEASING.md +2 -2
- data/UPGRADE-4.0.md +1 -1
- data/UPGRADE-5.0.md +25 -0
- data/bootstrap_form.gemspec +9 -5
- data/demo/app/assets/config/manifest.js +1 -2
- data/demo/app/helpers/bootstrap_helper.rb +5 -5
- data/demo/app/views/bootstrap/form.html.erb +14 -1
- data/demo/app/views/layouts/application.html.erb +3 -3
- data/demo/config/environments/development.rb +1 -1
- data/demo/config/puma.rb +2 -2
- data/demo/db/schema.rb +2 -2
- data/docker-compose.yml +70 -0
- data/gemfiles/5.2.gemfile +4 -0
- data/gemfiles/6.0.gemfile +4 -0
- data/gemfiles/6.1.gemfile +4 -0
- data/gemfiles/edge.gemfile +4 -0
- data/lib/bootstrap_form/action_view_extensions/form_helper.rb +1 -15
- data/lib/bootstrap_form/components/labels.rb +1 -1
- data/lib/bootstrap_form/components/layout.rb +1 -1
- data/lib/bootstrap_form/components/validation.rb +1 -1
- data/lib/bootstrap_form/configuration.rb +22 -0
- data/lib/bootstrap_form/form_builder.rb +17 -2
- data/lib/bootstrap_form/form_group.rb +21 -10
- data/lib/bootstrap_form/form_group_builder.rb +6 -8
- data/lib/bootstrap_form/helpers/bootstrap.rb +16 -18
- data/lib/bootstrap_form/inputs/base.rb +5 -5
- data/lib/bootstrap_form/inputs/check_box.rb +9 -23
- data/lib/bootstrap_form/inputs/collection_select.rb +1 -0
- data/lib/bootstrap_form/inputs/file_field.rb +3 -15
- data/lib/bootstrap_form/inputs/grouped_collection_select.rb +1 -0
- data/lib/bootstrap_form/inputs/radio_button.rb +6 -24
- data/lib/bootstrap_form/inputs/select.rb +1 -0
- data/lib/bootstrap_form/inputs/time_zone_select.rb +1 -0
- data/lib/bootstrap_form/version.rb +1 -1
- data/lib/bootstrap_form.rb +17 -7
- metadata +33 -10
- data/.travis.yml +0 -38
data/README.md
CHANGED
@@ -1,17 +1,11 @@
|
|
1
|
-
⚠️ **This documentation is for the master branch, which is not yet stable and targets Bootstrap v4.** If you are using Bootstrap v3, refer to the stable [legacy-2.7](https://github.com/bootstrap-ruby/bootstrap_form/tree/legacy-2.7) branch.
|
2
|
-
|
3
|
-
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).
|
4
|
-
|
5
|
-
---
|
6
|
-
|
7
1
|
# bootstrap_form
|
8
2
|
|
9
|
-
[](https://github.com/bootstrap-ruby/bootstrap_form/actions/workflows/ruby.yml)
|
10
4
|
[](https://rubygems.org/gems/bootstrap_form)
|
11
5
|
|
12
|
-
`bootstrap_form` is a Rails form builder that makes it super easy to integrate Bootstrap
|
6
|
+
`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:
|
13
7
|
|
14
|
-
* [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.
|
8
|
+
* [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/)
|
15
9
|
* Automatic [mark-up for the `required` attribute](#required-fields) on required fields.
|
16
10
|
* An easy way to consistently show [help](#help-text) text on fields.
|
17
11
|
* Mark-up for [Bootstrap horizontal forms](#horizontal-forms) (labels to the left of their fields, like a traditional desktop application), if that's what you want.
|
@@ -28,30 +22,36 @@ Some other nice things that `bootstrap_form` does for you are:
|
|
28
22
|
`bootstrap_form` works like the standard Rails form helpers, and this README assumes you know how they work. You start a form with one of [`bootstrap_form_with`](#bootstrap-form-with), [`bootstrap_form_for`](#bootstrap-form-for), or [`bootstrap_form_tag`](#bootstrap-form-tag) in a view file. You get a form builder that calls the [`bootstrap_form` helpers](#form-helpers) instead of the standard Rails helpers. You use that form builder in the view file to render one or more form fields.
|
29
23
|
|
30
24
|
## Requirements
|
31
|
-
`bootstrap_form` supports currently supported versions of Rails:
|
32
25
|
|
33
|
-
|
34
|
-
|
35
|
-
*
|
26
|
+
`bootstrap_form` supports at a minimum the currently supported versions of Ruby and Rails:
|
27
|
+
|
28
|
+
* Ruby 2.5+
|
29
|
+
* Rails 5.2+
|
30
|
+
* Bootstrap 5.0+
|
36
31
|
|
37
32
|
## Installation
|
38
33
|
|
39
34
|
Add it to your Gemfile:
|
40
35
|
|
41
36
|
```ruby
|
42
|
-
gem "bootstrap_form", "
|
37
|
+
gem "bootstrap_form", "~> 5.0"
|
43
38
|
```
|
44
39
|
|
45
40
|
Then:
|
46
41
|
|
47
42
|
`bundle install`
|
48
43
|
|
49
|
-
|
44
|
+
Depending on which CSS pre-processor you are using, adding the bootstrap form styles differs slightly.
|
45
|
+
If you use Rails in the default mode without any pre-processor, you'll have to add the following line to your `application.css` file:
|
50
46
|
|
51
47
|
```css
|
52
|
-
|
53
|
-
|
54
|
-
|
48
|
+
*= require rails_bootstrap_forms
|
49
|
+
```
|
50
|
+
|
51
|
+
If you followed the [official bootstrap installation guide](https://github.com/twbs/bootstrap-rubygem#a-ruby-on-rails), you'll probably have switched to SCSS. In this case add the following line to your `application.scss`:
|
52
|
+
|
53
|
+
```scss
|
54
|
+
@import "rails_bootstrap_forms";
|
55
55
|
```
|
56
56
|
|
57
57
|
## Usage
|
@@ -73,12 +73,12 @@ This generates the following HTML:
|
|
73
73
|
|
74
74
|
```html
|
75
75
|
<form accept-charset="UTF-8" action="/users" class="new_user" id="new_user" method="post">
|
76
|
-
<div class="
|
77
|
-
<label for="user_email">Email</label>
|
76
|
+
<div class="mb-3">
|
77
|
+
<label class="form-label" for="user_email">Email</label>
|
78
78
|
<input class="form-control" id="user_email" name="user[email]" type="email">
|
79
79
|
</div>
|
80
|
-
<div class="
|
81
|
-
<label for="user_password">Password</label>
|
80
|
+
<div class="mb-3">
|
81
|
+
<label class="form-label" for="user_password">Password</label>
|
82
82
|
<input class="form-control" id="user_password" name="user[password]" type="password">
|
83
83
|
</div>
|
84
84
|
<div class="form-check">
|
@@ -101,7 +101,7 @@ If your form is not backed by a model, use the `bootstrap_form_tag`. Usage of th
|
|
101
101
|
<% end %>
|
102
102
|
```
|
103
103
|
|
104
|
-
### bootstrap_form_with
|
104
|
+
### bootstrap_form_with
|
105
105
|
|
106
106
|
Note that `form_with` in Rails 5.1 does not add IDs to form elements and labels by default, which are both important to Bootstrap markup. This behaviour is corrected in Rails 5.2.
|
107
107
|
|
@@ -119,14 +119,14 @@ To get started, just use the `bootstrap_form_with` helper in place of `form_with
|
|
119
119
|
This generates:
|
120
120
|
|
121
121
|
```html
|
122
|
-
<form
|
122
|
+
<form action="/users" accept-charset="UTF-8" method="post">
|
123
123
|
<input name="utf8" type="hidden" value="✓" />
|
124
|
-
<div class="
|
125
|
-
<label class="required" for="user_email">Email</label>
|
124
|
+
<div class="mb-3">
|
125
|
+
<label class="form-label required" for="user_email">Email</label>
|
126
126
|
<input class="form-control" type="email" value="steve@example.com" name="user[email]" />
|
127
127
|
</div>
|
128
|
-
<div class="
|
129
|
-
<label for="user_password">Password</label>
|
128
|
+
<div class="mb-3">
|
129
|
+
<label class="form-label" for="user_password">Password</label>
|
130
130
|
<input class="form-control" type="password" name="user[password]" />
|
131
131
|
<small class="form-text text-muted">A good password should be at least six characters long</small>
|
132
132
|
</div>
|
@@ -144,6 +144,25 @@ in `form_with`.
|
|
144
144
|
|
145
145
|
`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).
|
146
146
|
|
147
|
+
## Configuration
|
148
|
+
|
149
|
+
`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.
|
150
|
+
|
151
|
+
The current configuration options are:
|
152
|
+
|
153
|
+
| Option | Default value | Description |
|
154
|
+
|---------------------------|------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
|
155
|
+
| `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. |
|
156
|
+
|
157
|
+
Example:
|
158
|
+
|
159
|
+
```ruby
|
160
|
+
# config/initializers/bootstrap_form.rb
|
161
|
+
BootstrapForm.configure do |c|
|
162
|
+
c.default_form_attributes = { role: "form" } # to make forms non-compliant with W3C.
|
163
|
+
end
|
164
|
+
```
|
165
|
+
|
147
166
|
## Form Helpers
|
148
167
|
|
149
168
|
`bootstrap_form` provides its own version of the following Rails form helpers:
|
@@ -233,7 +252,8 @@ To add help text, use the `help` option:
|
|
233
252
|
```
|
234
253
|
|
235
254
|
This generates:
|
236
|
-
|
255
|
+
|
256
|
+
```html
|
237
257
|
<small class="form-text text-muted">Must be at least 6 characters long</small>
|
238
258
|
```
|
239
259
|
|
@@ -271,6 +291,12 @@ You can pass `prepend` and/or `append` options to input fields:
|
|
271
291
|
<%= f.text_field :price, prepend: "$", append: ".00" %>
|
272
292
|
```
|
273
293
|
|
294
|
+
If you want to attach multiple items to the input, pass them as an array:
|
295
|
+
|
296
|
+
```erb
|
297
|
+
<%= f.text_field :price, prepend: ['Net', '$'], append: ['.00', 'per day'] %>
|
298
|
+
```
|
299
|
+
|
274
300
|
You can also prepend and append buttons. Note: The buttons must contain the
|
275
301
|
`btn` class to generate the correct markup.
|
276
302
|
|
@@ -286,7 +312,7 @@ To add a class to the input group wrapper, use the `:input_group_class` option.
|
|
286
312
|
|
287
313
|
### Additional Form Group Attributes
|
288
314
|
|
289
|
-
Bootstrap mark-up dictates that most input field types have the label and input wrapped in a `div.
|
315
|
+
Bootstrap mark-up dictates that most input field types have the label and input wrapped in a `div.mb-3`.
|
290
316
|
|
291
317
|
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.
|
292
318
|
|
@@ -297,8 +323,8 @@ If you want to add an additional CSS class or any other attribute to the form gr
|
|
297
323
|
Which produces the following output:
|
298
324
|
|
299
325
|
```erb
|
300
|
-
<div class="
|
301
|
-
<label class="form-control-label" for="user_name">Id</label>
|
326
|
+
<div class="mb-3 has-warning" data-foo="bar">
|
327
|
+
<label class="form-label form-control-label" for="user_name">Id</label>
|
302
328
|
<input class="form-control" id="user_name" name="user[name]" type="text">
|
303
329
|
</div>
|
304
330
|
```
|
@@ -307,9 +333,9 @@ If you only want to set the class on the form group div, you can use the `wrappe
|
|
307
333
|
|
308
334
|
### Suppressing the Form Group Altogether
|
309
335
|
|
310
|
-
You may
|
336
|
+
You may want to define your own form group div around a field. To do so, add the option `wrapper: false` to the input field. For example:
|
311
337
|
|
312
|
-
```
|
338
|
+
```ruby
|
313
339
|
f.form_group :user do
|
314
340
|
f.email_field :email, wrapper: false
|
315
341
|
end
|
@@ -368,12 +394,13 @@ Check boxes and radio buttons are wrapped in a `div.form-check`. You can add cla
|
|
368
394
|
```erb
|
369
395
|
<%= f.radio_button :skill_level, 0, label: "Novice", inline: true, wrapper_class: "w-auto" %>
|
370
396
|
```
|
397
|
+
|
371
398
|
### Switches
|
372
399
|
|
373
|
-
To render checkboxes as switches with Bootstrap 4.2+, use `
|
400
|
+
To render checkboxes as switches with Bootstrap 4.2+, use `switch: true`:
|
374
401
|
|
375
402
|
```erb
|
376
|
-
<%= f.check_box :remember_me,
|
403
|
+
<%= f.check_box :remember_me, switch: true %>
|
377
404
|
```
|
378
405
|
|
379
406
|
### Collections
|
@@ -386,9 +413,10 @@ To render checkboxes as switches with Bootstrap 4.2+, use `custom: :switch`:
|
|
386
413
|
<%= f.collection_check_boxes :skills, Skill.all, :id, :name %>
|
387
414
|
```
|
388
415
|
|
389
|
-
NOTE: These helpers do not currently support a block, unlike their equivalent Rails helpers. See issue #477.
|
416
|
+
NOTE: These helpers do not currently support a block, unlike their equivalent Rails helpers. See issue [#477](https://github.com/bootstrap-ruby/bootstrap_form/issues/477). If you need to use the block syntax, use `collection_check_boxes_without_bootstrap` or `collection_radio_buttons_without_bootstrap` for now.
|
390
417
|
|
391
418
|
Collection methods accept these options:
|
419
|
+
|
392
420
|
* `:label`: Customize the `form_group`'s label
|
393
421
|
* `:hide_label`: Pass true to hide the `form_group`'s label
|
394
422
|
* `:help`: Add a help span to the `form_group`
|
@@ -405,8 +433,8 @@ You can create a static control like this:
|
|
405
433
|
Here's the output for a horizontal layout:
|
406
434
|
|
407
435
|
```html
|
408
|
-
<div class="
|
409
|
-
<label class="col-sm-2 form-control-label" for="user_email">Email</label>
|
436
|
+
<div class="mb-3">
|
437
|
+
<label class="form-label col-sm-2 form-control-label" for="user_email">Email</label>
|
410
438
|
<div class="col-sm-10">
|
411
439
|
<input class="form-control-plaintext" id="user_email" name="user[email]" readonly="readonly" type="text" value="test@email.com"/>
|
412
440
|
</div>
|
@@ -416,8 +444,19 @@ Here's the output for a horizontal layout:
|
|
416
444
|
You can also create a static control that isn't based on a model attribute:
|
417
445
|
|
418
446
|
```erb
|
419
|
-
<%= f.static_control label: "Custom Static Control" value: "Content Here" %>
|
447
|
+
<%= f.static_control :field_name, label: "Custom Static Control", value: "Content Here" %>
|
448
|
+
```
|
449
|
+
|
450
|
+
`field_name` may be any name that isn't already used in the form. Note that you may get "unpermitted parameter" messages in your log file with this approach.
|
451
|
+
|
452
|
+
You can also create the static control the following way, if you don't need to get the value of the static control as a parameter when the form is submitted:
|
453
|
+
|
454
|
+
```erb
|
455
|
+
<%= f.static_control label: "Custom Static Control", value: "Content Here", name: nil %>
|
420
456
|
```
|
457
|
+
|
458
|
+
(If you neither provide a field name nor `name: nil`, the Rails code that submits the form will give a JavaScript error.)
|
459
|
+
|
421
460
|
Prior to version 4 of `bootstrap_form`, you could pass a block to the `static_control` method.
|
422
461
|
The value of the block would be used for the content of the static "control".
|
423
462
|
Bootstrap 4 actually creates and styles a disabled input field for static controls, so the value of the control has to be specified by the `value:` option.
|
@@ -497,15 +536,18 @@ will be rendered as
|
|
497
536
|
(some unimportant HTML attributes have been removed for simplicity)
|
498
537
|
|
499
538
|
## Rich Text Areas AKA Trix Editor
|
539
|
+
|
500
540
|
If you're using Rails 6, `bootstrap_form` supports the `rich_text_area` helper.
|
501
541
|
|
502
|
-
```
|
542
|
+
```erb
|
503
543
|
<%= f.rich_text_area(:life_story) %>
|
504
544
|
```
|
545
|
+
|
505
546
|
will be rendered as:
|
506
|
-
|
507
|
-
|
508
|
-
|
547
|
+
|
548
|
+
```html
|
549
|
+
<div class="mb-3">
|
550
|
+
<label class="form-label" for="user_life_story">Life story</label>
|
509
551
|
<input type="hidden" name="user[life_story]" id="user_life_story_trix_input_user"/>
|
510
552
|
<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"/>
|
511
553
|
</trix-editor>
|
@@ -513,9 +555,11 @@ will be rendered as:
|
|
513
555
|
```
|
514
556
|
|
515
557
|
## File Fields
|
558
|
+
|
516
559
|
The `file_field` helper generates mark-up for a Bootstrap 4 custom file field entry. It takes the [options for `text_field`](#form-helper-options), minus `append` and `prepend`.
|
517
560
|
|
518
561
|
## Hidden Fields
|
562
|
+
|
519
563
|
The `hidden_field` helper in `bootstrap_form` calls the Rails helper directly, and does no additional mark-up.
|
520
564
|
|
521
565
|
## Accessing Rails Form Helpers
|
@@ -589,7 +633,7 @@ The `label_col` and `control_col` css classes can also be changed per control:
|
|
589
633
|
|
590
634
|
or default value can be changed in initializer:
|
591
635
|
|
592
|
-
```
|
636
|
+
```ruby
|
593
637
|
# config/initializers/bootstrap_form.rb
|
594
638
|
module BootstrapForm
|
595
639
|
class FormBuilder
|
@@ -599,6 +643,10 @@ module BootstrapForm
|
|
599
643
|
def default_control_col
|
600
644
|
'col-sm-8'
|
601
645
|
end
|
646
|
+
def default_layout
|
647
|
+
# :default, :horizontal or :inline
|
648
|
+
:horizontal
|
649
|
+
end
|
602
650
|
end
|
603
651
|
end
|
604
652
|
```
|
@@ -645,7 +693,23 @@ The `custom` option can be used to replace the browser default styles for check
|
|
645
693
|
<% end %>
|
646
694
|
```
|
647
695
|
|
696
|
+
### Floating Labels
|
697
|
+
|
698
|
+
The `floating` option can be used to enable Bootstrap 5's floating labels. This option is supported on text fields
|
699
|
+
and dropdowns. Here's an example:
|
700
|
+
|
701
|
+
```erb
|
702
|
+
<%= bootstrap_form_for(@user) do |f| %>
|
703
|
+
<%= f.email_field :email, floating: true %>
|
704
|
+
<%= f.password_field :password, floating: true %>
|
705
|
+
<%= f.password_field :password, floating: true %>
|
706
|
+
<%= f.select :status, [["Active", 1], ["Inactive", 2]], include_blank: "Select a value", floating: true %>
|
707
|
+
<%= f.submit "Log In" %>
|
708
|
+
<% end %>
|
709
|
+
```
|
710
|
+
|
648
711
|
## Validation and Errors
|
712
|
+
|
649
713
|
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.
|
650
714
|
|
651
715
|
### Inline Errors
|
@@ -654,8 +718,8 @@ By default, fields that have validation errors will be outlined in red and the
|
|
654
718
|
error will be displayed below the field. Here's an example:
|
655
719
|
|
656
720
|
```html
|
657
|
-
<div class="
|
658
|
-
<label class="form-control-label" for="user_email">Email</label>
|
721
|
+
<div class="mb-3">
|
722
|
+
<label class="form-label form-control-label" for="user_email">Email</label>
|
659
723
|
<input class="form-control is-invalid" id="user_email" name="user[email]" type="email" value="">
|
660
724
|
<small class="invalid-feedback">can't be blank</small>
|
661
725
|
</div>
|
@@ -674,7 +738,7 @@ You can turn off inline errors for the entire form like this:
|
|
674
738
|
You can also display validation errors in the field's label; just turn
|
675
739
|
on the `:label_errors` option. Here's an example:
|
676
740
|
|
677
|
-
```
|
741
|
+
```erb
|
678
742
|
<%= bootstrap_form_for(@user, label_errors: true) do |f| %>
|
679
743
|
...
|
680
744
|
<% end %>
|
@@ -683,7 +747,7 @@ on the `:label_errors` option. Here's an example:
|
|
683
747
|
By default, turning on `:label_errors` will also turn off
|
684
748
|
`:inline_errors`. If you want both turned on, you can do that too:
|
685
749
|
|
686
|
-
```
|
750
|
+
```erb
|
687
751
|
<%= bootstrap_form_for(@user, label_errors: true, inline_errors: true) do |f| %>
|
688
752
|
...
|
689
753
|
<% end %>
|
@@ -732,8 +796,7 @@ Which outputs:
|
|
732
796
|
|
733
797
|
### Errors On
|
734
798
|
|
735
|
-
If you want to display a custom inline error for a specific attribute not
|
736
|
-
represented by a form field, use the `errors_on` helper.
|
799
|
+
If you want to display a custom inline error for a specific attribute not represented by a form field, use the `errors_on` helper.
|
737
800
|
|
738
801
|
```erb
|
739
802
|
<%= f.errors_on :tasks %>
|
@@ -742,7 +805,7 @@ represented by a form field, use the `errors_on` helper.
|
|
742
805
|
Which outputs:
|
743
806
|
|
744
807
|
```html
|
745
|
-
<div class="
|
808
|
+
<div class="invalid-feedback">Tasks can't be blank.</div>
|
746
809
|
```
|
747
810
|
|
748
811
|
You can hide the attribute name like this:
|
@@ -754,7 +817,19 @@ You can hide the attribute name like this:
|
|
754
817
|
Which outputs:
|
755
818
|
|
756
819
|
```html
|
757
|
-
<div class="
|
820
|
+
<div class="invalid-feedback">can't be blank.</div>
|
821
|
+
```
|
822
|
+
|
823
|
+
You can also use a custom class for the wrapping div, like this:
|
824
|
+
|
825
|
+
```erb
|
826
|
+
<%= f.errors_on :tasks, custom_class: 'custom-error' %>
|
827
|
+
```
|
828
|
+
|
829
|
+
Which outputs:
|
830
|
+
|
831
|
+
```html
|
832
|
+
<div class="custom-error">can't be blank.</div>
|
758
833
|
```
|
759
834
|
|
760
835
|
## Required Fields
|
@@ -792,24 +867,25 @@ here: http://guides.rubyonrails.org/i18n.html#translations-for-active-record-mod
|
|
792
867
|
The Rails team has [suggested](https://github.com/rails/rails/issues/25197) that `form_for` and `form_tag` may be deprecated and then removed in future versions of Rails. `bootstrap_form` will continue to support `bootstrap_form_for` and `bootstrap_form_tag` as long as Rails supports `form_for` and `form_tag`.
|
793
868
|
|
794
869
|
## Other Tips and Edge Cases
|
870
|
+
|
795
871
|
By their very nature, forms are extremely diverse. It would be extremely difficult to provide a gem that could handle every need. Here are some tips for handling edge cases.
|
796
872
|
|
797
873
|
### Empty But Visible Labels
|
874
|
+
|
798
875
|
Some third party plug-ins require an empty but visible label on an input control. The `hide_label` option generates a label that won't appear on the screen, but it's considered invisible and therefore doesn't work with such a plug-in. An empty label (e.g. `""`) causes the underlying Rails helper to generate a label based on the field's attribute's name.
|
799
876
|
|
800
877
|
The solution is to use a zero-width character for the label, or some other "empty" HTML. For example:
|
801
|
-
|
878
|
+
|
879
|
+
```ruby
|
802
880
|
label: "​".html_safe
|
803
881
|
```
|
882
|
+
|
804
883
|
or
|
805
|
-
|
884
|
+
|
885
|
+
```ruby
|
806
886
|
label: "<span></span>".html_safe
|
807
887
|
```
|
808
888
|
|
809
|
-
## Code Triage page
|
810
|
-
|
811
|
-
http://www.codetriage.com/potenza/bootstrap_form
|
812
|
-
|
813
889
|
## Contributing
|
814
890
|
|
815
891
|
We welcome contributions.
|
@@ -817,6 +893,10 @@ If you're considering contributing to bootstrap_form,
|
|
817
893
|
please review the [Contributing](/CONTRIBUTING.md)
|
818
894
|
document first.
|
819
895
|
|
896
|
+
## Previous Version
|
897
|
+
|
898
|
+
If you're looking for `bootstrap_form` for Bootstrap 4, go [here](https://github.com/bootstrap-ruby/bootstrap_form/tree/bootstrap-4).
|
899
|
+
|
820
900
|
## License
|
821
901
|
|
822
|
-
MIT License. Copyright 2012-
|
902
|
+
MIT License. Copyright 2012-2021 Stephen Potenza (https://github.com/potenza) and others
|
data/RELEASING.md
CHANGED
@@ -6,13 +6,13 @@ Follow these steps to release a new version of bootstrap_form to rubygems.org.
|
|
6
6
|
|
7
7
|
* You must have commit rights to the bootstrap_form repository.
|
8
8
|
* You must have push rights for the bootstrap_form gem on rubygems.org.
|
9
|
-
* You must be using Ruby >= 2.
|
9
|
+
* You must be using Ruby >= 2.5.
|
10
10
|
* Your GitHub credentials must be available to Chandler via `~/.netrc` or an environment variable, [as explained here](https://github.com/mattbrictson/chandler#2-configure-credentials).
|
11
11
|
|
12
12
|
## How to release
|
13
13
|
|
14
14
|
1. Run `bundle install` to make sure that you have all the gems necessary for testing and releasing.
|
15
|
-
2.
|
15
|
+
2. **Ensure the tests are passing by running `bundle exec rake`.**
|
16
16
|
3. Determine which would be the correct next version number according to [semver](http://semver.org/).
|
17
17
|
4. Update the version in `./lib/bootstrap_form/version.rb`.
|
18
18
|
5. Update the `CHANGELOG.md` (for an illustration of these steps, refer to the [4.0.0.alpha1 commit](https://github.com/bootstrap-ruby/bootstrap_form/commit/8aac3667931a16537ab68038ec4cebce186bd596#diff-4ac32a78649ca5bdd8e0ba38b7006a1e) as an example):
|
data/UPGRADE-4.0.md
CHANGED
@@ -33,7 +33,7 @@ One way to make the above behave the same in `bootstrap_form` v4.0 is to write i
|
|
33
33
|
<%= bootstrap_form_for(@user) do |f| %>
|
34
34
|
<%= f.form_group(:email) do %>
|
35
35
|
<p class="form-control-plaintext">Bar</p>
|
36
|
-
<%=
|
36
|
+
<%= tag.div(@user.errors[:email].join(", "), class: "invalid-feedback", style: "display: block;") unless @user.errors[:email].empty? %>
|
37
37
|
<%= end %>
|
38
38
|
<%= end %>
|
39
39
|
```
|
data/UPGRADE-5.0.md
ADDED
@@ -0,0 +1,25 @@
|
|
1
|
+
# Upgrading to `bootstrap_form` 5.0
|
2
|
+
|
3
|
+
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.
|
4
|
+
|
5
|
+
## Bootstrap 5 Changes
|
6
|
+
|
7
|
+
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.
|
8
|
+
|
9
|
+
## `bootstrap_form` Version 5 Changes
|
10
|
+
|
11
|
+
## No `role="form"` Attribute
|
12
|
+
|
13
|
+
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)
|
14
|
+
|
15
|
+
## Different behavior for `errors_on` helper
|
16
|
+
|
17
|
+
The `errors_on` helper now wraps the error message in a CSS class `invalid-feedback`, instead of `alert` and `alert-danger`, as before.
|
18
|
+
|
19
|
+
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/).
|
20
|
+
|
21
|
+
You can use the `custom_class` options for this helper with `alert alert-danger` to restore the old behaviour:
|
22
|
+
|
23
|
+
```erb
|
24
|
+
<%= f.errors_on :tasks, custom_class: 'alert alert-danger' %>
|
25
|
+
```
|
data/bootstrap_form.gemspec
CHANGED
@@ -3,6 +3,8 @@ $LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
|
|
3
3
|
|
4
4
|
require "bootstrap_form/version"
|
5
5
|
|
6
|
+
REQUIRED_RAILS_VERSION = ">= 5.2".freeze
|
7
|
+
|
6
8
|
Gem::Specification.new do |s|
|
7
9
|
s.name = "bootstrap_form"
|
8
10
|
s.version = BootstrapForm::VERSION
|
@@ -10,9 +12,9 @@ Gem::Specification.new do |s|
|
|
10
12
|
s.email = ["potenza@gmail.com", "carlos.el.lopes@gmail.com"]
|
11
13
|
s.homepage = "https://github.com/bootstrap-ruby/bootstrap_form"
|
12
14
|
s.summary = "Rails form builder that makes it easy to style forms using "\
|
13
|
-
"Bootstrap
|
15
|
+
"Bootstrap 5"
|
14
16
|
s.description = "bootstrap_form is a rails form builder that makes it super "\
|
15
|
-
"easy to create beautiful-looking forms using Bootstrap
|
17
|
+
"easy to create beautiful-looking forms using Bootstrap 5"
|
16
18
|
s.license = "MIT"
|
17
19
|
|
18
20
|
s.files = `git ls-files -z`.split("\x0").reject do |f|
|
@@ -22,8 +24,10 @@ Gem::Specification.new do |s|
|
|
22
24
|
s.bindir = "exe"
|
23
25
|
s.require_paths = ["lib"]
|
24
26
|
|
25
|
-
s.required_ruby_version = ">= 2.
|
27
|
+
s.required_ruby_version = ">= 2.5"
|
28
|
+
|
29
|
+
s.add_dependency("actionpack", REQUIRED_RAILS_VERSION)
|
30
|
+
s.add_dependency("activemodel", REQUIRED_RAILS_VERSION)
|
26
31
|
|
27
|
-
s.
|
28
|
-
s.add_dependency("activemodel", ">= 5.0")
|
32
|
+
s.add_development_dependency("rails", REQUIRED_RAILS_VERSION)
|
29
33
|
end
|
@@ -1,2 +1 @@
|
|
1
|
-
//=
|
2
|
-
//= link_directory ../stylesheets .css
|
1
|
+
//= link application.css
|
@@ -2,25 +2,25 @@ module BootstrapHelper
|
|
2
2
|
def form_with_source(&block)
|
3
3
|
form_html = capture(&block)
|
4
4
|
|
5
|
-
|
5
|
+
tag.div(class: "example") do
|
6
6
|
concat(form_html)
|
7
7
|
concat(toggle)
|
8
|
-
concat(codemirror)
|
8
|
+
concat(codemirror(form_html))
|
9
9
|
end
|
10
10
|
end
|
11
11
|
|
12
12
|
private
|
13
13
|
|
14
14
|
def codemirror(form_html)
|
15
|
-
|
16
|
-
|
15
|
+
tag.div(class: "code", style: "display: none") do
|
16
|
+
tag.textarea(class: "codemirror") do
|
17
17
|
HtmlBeautifier.beautify(form_html.strip.gsub(">", ">\n").gsub("<", "\n<"))
|
18
18
|
end
|
19
19
|
end
|
20
20
|
end
|
21
21
|
|
22
22
|
def toggle
|
23
|
-
|
23
|
+
tag.button(class: "toggle btn btn-sm btn-info") do
|
24
24
|
"Show Source Code"
|
25
25
|
end
|
26
26
|
end
|
@@ -40,7 +40,7 @@
|
|
40
40
|
<% end %>
|
41
41
|
<% end %>
|
42
42
|
|
43
|
-
<h3>Simple</h3>
|
43
|
+
<h3>Simple Action Text Example</h3>
|
44
44
|
|
45
45
|
<%= form_with_source do %>
|
46
46
|
<%= bootstrap_form_for @user, url: "/" do |form| %>
|
@@ -52,3 +52,16 @@
|
|
52
52
|
<%= form.submit %>
|
53
53
|
<% end %>
|
54
54
|
<% end %>
|
55
|
+
|
56
|
+
<h3>Floating Labels</h3>
|
57
|
+
|
58
|
+
<%= form_with_source do %>
|
59
|
+
<%= bootstrap_form_for @user do |form| %>
|
60
|
+
<%= form.email_field :email, placeholder: "Enter Email", label: "Email address", help: "We'll never share your email with anyone else", floating: true %>
|
61
|
+
<%= form.password_field :password, placeholder: "Password", floating: true %>
|
62
|
+
<%= form.text_field :misc, floating: true %>
|
63
|
+
<%= form.text_area :comments, floating: true %>
|
64
|
+
<%= form.select :status, [["Active", 1], ["Inactive", 2]], include_blank: "Select a value", floating: true %>
|
65
|
+
<%= form.submit %>
|
66
|
+
<% end %>
|
67
|
+
<% end %>
|
@@ -6,7 +6,7 @@
|
|
6
6
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
7
7
|
|
8
8
|
<!-- Bootstrap CSS -->
|
9
|
-
<link
|
9
|
+
<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">
|
10
10
|
|
11
11
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.33.0/codemirror.min.css">
|
12
12
|
|
@@ -44,8 +44,8 @@
|
|
44
44
|
<!-- Optional JavaScript -->
|
45
45
|
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
|
46
46
|
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
|
47
|
-
<script src="https://
|
48
|
-
<script src="https://
|
47
|
+
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.1/dist/umd/popper.min.js" integrity="sha384-SR1sx49pcuLnqZUnnPwx6FCym0wLsk5JZuNx2bPPENzswTNFaQU1RDvt3wT4gWFG" crossorigin="anonymous"></script>
|
48
|
+
<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>
|
49
49
|
|
50
50
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.33.0/codemirror.min.js"></script>
|
51
51
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.33.0/mode/htmlmixed/htmlmixed.min.js"></script>
|
@@ -16,7 +16,7 @@ Rails.application.configure do
|
|
16
16
|
|
17
17
|
# Enable/disable caching. By default caching is disabled.
|
18
18
|
# Run rails dev:cache to toggle caching.
|
19
|
-
if Rails.root.join("tmp
|
19
|
+
if Rails.root.join("tmp/caching-dev.txt").exist?
|
20
20
|
config.action_controller.perform_caching = true
|
21
21
|
|
22
22
|
config.cache_store = :memory_store
|
data/demo/config/puma.rb
CHANGED
@@ -4,12 +4,12 @@
|
|
4
4
|
# the maximum value specified for Puma. Default is set to 5 threads for minimum
|
5
5
|
# and maximum; this matches the default thread size of Active Record.
|
6
6
|
#
|
7
|
-
threads_count = ENV.fetch("RAILS_MAX_THREADS"
|
7
|
+
threads_count = ENV.fetch("RAILS_MAX_THREADS", 5)
|
8
8
|
threads threads_count, threads_count
|
9
9
|
|
10
10
|
# Specifies the `port` that Puma will listen on to receive requests; default is 3000.
|
11
11
|
#
|
12
|
-
port ENV.fetch("PORT"
|
12
|
+
port ENV.fetch("PORT", 3000)
|
13
13
|
|
14
14
|
# Specifies the `environment` that Puma will run in.
|
15
15
|
#
|
data/demo/db/schema.rb
CHANGED
@@ -2,8 +2,8 @@
|
|
2
2
|
# of editing this file, please use the migrations feature of Active Record to
|
3
3
|
# incrementally modify your database, and then regenerate this schema definition.
|
4
4
|
#
|
5
|
-
# This file is the source Rails uses to define your schema when running `rails
|
6
|
-
# db:schema:load`. When creating a new database, `rails db:schema:load` tends to
|
5
|
+
# This file is the source Rails uses to define your schema when running `bin/rails
|
6
|
+
# db:schema:load`. When creating a new database, `bin/rails db:schema:load` tends to
|
7
7
|
# be faster and is potentially less error prone than running all of your
|
8
8
|
# migrations from scratch. Old migrations may fail to apply correctly if those
|
9
9
|
# migrations use external dependencies or application code.
|