From d837b080453fc0c1b4fb0a8bd5f70e79bd87bffe Mon Sep 17 00:00:00 2001 From: Dimitri Jorge Date: Tue, 29 Jul 2014 20:56:44 +0200 Subject: [PATCH 1/4] Upgrade the foundation form builder (demo http://github.com/jorge-d/simple_form-foundation) --- .../initializers/simple_form_foundation.rb | 76 ++++++++++++++++++- 1 file changed, 74 insertions(+), 2 deletions(-) diff --git a/lib/generators/simple_form/templates/config/initializers/simple_form_foundation.rb b/lib/generators/simple_form/templates/config/initializers/simple_form_foundation.rb index 3ab5aa7b..4b3f68cb 100644 --- a/lib/generators/simple_form/templates/config/initializers/simple_form_foundation.rb +++ b/lib/generators/simple_form/templates/config/initializers/simple_form_foundation.rb @@ -1,6 +1,9 @@ # Use this setup block to configure all options available in SimpleForm. SimpleForm.setup do |config| - config.wrappers :foundation, class: :input, hint_class: :field_with_hint, error_class: :error do |b| + # Don't forget to edit this file to adapt to your needs (specially + # all the grid-related classes) + + config.wrappers :vertical_foundation, class: :input, hint_class: :field_with_hint, error_class: :error do |b| b.use :html5 b.use :placeholder b.optional :maxlength @@ -15,12 +18,81 @@ SimpleForm.setup do |config| # b.use :hint, wrap_with: { tag: :span, class: :hint } end + config.wrappers :horizontal_form, tag: 'div', class: 'row', hint_class: :field_with_hint, error_class: :error do |b| + b.use :html5 + b.use :placeholder + b.optional :maxlength + b.optional :pattern + b.optional :min_max + b.optional :readonly + + b.wrapper :label_wrapper, tag: :div, class: 'small-3 columns' do |ba| + ba.use :label, class: 'right inline' + end + + b.wrapper :right_input_wrapper, tag: :div, class: 'small-9 columns' do |ba| + ba.use :input + ba.use :error, wrap_with: { tag: :small, class: :error } + ba.use :hint, wrap_with: { tag: :span, class: :hint } + end + end + + config.wrappers :horizontal_radio_and_checkboxes, tag: 'div', class: 'row' do |b| + b.use :html5 + b.optional :readonly + + b.wrapper :container_wrapper, tag: 'div', class: 'small-offset-3 small-9 columns' do |ba| + ba.wrapper :tag => 'label', :class => 'checkbox' do |bb| + bb.use :input + bb.use :label_text + end + + ba.use :error, wrap_with: { tag: :small, class: :error } + # ba.use :hint, wrap_with: { tag: :span, class: :hint } + end + end + + config.wrappers :inline_form, tag: 'div', class: 'column small-4', hint_class: :field_with_hint, error_class: :error do |b| + b.use :html5 + b.use :placeholder + b.optional :maxlength + b.optional :pattern + b.optional :min_max + b.optional :readonly + + b.use :label, class: 'hidden-for-small-up' + b.use :input + + b.use :error, wrap_with: { tag: :small, class: :error } + # b.use :hint, wrap_with: { tag: :span, class: :hint } + end + + # Example of use: + # - wrapper_html: {class: 'row'}, custom_wrapper_html: {class: 'column small-12'} + # - custom_wrapper_html: {class: 'column small-3 end'} + config.wrappers :foundation_customizable_wrapper, tag: 'div', error_class: :error do |b| + b.use :html5 + b.optional :readonly + + b.wrapper :custom_wrapper, tag: :div do |ba| + ba.use :label_input + end + + b.use :error, wrap_with: { tag: :small, class: :error } + # b.use :hint, wrap_with: { tag: :span, class: :hint } + end + # CSS class for buttons config.button_class = 'button' + # Set this to div to make the checkbox and radio properly work + # otherwise simple_form adds a label tag instead of a div arround + # the nested label + config.item_wrapper_tag = :div + # CSS class to add for error notification helper. config.error_notification_class = 'alert-box alert' # The default wrapper to be used by the FormBuilder. - config.default_wrapper = :foundation + config.default_wrapper = :vertical_foundation end From eb3ee37383fd4568995ff9ddd471b66dcb8fd115 Mon Sep 17 00:00:00 2001 From: Dimitri Jorge Date: Tue, 29 Jul 2014 21:03:41 +0200 Subject: [PATCH 2/4] Update readme --- README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index a1e588bb..5341b03c 100644 --- a/README.md +++ b/README.md @@ -55,9 +55,9 @@ For more information see the generator output, our [example application code](https://github.com/rafaelfranca/simple_form-bootstrap) and [the live example app](http://simple-form-bootstrap.plataformatec.com.br/). -### Zurb Foundation 3 +### Zurb Foundation 5 -To generate wrappers that are compatible with [Zurb Foundation 3](http://foundation.zurb.com/), pass +To generate wrappers that are compatible with [Zurb Foundation 5](http://foundation.zurb.com/), pass the `foundation` option to the generator, like this: ```console @@ -68,7 +68,7 @@ Please note that the Foundation wrapper does not support the `:hint` option by d enable hints, please uncomment the appropriate line in `config/initializers/simple_form_foundation.rb`. You will need to provide your own CSS styles for hints. -Please see the [instructions on how to install Foundation in a Rails app](http://foundation.zurb.com/old-docs/f3/rails.php). +Please see the [instructions on how to install Foundation in a Rails app](http://foundation.zurb.com/docs/applications.html). ## Usage From 8e7ba80e2955acfac09bfd66575b82876a6c2fb3 Mon Sep 17 00:00:00 2001 From: Dimitri Jorge Date: Thu, 31 Jul 2014 19:36:59 +0200 Subject: [PATCH 3/4] Improve foundation initializer code quality and comment to make it clearer --- .../initializers/simple_form_foundation.rb | 25 +++++++++++++------ 1 file changed, 17 insertions(+), 8 deletions(-) diff --git a/lib/generators/simple_form/templates/config/initializers/simple_form_foundation.rb b/lib/generators/simple_form/templates/config/initializers/simple_form_foundation.rb index 4b3f68cb..495ef355 100644 --- a/lib/generators/simple_form/templates/config/initializers/simple_form_foundation.rb +++ b/lib/generators/simple_form/templates/config/initializers/simple_form_foundation.rb @@ -1,9 +1,13 @@ # Use this setup block to configure all options available in SimpleForm. SimpleForm.setup do |config| - # Don't forget to edit this file to adapt to your needs (specially + # Don't forget to edit this file to adapt it to your needs (specially # all the grid-related classes) + # + # Please note that hints are commented out by default since Foundation + # does't provide styles for hints. You will need to provide your own CSS styles for hints. + # Uncomment them to enable hints. - config.wrappers :vertical_foundation, class: :input, hint_class: :field_with_hint, error_class: :error do |b| + config.wrappers :vertical_form, class: :input, hint_class: :field_with_hint, error_class: :error do |b| b.use :html5 b.use :placeholder b.optional :maxlength @@ -13,8 +17,6 @@ SimpleForm.setup do |config| b.use :label_input b.use :error, wrap_with: { tag: :small, class: :error } - # Uncomment the following line to enable hints. The line is commented out by default since Foundation - # does't provide styles for hints. You will need to provide your own CSS styles for hints. # b.use :hint, wrap_with: { tag: :span, class: :hint } end @@ -33,7 +35,7 @@ SimpleForm.setup do |config| b.wrapper :right_input_wrapper, tag: :div, class: 'small-9 columns' do |ba| ba.use :input ba.use :error, wrap_with: { tag: :small, class: :error } - ba.use :hint, wrap_with: { tag: :span, class: :hint } + # ba.use :hint, wrap_with: { tag: :span, class: :hint } end end @@ -52,6 +54,13 @@ SimpleForm.setup do |config| end end + # Foundation does not provide a way to handle inline forms + # This wrapper can be used to create an inline form + # by hiding that labels on every screen sizes ('hidden-for-small-up'). + # + # Note that you need to adapt this wrapper to your needs. If you need a 4 + # columns form then change the wrapper class to 'small-3', if you need + # only two use 'small-6' and so on. config.wrappers :inline_form, tag: 'div', class: 'column small-4', hint_class: :field_with_hint, error_class: :error do |b| b.use :html5 b.use :placeholder @@ -67,10 +76,10 @@ SimpleForm.setup do |config| # b.use :hint, wrap_with: { tag: :span, class: :hint } end - # Example of use: + # Examples of use: # - wrapper_html: {class: 'row'}, custom_wrapper_html: {class: 'column small-12'} # - custom_wrapper_html: {class: 'column small-3 end'} - config.wrappers :foundation_customizable_wrapper, tag: 'div', error_class: :error do |b| + config.wrappers :customizable_wrapper, tag: 'div', error_class: :error do |b| b.use :html5 b.optional :readonly @@ -94,5 +103,5 @@ SimpleForm.setup do |config| config.error_notification_class = 'alert-box alert' # The default wrapper to be used by the FormBuilder. - config.default_wrapper = :vertical_foundation + config.default_wrapper = :vertical_form end From 03f5a3d451e15d36ff51202e776f00328ade6453 Mon Sep 17 00:00:00 2001 From: Dimitri Jorge Date: Thu, 31 Jul 2014 19:42:55 +0200 Subject: [PATCH 4/4] Fix simple form generator test --- test/generators/simple_form_generator_test.rb | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/test/generators/simple_form_generator_test.rb b/test/generators/simple_form_generator_test.rb index afb6caa2..e7f439ab 100644 --- a/test/generators/simple_form_generator_test.rb +++ b/test/generators/simple_form_generator_test.rb @@ -29,8 +29,8 @@ class SimpleFormGeneratorTest < Rails::Generators::TestCase run_generator %w(--foundation) assert_file 'config/initializers/simple_form.rb', /config\.default_wrapper = :default/, /config\.boolean_style = :nested/ - assert_file 'config/initializers/simple_form_foundation.rb', /config\.wrappers :foundation/, - /config\.default_wrapper = :foundation/ + assert_file 'config/initializers/simple_form_foundation.rb', /config\.wrappers :vertical_form/, + /config\.default_wrapper = :vertical_form/, /config\.item_wrapper_tag = :div/ end %W(erb haml slim).each do |engine|