Skip to content
Open
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
14 changes: 14 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -1065,6 +1065,20 @@ will be rendered as

(some unimportant HTML attributes have been removed for simplicity)

### Turbo submits with
There is a turbo attribute [(data-turbo-submits-with)](https://turbo.hotwired.dev/reference/attributes) that replaces the content of a submit button while the request is processing.
```erb
<%= f.button "Save", submits_with: :spinner %>
```

```html
<button class="btn btn-secondary" data-turbo-submits-with="<div class="spinner-border d-block mx-auto"; role="status" style="--bs-spinner-width: 1lh; --bs-spinner-height: 1lh;"></div>" name="button" type="submit">Save</button>
```

Use `submits_with: :spinner` to render a default bootstrap spinner or pass your own HTML.
This only works on `f.button` or `f.primary` not on `f.submit` and forces `render_as_button: true` on `f.primary`.


## Rich Text Areas AKA Trix Editor

![Example 38](demo/doc/screenshots/bootstrap/readme/38_example.png "Example 38")
Expand Down
17 changes: 16 additions & 1 deletion lib/bootstrap_form/inputs/submit.rb
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,10 @@ module BootstrapForm
module Inputs
module Submit
def button(value=nil, options={}, &)
if options.key? :submits_with
options[:data] = { turbo_submits_with: setup_turbo_submit(options[:submits_with]) }
options.except! :submits_with
end
value = setup_css_class "btn btn-secondary", value, options
super
end
Expand All @@ -16,7 +20,7 @@ def submit(value=nil, options={})
def primary(value=nil, options={}, &block)
value = setup_css_class "btn btn-primary", value, options

if options[:render_as_button] || block
if options[:render_as_button] || options[:submits_with] || block
options.except! :render_as_button
button(value, options, &block)
else
Expand All @@ -39,6 +43,17 @@ def setup_css_class(the_class, value, options)
end
value
end

def setup_turbo_submit(submits_with)
case submits_with
when :spinner, "spinner"
<<~HTML.strip
<div class="spinner-border d-block mx-auto" role="status" style="--bs-spinner-width: 1lh; --bs-spinner-height: 1lh;"></div>
HTML
else
submits_with.to_s
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 @@ -152,6 +152,22 @@ class BootstrapOtherComponentsTest < ActionView::TestCase
@builder.button("<span>I'm HTML!</span> in a button!".html_safe, extra_class: "test-button")
end

test "regular button has turbo-submits-with deafault spinner" do
expected = <<~HTML
<button class="btn btn-secondary" data-turbo-submits-with="<div class=&quot;spinner-border d-block mx-auto&quot; role=&quot;status&quot; style=&quot;--bs-spinner-width: 1lh; --bs-spinner-height: 1lh;&quot;></div>" name="button" type="submit">Submit with Spinner</button>
HTML
assert_equivalent_html expected,
@builder.button("Submit with Spinner", submits_with: :spinner)
end

test "regular button has turbo-submits-with custom HTML" do
expected = <<~HTML
<button class="btn btn-secondary" data-turbo-submits-with="<span>Loading...</span>" name="button" type="submit">Submit with Spinner</button>
HTML
assert_equivalent_html expected,
@builder.button("Submit with Spinner", submits_with: "<span>Loading...</span>".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_html expected, @builder.submit
Expand Down