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.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
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.
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. You can have `bootstrap_form` put up a spinner while the request is processing with the following:

```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.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It would be nice to show an example where the user provides the HTML.

This only works on `f.button` or `f.primary` not on `f.submit` and forces `render_as_button: true` on `f.primary`.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would move this line up to near the top of this section, because some of us don't read the whole section before we start coding. ;-)



## 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]) }
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this should merge with options[:data], in case the user specifies other data- attributes.

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
Comment on lines +50 to +52
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think you want to wrap this in raw so the HTML doesn't get escaped.

Suggested change
<<~HTML.strip
<div class="spinner-border d-block mx-auto" role="status" style="--bs-spinner-width: 1lh; --bs-spinner-height: 1lh;"></div>
HTML
raw(<<~HTML.strip)
<div class="spinner-border d-block mx-auto" role="status" style="--bs-spinner-width: 1lh; --bs-spinner-height: 1lh;"></div>
HTML

(I think the above is correct, but I don't guarantee it. :-) )

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
Comment on lines +156 to +158
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The expected HTML should not be escaped.

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