form-bootstrap 0.0.1 → 0.0.2

data/README.md

@@ -28,57 +28,78 @@ Install the gem
 
     bundle
 
-Add the following to application.rb
 
-    ActionView::Base.field_error_proc = proc { |input, instance| input }
+Example Form
+------------
 
+    <%= form_bootstrap_for(@user, help: :block) do |f| %>
+      <fieldset>
+        <legend>Sign Up Today!</legend>
+        <%= f.alert_message "Please fix the errors below." %>
 
-Example (HAML)
---------------
+        <%= f.text_field :email, autofocus: :true %>
+        <%= f.password_field :password, help: 'Must be at least 6 characters long' %>
+        <%= f.password_field :password_confirmation, label: 'Confirm Password' %>
+        <%= f.actions 'Sign Up' %>
+      </fieldset>
+    <% end %>
 
-    = form_bootstrap_for @user do |f|
-      %fieldset
-        %legend
-          Sign Up
-  
-        = f.error_message "Please fix the errors below."
-  
-        = f.text_field :email, label: 'Email Address'
-        = f.password_field :password, label: 'Password', help: 'Minimum 6 characters'
-        = f.actions 'Sign Up'
+![Example Form](https://github.com/potenza/form-bootstrap/raw/master/assets/example_form.png)
 
 
-Example Output
---------------
+Example HTML
+------------
 
     <form accept-charset="UTF-8" action="/users" class="new_user" id="new_user" method="post">
       ...
       <fieldset>
-        <legend>
-          Sign Up
-        </legend>
-      
-        <div class="clearfix ">
+        <legend>Sign Up Today!</legend>
+
+        <div class="clearfix">
           <label for="user_email">Email</label>
           <div class="input">
             <input id="user_email" name="user[email]" size="30" type="text" />
           </div>
         </div>
-
-        <div class="clearfix ">
+        <div class="clearfix">
           <label for="user_password">Password</label>
           <div class="input">
             <input id="user_password" name="user[password]" size="30" type="password" />
-            <span class="help-inline">Minimum 6 characters</span>
+            <span class="help-block">Must be at least 6 characters long</span>
+          </div>
+        </div>
+        <div class="clearfix">
+          <label for="user_password_confirmation">Confirm Password</label>
+          <div class="input">
+            <input id="user_password_confirmation" name="user[password_confirmation]" size="30" type="password" />
           </div>
         </div>
-
         <div class="actions">
           <input class="btn primary" name="commit" type="submit" value="Sign Up" />
         </div>
       </fieldset>
     </form>
-    
+
+
+Errors
+------
+
+When a validation error is triggered, the field will be outlined and the
+error will be displayed next to the field. Rails normally wraps fields
+in a div (field_with_errors), but this behavior is suppressed when `form_bootstrap_for` is called.
+
+![Example form with errors](https://github.com/potenza/form-bootstrap/raw/master/assets/example_form_error.png)
+
+
+Options
+-------
+
+By default, help (and error) messages will be placed to the right of the
+input field. If you want to place them under the input field, pass the option
+`help: :block`:
+
+    <%= form_bootstrap_for @user, help: :block do |f| %>
+
 
 Credits
 -------

data/lib/form-bootstrap/builder.rb

@@ -2,17 +2,20 @@ module FormBootstrap
   class Builder < ActionView::Helpers::FormBuilder
     delegate :content_tag, to: :@template
 
+    def initialize(object_name, object, template, options, proc)
+      super
+      @help_css = (options[:help].try(:to_sym) == :block) ? 'help-block' : 'help-inline'
+    end
+
     %w{text_field text_area password_field collection_select}.each do |method_name|
       define_method(method_name) do |name, *args|
-        options = args.extract_options!
+        options = args.extract_options!.stringify_keys
         content_tag :div, class: "clearfix#{(' error' if object.errors[name].any?)}"  do
-          field_label(name, *args) +
+          label(name, options['label']) +
           content_tag(:div, class: 'input') do
-            help = (object.errors[name].any?) ? object.errors[name].join(', ') : options[:help]
-            super(name, *args) +
-            content_tag(:span, class: 'help-inline') do
-              help
-            end
+            help = object.errors[name].any? ? object.errors[name].join(', ') : options['help']
+            help = content_tag(:span, class: @help_css) { help } if help
+            super(name, *args, options.except('label', 'help')) + help
           end
         end
       end
@@ -24,21 +27,15 @@ module FormBootstrap
       end
     end
 
-    def error_message(title)
+    def alert_message(title, *args)
+      options = args.extract_options!
+      css = options[:class] || "alert-message error"
+
       if object.errors.full_messages.any?
-        content_tag :div, class: "alert-message error" do
-          content_tag :p do
-            title
-          end
+        content_tag :div, class: css do
+          title
         end
       end
     end
-
-  private
-
-    def field_label(name, *args)
-      options = args.extract_options!
-      label(name, options[:label])
-    end
   end
 end

data/lib/form-bootstrap/helper.rb

@@ -2,7 +2,17 @@ module FormBootstrap
   module Helper
     def form_bootstrap_for(object, options = {}, &block)
       options[:builder] = FormBootstrap::Builder
-      form_for(object, options, &block)
+      temporarily_disable_field_error_proc do
+        form_for(object, options, &block)
+      end
+    end
+
+    def temporarily_disable_field_error_proc
+      original_proc = ActionView::Base.field_error_proc
+      ActionView::Base.field_error_proc = proc { |input, instance| input }
+      yield
+    ensure
+      ActionView::Base.field_error_proc = original_proc
     end
   end
 end

data/lib/form-bootstrap/version.rb

@@ -1,3 +1,3 @@
 module FormBootstrap
-  VERSION = "0.0.1"
+  VERSION = "0.0.2"
 end

data/test/dummy/config/application.rb

@@ -42,4 +42,3 @@ module Dummy
     config.assets.version = '1.0'
   end
 end
-

data/test/form-bootstrap_test.rb

@@ -6,48 +6,96 @@ class FormBootstrapTest < ActionView::TestCase
     @builder = FormBootstrap::Builder.new :user, @user, self, {}, nil
   end
 
+  test "helper method to wrap form bootstrap builder" do
+    expected = %{<form accept-charset="UTF-8" action="/users" class="new_user" id="new_user" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /></div></form>}
+    assert_equal expected, form_bootstrap_for(@user) { |f| nil }
+  end
+
+  test "alert message is wrapped correctly" do
+    @user.email = nil
+    @user.valid?
+    expected = %{<div class="alert-message error">Please fix the following errors:</div>}
+    assert_equal expected, @builder.alert_message('Please fix the following errors:')
+  end
+
+  test "changing the class name for the alert message" do
+    @user.email = nil
+    @user.valid?
+    expected = %{<div class="my-css-class">Please fix the following errors:</div>}
+    assert_equal expected, @builder.alert_message('Please fix the following errors:', class: 'my-css-class')
+  end
+
   test "text fields are wrapped correctly" do
-    expected = %{<div class="clearfix"><label for="user_email">Email</label><div class="input"><input id="user_email" name="user[email]" size="30" type="text" value="steve@example.com" /><span class="help-inline"></span></div></div>}
+    expected = %{<div class="clearfix"><label for="user_email">Email</label><div class="input"><input id="user_email" name="user[email]" size="30" type="text" value="steve@example.com" /></div></div>}
     assert_equal expected, @builder.text_field(:email)
   end
 
   test "password fields are wrapped correctly" do
-    expected = %{<div class="clearfix"><label for="user_password">Password</label><div class="input"><input id="user_password" name="user[password]" size="30" type="text" value="secret" /><span class="help-inline"></span></div></div>}
+    expected = %{<div class="clearfix"><label for="user_password">Password</label><div class="input"><input id="user_password" name="user[password]" size="30" type="text" value="secret" /></div></div>}
     assert_equal expected, @builder.text_field(:password)
   end
 
   test "text areas are wrapped correctly" do
-    expected = %{<div class="clearfix"><label for="user_comments">Comments</label><div class="input"><textarea cols="40" id="user_comments" name="user[comments]" rows="20">my comment</textarea><span class="help-inline"></span></div></div>}
+    expected = %{<div class="clearfix"><label for="user_comments">Comments</label><div class="input"><textarea cols="40" id="user_comments" name="user[comments]" rows="20">my comment</textarea></div></div>}
     assert_equal expected, @builder.text_area(:comments)
   end
 
   test "selects are wrapped correctly" do
-    expected = %{<div class="clearfix"><label for="user_status">Status</label><div class="input"><select id="user_status" name="user[status]"></select><span class="help-inline"></span></div></div>}
+    expected = %{<div class="clearfix"><label for="user_status">Status</label><div class="input"><select id="user_status" name="user[status]"></select></div></div>}
     assert_equal expected, @builder.collection_select(:status, [], :id, :name)
   end
 
+  test "changing the label text" do
+    expected = %{<div class="clearfix"><label for="user_email">Email Address</label><div class="input"><input id="user_email" name="user[email]" size="30" type="text" value="steve@example.com" /></div></div>}
+    assert_equal expected, @builder.text_field(:email, label: 'Email Address')
+  end
+
+  test "passing :help to a field displays it inline" do
+    expected = %{<div class="clearfix"><label for="user_email">Email</label><div class="input"><input id="user_email" name="user[email]" size="30" type="text" value="steve@example.com" /><span class="help-inline">This is required</span></div></div>}
+    assert_equal expected, @builder.text_field(:email, help: 'This is required')
+  end
+
+  test "passing other options to a field get passed through" do
+    expected = %{<div class="clearfix"><label for="user_email">Email</label><div class="input"><input autofocus="autofocus" id="user_email" name="user[email]" size="30" type="text" value="steve@example.com" /></div></div>}
+    assert_equal expected, @builder.text_field(:email, autofocus: true)
+  end
+
   test "actions are wrapped correctly" do
     expected = %{<div class="actions"><input class="btn primary" name="commit" type="submit" value="Submit" /></div>}
     assert_equal expected, @builder.actions('Submit')
   end
 
-  test "error messages are wrapped correctly" do
+  test "passing :help :block to the form builder" do
+    output = form_bootstrap_for(@user, help: :block) do |f|
+      f.text_field(:email, help: 'This is required')
+    end
+
+    expected = %{<form accept-charset="UTF-8" action="/users" class="new_user" id="new_user" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /></div><div class="clearfix"><label for="user_email">Email</label><div class="input"><input id="user_email" name="user[email]" size="30" type="text" value="steve@example.com" /><span class="help-block">This is required</span></div></div></form>}
+    assert_equal expected, output
+  end
+
+  test "the field contains the error and is not wrapped in div.field_with_errors when form_bootstrap_for is used" do
     @user.email = nil
     @user.valid?
-    expected = %{<div class="alert-message error"><p>Please fix the following errors:</p></div>}
-    assert_equal expected, @builder.error_message('Please fix the following errors:')
+
+    output = form_bootstrap_for(@user, help: :block) do |f|
+      f.text_field(:email, help: 'This is required')
+    end
+
+    expected = %{<form accept-charset="UTF-8" action="/users" class="new_user" id="new_user" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /></div><div class="clearfix error"><label for="user_email">Email</label><div class="input"><input id="user_email" name="user[email]" size="30" type="text" /><span class="help-block">can't be blank, is too short (minimum is 5 characters)</span></div></div></form>}
+    assert_equal expected, output
   end
 
-  test "help message contains the field error when invalid" do
+  test "the field is wrapped with div.field_with_errors when form_for is used" do
     @user.email = nil
     @user.valid?
-    expected = %{<div class="clearfix error"><div class="field_with_errors"><label for="user_email">Email</label></div><div class="input"><div class="field_with_errors"><input id="user_email" name="user[email]" size="30" type="text" /></div><span class="help-inline">can't be blank, is too short (minimum is 5 characters)</span></div></div>}
-    assert_equal expected, @builder.text_field(:email)
-  end
 
-  test "helper method to wrap form bootstrap builder" do
-    expected = %{<form accept-charset="UTF-8" action="/users" class="new_user" id="new_user" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /></div></form>}
-    assert_equal expected, form_bootstrap_for(@user) { |f| nil }
+    output = form_for(@user, builder: FormBootstrap::Builder, help: :block) do |f|
+      f.text_field(:email, help: 'This is required')
+    end
+
+    expected = %{<form accept-charset="UTF-8" action="/users" class="new_user" id="new_user" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /></div><div class="clearfix error"><div class="field_with_errors"><label for="user_email">Email</label></div><div class="input"><div class="field_with_errors"><input id="user_email" name="user[email]" size="30" type="text" /></div><span class="help-block">can't be blank, is too short (minimum is 5 characters)</span></div></div></form>}
+    assert_equal expected, output
   end
 end
 

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: form-bootstrap
 version: !ruby/object:Gem::Version
-  version: 0.0.1
+  version: 0.0.2
   prerelease: 
 platform: ruby
 authors:
@@ -13,7 +13,7 @@ date: 2012-01-06 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
-  requirement: &70322401781560 !ruby/object:Gem::Requirement
+  requirement: &70259696646240 !ruby/object:Gem::Requirement
     none: false
     requirements:
     - - ~>
@@ -21,10 +21,10 @@ dependencies:
         version: 3.1.3
   type: :runtime
   prerelease: false
-  version_requirements: *70322401781560
+  version_requirements: *70259696646240
 - !ruby/object:Gem::Dependency
   name: sqlite3
-  requirement: &70322401719540 !ruby/object:Gem::Requirement
+  requirement: &70259696643700 !ruby/object:Gem::Requirement
     none: false
     requirements:
     - - ! '>='
@@ -32,7 +32,7 @@ dependencies:
         version: '0'
   type: :development
   prerelease: false
-  version_requirements: *70322401719540
+  version_requirements: *70259696643700
 description: Provides a builder that makes it super easy to take advantage of Twitter
   Bootstrap forms styles.
 email: