comfy_bootstrap_form 4.0.0.beta1 → 4.0.0.beta2

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 (117) hide show
  1. checksums.yaml +5 -5
  2. data/.gitignore +12 -0
  3. data/.travis.yml +14 -0
  4. data/CONTRIBUTING.md +40 -0
  5. data/Gemfile +14 -0
  6. data/{MIT-LICENSE → LICENSE.md} +1 -1
  7. data/README.md +130 -495
  8. data/Rakefile +5 -15
  9. data/bootstrap_form.gemspec +25 -0
  10. data/demo/README.md +18 -0
  11. data/demo/Rakefile +6 -0
  12. data/demo/app/controllers/application_controller.rb +2 -0
  13. data/demo/app/controllers/bootstrap_controller.rb +12 -0
  14. data/demo/app/models/application_record.rb +3 -0
  15. data/demo/app/models/user.rb +3 -0
  16. data/demo/app/views/bootstrap/form.html.erb +82 -0
  17. data/demo/app/views/layouts/application.html.erb +43 -0
  18. data/demo/bin/bundle +3 -0
  19. data/{test/dummy → demo}/bin/rails +1 -1
  20. data/{test/dummy → demo}/bin/rake +0 -0
  21. data/demo/bin/setup +36 -0
  22. data/demo/bin/update +31 -0
  23. data/demo/bin/yarn +11 -0
  24. data/{test/dummy → demo}/config.ru +2 -1
  25. data/demo/config/application.rb +24 -0
  26. data/demo/config/boot.rb +5 -0
  27. data/{test/dummy → demo}/config/database.yml +8 -12
  28. data/demo/config/environment.rb +5 -0
  29. data/demo/config/environments/development.rb +60 -0
  30. data/{test/dummy → demo}/config/environments/test.rb +15 -20
  31. data/demo/config/initializers/application_controller_renderer.rb +8 -0
  32. data/demo/config/initializers/assets.rb +14 -0
  33. data/{test/dummy → demo}/config/initializers/backtrace_silencers.rb +0 -0
  34. data/demo/config/initializers/cookies_serializer.rb +5 -0
  35. data/{test/dummy → demo}/config/initializers/filter_parameter_logging.rb +0 -0
  36. data/{test/dummy → demo}/config/initializers/inflections.rb +0 -0
  37. data/{test/dummy → demo}/config/initializers/mime_types.rb +0 -1
  38. data/{test/dummy → demo}/config/initializers/wrap_parameters.rb +2 -2
  39. data/{test/dummy → demo}/config/locales/en.yml +10 -0
  40. data/demo/config/puma.rb +56 -0
  41. data/{test/dummy → demo}/config/routes.rb +2 -0
  42. data/demo/config/spring.rb +6 -0
  43. data/demo/config/storage.yml +35 -0
  44. data/demo/db/schema.rb +11 -0
  45. data/{test/dummy/public/favicon.ico → demo/log/.keep} +0 -0
  46. data/demo/package.json +5 -0
  47. data/demo/public/favicon.ico +0 -0
  48. data/lib/bootstrap_form.rb +2 -2
  49. data/lib/bootstrap_form/form_builder.rb +367 -346
  50. data/lib/bootstrap_form/version.rb +1 -1
  51. data/lib/bootstrap_form/view_helper.rb +33 -0
  52. data/lib/comfy_bootstrap_form.rb +1 -1
  53. data/test/bootstrap_form/fields_test.rb +304 -0
  54. data/test/bootstrap_form/fields_with_errors_test.rb +109 -0
  55. data/test/bootstrap_form/form_builder_test.rb +49 -0
  56. data/test/bootstrap_form/horizontal_form_test.rb +159 -0
  57. data/test/bootstrap_form/inline_form_test.rb +68 -0
  58. data/test/bootstrap_form/input_group_test.rb +53 -0
  59. data/test/bootstrap_form/radios_and_checkboxes_test.rb +208 -0
  60. data/test/bootstrap_form/submit_test.rb +59 -0
  61. data/test/bootstrap_form/view_helpers_test.rb +99 -0
  62. data/test/gemfiles/5.2.gemfile +13 -0
  63. data/test/test_helper.rb +31 -69
  64. metadata +71 -258
  65. data/app/assets/stylesheets/rails_bootstrap_forms.css +0 -10
  66. data/lib/bootstrap_form/aliasing.rb +0 -35
  67. data/lib/bootstrap_form/helper.rb +0 -36
  68. data/lib/bootstrap_form/helpers/bootstrap.rb +0 -94
  69. data/lib/bootstrap_form/helpers/nested_form.rb +0 -33
  70. data/test/bootstrap_checkbox_test.rb +0 -144
  71. data/test/bootstrap_fields_test.rb +0 -152
  72. data/test/bootstrap_form_group_test.rb +0 -313
  73. data/test/bootstrap_form_test.rb +0 -276
  74. data/test/bootstrap_other_components_test.rb +0 -86
  75. data/test/bootstrap_radio_button_test.rb +0 -124
  76. data/test/bootstrap_selects_test.rb +0 -160
  77. data/test/dummy/Gemfile +0 -45
  78. data/test/dummy/Gemfile.lock +0 -120
  79. data/test/dummy/README.rdoc +0 -28
  80. data/test/dummy/Rakefile +0 -10
  81. data/test/dummy/app/assets/javascripts/application.js +0 -16
  82. data/test/dummy/app/assets/stylesheets/application.css +0 -13
  83. data/test/dummy/app/controllers/application_controller.rb +0 -5
  84. data/test/dummy/app/helpers/application_helper.rb +0 -2
  85. data/test/dummy/app/models/address.rb +0 -3
  86. data/test/dummy/app/models/faux_user.rb +0 -9
  87. data/test/dummy/app/models/super_user.rb +0 -2
  88. data/test/dummy/app/models/user.rb +0 -9
  89. data/test/dummy/app/views/layouts/application.html.erb +0 -14
  90. data/test/dummy/bin/bundle +0 -3
  91. data/test/dummy/config/application.rb +0 -23
  92. data/test/dummy/config/boot.rb +0 -4
  93. data/test/dummy/config/environment.rb +0 -5
  94. data/test/dummy/config/environments/development.rb +0 -29
  95. data/test/dummy/config/environments/production.rb +0 -80
  96. data/test/dummy/config/initializers/generic_migration.rb +0 -6
  97. data/test/dummy/config/initializers/secret_token.rb +0 -12
  98. data/test/dummy/config/initializers/session_store.rb +0 -3
  99. data/test/dummy/db/migrate/20130703191909_create_users.rb +0 -13
  100. data/test/dummy/db/migrate/20130703191937_create_addresses.rb +0 -13
  101. data/test/dummy/db/migrate/20130912171202_add_preferences_to_user.rb +0 -5
  102. data/test/dummy/db/migrate/20140327190145_add_terms_to_user.rb +0 -5
  103. data/test/dummy/db/migrate/20140922133133_add_type_to_users.rb +0 -5
  104. data/test/dummy/db/schema.rb +0 -38
  105. data/test/dummy/db/seeds.rb +0 -7
  106. data/test/dummy/db/test.sqlite3 +0 -0
  107. data/test/dummy/log/test.log +0 -18394
  108. data/test/dummy/public/404.html +0 -58
  109. data/test/dummy/public/422.html +0 -58
  110. data/test/dummy/public/500.html +0 -57
  111. data/test/dummy/public/robots.txt +0 -5
  112. data/test/dummy/test/fixtures/addresses.yml +0 -15
  113. data/test/dummy/test/fixtures/users.yml +0 -15
  114. data/test/dummy/test/models/address_test.rb +0 -7
  115. data/test/dummy/test/models/user_test.rb +0 -7
  116. data/test/dummy/test/test_helper.rb +0 -15
  117. data/test/special_form_class_models_test.rb +0 -43
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
- SHA1:
3
- metadata.gz: a09e9d913da0ef2be8595d43d33aec6e368bdbed
4
- data.tar.gz: 81fc1495505df95e49938884d6160556f2acdc01
2
+ SHA256:
3
+ metadata.gz: 7189d09fd03c20905ee8e5a3d6cdfa81585f88670186ff34f13abf221402e4f0
4
+ data.tar.gz: 6158e79226dddbfc05bf62930d740da938c7aa76db5a8823647138299e8e8a53
5
5
  SHA512:
6
- metadata.gz: 24d38af509aba51aa3d21b18320f56cf181d3a17f684031cafcefecb45e31585eaa474763876ac56447147592221ae2a6670d4de79c5cb92019ccf53dba7953b
7
- data.tar.gz: 938caf3f08d42199219f4279280c4f99365681d9d680b0505248148f165326a610eaf657b710b9a277c6816dcaec870e538c87a2664a1f722a75bdfa39cfa9ea
6
+ metadata.gz: b948ce024eecd7b758eb7bac1a52ebaba4d5f492a01edd22856a29c4445d011c2ffe51e112479952a7fcdff98c1ef28ba44a5296d6ad56930c17d7778a1af7d7
7
+ data.tar.gz: 231c0dd82d743e5040959b8d92cc0ce17b6440d203a5c69625c239eca7961a28563b22434e7742153863d2b01ad50902d0430e88c2b3917a9c7e8cb7a087c10b
@@ -0,0 +1,12 @@
1
+ .bundle/
2
+ log/*.log
3
+ pkg/
4
+ demo/db/*.sqlite3
5
+ demo/log/*.log
6
+ demo/tmp/
7
+ *.gem
8
+ .rbenv-gemsets
9
+ *.swp
10
+ Gemfile.lock
11
+ .ruby-version
12
+ coverage/
@@ -0,0 +1,14 @@
1
+ language: ruby
2
+ rvm:
3
+ - 2.2.9
4
+ - 2.3.6
5
+ - 2.4.3
6
+ - 2.5.0
7
+ gemfile:
8
+ - test/gemfiles/5.2.gemfile
9
+ branches:
10
+ only:
11
+ - master
12
+ before_install:
13
+ - gem update --system
14
+ - gem install bundler --no-document
@@ -0,0 +1,40 @@
1
+ # Contributing
2
+
3
+ ### 1. Check if issue or feature is available to work on
4
+
5
+ Make sure no one else is working on the same issue or feature. Search the issues
6
+ and pull requests for anything that looks like the issue or feature you want to
7
+ address. If no one else is working on your issue or feature, carry on with the
8
+ following steps.
9
+
10
+ ### 2. Fork the repo
11
+
12
+ For the project. Optionally, create a branch you want to work on
13
+
14
+ ### 3. Get it running locally
15
+
16
+ - Install the required dependencies with `bundle install`
17
+ - Run tests via: `bundle exec rake`
18
+
19
+ ### 4. Hack away
20
+
21
+ - Try to keep your changes small. Consider making several smaller pull requests.
22
+ - Don't forget to add necessary tests.
23
+ - Update the README if necessary.
24
+
25
+ You may find using demo application useful for development and debugging.
26
+
27
+ - `cd demo`
28
+ - `rake db:schema:load`
29
+ - `rails s`
30
+ - Navigate to http://localhost:3000
31
+
32
+ ### 5. Make a Pull Request
33
+
34
+ - If you never done it before read this: https://help.github.com/articles/about-pull-requests/
35
+ - When PR is submitted check if TravisCI ran all tests successfully didn't raise any issues
36
+
37
+ ### 6. Done!
38
+
39
+ Somebody will shortly review your pull request and if everything is good will be
40
+ merged into master brach. Eventually gem will be published with your changes.
data/Gemfile ADDED
@@ -0,0 +1,14 @@
1
+ source "http://rubygems.org"
2
+
3
+ gemspec
4
+
5
+ # Uncomment and change rails version for testing purposes
6
+ # gem "rails", "~> 5.2.0.beta2"
7
+
8
+ group :test do
9
+ gem "minitest"
10
+ gem "diffy"
11
+ gem "equivalent-xml"
12
+ gem "sqlite3"
13
+ gem "coveralls", require: false
14
+ end
@@ -1,4 +1,4 @@
1
- Copyright 2012-2014 Stephen Potenza <potenza@gmail.com>
1
+ Copyright 2012-2018 Oleg Khabarov, Stephen Potenza <potenza@gmail.com>
2
2
 
3
3
  Permission is hereby granted, free of charge, to any person obtaining
4
4
  a copy of this software and associated documentation files (the
data/README.md CHANGED
@@ -1,41 +1,35 @@
1
- [![Build Status](https://travis-ci.org/comfy/comfy-bootstrap-form.svg?branch=master)](https://travis-ci.org/comfy/comfy-bootstrap-form)
2
- [![Gem Version](https://badge.fury.io/rb/comfy_bootstrap_form.svg)](http://badge.fury.io/rb/comfy_bootstrap_form)
1
+ # ComfyBootstrapForm
3
2
 
4
- # Rails Bootstrap Forms
3
+ **bootstrap_form** is a Rails form builder that makes it super easy to integrate
4
+ [Bootstrap 4](https://getbootstrap.com/) forms into your Rails application.
5
5
 
6
- **Rails Bootstrap Forms** is a rails form builder that makes it super easy to integrate
7
- twitter bootstrap-style forms into your rails application.
6
+ [![Gem Version](https://img.shields.io/gem/v/comfy_bootstrap_form.svg?style=flat)](http://rubygems.org/gems/comfy_bootstrap_form)
7
+ [![Gem Downloads](https://img.shields.io/gem/dt/comfy_bootstrap_form.svg?style=flat)](http://rubygems.org/gems/comfy_bootstrap_form)
8
+ [![Build Status](https://img.shields.io/travis/comfy/comfy-bootstrap-form.svg?style=flat)](https://travis-ci.org/comfy/comfy-bootstrap-form)
9
+ [![Dependency Status](https://img.shields.io/gemnasium/comfy/comfy-bootstrap-form.svg?style=flat)](https://gemnasium.com/comfy/comfy-bootstrap-form)
10
+ [![Code Climate](https://img.shields.io/codeclimate/maintainability/comfy/comfy-bootstrap-form.svg?style=flat)](https://codeclimate.com/github/comfy/comfy-bootstrap-form)
11
+ [![Coverage Status](https://img.shields.io/coveralls/comfy/comfy-bootstrap-form.svg?style=flat)](https://coveralls.io/r/comfy/comfy-bootstrap-form?branch=master)
12
+ [![Gitter](https://badges.gitter.im/comfy/comfortable-mexican-sofa.svg)](https://gitter.im/comfy/comfortable-mexican-sofa)
8
13
 
9
14
  ## Requirements
10
15
 
11
- * Ruby 1.9+
12
- * Rails 4.0+
13
- * Twitter Bootstrap 4.0+
16
+ - Rails 5.2+
17
+ - Bootstrap 4.0.0+
14
18
 
15
19
  ## Installation
16
20
 
17
- Add it to your Gemfile:
21
+ Add gem to your Gemfile and run `bundle install`
18
22
 
19
- `gem 'comfy_bootstrap_form'`
20
-
21
- Then:
22
-
23
- `bundle`
24
-
25
- Then require the CSS in your `application.css` file:
26
-
27
- ```css
28
- /*
29
- *= require rails_bootstrap_forms
30
- */
23
+ ```ruby
24
+ gem "comfy_bootstrap_form", "~> 4.0.0"
31
25
  ```
32
26
 
33
27
  ## Usage
34
28
 
35
- To get started, just use the `bootstrap_form_for` helper. Here's an example:
29
+ Here's a simple example:
36
30
 
37
31
  ```erb
38
- <%= bootstrap_form_for(@user) do |f| %>
32
+ <%= bootstrap_form_with model: @user do |f| %>
39
33
  <%= f.email_field :email %>
40
34
  <%= f.password_field :password %>
41
35
  <%= f.check_box :remember_me %>
@@ -43,579 +37,220 @@ To get started, just use the `bootstrap_form_for` helper. Here's an example:
43
37
  <% end %>
44
38
  ```
45
39
 
46
- This generates the following HTML:
40
+ This will generate HTML similar to this:
47
41
 
48
42
  ```html
49
- <form accept-charset="UTF-8" action="/users" class="new_user" id="new_user" method="post">
43
+ <form action="/users" accept-charset="UTF-8" data-remote="true" method="post">
44
+ <input name="utf8" type="hidden" value="&#x2713;" />
45
+ <input type="hidden" name="authenticity_token" value="AUTH_TOKEN" />
50
46
  <div class="form-group">
51
47
  <label for="user_email">Email</label>
52
- <input class="form-control" id="user_email" name="user[email]" type="email">
48
+ <input class="form-control" type="email" name="user[email]" id="user_email" />
53
49
  </div>
54
50
  <div class="form-group">
55
51
  <label for="user_password">Password</label>
56
- <input class="form-control" id="user_password" name="user[password]" type="password">
52
+ <input class="form-control" type="password" name="user[password]" id="user_password" />
57
53
  </div>
58
- <div class="form-check">
59
- <label for="user_remember_me">
60
- <input name="user[remember_me]" type="hidden" value="0">
61
- <input id="user_remember_me" name="user[remember_me]" type="checkbox" value="1"> Remember me
62
- </label>
54
+ <fieldset class="form-group">
55
+ <div class="form-check">
56
+ <input name="user[remember_me]" type="hidden" value="0" />
57
+ <input class="form-check-input" type="checkbox" value="1" name="user[remember_me]" id="user_remember_me" />
58
+ <label class="form-check-label" for="user_remember_me">Remember me</label>
59
+ </div>
60
+ </fieldset>
61
+ <div class="form-group">
62
+ <input type="submit" name="commit" value="Log In" class="btn" data-disable-with="Log In" />
63
63
  </div>
64
- <input class="btn btn-secondary" name="commit" type="submit" value="Log In">
65
64
  </form>
66
65
  ```
67
66
 
68
- ### Nested Forms
69
-
70
- In order to active [nested_form](https://github.com/ryanb/nested_form) support,
71
- use `bootstrap_nested_form_for` instead of `bootstrap_form_for`.
72
-
73
- ### bootstrap_form_tag
74
-
75
- If your form is not backed by a model, use the `bootstrap_form_tag`. Usage of this helper is the same as `bootstrap_form_for`, except no model object is passed in as the first argument. Here's an example:
76
-
77
- ```erb
78
- <%= bootstrap_form_tag url: '/subscribe' do |f| %>
79
- <%= f.email_field :email, value: 'name@example.com' %>
80
- <%= f.submit %>
81
- <% end %>
82
- ```
83
-
84
- ## Form Helpers
85
-
86
- This gem wraps the following Rails form helpers:
87
-
88
- * check_box
89
- * collection_check_boxes
90
- * collection_select
91
- * color_field
92
- * date_field
93
- * date_select
94
- * datetime_field
95
- * datetime_local_field
96
- * datetime_select
97
- * email_field
98
- * file_field
99
- * grouped_collection_select
100
- * hidden_field (not wrapped, but supported)
101
- * month_field
102
- * number_field
103
- * password_field
104
- * phone_field
105
- * radio_button
106
- * collection_radio_buttons
107
- * range_field
108
- * search_field
109
- * select
110
- * telephone_field
111
- * text_area
112
- * text_field
113
- * time_field
114
- * time_select
115
- * time_zone_select
116
- * url_field
117
- * week_field
118
-
119
- These helpers accept the same options as the standard Rails form helpers, with
120
- a few extra options:
121
-
122
- ### Labels
123
-
124
- Use the `label` option if you want to specify the field's label text:
125
-
126
- ```erb
127
- <%= f.password_field :password_confirmation, label: "Confirm Password" %>
128
- ```
129
-
130
- To hide a label, use the `hide_label: true` option. This adds the `sr-only`
131
- class, which keeps your labels accessible to those using screen readers.
132
-
133
- ```erb
134
- <%= f.text_area :comment, hide_label: true, placeholder: "Leave a comment..." %>
135
- ```
136
-
137
- To add custom classes to the field's label:
138
-
139
- ```erb
140
- <%= f.text_field :email, label_class: "custom-class" %>
141
- ```
142
-
143
- #### Required Fields
144
-
145
- A label that is associated with a required field is automatically annotated with
146
- a `required` CSS class. You are free to add any appropriate CSS to style
147
- required fields as desired. One example would be to automatically add an
148
- asterisk to the end of the label:
149
-
150
- ```css
151
- label.required:after {
152
- content:" *";
153
- }
154
- ```
155
-
156
- The label `required` class is determined based on the definition of a presence
157
- validator with the associated model attribute. Presently this is one of:
158
- ActiveRecord::Validations::PresenceValidator or
159
- ActiveModel::Validations::PresenceValidator.
160
-
161
- In cases where this behavior is undesirable, use the `skip_required` option:
162
-
163
- ```erb
164
- <%= f.password_field :password, label: "New Password", skip_required: true %>
165
- ```
166
-
167
- ### Input Elements / Controls
168
-
169
- To specify the class of the generated input, use the `control_class` option:
170
-
171
- ```erb
172
- <%= f.text_field :email, control_class: "custom-class" %>
173
- ```
174
-
175
- ### Help Text
176
-
177
- To add help text, use the `help` option:
178
-
179
- ```erb
180
- <%= f.password_field :password, help: "Must be at least 6 characters long" %>
181
- ```
182
-
183
- This gem is also aware of help messages in locale translation files (i18n):
184
-
185
- ```yml
186
- en:
187
- activerecord:
188
- help:
189
- user:
190
- password: "A good password should be at least six characters long"
191
- ```
192
-
193
- If your model name has multiple words (like `SuperUser`), the key on the
194
- translation file should be underscored (`super_user`).
195
-
196
- You can override help translations for a particular field by passing the `help`
197
- option or turn them off completely by passing `help: false`.
67
+ Feel free to take a look at the [Demo App](/demo) to see how everything renders.
68
+ Specifically see [form.html.erb](/demo/app/views/bootstrap/form.html.erb) template
69
+ for all kinds of different form configurations you can have.
198
70
 
199
- ### Icons
71
+ ## Supported form field helpers
200
72
 
201
- To add an icon to a field, use the `icon` option and pass the icon name
202
- *without* the 'glyphicon' prefix:
73
+ This gem wraps most of the default form field helpers. Here's the current list:
203
74
 
204
- ```erb
205
- <%= f.text_field :login, icon: "user" %>
206
75
  ```
207
-
208
- This automatically adds the `has-feedback` class to the `form-group`:
209
-
210
- ```html
211
- <div class="form-group has-feedback">
212
- <label class="form-control-label" for="user_login">Login</label>
213
- <input class="form-control" id="user_login" name="user[login]" type="text" />
214
- <span class="glyphicon glyphicon-user form-control-feedback"></span>
215
- </div>
76
+ color_field file_field phone_field text_field
77
+ date_field month_field range_field time_field
78
+ datetime_field number_field search_field url_field
79
+ email_field password_field text_area week_field
80
+ collection_radio_buttons collection_check_boxes
216
81
  ```
217
82
 
218
- ### Prepending and Appending Inputs
83
+ Helpers for DateTime selects are not implemented as it's better to choose one of
84
+ many Javascript timepickers out there. For example, [Flatpickr](https://github.com/chmln/flatpickr)
85
+ is a good one.
219
86
 
220
- You can pass `prepend` and/or `append` options to input fields:
87
+ Singular `radio_button` is not implemented as it doesn't make sense to wrap one
88
+ radio button input in Bootstrap markup.
221
89
 
222
- ```erb
223
- <%= f.text_field :price, prepend: "$", append: ".00" %>
224
- ```
90
+ #### Radio Buttons and Checkboxes
225
91
 
226
- You can also prepend and append buttons. Note: The buttons must contain the
227
- `btn` class to generate the correct markup.
92
+ To render collection of radio buttons or checkboxes we use the same helper that
93
+ comes with Rails. The only difference is that it doesn't accept a block. This
94
+ gem takes care of rendering of labels and inputs for you.
228
95
 
229
96
  ```erb
230
- <%= f.text_field :search, append: link_to("Go", "#", class: "btn btn-secondary") %>
97
+ <%= form.collection_radio_buttons :choices, ["red", "green", "blue"], :to_s, :to_s %>
98
+ <%= form.collection_check_boxes :choices, Choices.all, :id, :label %>
231
99
  ```
232
100
 
233
- To add a class to the input group wrapper, use `:input_group_class` option.
101
+ You may choose to render inputs inline:
234
102
 
235
103
  ```erb
236
- <%= f.email_field :email, append: f.primary('Subscribe'), input_group_class: 'input-group-lg' %>
104
+ <%= form.collection_check_boxes :choices, Choices.all, :id, :label, bootstrap: {inline: true} %>
237
105
  ```
238
106
 
239
- ### Additional Form Group Attributes
107
+ #### Submit
240
108
 
241
- If you want to add an additional css class or any other attribute to the form group div, you can use
242
- the `wrapper: { class: 'additional-class', data: { foo: 'bar' } }` option.
109
+ Submit button is automatically wrapped with Bootstrap markup. Here's how it looks:
243
110
 
244
111
  ```erb
245
- <%= f.text_field :name, wrapper: { class: 'has-warning', data: { foo: 'bar' } } %>
112
+ <%= form.submit %>
113
+ <%= form.submit "Submit" %>
114
+ <%= form.primary %>
246
115
  ```
247
116
 
248
- Which produces the following output:
249
-
250
- ```erb
251
- <div class="form-group has-warning" data-foo="bar">
252
- <label class="form-control-label" for="user_name">Id</label>
253
- <input class="form-control" id="user_name" name="user[name]" type="text">
254
- </div>
255
- ```
256
-
257
- You still can use `wrapper_class` option to set only a css class. This is just a short form of `wrapper: { class: 'additional-class' }`.
258
-
259
- ### Selects
260
-
261
- Our select helper accepts the same arguments as the [default Rails helper](http://api.rubyonrails.org/classes/ActionView/Helpers/FormOptionsHelper.html#method-i-select). Here's an example of how you pass both options and html_options hashes:
262
-
263
- ```erb
264
- <%= f.select :product, [[1, "Apple"], [2, "Grape"]], { label: "Choose your favorite fruit:" }, { class: "selectpicker" } %>
265
- ```
266
-
267
- ### Checkboxes and Radios
268
-
269
- Checkboxes and radios should be placed inside of a `form_group` to render
270
- properly. The following example ensures that the entire form group will display
271
- an error if an associated validations fails:
117
+ You can also pass in a block of content that will be appended next to the button:
272
118
 
273
119
  ```erb
274
- <%= f.form_group :skill_level, label: { text: "Skill" }, help: "Optional Help Text" do %>
275
- <%= f.radio_button :skill_level, 0, label: "Novice", checked: true %>
276
- <%= f.radio_button :skill_level, 1, label: "Intermediate" %>
277
- <%= f.radio_button :skill_level, 2, label: "Advanced" %>
278
- <% end %>
279
-
280
- <%= f.form_group :terms do %>
281
- <%= f.check_box :terms, label: "I agree to the Terms of Service" %>
282
- <% end %>
283
- ```
284
-
285
- You can also create a checkbox using a block:
286
-
287
- ```erb
288
- <%= f.form_group :terms, label: { text: "Optional Label" } do %>
289
- <%= f.check_box :terms do %>
290
- You need to check this box to accept our terms of service and privacy policy
291
- <% end %>
292
- <% end %>
293
- ```
294
-
295
- To display checkboxes and radios inline, pass the `inline: true` option:
296
-
297
- ```erb
298
- <%= f.form_group :skill_level, label: { text: "Skill" } do %>
299
- <%= f.radio_button :skill_level, 0, label: "Novice", inline: true %>
300
- <%= f.radio_button :skill_level, 1, label: "Intermediate", inline: true %>
301
- <%= f.radio_button :skill_level, 2, label: "Advanced", inline: true %>
120
+ <%= form.submit "Save" do %>
121
+ <a href="/" class="btn btn-link">Cancel</a>
302
122
  <% end %>
303
123
  ```
304
124
 
305
- #### Collections
125
+ #### Plaintext helper
306
126
 
307
- BootstrapForms also provides helpers that automatically creates the
308
- `form_group` and the `radio_button`s or `check_box`es for you:
127
+ There's an additional field helper that render read-only plain text values:
309
128
 
310
129
  ```erb
311
- <%= f.collection_radio_buttons :skill_level, Skill.all, :id, :name %>
312
- <%= f.collection_check_boxes :skills, Skill.all, :id, :name %>
130
+ <%= form.plaintext :value %>
313
131
  ```
314
132
 
315
- Collection methods accept these options:
316
- * `:label`: Customize the `form_group`'s label
317
- * `:hide_label`: Pass true to hide the `form_group`'s label
318
- * `:help`: Add a help span to the `form_group`
319
- * Other options will be forwarded to the `radio_button`/`check_box` method
320
-
321
- ### Static Controls
322
-
323
- You can create a static control like this:
324
-
325
- ```erb
326
- <%= f.static_control :email %>
327
- ```
328
-
329
- Here's the output:
330
-
331
- ```html
332
- <div class="form-group">
333
- <label class="col-sm-2 form-control-label" for="user_email">Email</label>
334
- <div class="col-sm-10">
335
- <p class="form-control-static">test@email.com</p>
336
- </div>
337
- </div>
338
- ```
133
+ #### Form Group
339
134
 
340
- You can also create a static control that isn't based on a model attribute:
135
+ When you need to wrap arbitrary content in markup that renders correctly in
136
+ Bootstrap form:
341
137
 
342
138
  ```erb
343
- <%= f.static_control label: "Custom Static Control" do %>
344
- Content Here
139
+ <%= form.form_group do %>
140
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
141
+ tempor incididunt ut labore et dolore magna aliqua.
345
142
  <% end %>
346
143
  ```
347
144
 
348
- ### Date Helpers
349
-
350
- The multiple selects that the date and time helpers (`date_select`,
351
- `time_select`, `datetime_select`) generate are wrapped inside a
352
- `div.rails-bootstrap-forms-[date|time|datetime]-select` tag. This is because
353
- Bootstrap automatically stylizes ours controls as `block`s. This wrapper fix
354
- this defining these selects as `inline-block` and a width of `auto`.
355
-
356
- ### Submit Buttons
357
-
358
- The `btn btn-secondary` css classes are automatically added to your submit
359
- buttons.
360
-
361
- ```erb
362
- <%= f.submit %>
363
- ```
364
-
365
- You can also use the `primary` helper, which adds `btn btn-primary` to your
366
- submit button:
367
-
368
- ```erb
369
- <%= f.primary "Optional Label" %>
370
- ```
371
-
372
- You can specify your own classes like this:
373
-
374
- ```erb
375
- <%= f.submit "Log In", class: "btn btn-success" %>
376
- ```
377
-
378
- ### Accessing Rails Form Helpers
379
-
380
- If you want to use the original Rails form helpers for a particular field,
381
- append `_without_bootstrap` to the helper:
382
-
383
- ```erb
384
- <%= f.text_field_without_bootstrap :email %>
385
- ```
386
-
387
- ## Form Styles
388
-
389
- By default, your forms will stack labels on top of controls and your controls
390
- will grow to 100% of the available width.
391
-
392
- ### Inline Forms
393
-
394
- To use an inline-layout form, use the `layout: :inline` option. To hide labels,
395
- use the `hide_label: true` option, which keeps your labels accessible to those
396
- using screen readers.
145
+ If you need to add a label:
397
146
 
398
147
  ```erb
399
- <%= bootstrap_form_for(@user, layout: :inline) do |f| %>
400
- <%= f.email_field :email, hide_label: true %>
401
- <%= f.password_field :password, hide_label: true %>
402
- <%= f.check_box :remember_me %>
403
- <%= f.submit %>
148
+ <%= form.form_group bootstrap: {label: {text: "Lorem"}} do %>
149
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
150
+ tempor incididunt ut labore et dolore magna aliqua.
404
151
  <% end %>
405
152
  ```
406
153
 
407
- To skip label rendering at all, use `skip_label: true` option.
408
-
409
- ```erb
410
- <%= f.password_field :password, skip_label: true %>
411
- ```
412
-
413
- ### Horizontal Forms
154
+ ## Bootstrap options
414
155
 
415
- To use a horizontal-layout form with labels to the left of the control, use the
416
- `layout: :horizontal` option. You should specify both `label_col` and
417
- `control_col` css classes as well (they default to `col-sm-2` and `col-sm-10`).
156
+ #### Horizontal Form
418
157
 
419
- In the example below, the checkbox and submit button have been wrapped in a
420
- `form_group` to keep them properly aligned.
158
+ By default form is rendered as a stack. Labels are above inputs, and inputs
159
+ take up 100% of the width. You can change form layout to `horizontal` to put
160
+ labels and corresponding inputs side by side:
421
161
 
422
162
  ```erb
423
- <%= bootstrap_form_for(@user, layout: :horizontal, label_col: "col-sm-2", control_col: "col-sm-10") do |f| %>
424
- <%= f.email_field :email %>
425
- <%= f.password_field :password %>
426
- <%= f.form_group do %>
427
- <%= f.check_box :remember_me %>
428
- <% end %>
429
- <%= f.form_group do %>
430
- <%= f.submit %>
431
- <% end %>
163
+ <%= bootstrap_form_with model: @user, bootstrap: {layout: :horizontal} do |form| %>
164
+ <%= form.text_field :email %>
432
165
  <% end %>
433
166
  ```
434
167
 
435
- The `label_col` and `control_col` css classes can also be changed per control:
168
+ There are options that control column width and label alignment. Here's how it
169
+ would look with all the defaults:
436
170
 
437
171
  ```erb
438
- <%= bootstrap_form_for(@user, layout: :horizontal) do |f| %>
439
- <%= f.email_field :email %>
440
- <%= f.text_field :age, control_col: "col-sm-3" %>
441
- <%= f.form_group do %>
442
- <%= f.submit %>
443
- <% end %>
172
+ <%
173
+ bootstrap_options = {
174
+ layout: "horizontal",
175
+ label_col_class: "col-sm-2",
176
+ control_col_class: "col-sm-10",
177
+ label_align_class: "text-sm-right"
178
+ }
179
+ %>
180
+ <%= bootstrap_form_with model: @user, bootstrap: bootstrap_options do |form| %>
181
+ <%= form.text_field :email %>
444
182
  <% end %>
445
183
  ```
446
184
 
447
- ### Custom Field Layout
185
+ #### Inline Form
448
186
 
449
- The `layout` can be overridden per field:
187
+ You may choose to render form elements in one line. Please note that this layout
188
+ won't render all form elements. Things like errors messages won't show up right.
450
189
 
451
190
  ```erb
452
- <%= bootstrap_form_for(@user, layout: :horizontal) do |f| %>
453
- <%= f.email_field :email %>
454
- <%= f.text_field :feet, layout: :default %>
455
- <%= f.text_field :inches, layout: :default %>
456
- <%= f.form_group do %>
457
- <%= f.submit %>
458
- <% end %>
191
+ <%= bootstrap_form_with url: "/search" do |form| %>
192
+ <%= form.text_field :query %>
193
+ <%= form.submit "Search" %>
459
194
  <% end %>
460
195
  ```
461
196
 
462
- ## Validation & Errors
463
-
464
- ### Inline Errors
197
+ #### Label
465
198
 
466
- By default, fields that have validation errors will outlined in red and the
467
- error will be displayed below the field. Rails normally wraps the fields in a
468
- div (field_with_errors), but this behavior is suppressed. Here's an example:
469
-
470
- ```html
471
- <div class="form-group has-danger">
472
- <label class="form-control-label" for="user_email">Email</label>
473
- <input class="form-control" id="user_email" name="user[email]" type="email" value="">
474
- <span class="form-control-feedback">can't be blank</span>
475
- </div>
476
- ```
477
-
478
- You can turn off inline errors for the entire form like this:
199
+ You can change label generated by Rails to something else:
479
200
 
480
201
  ```erb
481
- <%= bootstrap_form_for(@user, inline_errors: false) do |f| %>
482
- ...
483
- <% end %>
484
- ```
485
-
486
- ### Label Errors
487
-
488
- You can also display validation errors in the field's label; just turn
489
- on the `:label_errors` option. Here's an example:
490
-
491
- ```
492
- <%= bootstrap_form_for(@user, label_errors: true) do |f| %>
493
- ...
494
- <% end %>
202
+ <%= form.text_field :value, bootstrap: {label: {text: "Custom Label"}} %>
495
203
  ```
496
204
 
497
- By default, turning on `:label_errors` will also turn off
498
- `:inline_errors`. If you want both turned on, you can do that too:
499
-
500
- ```
501
- <%= bootstrap_form_for(@user, label_errors: true, inline_errors: true) do |f| %>
502
- ...
503
- <% end %>
504
- ```
505
-
506
- ### Alert Messages
507
-
508
- To display an error message with an error summary, you can use the
509
- `alert_message` helper. This won't output anything unless a model validation
510
- has failed.
511
-
512
- ```erb
513
- <%= f.alert_message "Please fix the errors below." %>
514
- ```
515
-
516
- Which outputs:
517
-
518
- ```html
519
- <div class="alert alert-danger">
520
- <p>Please fix the errors below.</p>
521
- <ul class="rails-bootstrap-forms-error-summary">
522
- <li>Email can't be blank</li>
523
- </ul>
524
- </div>
525
- ```
526
-
527
- You can turn off the error summary like this:
205
+ You may hide label completely (it's still there for screen readers):
528
206
 
529
207
  ```erb
530
- <%= f.alert_message "Please fix the errors below.", error_summary: false %>
208
+ <%= form.text_field :value, bootstrap: {label: {hide: true}} %>
531
209
  ```
532
210
 
533
- To output a simple unordered list of errors, use the `error_summary` helper.
211
+ Custom CSS class on the label tag? Sure:
534
212
 
535
213
  ```erb
536
- <%= f.error_summary %>
214
+ <%= form.text_field :value, bootstrap: {label: {class: "custom-label"}} %>
537
215
  ```
538
216
 
539
- Which outputs:
540
-
541
- ```html
542
- <ul class="rails-bootstrap-forms-error-summary">
543
- <li>Email can't be blank</li>
544
- </ul>
545
- ```
217
+ #### Help Text
546
218
 
547
- ### Errors On
548
-
549
- If you want to display a custom inline error for a specific attribute not
550
- represented by a form field, use the `errors_on` helper.
219
+ You may attach help text for pretty much any field type:
551
220
 
552
221
  ```erb
553
- <%= f.errors_on :tasks %>
222
+ <%= form.text_field :value, bootstrap: {help: "Short helpful message"} %>
554
223
  ```
555
224
 
556
- Which outputs:
225
+ #### Append and Prepend
557
226
 
558
- ```html
559
- <div class="alert alert-danger">Tasks can't be blank.</div>
560
- ```
561
-
562
- You can hide the attribute name like this:
227
+ Bootstrap allows prepending and appending content to fields via `input-group`.
228
+ Here's how this looks:
563
229
 
564
230
  ```erb
565
- <%= f.errors_on :tasks, hide_attribute_name: true %>
231
+ <%= form.text_field :value, bootstrap: {prepend: "$", append: "%"} %>
566
232
  ```
567
233
 
568
- Which outputs:
234
+ If you want to use something like a button, or other html content do this:
569
235
 
570
- ```html
571
- <div class="alert alert-danger">can't be blank.</div>
236
+ ```erb
237
+ <% button_html = capture do %>
238
+ <button class="btn btn-danger">Don't Press</button>
239
+ <% end %>
240
+ <%= form.text_field :value, bootstrap: {append: {html: button_html}} %>
572
241
  ```
573
242
 
574
- ## Internationalization
575
-
576
- bootstrap_form follows standard rails conventions so it's i18n-ready. See more
577
- here: http://guides.rubyonrails.org/i18n.html#translations-for-active-record-models
578
-
579
- ## Code Triage page
580
-
581
- http://www.codetriage.com/potenza/bootstrap_form
582
-
583
- ## Contributing
584
-
585
- We love pull requests! Here's a quick guide for contributing:
586
-
587
- 1. Fork the repo.
588
-
589
- 2. Install the required dependencies.
590
-
591
- ```
592
- bundle install
593
- bundle exec appraisal install
594
- ```
243
+ ### Gotchas
595
244
 
596
- 3. Run the existing test suite:
245
+ For inline radio buttons and check boxes you need to add custom css for error
246
+ messages show up (see: https://github.com/twbs/bootstrap/issues/25540):
597
247
 
248
+ ```css
249
+ .invalid-feeback {
250
+ display: block
251
+ }
598
252
  ```
599
- $ bundle exec rake -f test/dummy/Rakefile db:create db:migrate RAILS_ENV=test
600
- $ bundle exec appraisal rake test
601
- ```
602
-
603
- 4. Add tests for your change.
604
-
605
- 5. Add your changes and make your test(s) pass. Following the conventions you
606
- see used in the source will increase the chance that your pull request is
607
- accepted right away.
608
-
609
- 6. Update the README if necessary.
610
-
611
- 7. Add a line to the CHANGELOG for your bug fix or feature.
612
-
613
- 8. Push to your fork and submit a pull request.
614
-
615
- ## Contributors
616
-
617
- https://github.com/bootstrap-ruby/rails-bootstrap-forms/graphs/contributors
618
253
 
619
- ## License
254
+ ---
620
255
 
621
- MIT License. Copyright 2012-2014 Stephen Potenza (https://github.com/potenza)
256
+ Copyright 2018 Oleg Khabarov, Released under the [MIT License](LICENCE.md)