Chapter 03 - Fix 'label: false'

app/views/things/new.html.haml

@@ -1,9 +1,8 @@
 %h3 What do you want to talk about?
 
 = simple_form_for @form do |f|
-  - # TODO: can anyone please make things work with simple_form so we don't have to specify label: false, etc. everywhere?
-  = f.input :name, placeholder: "Name", label: false, readonly: @form.readonly?(:name)
-  = f.input :description, placeholder: "Description", label: false
+  = f.input :name, readonly: @form.readonly?(:name)
+  = f.input :description
 
   = f.button :submit, class: :expand
 

config/initializers/simple_form.rb

@@ -22,9 +22,9 @@
     b.use :placeholder
 
     ## Optional extensions
-    # They are disabled unless you pass `f.input EXTENSION_NAME => :lookup`
+    # They are disabled unless you pass `f.input EXTENSION_NAME => true`
     # to the input. If so, they will retrieve the values from the model
-    # if any exists. If you want to enable the lookup for any of those
+    # if any exists. If you want to enable any of those
     # extensions by default, you can change `b.optional` to `b.use`.
 
     # Calculates maxlength from length validations for string inputs
@@ -43,6 +43,12 @@
     b.use :label_input
     b.use :hint,  wrap_with: { tag: :span, class: :hint }
     b.use :error, wrap_with: { tag: :span, class: :error }
+
+    ## full_messages_for
+    # If you want to display the full error message for the attribute, you can
+    # use the component :full_error, like:
+    #
+    # b.use :full_error, wrap_with: { tag: :span, class: :error }
   end
 
   # The default wrapper to be used by the FormBuilder.
@@ -66,7 +72,7 @@
   config.error_notification_tag = :div
 
   # CSS class to add for error notification helper.
-  config.error_notification_class = 'alert alert-error'
+  config.error_notification_class = 'error_notification'
 
   # ID to add for error notification helper.
   # config.error_notification_id = nil
@@ -84,21 +90,21 @@
   # config.collection_wrapper_class = nil
 
   # You can wrap each item in a collection of radio/check boxes with a tag,
-  # defaulting to :span. Please note that when using :boolean_style = :nested,
-  # SimpleForm will force this option to be a label.
+  # defaulting to :span.
   # config.item_wrapper_tag = :span
 
   # You can define a class to use in all item wrappers. Defaulting to none.
   # config.item_wrapper_class = nil
 
   # How the label text should be generated altogether with the required text.
-  # config.label_text = lambda { |label, required| "#{required} #{label}" }
+  # config.label_text = lambda { |label, required, explicit_label| "#{required} #{label}" }
 
   # You can define the class to use on all labels. Default is nil.
-  config.label_class = 'control-label'
+  # config.label_class = nil
 
-  # You can define the class to use on all forms. Default is simple_form.
-  # config.form_class = :simple_form
+  # You can define the default class to be used on forms. Can be overriden
+  # with `html: { :class }`. Defaulting to none.
+  # config.default_form_class = nil
 
   # You can define which elements should obtain additional classes
   # config.generate_additional_classes_for = [:wrapper, :label, :input]
@@ -125,6 +131,10 @@
   # type as key and the wrapper that will be used for all inputs with specified type.
   # config.wrapper_mappings = { string: :prepend }
 
+  # Namespaces where SimpleForm should look for custom input classes that
+  # override default inputs.
+  # config.custom_inputs_namespaces << "CustomInputs"
+
   # Default priority for time_zone inputs.
   # config.time_zone_priority = nil
 
@@ -142,4 +152,14 @@
 
   # Default class for inputs
   # config.input_class = nil
+
+  # Define the default class of the input wrapper of the boolean input.
+  config.boolean_label_class = 'checkbox'
+
+  # Defines if the default input wrapper class should be included in radio
+  # collection wrappers.
+  # config.include_default_input_wrapper_class = true
+
+  # Defines which i18n scope will be used in Simple Form.
+  # config.i18n_scope = 'simple_form'
 end

config/initializers/simple_form_foundation.rb

@@ -1,26 +1,107 @@
 # 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 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_form, class: :input, 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 :input
+    b.use :error, wrap_with: { tag: :small, class: :error }
+
+    # 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
+
+  # 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
     b.optional :maxlength
     b.optional :pattern
     b.optional :min_max
     b.optional :readonly
-    b.use :label_input
-    b.use :error, wrap_with: { tag: :small }
 
-    # 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 :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
+
+  # Examples of use:
+  # - wrapper_html: {class: 'row'}, custom_wrapper_html: {class: 'column small-12'}
+  # - custom_wrapper_html: {class: 'column small-3 end'}
+  config.wrappers :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_form
 end

config/locales/simple_form.en.yml

@@ -10,7 +10,11 @@ en:
       # html: '<abbr title="required">*</abbr>'
     error_notification:
       default_message: "Please review the problems below:"
-    # Labels and hints examples
+    placeholders:
+      thing:
+        name: Name
+        description: Description
+    # Examples
     # labels:
     #   defaults:
     #     password: 'Password'
@@ -23,4 +27,9 @@ en:
     #   defaults:
     #     username: 'User name to sign in.'
     #     password: 'No special characters, please.'
-
+    # include_blanks:
+    #   defaults:
+    #     age: 'Rather not say'
+    # prompts:
+    #   defaults:
+    #     age: 'Select your age'