comfy_bootstrap_form 4.0.0.beta1 → 4.0.0.beta2

Sign up to get free protection for your applications and to get access to all the features.
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)