Bootstrap v4.1 support #56

m5o · 2018-02-26T17:19:24Z

🏁 Final 3 of 3

Hey @rafaelfranca 👋

simple form now 💜 bootstrap 4.1

📺 Demo preview

supported form wrapper all covered by tests
- vertical form
- horizontal form
- inline form
- custom fields form
- input groups form
- floating labels form

Info

added horizontal-multi-select wrapper
- Add a horizontal-multi-select wrapper for Bootstrap forms simple_form#1374
used fieldset / legend for multiple check boxes / radio buttons
- Resolves fieldset/legend should be used for multiple checkboxes/radiobuttons #50
intentionally did a lot of small commits, easier to review and follow
Resolves Test with bootstrap 4 #53

I've tested a heroku deployment by doing:

heroku create
git push heroku bootstrap-v4:master
heroku run rake db:migrate
Demo preview

For updating the existing heroku app, please drop the DB.

heroku pg:info
heroku pg:reset
heroku run rake db:migrate

/cc @Nerian @carlosantoniodasilva @feliperenan

🔗 heartcombo/simple_form#1337

rafaelfranca · 2018-02-27T00:03:29Z

Thank you so much for working on this. There are too many changes in the same PR. Can you open others PRs to upgrading the Rails version and other unrelated changes to bootstrap and keep this one only focused in adding bootstrap 4 support?

* add User model with validations * add custom excluision_array_validator * add i18n

* generated by Balsamiq wireframe * export all as png

* js helper to pre-fill forms with data * js helper for toggle, tooltip, and swap

* `form_abbr` * `form_collection_label` * `form_custom_checkbox_switch` * `form_floating_labels` * `form_invalid` * `form_multi_select`

# Conflicts: # app/controllers/examples/base_controller.rb

* `date_fields_test` * `floating_labels_test` * `form_helper_test` * `submit_test`

* vertical forms * horizontal forms * inline forms * custom fields form * floating labels form * input groups forms

* re-use bootstrap input-padding defaults

* add error classes to inputs * load lastest `simple_form` version from github * remove custom form_invalid styles :link: heartcombo/simple_form#1552

* refine inline form markup * use `span` wrapper * use shorter `:error` instead of `:full_error`

rafaelfranca · 2018-03-06T20:11:49Z

Gemfile

@@ -67,7 +67,8 @@ gem 'bootstrap', '~> 4.0.0'
 gem 'jquery-rails'
 gem 'kramdown', '~> 1.16'
 gem 'rouge', '~> 3.1'
-gem 'simple_form', '~> 3.5'
+gem 'simple_form', github: 'plataformatec/simple_form'
+gem 'validates_timeliness', '~> 4.0'


Why we need this gem?

I just wanted easy and readable validations for the date, time and datetime examples. But open for better suggestions.

validates :birthday, presence: true, timeliness: { type: :date, :after => lambda { Date.today } } validates :awake, presence: true, timeliness: { type: :time, before: '12:00' } validates :first_kiss, presence: true, timeliness: { type: :datetime, after: '20:00' }

https://github.com/m5o/simple_form-bootstrap/blob/14e4c0b97fc0dec2a06874ce50094bbd9fb31deb/app/models/user.rb#L54

Sounds good. Thank you for explaining.

rafaelfranca · 2018-03-06T20:14:29Z

config/initializers/simple_form_bootstrap.rb

+  module Components
+    module InputGroups
+      module Prepends
+        def prepend(wrapper_options = nil)


We need to upstream to to simple_form so we can remove it from here?

Ok, great! What do you suggest. Should I open a new PR?

Yeah, please open an PR to simple_form or an issue so we can discuss the solutions

Done - heartcombo/simple_form#1554

* apply API to register custom components * heartcombo/simple_form#1556

via: heartcombo/simple_form#1556 (comment)

* http://guides.rubyonrails.org/active_record_validations.html#numericality

simple form now 💜 bootstrap 4.1 The bootstrap generator is extracted from: heartcombo/simple_form-bootstrap#56 * supported form wrapper all covered by *tests* * vertical form * horizontal form * inline form * custom fields form * input groups form * floating labels form :link: heartcombo/simple_form-bootstrap#56 🔗 heartcombo#1561 Resolves heartcombo#1337

guillaumewrobel · 2018-04-10T14:38:13Z

kudos @m5o !

simple form now 💜 bootstrap 4.1 The bootstrap generator is extracted from: heartcombo/simple_form-bootstrap#56 * supported form wrapper all covered by *tests* * vertical form * horizontal form * inline form * custom fields form * input groups form * floating labels form :link: heartcombo/simple_form-bootstrap#56 🔗 #1561 Resolves #1337

* update simple_form to v4.0.0 * https://rubygems.org/gems/simple_form

* update rails to v5.2.0 * http://railsdiff.org/5.2.0.rc2/5.2.0

* fixes issue with Incompatible units: 'px' and 'rem'.

guillaumewrobel · 2018-04-16T12:23:37Z

bootstrap-rubygem now supports Bootstrap v4.1.0!

* update bootstrap gem to v4.1 * `bundle update bootstrap`

m5o · 2018-04-16T12:50:44Z

@rafaelfranca So I'm finally done 🙌

Rails v5.2.0 update and linked bootstrap v4.1 gem.
I would propose to shutdown the demo preview if you update your heroku app at http://simple-form-bootstrap.herokuapp.com

I have added a Travis CI setup, would you do the setup or alternatively give me the permission to the demo repo 🤓

Happy merging 🚀

jonathanhefner · 2018-04-23T21:47:25Z

config/initializers/simple_form_bootstrap.rb

 # Use this setup block to configure all options available in SimpleForm.
 SimpleForm.setup do |config|
+  # Default class for buttons
+  config.button_class = 'btn'


Should this be 'btn btn-primary'?

only if you want all buttons have btn-primary style. You could run intro override troubles then.
If you want to use variations like btn-outline-* Look at this example

My concern though is that the default behavior of f.button :submit (i.e. without specifying a class) produces a button which disappears on mouse hover:

Checking through the Bootstrap 4 docs, it's not clear to me whether btn is meant to be used by itself. It seems like it's always supposed to be paired with a btn-*.

Yes, it's supposed to be paired with an additional class. But I understand your concern, with c617d81 I've added a style modifier that target elements with only a .btn class.

You can use this to avoid specifying a class to your f.button :submit

That's a good idea. It might even be nice addition to Bootstrap itself! For Simple Form though, should it be scoped to .simple_form [class="btn"] to prevent contamination?

Also, I'm not sure, but do you know if .btn[class="btn"] would have better selector performance than just [class="btn"]? I know that attribute selectors are slower than class selectors, and I know that hierarchical selectors (e.g. .a .b .c) are evaluated right-to-left, but I don't know if browsers are smart enough to use the .btn part first, then filter on [class="btn"] (i.e. evaluate that single selector left-to-right).

👍 Try to make a PR to bootstrap.

* apply primary button style to buttons with only `btn` class

guillaumewrobel · 2018-04-30T19:22:05Z

Bootstrap is now 4.1.1

* update bootstrap to v4.1.1 * `bundle update bootstrap`

* tweak styles to match bootstrap v4.1.1

jonathanhefner · 2018-05-18T23:18:50Z

config/initializers/simple_form_bootstrap.rb

+    b.optional :readonly
+    b.use :label, class: 'form-control-label'
+    b.wrapper tag: 'div', class: 'd-flex flex-row justify-content-between align-items-center' do |ba|
+      ba.use :input, class: 'custom-select mx-1', error_class: 'is-invalid', valid_class: 'is-valid'


What is the purpose of having mx-1 here? In a newly-generated form it throws off alignment.

In the demo there is an override which resets the margins back to zero:

.custom-select[multiple], .custom-select:only-child { margin-left: 0 !important; margin-right: 0 !important; }

But I can't tell where that override is supposed to come from.

mx-1 adds horizontal margin to the inputs. Without this extra padding multiple custom selects looking glued bad together. Please send a screenshot/demo of your alignment problem.

The style overrides are optional, they are documented and have to be added manually to perfectly match bootstrap output. These additional styles are suggested. See documentation page.

Here is a screenshot of what I am referring to:

The select doesn't adhere to the left and right edges of the column, which is particularly noticeable in the middle of a bunch of text inputs. (The custom date and other custom_multi_select inputs share the same problem.)

I see now the custom styling in the documentation that you were referring to. I have just been following the SImple Form readme, so it wasn't clear to me that additional steps were needed. What do you think about including the additional stylesheets in the Simple Forms railtie so that they can be imported directly from the simple_form gem (without the need for copying and pasting so many files)?

That's outside my responsibility.

@jonathanhefner I too have been having a confusing time figuring out the right way to get things to look right with the default generated simple_form botostrap config intiializer.

I support the idea making a PR to have such a stylesheet, if you want to do it, give it a try and see if the maintainers will approve?

@jrochkind I submitted #60 which attempts to solve the issue using only the config initializer, but the PR seems to be stuck in limbo. If you want to copy "config/initializers/simple_form_bootstrap.rb" from that branch into your project though, that should be all you need.

For a preview of how it looks, see the screenshots in the companion PR for the main repo: heartcombo/simple_form#1587.

rafaelfranca · 2018-06-05T23:20:32Z

app/helpers/error_messages_helper.rb

+#    <%= error_messages_for(@object) %>
+#
+# Markup aliged with bootstrap v4
+module ErrorMessagesHelper


Do we need this? This was something that Rails had support for it and we removed because it was too magical, I really don't want to add it back in an example application.

It's currently unused in the example application. I thought it would be a good idea to add it as a reference. You never know, if some people find this useful. It's from a working example of a side project of mine. That's why I add comments and kudos to ryanb/nifty-generators. Of course will remove it, if it bothers you.

Imho, Simple Forms build in f.error_notification has a very minimalistic and simple output. The ErrorMessagesHelper / f.error_messages-helper with Bootstrap v4 markup would just provide a reference for some more extended error messages. Ready to use out-of-the-box. Example attached.

Fwiw, I think supporting both options is most sensible for this library, since not everyone using it must necessarily keep using inline errors and it also helps when migrating custom non-simple_form elements' styling.

guillaumewrobel · 2018-06-20T07:48:48Z

Amazing, thank you so much @rafaelfranca & @m5o

rafaelfranca · 2018-06-25T20:05:35Z

All praises to @m5o, I only pressed the button 😄

This was referenced Feb 27, 2018

update application to latest Rails v5.2.0.rc1 #57

Merged

prepare application structure / update bootstrap markup #58

Merged

m5o added 16 commits February 27, 2018 20:59

add User model with validations

f5fc659

* add User model with validations * add custom excluision_array_validator * add i18n

add example form images

45bac0a

* generated by Balsamiq wireframe * export all as png

add js behaviour helper

37419b1

* js helper to pre-fill forms with data * js helper for toggle, tooltip, and swap

refine layout and minor improvments

ad1db62

additional styles to fix simple_form markup issues

5c7bf50

* `form_abbr` * `form_collection_label` * `form_custom_checkbox_switch` * `form_floating_labels` * `form_invalid` * `form_multi_select`

minor docs format improvements

5eaa906

add vertical form example and tests

ef14034

# Conflicts: # app/controllers/examples/base_controller.rb

add horizontal form example and tests

5e6482c

add inline form example and tests

861b5a9

add custom form example and tests

4b13c4c

add input groups form example and tests

7430ddf

add floating_labels form example and tests

3ac3163

add additional tests

2fc77c4

* `date_fields_test` * `floating_labels_test` * `form_helper_test` * `submit_test`

setup rails routes

4331df4

simple form bootstrap v4.0.0 initializer

a2936d2

* vertical forms * horizontal forms * inline forms * custom fields form * floating labels form * input groups forms

remove whitespace and blank lines

470ae65

m5o force-pushed the bootstrap-v4 branch from 4444c83 to 470ae65 Compare February 27, 2018 20:04

re-use bootstrap input-padding defaults

0016c67

* re-use bootstrap input-padding defaults

m5o mentioned this pull request Mar 3, 2018

Allow custom errors classes to inputs heartcombo/simple_form#1552

Merged

m5o added 2 commits March 6, 2018 10:34

add error classes to inputs

a124d52

* add error classes to inputs * load lastest `simple_form` version from github * remove custom form_invalid styles :link: heartcombo/simple_form#1552

refine inline form markup

14e4c0b

* refine inline form markup * use `span` wrapper * use shorter `:error` instead of `:full_error`

rafaelfranca reviewed Mar 6, 2018

View reviewed changes

m5o mentioned this pull request Mar 7, 2018

add InputGroup component heartcombo/simple_form#1554

Closed

m5o added 4 commits March 8, 2018 12:06

add blueprint background to preview images

4008b0f

fix minor styling issues

50fcff0

apply API to register custom components

3d1e523

* apply API to register custom components * heartcombo/simple_form#1556

move simple_form compontents to lib

6d31fba

via: heartcombo/simple_form#1556 (comment)

m5o added 3 commits April 10, 2018 15:34

update rails numericality validation

8a29162

* http://guides.rubyonrails.org/active_record_validations.html#numericality

add step attribute to custom range

d382170

fix invalid-feedback for custom range input

bb36aca

m5o mentioned this pull request Apr 10, 2018

update bootstrap v4.1 generator template heartcombo/simple_form#1569

Merged

add development notice comments

dfccb70

m5o added 4 commits April 12, 2018 10:28

update simple_form to v4.0.0

e6c2780

* update simple_form to v4.0.0 * https://rubygems.org/gems/simple_form

update rails to v5.2.0

51e42e2

* update rails to v5.2.0 * http://railsdiff.org/5.2.0.rc2/5.2.0

prepare for travis CI

eae2cf3

multiple input-border-width

b3c5cbc

* fixes issue with Incompatible units: 'px' and 'rem'.

update bootstrap gem to v4.1

35e8bec

* update bootstrap gem to v4.1 * `bundle update bootstrap`

m5o changed the title ~~Bootstrap v4 support~~ Bootstrap v4.1 support Apr 17, 2018

add tests for helper

d7d2796

jonathanhefner reviewed Apr 23, 2018

View reviewed changes

apply primary button style to buttons with only btn class

c617d81

* apply primary button style to buttons with only `btn` class

m5o added 3 commits May 1, 2018 15:26

update bootstrap to v4.1.1

d41e7ba

* update bootstrap to v4.1.1 * `bundle update bootstrap`

tweak styles to match bootstrap v4.1.1

7f799ac

* tweak styles to match bootstrap v4.1.1

refactor hashrocket syntax

b5e0736

jonathanhefner reviewed May 18, 2018

View reviewed changes

rafaelfranca reviewed Jun 5, 2018

View reviewed changes

rafaelfranca merged commit b6bbe53 into heartcombo:master Jun 19, 2018

m5o deleted the bootstrap-v4 branch June 19, 2018 16:46

jonathanhefner mentioned this pull request Jul 12, 2018

Improve date, time, and datetime Bootstrap layout #60

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Bootstrap v4.1 support #56

Bootstrap v4.1 support #56

m5o commented Feb 26, 2018 •

edited

Loading

rafaelfranca commented Feb 27, 2018

rafaelfranca Mar 6, 2018

m5o Mar 6, 2018 •

edited

Loading

rafaelfranca Mar 6, 2018

rafaelfranca Mar 6, 2018

m5o Mar 6, 2018

rafaelfranca Mar 6, 2018

m5o Mar 7, 2018

guillaumewrobel commented Apr 10, 2018

guillaumewrobel commented Apr 16, 2018

m5o commented Apr 16, 2018

jonathanhefner Apr 23, 2018 •

edited

Loading

m5o Apr 24, 2018 •

edited

Loading

jonathanhefner Apr 24, 2018

m5o Apr 25, 2018

jonathanhefner Apr 25, 2018

m5o Apr 25, 2018

guillaumewrobel commented Apr 30, 2018

jonathanhefner May 18, 2018

m5o May 19, 2018

jonathanhefner May 19, 2018

m5o May 22, 2018

jrochkind Oct 17, 2018 •

edited

Loading

jonathanhefner Oct 17, 2018

rafaelfranca Jun 5, 2018

m5o Jun 6, 2018 •

edited

Loading

jimcavoli Jun 13, 2018

guillaumewrobel commented Jun 20, 2018

rafaelfranca commented Jun 25, 2018

Bootstrap v4.1 support #56

Bootstrap v4.1 support #56

Conversation

m5o commented Feb 26, 2018 • edited Loading

📺 Demo preview

Info

rafaelfranca commented Feb 27, 2018

Choose a reason for hiding this comment

m5o Mar 6, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

guillaumewrobel commented Apr 10, 2018

guillaumewrobel commented Apr 16, 2018

m5o commented Apr 16, 2018

jonathanhefner Apr 23, 2018 • edited Loading

Choose a reason for hiding this comment

m5o Apr 24, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

guillaumewrobel commented Apr 30, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jrochkind Oct 17, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

m5o Jun 6, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

guillaumewrobel commented Jun 20, 2018

rafaelfranca commented Jun 25, 2018

m5o commented Feb 26, 2018 •

edited

Loading

m5o Mar 6, 2018 •

edited

Loading

jonathanhefner Apr 23, 2018 •

edited

Loading

m5o Apr 24, 2018 •

edited

Loading

jrochkind Oct 17, 2018 •

edited

Loading

m5o Jun 6, 2018 •

edited

Loading