Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
25 changes: 24 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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,
Expand Down
20 changes: 17 additions & 3 deletions lib/bootstrap_form/helpers/bootstrap.rb
Original file line number Diff line number Diff line change
@@ -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
Expand Down Expand Up @@ -102,6 +103,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
16 changes: 16 additions & 0 deletions test/bootstrap_other_components_test.rb
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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")
Expand All @@ -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,
Expand Down