Skip to content

Commit 83b01ab

Browse files
jsaraivalcreid
authored andcommitted
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`.
1 parent e8ce49e commit 83b01ab

File tree

4 files changed

+58
-4
lines changed

4 files changed

+58
-4
lines changed

CHANGELOG.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88

99
* [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).
1010
* Your contribution here!
11+
* 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'.
1112

1213
### Bugfixes
1314

README.md

Lines changed: 24 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -401,7 +401,7 @@ this defining these selects as `inline-block` and a width of `auto`.
401401

402402
### Submit Buttons
403403

404-
The `btn btn-secondary` css classes are automatically added to your submit
404+
The `btn btn-secondary` CSS classes are automatically added to your submit
405405
buttons.
406406

407407
```erb
@@ -441,6 +441,29 @@ are equivalent, and each of them both be rendered as
441441
<button name="button" type="submit" class="btn btn-primary">Save changes <span class="fa fa-save"></span></button>
442442
```
443443

444+
If you wish to add additional CSS classes to your button, while keeping the
445+
default ones, you can use the `extra_class` option. This is particularly useful
446+
for adding extra details to buttons (without forcing you to repeat the
447+
Bootstrap classes), or for element targeting via CSS classes.
448+
Be aware, however, that using the `class` option will discard any extra classes
449+
you add. As an example, the following button declarations
450+
451+
```erb
452+
<%= f.primary "My Nice Button", extra_class: 'my-button' %>
453+
454+
<%= f.primary "My Button", class: 'my-button' %>
455+
```
456+
457+
will be rendered as
458+
459+
```html
460+
<input type="submit" value="My Nice Button" class="btn btn-primary my-button" />
461+
462+
<input type="submit" value="My Button" class="my-button" />
463+
```
464+
465+
(some unimportant HTML attributes have been removed for simplicity)
466+
444467
### Accessing Rails Form Helpers
445468

446469
If you want to use the original Rails form helpers for a particular field,

lib/bootstrap_form/helpers/bootstrap.rb

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,19 @@
11
module BootstrapForm
22
module Helpers
33
module Bootstrap
4+
45
def button(value = nil, options = {}, &block)
5-
options.reverse_merge! class: 'btn btn-secondary'
6+
setup_css_class 'btn btn-secondary', options
67
super
78
end
89

910
def submit(name = nil, options = {})
10-
options.reverse_merge! class: 'btn btn-secondary'
11+
setup_css_class 'btn btn-secondary', options
1112
super
1213
end
1314

1415
def primary(name = nil, options = {}, &block)
15-
options.reverse_merge! class: 'btn btn-primary'
16+
setup_css_class 'btn btn-primary', options
1617

1718
if options[:render_as_button] || block_given?
1819
options.except! :render_as_button
@@ -104,6 +105,19 @@ def input_group_content(content)
104105
def static_class
105106
"form-control-plaintext"
106107
end
108+
109+
110+
private
111+
112+
def setup_css_class(the_class, options = {})
113+
unless options.has_key? :class
114+
if extra_class = options.delete(:extra_class)
115+
the_class = "#{the_class} #{extra_class}"
116+
end
117+
options[:class] = the_class
118+
end
119+
end
120+
107121
end
108122
end
109123
end

test/bootstrap_other_components_test.rb

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -137,6 +137,12 @@ class BootstrapOtherComponentsTest < ActionView::TestCase
137137
@builder.button("<span>I'm HTML!</span> in a button!".html_safe)
138138
end
139139

140+
test "regular button can have extra css classes" do
141+
expected = %{<button class="btn btn-secondary test-button" name="button" type="submit"><span>I'm HTML!</span> in a button!</button>}
142+
assert_equivalent_xml expected,
143+
@builder.button("<span>I'm HTML!</span> in a button!".html_safe, extra_class: 'test-button')
144+
end
145+
140146
test "submit button defaults to rails action name" do
141147
expected = %{<input class="btn btn-secondary" name="commit" type="submit" value="Create User" />}
142148
assert_equivalent_xml expected, @builder.submit
@@ -147,6 +153,11 @@ class BootstrapOtherComponentsTest < ActionView::TestCase
147153
assert_equivalent_xml expected, @builder.submit("Submit Form")
148154
end
149155

156+
test "submit button can have extra css classes" do
157+
expected = %{<input class="btn btn-secondary test-button" name="commit" type="submit" value="Submit Form" />}
158+
assert_equivalent_xml expected, @builder.submit("Submit Form", extra_class: 'test-button')
159+
end
160+
150161
test "override submit button classes" do
151162
expected = %{<input class="btn btn-primary" name="commit" type="submit" value="Submit Form" />}
152163
assert_equivalent_xml expected, @builder.submit("Submit Form", class: "btn btn-primary")
@@ -157,6 +168,11 @@ class BootstrapOtherComponentsTest < ActionView::TestCase
157168
assert_equivalent_xml expected, @builder.primary("Submit Form")
158169
end
159170

171+
test "primary button can have extra css classes" do
172+
expected = %{<input class="btn btn-primary test-button" name="commit" type="submit" value="Submit Form" />}
173+
assert_equivalent_xml expected, @builder.primary("Submit Form", extra_class: 'test-button')
174+
end
175+
160176
test "primary button can render as HTML button" do
161177
expected = %{<button class="btn btn-primary" name="button" type="submit"><span>I'm HTML!</span> Submit Form</button>}
162178
assert_equivalent_xml expected,

0 commit comments

Comments
 (0)