Skip to content

Handle inline radio buttons and check boxes for Bootstrap 4. #410

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mattbrictson merged 2 commits into from
Jan 29, 2018
Merged

Handle inline radio buttons and check boxes for Bootstrap 4. #410

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8cb137e
Inline checkboxes.
lcreid Jan 28, 2018
b49b162
Rebase from PR #409.
lcreid Jan 28, 2018
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
27 changes: 9 additions & 18 deletions lib/bootstrap_form/form_builder.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,19 +136,13 @@ def check_box_with_bootstrap(name, options = {}, checked_value = "1", unchecked_
checkbox_html.concat(label(label_name, label_description, class: ["custom-control-label", label_class].compact.join(" ")))
end
else
if options[:inline]
label_class = " #{label_class}" if label_class
wrapper_class = "form-check"
wrapper_class += " form-check-inline" if options[:inline]
content_tag(:div, class: wrapper_class) do
checkbox_html
.concat(label(label_name,
label_description,
{ class: "form-check-inline#{label_class}" }.merge(options[:id].present? ? { for: options[:id] } : {})))
else
content_tag(:div, class: "form-check") do
checkbox_html
.concat(label(label_name,
label_description,
{ class: ["form-check-label", label_class].compact.join(" ") }.merge(options[:id].present? ? { for: options[:id] } : {})))
end
{ class: ["form-check-label", label_class].compact.join(" ") }.merge(options[:id].present? ? { for: options[:id] } : {})))
end
end
end
Expand Down Expand Up @@ -176,15 +170,12 @@ def radio_button_with_bootstrap(name, value, *args)
radio_html.concat(label(name, options[:label], value: value, class: ["custom-control-label", label_class].compact.join(" ")))
end
else
label_class = " #{label_class}" if label_class
if options[:inline]
wrapper_class = "form-check"
wrapper_class += " form-check-inline" if options[:inline]
label_class = ["form-check-label", label_class].compact.join(" ")
content_tag(:div, class: "#{wrapper_class}#{disabled_class}") do
radio_html
.concat(label(name, options[:label], { class: "form-check-label#{label_class}", value: value }.merge(options[:id].present? ? { for: options[:id] } : {})))
else
content_tag(:div, class: "form-check#{disabled_class}") do
radio_html
.concat(label(name, options[:label], { class: "form-check-label#{label_class}", value: value }.merge(options[:id].present? ? { for: options[:id] } : {})))
end
.concat(label(name, options[:label], { value: value, class: label_class }.merge(options[:id].present? ? { for: options[:id] } : {})))
end
end
end
Expand Down
52 changes: 31 additions & 21 deletions test/bootstrap_checkbox_test.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,33 +98,39 @@ class BootstrapCheckboxTest < ActionView::TestCase

test "inline checkboxes" do
expected = <<-HTML.strip_heredoc
<input name="user[terms]" type="hidden" value="0" />
<input class="form-check-input" id="user_terms" name="user[terms]" type="checkbox" value="1" />
<label class="form-check-inline" for="user_terms">
I agree to the terms
</label>
<div class="form-check form-check-inline">
<input name="user[terms]" type="hidden" value="0" />
<input class="form-check-input" id="user_terms" name="user[terms]" type="checkbox" value="1" />
<label class="form-check-label" for="user_terms">
I agree to the terms
</label>
</div>
HTML
assert_equivalent_xml expected, @builder.check_box(:terms, label: 'I agree to the terms', inline: true)
end

test "disabled inline check_box" do
expected = <<-HTML.strip_heredoc
<input name="user[terms]" type="hidden" value="0" disabled="disabled" />
<input class="form-check-input" id="user_terms" name="user[terms]" type="checkbox" value="1" disabled="disabled" />
<label class="form-check-inline" for="user_terms">
I agree to the terms
</label>
<div class="form-check form-check-inline">
<input name="user[terms]" type="hidden" value="0" disabled="disabled" />
<input class="form-check-input" id="user_terms" name="user[terms]" type="checkbox" value="1" disabled="disabled" />
<label class="form-check-label" for="user_terms">
I agree to the terms
</label>
</div>
HTML
assert_equivalent_xml expected, @builder.check_box(:terms, label: 'I agree to the terms', inline: true, disabled: true)
end

test "inline checkboxes with custom label class" do
expected = <<-HTML.strip_heredoc
<input name="user[terms]" type="hidden" value="0" />
<input class="form-check-input" id="user_terms" name="user[terms]" type="checkbox" value="1" />
<label class="form-check-inline btn" for="user_terms">
<div class="form-check form-check-inline">
<input name="user[terms]" type="hidden" value="0" />
<input class="form-check-input" id="user_terms" name="user[terms]" type="checkbox" value="1" />
<label class="form-check-label btn" for="user_terms">
Terms
</label>
</div>
HTML
assert_equivalent_xml expected, @builder.check_box(:terms, inline: true, label_class: 'btn')
end
Expand Down Expand Up @@ -176,14 +182,18 @@ class BootstrapCheckboxTest < ActionView::TestCase
<input id="user_misc" multiple="multiple" name="user[misc][]" type="hidden" value="" />
<div class="form-group">
<label for="user_misc">Misc</label>
<input class="form-check-input" id="user_misc_1" name="user[misc][]" type="checkbox" value="1" />
<label class="form-check-inline" for="user_misc_1">
Foo
</label>
<input class="form-check-input" id="user_misc_2" name="user[misc][]" type="checkbox" value="2" />
<label class="form-check-inline" for="user_misc_2">
Bar
</label>
<div class="form-check form-check-inline">
<input class="form-check-input" id="user_misc_1" name="user[misc][]" type="checkbox" value="1" />
<label class="form-check-label" for="user_misc_1">
Foo
</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" id="user_misc_2" name="user[misc][]" type="checkbox" value="2" />
<label class="form-check-label" for="user_misc_2">
Bar
</label>
</div>
</div>
HTML

Expand Down
42 changes: 26 additions & 16 deletions test/bootstrap_radio_button_test.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,30 +55,36 @@ class BootstrapRadioButtonTest < ActionView::TestCase

test "radio_button inline label is set correctly" do
expected = <<-HTML.strip_heredoc
<input class="form-check-input" id="user_misc_1" name="user[misc]" type="radio" value="1" />
<label class="form-check-label" for="user_misc_1">
This is a radio button
</label>
<div class="form-check form-check-inline">
<input class="form-check-input" id="user_misc_1" name="user[misc]" type="radio" value="1" />
<label class="form-check-label" for="user_misc_1">
This is a radio button
</label>
</div>
HTML
assert_equivalent_xml expected, @builder.radio_button(:misc, '1', label: 'This is a radio button', inline: true)
end

test "radio_button disabled inline label is set correctly" do
expected = <<-HTML.strip_heredoc
<input class="form-check-input" disabled="disabled" id="user_misc_1" name="user[misc]" type="radio" value="1" />
<label class="form-check-label" for="user_misc_1">
This is a radio button
</label>
<div class="form-check form-check-inline disabled">
<input class="form-check-input" disabled="disabled" id="user_misc_1" name="user[misc]" type="radio" value="1" />
<label class="form-check-label" for="user_misc_1">
This is a radio button
</label>
</div>
HTML
assert_equivalent_xml expected, @builder.radio_button(:misc, '1', label: 'This is a radio button', inline: true, disabled: true)
end

test "radio_button inline label class is set correctly" do
expected = <<-HTML.strip_heredoc
<input class="form-check-input" id="user_misc_1" name="user[misc]" type="radio" value="1" />
<label class="form-check-label btn" for="user_misc_1">
This is a radio button
</label>
<div class="form-check form-check-inline">
<input class="form-check-input" id="user_misc_1" name="user[misc]" type="radio" value="1" />
<label class="form-check-label btn" for="user_misc_1">
This is a radio button
</label>
</div>
HTML
assert_equivalent_xml expected, @builder.radio_button(:misc, '1', label: 'This is a radio button', inline: true, label_class: 'btn')
end
Expand Down Expand Up @@ -125,10 +131,14 @@ class BootstrapRadioButtonTest < ActionView::TestCase
expected = <<-HTML.strip_heredoc
<div class="form-group">
<label for="user_misc">Misc</label>
<input class="form-check-input" id="user_misc_1" name="user[misc]" type="radio" value="1" />
<label class="form-check-label" for="user_misc_1"> Foo</label>
<input class="form-check-input" id="user_misc_2" name="user[misc]" type="radio" value="2" />
<label class="form-check-label" for="user_misc_2"> Bar</label>
<div class="form-check form-check-inline">
<input class="form-check-input" id="user_misc_1" name="user[misc]" type="radio" value="1" />
<label class="form-check-label" for="user_misc_1"> Foo</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" id="user_misc_2" name="user[misc]" type="radio" value="2" />
<label class="form-check-label" for="user_misc_2"> Bar</label>
</div>
</div>
HTML

Expand Down