Allow rendering of form submit buttons as HTML buttons, instead of in…

…put (#463)

* form submit can now be rendered as HTML button

* removed redundant instruction

* reverted changes to submit helper
added button helper, similar to submit
changed primary helper so that it can render as an input submit tag _or_ a button, depending on whether it is given a content block or an explicit option to render as a button

* changes to README:
added missing helpers to list
added explanation about render_as_button option to Submit Buttons section

CHANGELOG.md

@@ -31,6 +31,7 @@ In addition to these necessary markup changes, the bootstrap_form API itself has
 * [#455](https://github.com/bootstrap-ruby/bootstrap_form/pull/455): Support for i18n `:html` subkeys in help text - [@jsaraiva](https://github.com/jsaraiva).
 * Adds support for `label_as_placeholder` option, which will set the label text as an input fields placeholder (and hiding the label for sr_only).
 * [#449](https://github.com/bootstrap-ruby/bootstrap_form/pull/449): Passing `.form-row` overrides default `.form-group.row` in horizontal layouts.
+* Added an option to the `submit` (and `primary`, by transitivity) form tag helper, `render_as_button`, which when truthy makes the submit button render as a button instead of an input. This allows you to easily provide further styling to your form submission buttons, without requiring you to reinvent the wheel and use the `button` helper (and having to manually insert the typical Bootstrap classes). - [@jsaraiva](https://github.com/jsaraiva).
 * Your contribution here!
 
 ### Bugfixes

CONTRIBUTING.md

@@ -50,7 +50,7 @@ You may find using demo application useful for development and debugging.
 ### 6. Done!
 
 Somebody will shortly review your pull request and if everything is good will be
-merged into master brach. Eventually gem will be published with your changes.
+merged into master branch. Eventually gem will be published with your changes.
 
 ---
 

README.md

@@ -164,6 +164,8 @@ This gem wraps the following Rails form helpers:
 * time_zone_select
 * url_field
 * week_field
+* submit
+* button
 
 These helpers accept the same options as the standard Rails form helpers, with
 a few extra options:
@@ -421,6 +423,26 @@ You can specify your own classes like this:
 <%= f.submit "Log In", class: "btn btn-success" %>
 ```
 
+If the `primary` helper receives a `render_as_button: true` option or a block,
+it will be rendered as an HTML button, instead of an input tag. This allows you
+to specify HTML content and styling for your buttons (such as adding
+illustrative icons to them). For example, the following statements
+
+```erb
+<%= f.primary "Save changes <span class='fa fa-save'></span>".html_safe, render_as_button: true %>
+
+<%= f.primary do
+      concat 'Save changes '
+      concat content_tag(:span, nil, class: 'fa fa-save')
+    end %>
+```
+
+are equivalent, and each of them both be rendered as
+
+```html
+<button name="button" type="submit" class="btn btn-primary">Save changes <span class="fa fa-save"></span></button>
+```
+
 ### Accessing Rails Form Helpers
 
 If you want to use the original Rails form helpers for a particular field,

lib/bootstrap_form/helpers/bootstrap.rb

@@ -1,14 +1,25 @@
 module BootstrapForm
   module Helpers
     module Bootstrap
+      def button(value = nil, options = {}, &block)
+        options.reverse_merge! class: 'btn btn-secondary'
+        super
+      end
+
       def submit(name = nil, options = {})
         options.reverse_merge! class: 'btn btn-secondary'
-        super(name, options)
+        super
       end
 
-      def primary(name = nil, options = {})
+      def primary(name = nil, options = {}, &block)
         options.reverse_merge! class: 'btn btn-primary'
-        submit(name, options)
+
+        if options[:render_as_button] || block_given?
+          options.except! :render_as_button
+          button(name, options, &block)
+        else
+          submit(name, options)
+        end
       end
 
       def alert_message(title, options = {})

test/bootstrap_other_components_test.rb

@@ -117,6 +117,12 @@ class BootstrapOtherComponentsTest < ActionView::TestCase
     assert_equivalent_xml expected, output
   end
 
+  test "regular button uses proper css classes" do
+    expected = %{<button class="btn btn-secondary" name="button" type="submit"><span>I'm HTML!</span> in a button!</button>}
+    assert_equivalent_xml expected,
+                          @builder.button("<span>I'm HTML!</span> in a button!".html_safe)
+  end
+
   test "submit button defaults to rails action name" do
     expected = %{<input class="btn btn-secondary" name="commit" type="submit" value="Create User" />}
     assert_equivalent_xml expected, @builder.submit
@@ -137,6 +143,21 @@ class BootstrapOtherComponentsTest < ActionView::TestCase
     assert_equivalent_xml expected, @builder.primary("Submit Form")
   end
 
+  test "primary button can render as HTML button" do
+    expected = %{<button class="btn btn-primary" name="button" type="submit"><span>I'm HTML!</span> Submit Form</button>}
+    assert_equivalent_xml expected,
+                          @builder.primary("<span>I'm HTML!</span> Submit Form".html_safe,
+                                           render_as_button: true)
+  end
+
+  test "primary button with content block renders as HTML button" do
+    output = @builder.primary do
+      "<span>I'm HTML!</span> Submit Form".html_safe
+    end
+    expected = %{<button class="btn btn-primary" name="button" type="submit"><span>I'm HTML!</span> Submit Form</button>}
+    assert_equivalent_xml expected, output
+  end
+
   test "override primary button classes" do
     expected = %{<input class="btn btn-primary disabled" name="commit" type="submit" value="Submit Form" />}
     assert_equivalent_xml expected, @builder.primary("Submit Form", class: "btn btn-primary disabled")