Add HTML5 input[type="color"] helper

8 files changed, 66 insertions, 0 deletions

diff --git a/actionpack/CHANGELOG.md b/actionpack/CHANGELOG.md
index 1e6e84ea4a..d6fcae4571 100644
--- a/actionpack/CHANGELOG.md
+++ b/actionpack/CHANGELOG.md
@@ -1,5 +1,7 @@
 ## Rails 4.0.0 (unreleased) ##
 
+*   Add `color_field` and `color_field_tag` helpers. *Carlos Galdino*
+
 *   `assert_generates`, `assert_recognizes`, and `assert_routing` all raise
     `Assertion` instead of `RoutingError` *David Chelimsky*
 
diff --git a/actionpack/lib/action_view/helpers/form_helper.rb b/actionpack/lib/action_view/helpers/form_helper.rb
index 6510610034..c5a9057698 100644
--- a/actionpack/lib/action_view/helpers/form_helper.rb
+++ b/actionpack/lib/action_view/helpers/form_helper.rb
@@ -939,6 +939,15 @@ module ActionView
         Tags::RadioButton.new(object_name, method, self, tag_value, options).render
       end
 
+      # Returns a text_field of type "color".
+      #
+      #   color_field("car", "color")
+      #   # => <input id="car_color" name="car[color]" type="color" value="#000000" />
+      #
+      def color_field(object_name, method, options = {})
+        Tags::ColorField.new(object_name, method, self, options).render
+      end
+
       # Returns an input of type "search" for accessing a specified attribute (identified by +method+) on an object
       # assigned to the template (identified by +object_name+). Inputs of type "search" may be styled differently by
       # some browsers.
diff --git a/actionpack/lib/action_view/helpers/form_tag_helper.rb b/actionpack/lib/action_view/helpers/form_tag_helper.rb
index e65b4e3e95..7da67cd2f9 100644
--- a/actionpack/lib/action_view/helpers/form_tag_helper.rb
+++ b/actionpack/lib/action_view/helpers/form_tag_helper.rb
@@ -524,6 +524,14 @@ module ActionView
         output.safe_concat("</fieldset>")
       end
 
+      # Creates a text field of type "color".
+      #
+      # ==== Options
+      # * Accepts the same options as text_field_tag.
+      def color_field_tag(name, value = nil, options = {})
+        text_field_tag(name, value, options.stringify_keys.update("type" => "color"))
+      end
+
       # Creates a text field of type "search".
       #
       # ==== Options
diff --git a/actionpack/lib/action_view/helpers/tags.rb b/actionpack/lib/action_view/helpers/tags.rb
index 5cd77c8ec3..c56165c769 100644
--- a/actionpack/lib/action_view/helpers/tags.rb
+++ b/actionpack/lib/action_view/helpers/tags.rb
@@ -8,6 +8,7 @@ module ActionView
       autoload :CollectionCheckBoxes
       autoload :CollectionRadioButtons
       autoload :CollectionSelect
+      autoload :ColorField
       autoload :DateField
       autoload :DateSelect
       autoload :DatetimeSelect
diff --git a/actionpack/lib/action_view/helpers/tags/color_field.rb b/actionpack/lib/action_view/helpers/tags/color_field.rb
new file mode 100644
index 0000000000..6f08f8483a
--- /dev/null
+++ b/actionpack/lib/action_view/helpers/tags/color_field.rb
@@ -0,0 +1,25 @@
+module ActionView
+  module Helpers
+    module Tags
+      class ColorField < TextField #:nodoc:
+        def render
+          options = @options.stringify_keys
+          options["value"] = @options.fetch("value") { validate_color_string(value(object)) }
+          @options = options
+          super
+        end
+
+        private
+
+          def validate_color_string(string)
+            regex = /#[0-9a-fA-F]{6}/
+            if regex.match(string)
+              string.downcase
+            else
+              "#000000"
+            end
+          end
+      end
+    end
+  end
+end
diff --git a/actionpack/test/lib/controller/fake_models.rb b/actionpack/test/lib/controller/fake_models.rb
index bbb4cc5ef3..82f38b5309 100644
--- a/actionpack/test/lib/controller/fake_models.rb
+++ b/actionpack/test/lib/controller/fake_models.rb
@@ -214,3 +214,6 @@ class RenderJsonTestException < Exception
     return { :error => self.class.name, :message => self.to_s }.to_json
   end
 end
+
+class Car < Struct.new(:color)
+end
diff --git a/actionpack/test/template/form_helper_test.rb b/actionpack/test/template/form_helper_test.rb
index 27cc3ad48a..76a18fa76a 100644
--- a/actionpack/test/template/form_helper_test.rb
+++ b/actionpack/test/template/form_helper_test.rb
@@ -83,6 +83,8 @@ class FormHelperTest < ActionView::TestCase
     @post.tags << Tag.new
 
     @blog_post = Blog::Post.new("And his name will be forty and four.", 44)
+
+    @car = Car.new("#000FFF")
   end
 
   Routes = ActionDispatch::Routing::RouteSet.new
@@ -610,6 +612,17 @@ class FormHelperTest < ActionView::TestCase
     )
   end
 
+  def test_color_field_with_valid_hex_color_string
+    expected = %{<input id="car_color" name="car[color]" type="color" value="#000fff" />}
+    assert_dom_equal(expected, color_field("car", "color"))
+  end
+
+  def test_color_field_with_invalid_hex_color_string
+    expected = %{<input id="car_color" name="car[color]" type="color" value="#000000" />}
+    @car.color = "#1234TR"
+    assert_dom_equal(expected, color_field("car", "color"))
+  end
+
   def test_search_field
     expected = %{<input id="contact_notes_query" name="contact[notes_query]" type="search" />}
     assert_dom_equal(expected, search_field("contact", "notes_query"))
diff --git a/actionpack/test/template/form_tag_helper_test.rb b/actionpack/test/template/form_tag_helper_test.rb
index 6574e13558..195adce180 100644
--- a/actionpack/test/template/form_tag_helper_test.rb
+++ b/actionpack/test/template/form_tag_helper_test.rb
@@ -444,6 +444,11 @@ class FormTagHelperTest < ActionView::TestCase
     )
   end
 
+  def test_color_field_tag
+    expected = %{<input id="car" name="car" type="color" />}
+    assert_dom_equal(expected, color_field_tag("car"))
+  end
+
   def test_search_field_tag
     expected = %{<input id="query" name="query" type="search" />}
     assert_dom_equal(expected, search_field_tag("query"))