The button, submit, and primary helpers can now receive an addi… (#483)

* The `button`, `submit`, and `primary` helpers can now receive an additional option, `extra_class`.

Author: jsaraiva

CHANGELOG.md

@@ -8,6 +8,7 @@
 
 * [461](https://github.com/bootstrap-ruby/bootstrap_form/pull/461): default form-inline class applied to parent content div on date select helpers. Can override with a :skip_inline option on the field helper - [@lancecarlson](https://github.com/lancecarlson).
 * Your contribution here!
+* The `button`, `submit`, and `primary` helpers can now receive an additional option, `extra_class`. This option allows us to specify additional CSS classes to be added to the corresponding button/input, _while_ maintaining the original default ones. E.g., a primary button with an `extra_class` 'test-button' will have its final CSS classes declaration as 'btn btn-primary test-button'.
 
 ### Bugfixes
 

README.md

@@ -401,7 +401,7 @@ this defining these selects as `inline-block` and a width of `auto`.
 
 ### Submit Buttons
 
-The `btn btn-secondary` css classes are automatically added to your submit
+The `btn btn-secondary` CSS classes are automatically added to your submit
 buttons.
 
 ```erb
@@ -441,6 +441,29 @@ are equivalent, and each of them both be rendered as
 <button name="button" type="submit" class="btn btn-primary">Save changes <span class="fa fa-save"></span></button>
 ```
 
+If you wish to add additional CSS classes to your button, while keeping the
+default ones, you can use the `extra_class` option. This is particularly useful
+for adding extra details to buttons (without forcing you to repeat the
+Bootstrap classes), or for element targeting via CSS classes.
+Be aware, however, that using the `class` option will discard any extra classes
+you add. As an example, the following button declarations
+
+```erb
+<%= f.primary "My Nice Button", extra_class: 'my-button' %>
+
+<%= f.primary "My Button", class: 'my-button' %>
+```
+
+will be rendered as
+
+```html
+<input type="submit" value="My Nice Button" class="btn btn-primary my-button" />
+
+<input type="submit" value="My Button" class="my-button" />
+```
+
+(some unimportant HTML attributes have been removed for simplicity)
+
 ### 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,18 +1,19 @@
 module BootstrapForm
   module Helpers
     module Bootstrap
+
       def button(value = nil, options = {}, &block)
-        options.reverse_merge! class: 'btn btn-secondary'
+        setup_css_class 'btn btn-secondary', options
         super
       end
 
       def submit(name = nil, options = {})
-        options.reverse_merge! class: 'btn btn-secondary'
+        setup_css_class 'btn btn-secondary', options
         super
       end
 
       def primary(name = nil, options = {}, &block)
-        options.reverse_merge! class: 'btn btn-primary'
+        setup_css_class 'btn btn-primary', options
 
         if options[:render_as_button] || block_given?
           options.except! :render_as_button
@@ -104,6 +105,19 @@ def input_group_content(content)
       def static_class
         "form-control-plaintext"
       end
+
+
+      private
+
+        def setup_css_class(the_class, options = {})
+          unless options.has_key? :class
+            if extra_class = options.delete(:extra_class)
+              the_class = "#{the_class} #{extra_class}"
+            end
+            options[:class] = the_class
+          end
+        end
+
     end
   end
 end

test/bootstrap_other_components_test.rb

@@ -137,6 +137,12 @@ class BootstrapOtherComponentsTest < ActionView::TestCase
                           @builder.button("<span>I'm HTML!</span> in a button!".html_safe)
   end
 
+  test "regular button can have extra css classes" do
+    expected = %{<button class="btn btn-secondary test-button" 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, extra_class: 'test-button')
+  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
@@ -147,6 +153,11 @@ class BootstrapOtherComponentsTest < ActionView::TestCase
     assert_equivalent_xml expected, @builder.submit("Submit Form")
   end
 
+  test "submit button can have extra css classes" do
+    expected = %{<input class="btn btn-secondary test-button" name="commit" type="submit" value="Submit Form" />}
+    assert_equivalent_xml expected, @builder.submit("Submit Form", extra_class: 'test-button')
+  end
+
   test "override submit button classes" do
     expected = %{<input class="btn btn-primary" name="commit" type="submit" value="Submit Form" />}
     assert_equivalent_xml expected, @builder.submit("Submit Form", class: "btn btn-primary")
@@ -157,6 +168,11 @@ class BootstrapOtherComponentsTest < ActionView::TestCase
     assert_equivalent_xml expected, @builder.primary("Submit Form")
   end
 
+  test "primary button can have extra css classes" do
+    expected = %{<input class="btn btn-primary test-button" name="commit" type="submit" value="Submit Form" />}
+    assert_equivalent_xml expected, @builder.primary("Submit Form", extra_class: 'test-button')
+  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,