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.
Files changed (49) hide show
  1. checksums.yaml +4 -4
  2. data/.editorconfig +13 -0
  3. data/.github/workflows/ruby.yml +46 -0
  4. data/.gitignore +16 -1
  5. data/.rubocop.yml +20 -17
  6. data/CHANGELOG.md +59 -1
  7. data/CONTRIBUTING.md +72 -6
  8. data/Dangerfile +5 -7
  9. data/Dockerfile +26 -0
  10. data/Gemfile +10 -13
  11. data/OLD-README.md +12 -1
  12. data/README.md +140 -60
  13. data/RELEASING.md +2 -2
  14. data/UPGRADE-4.0.md +1 -1
  15. data/UPGRADE-5.0.md +25 -0
  16. data/bootstrap_form.gemspec +9 -5
  17. data/demo/app/assets/config/manifest.js +1 -2
  18. data/demo/app/helpers/bootstrap_helper.rb +5 -5
  19. data/demo/app/views/bootstrap/form.html.erb +14 -1
  20. data/demo/app/views/layouts/application.html.erb +3 -3
  21. data/demo/config/environments/development.rb +1 -1
  22. data/demo/config/puma.rb +2 -2
  23. data/demo/db/schema.rb +2 -2
  24. data/docker-compose.yml +70 -0
  25. data/gemfiles/5.2.gemfile +4 -0
  26. data/gemfiles/6.0.gemfile +4 -0
  27. data/gemfiles/6.1.gemfile +4 -0
  28. data/gemfiles/edge.gemfile +4 -0
  29. data/lib/bootstrap_form/action_view_extensions/form_helper.rb +1 -15
  30. data/lib/bootstrap_form/components/labels.rb +1 -1
  31. data/lib/bootstrap_form/components/layout.rb +1 -1
  32. data/lib/bootstrap_form/components/validation.rb +1 -1
  33. data/lib/bootstrap_form/configuration.rb +22 -0
  34. data/lib/bootstrap_form/form_builder.rb +17 -2
  35. data/lib/bootstrap_form/form_group.rb +21 -10
  36. data/lib/bootstrap_form/form_group_builder.rb +6 -8
  37. data/lib/bootstrap_form/helpers/bootstrap.rb +16 -18
  38. data/lib/bootstrap_form/inputs/base.rb +5 -5
  39. data/lib/bootstrap_form/inputs/check_box.rb +9 -23
  40. data/lib/bootstrap_form/inputs/collection_select.rb +1 -0
  41. data/lib/bootstrap_form/inputs/file_field.rb +3 -15
  42. data/lib/bootstrap_form/inputs/grouped_collection_select.rb +1 -0
  43. data/lib/bootstrap_form/inputs/radio_button.rb +6 -24
  44. data/lib/bootstrap_form/inputs/select.rb +1 -0
  45. data/lib/bootstrap_form/inputs/time_zone_select.rb +1 -0
  46. data/lib/bootstrap_form/version.rb +1 -1
  47. data/lib/bootstrap_form.rb +17 -7
  48. metadata +33 -10
  49. 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
- [![Build Status](https://travis-ci.org/bootstrap-ruby/bootstrap_form.svg?branch=master)](https://travis-ci.org/bootstrap-ruby/bootstrap_form)
3
+ [![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)
10
4
  [![Gem Version](https://badge.fury.io/rb/bootstrap_form.svg)](https://rubygems.org/gems/bootstrap_form)
11
5
 
12
- `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:
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
- * Ruby 2.2.2+
34
- * Rails 5.0+ (Rails 5.1+ for `bootstrap_form_with`)
35
- * Bootstrap 4.0.0+
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", ">= 4.2.0"
37
+ gem "bootstrap_form", "~> 5.0"
43
38
  ```
44
39
 
45
40
  Then:
46
41
 
47
42
  `bundle install`
48
43
 
49
- Then require the CSS in your `application.css` file:
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
- *= require rails_bootstrap_forms
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="form-group">
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="form-group">
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 (Rails 5.1+)
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 role="form" action="/users" accept-charset="UTF-8" method="post">
122
+ <form action="/users" accept-charset="UTF-8" method="post">
123
123
  <input name="utf8" type="hidden" value="&#x2713;" />
124
- <div class="form-group">
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="form-group">
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.form-group`.
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="form-group has-warning" data-foo="bar">
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 have 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:
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 `custom: :switch`:
400
+ To render checkboxes as switches with Bootstrap 4.2+, use `switch: true`:
374
401
 
375
402
  ```erb
376
- <%= f.check_box :remember_me, custom: :switch %>
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="form-group">
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
- <div class="form-group">
508
- <label for="user_life_story">Life story</label>
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
- ```erb
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="form-group">
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="alert alert-danger">Tasks can't be blank.</div>
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="alert alert-danger">can't be blank.</div>
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: "&#8203;".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-2019 Stephen Potenza (https://github.com/potenza)
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.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. **Ensure the tests are passing by running `bundle exec rake`.**
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
- <%= content_tag(:div, @user.errors[:email].join(", "), class: "invalid-feedback", style: "display: block;") unless @user.errors[:email].empty? %>
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
+ ```
@@ -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 4"
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 4"
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.2.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.add_dependency("actionpack", ">= 5.0")
28
- s.add_dependency("activemodel", ">= 5.0")
32
+ s.add_development_dependency("rails", REQUIRED_RAILS_VERSION)
29
33
  end
@@ -1,2 +1 @@
1
- //= link_tree ../images
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
- content_tag(:div, class: "example") do
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
- content_tag(:div, class: "code", style: "display: none") do
16
- content_tag(:textarea, class: "codemirror") do
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
- content_tag(:button, class: "toggle btn btn-sm btn-info") do
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 rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
48
- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
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", "caching-dev.txt").exist?
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") { 5 }
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") { 3000 }
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.