Skip to content

Commit

Permalink
Avoid duplicate form label classes.
Browse files Browse the repository at this point in the history
  • Loading branch information
@donv
donv committed Aug 15, 2023
1 parent cd50d4c commit 7437dc9
Show file tree
Hide file tree
Showing 9 changed files with 47 additions and 43 deletions.
20 changes: 10 additions & 10 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -787,7 +787,7 @@ This generates:
```html
<form accept-charset="UTF-8" action="/users" class="new_user" id="new_user" method="post">
<div class="mb-3 row">
<label class="form-label col-form-label col-sm-2 required" for="user_email">Email</label>
<label class="col-form-label col-sm-2 required" for="user_email">Email</label>
<div class="col-sm-10">
<input aria-required="true" class="form-control-plaintext" id="user_email" name="user[email]" readonly required="required" type="text" value="[email protected]">
</div>
Expand Down Expand Up @@ -1049,11 +1049,11 @@ This generates:
```html
<form accept-charset="UTF-8" action="/users" class="new_user row row-cols-auto g-3 align-items-center" id="new_user" method="post">
<div class="col">
<label class="visually-hidden me-sm-2 required" for="user_email">Email</label>
<label class="visually-hidden required" for="user_email">Email</label>
<input aria-required="true" class="form-control" id="user_email" name="user[email]" required="required" type="email" value="[email protected]">
</div>
<div class="col">
<label class="visually-hidden me-sm-2" for="user_password">Password</label>
<label class="visually-hidden" for="user_password">Password</label>
<input class="form-control" id="user_password" name="user[password]" type="password">
</div>
<div class="col">
Expand Down Expand Up @@ -1110,13 +1110,13 @@ This generates:
```html
<form accept-charset="UTF-8" action="/users" class="new_user" id="new_user" method="post">
<div class="mb-3 row">
<label class="form-label col-form-label col-sm-2 required" for="user_email">Email</label>
<label class="col-form-label col-sm-2 required" for="user_email">Email</label>
<div class="col-sm-10">
<input aria-required="true" class="form-control" id="user_email" name="user[email]" required="required" type="email" value="[email protected]">
</div>
</div>
<div class="mb-3 row">
<label class="form-label col-form-label col-sm-2" for="user_password">Password</label>
<label class="col-form-label col-sm-2" for="user_password">Password</label>
<div class="col-sm-10">
<input class="form-control" id="user_password" name="user[password]" type="password">
</div>
Expand Down Expand Up @@ -1157,13 +1157,13 @@ This generates:
```html
<form accept-charset="UTF-8" action="/users" class="new_user" id="new_user" method="post">
<div class="mb-3 row">
<label class="form-label col-form-label col-sm-2 required" for="user_email">Email</label>
<label class="col-form-label col-sm-2 required" for="user_email">Email</label>
<div class="col-sm-10">
<input aria-required="true" class="form-control" id="user_email" name="user[email]" required="required" type="email" value="[email protected]">
</div>
</div>
<div class="mb-3 row">
<label class="form-label col-form-label col-sm-3" for="user_age">Age</label>
<label class="col-form-label col-sm-3" for="user_age">Age</label>
<div class="col-sm-3">
<input class="form-control" id="user_age" name="user[age]" type="text" value="42">
</div>
Expand Down Expand Up @@ -1223,13 +1223,13 @@ This generates:
```html
<form accept-charset="UTF-8" action="/users" class="new_user" id="new_user" method="post">
<div class="mb-3 row">
<label class="form-label col-form-label col-sm-2 required" for="user_email">Email</label>
<label class="col-form-label col-sm-2 required" for="user_email">Email</label>
<div class="col-sm-10">
<input aria-required="true" class="form-control" id="user_email" name="user[email]" required="required" type="email" value="[email protected]">
</div>
</div>
<div class="mb-3 row">
<label class="form-label col-form-label col-sm-2" for="user_age">Age</label>
<label class="col-form-label col-sm-2" for="user_age">Age</label>
<div class="col-sm-10 additional-control-col-class">
<input class="form-control" id="user_age" name="user[age]" type="text" value="42">
</div>
Expand Down Expand Up @@ -1264,7 +1264,7 @@ This generates:
```html
<form accept-charset="UTF-8" action="/users" class="new_user" id="new_user" method="post">
<div class="mb-3 row">
<label class="form-label col-form-label col-sm-2 required" for="user_email">Email</label>
<label class="col-form-label col-sm-2 required" for="user_email">Email</label>
<div class="col-sm-10">
<input aria-required="true" class="form-control" id="user_email" name="user[email]" required="required" type="email" value="[email protected]">
</div>
Expand Down
Binary file modified demo/doc/screenshots/bootstrap/index/02_inline_form.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 6 additions & 2 deletions lib/bootstrap_form/components/labels.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,9 @@ def generate_label(id, name, options, custom_label_col, group_layout)
end

def label_classes(name, options, custom_label_col, group_layout)
classes = [options[:class] || "form-label", label_layout_classes(custom_label_col, group_layout)]
classes = [options[:class] || label_layout_classes(custom_label_col, group_layout)]
add_class = options.delete(:add_class)
classes.prepend(add_class) if add_class
classes << "required" if required_field_options(options, name)[:required]
options.delete(:required)
classes << "text-danger" if label_errors && error?(name)
Expand All @@ -34,7 +36,9 @@ def label_layout_classes(custom_label_col, group_layout)
if layout_horizontal?(group_layout)
["col-form-label", (custom_label_col || label_col)]
elsif layout_inline?(group_layout)
["me-sm-2"]
%w[form-label me-sm-2]
else
"form-label"
end
end

Expand Down
10 changes: 5 additions & 5 deletions lib/bootstrap_form/inputs/inputs_collection.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ module InputsCollection
private

def inputs_collection(name, collection, value, text, options={})
options[:label] ||= { class: group_label_class }
options[:label] ||= { class: group_label_class(options[:layout]) }
options[:inline] ||= layout_inline?(options[:layout])

form_group_builder(name, options) do
Expand All @@ -22,10 +22,10 @@ def inputs_collection(name, collection, value, text, options={})
end
end

def group_label_class
if layout_horizontal?
group_label_class = "col-form-label pt-0"
elsif layout_inline?
def group_label_class(field_layout)
if layout_horizontal?(field_layout)
group_label_class = "col-form-label #{label_col} pt-0"
elsif layout_inline?(field_layout)
group_label_class = "form-check form-check-inline ps-0"
end
group_label_class
Expand Down
10 changes: 5 additions & 5 deletions test/bootstrap_fields_test.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -218,7 +218,7 @@ class BootstrapFieldsTest < ActionView::TestCase
test "text fields are wrapped correctly when horizontal and gutter classes are given" do
expected = <<~HTML
<div class="mb-3 g-3">
<label class="form-label col-form-label col-sm-2 required" for="user_email">Email</label>
<label class="col-form-label col-sm-2 required" for="user_email">Email</label>
<div class="col-sm-10">
<input aria-required="true" required="required" class="form-control" id="user_email" name="user[email]" type="text" value="[email protected]" />
</div>
Expand All @@ -231,7 +231,7 @@ class BootstrapFieldsTest < ActionView::TestCase
test "text fields are wrapped correctly when horizontal and multiple wrapper classes specified" do
expected = <<~HTML
<div class="bogus-2 row">
<label class="form-label col-form-label col-sm-2 required" for="user_email">Email</label>
<label class="col-form-label col-sm-2 required" for="user_email">Email</label>
<div class="col-sm-10">
<input aria-required="true" required="required" class="form-control" id="user_email" name="user[email]" type="text" value="[email protected]" />
</div>
Expand All @@ -244,7 +244,7 @@ class BootstrapFieldsTest < ActionView::TestCase
test "text fields are wrapped correctly when horizontal and wrapper class specified" do
expected = <<~HTML
<div class="bogus-1 row">
<label class="form-label col-form-label col-sm-2 required" for="user_email">Email</label>
<label class="col-form-label col-sm-2 required" for="user_email">Email</label>
<div class="col-sm-10">
<input aria-required="true" required="required" class="form-control" id="user_email" name="user[email]" type="text" value="[email protected]" />
</div>
Expand All @@ -256,7 +256,7 @@ class BootstrapFieldsTest < ActionView::TestCase
test "text fields are wrapped correctly when horizontal and multiple wrapper classes specified (reverse order)" do
expected = <<~HTML
<div class="bogus-2 row">
<label class="form-label col-form-label col-sm-2 required" for="user_email">Email</label>
<label class="col-form-label col-sm-2 required" for="user_email">Email</label>
<div class="col-sm-10">
<input aria-required="true" required="required" class="form-control" id="user_email" name="user[email]" type="text" value="[email protected]" />
</div>
Expand Down Expand Up @@ -383,7 +383,7 @@ class BootstrapFieldsTest < ActionView::TestCase
<form accept-charset="UTF-8" action="/users" class="new_user" id="new_user" method="post">
#{'<input name="utf8" type="hidden" value="&#x2713;"/>' unless ::Rails::VERSION::STRING >= '6'}
<div class="mb-3 row">
<label class="form-label col-form-label col-sm-2" for="user_address_attributes_street">Street</label>
<label class="col-form-label col-sm-2" for="user_address_attributes_street">Street</label>
<div class="col-sm-10">
<input class="form-control" id="user_address_attributes_street" name="user[address_attributes][street]" type="text" value="123 Main Street" />
</div>
Expand Down
10 changes: 5 additions & 5 deletions test/bootstrap_form_group_test.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -210,7 +210,7 @@ class BootstrapFormGroupTest < ActionView::TestCase
test "help messages for horizontal forms" do
expected = <<~HTML
<div class="mb-3 row">
<label class="form-label col-form-label col-sm-2 required" for="user_email">Email</label>
<label class="col-form-label col-sm-2 required" for="user_email">Email</label>
<div class="col-sm-10">
<input aria-required="true" required="required" class="form-control" id="user_email" name="user[email]" type="text" value="[email protected]" />
<small class="form-text text-muted">This is required</small>
Expand Down Expand Up @@ -287,7 +287,7 @@ class BootstrapFormGroupTest < ActionView::TestCase

expected = <<~HTML
<div class="mb-3 row">
<label class="form-label col-form-label col-sm-2" for="user_nil">Foo</label>
<label class="col-form-label col-sm-2" for="user_nil">Foo</label>
<div class="col-sm-10">
<input class="form-control-plaintext" value="Bar">
</div>
Expand Down Expand Up @@ -318,7 +318,7 @@ class BootstrapFormGroupTest < ActionView::TestCase

expected = <<~HTML
<div class="mb-3 row">
<label class="form-label col-form-label col-sm-2 required" for="user_email">Custom Control</label>
<label class="col-form-label col-sm-2 required" for="user_email">Custom Control</label>
<div class="col-sm-10">
<input class="form-control-plaintext" value="Bar">
</div>
Expand Down Expand Up @@ -373,7 +373,7 @@ class BootstrapFormGroupTest < ActionView::TestCase
end

test "form_group overrides the label's 'class' and 'for' attributes if others are passed" do
output = @horizontal_builder.form_group nil, label: { text: "Custom Control", class: "foo", for: "bar" } do
output = @horizontal_builder.form_group nil, label: { text: "Custom Control", add_class: "foo", for: "bar" } do
'<input class="form-control-plaintext" value="Bar">'.html_safe
end

Expand Down Expand Up @@ -538,7 +538,7 @@ class BootstrapFormGroupTest < ActionView::TestCase
<div class="col-sm-10 offset-sm-2">Hallo</div>
</div>
<div class="mb-3 row">
<label class="form-label col-form-label col-sm-2 required" for="user_email">Email</label>
<label class="col-form-label col-sm-2 required" for="user_email">Email</label>
<div class="col-sm-10">
<input aria-required="true" required="required" class="form-control" id="user_email" name="user[email]" type="text" value="[email protected]" />
</div>
Expand Down
12 changes: 6 additions & 6 deletions test/bootstrap_form_test.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ class BootstrapFormTest < ActionView::TestCase
<label class="form-check-label" for="user_terms">I agree to the terms</label>
</div>
<div class="mb-3 row">
<label class="col-form-label col-sm-2" for="user_misc">Misc</label>
<label class="col-form-label col-sm-2 pt-0" for="user_misc">Misc</label>
<div class="col-sm-10">
<div class="form-check">
<input class="form-check-input" id="user_misc_1" name="user[misc]" type="radio" value="1" />
Expand Down Expand Up @@ -80,7 +80,7 @@ class BootstrapFormTest < ActionView::TestCase
<label class="form-check-label" for="user_terms">I agree to the terms</label>
</div>
<div class="mb-3 col-auto g-3">
<label class="form-label me-sm-2" for="user_misc">Misc</label>
<label class="form-check form-check-inline ps-0" for="user_misc">Misc</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>
Expand Down Expand Up @@ -140,7 +140,7 @@ class BootstrapFormTest < ActionView::TestCase
</div>
</div>
<div class="col">
<label class="form-check form-check-inline ps-0 me-sm-2" for="user_misc">Misc</label>
<label class="form-check form-check-inline ps-0" for="user_misc">Misc</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>
Expand Down Expand Up @@ -191,7 +191,7 @@ class BootstrapFormTest < ActionView::TestCase
</div>
</div>
<div class="mb-3 row">
<label class="col-form-label pt-0 col-sm-2" for="user_misc">Misc</label>
<label class="col-form-label col-sm-2 pt-0" for="user_misc">Misc</label>
<div class="col-sm-10">
<div class="form-check">
<input class="form-check-input" id="user_misc_1" name="user[misc]" type="radio" value="1" />
Expand Down Expand Up @@ -244,7 +244,7 @@ class BootstrapFormTest < ActionView::TestCase
</div>
</div>
<div class="mb-3">
<label class="col-form-label pt-0" for="user_misc">Misc</label>
<label class="form-label" for="user_misc">Misc</label>
<div class="form-check">
<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>
Expand Down Expand Up @@ -294,7 +294,7 @@ class BootstrapFormTest < ActionView::TestCase
</div>
</div>
<div class="mb-3 col-auto g-3">
<label class="col-form-label pt-0 me-sm-2" for="user_misc">Misc</label>
<label class="form-check form-check-inline ps-0" for="user_misc">Misc</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>
Expand Down
18 changes: 9 additions & 9 deletions test/bootstrap_other_components_test.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ class BootstrapOtherComponentsTest < ActionView::TestCase

expected = <<~HTML
<div class="mb-3 row">
<label class="form-label col-form-label col-sm-2 required" for="user_email">Email</label>
<label class="col-form-label col-sm-2 required" for="user_email">Email</label>
<div class="col-sm-10">
<input aria-required="true" required="required" class="form-control-plaintext" id="user_email" extra="extra arg" name="user[email]" readonly="readonly" type="text" value="[email protected]"/>
</div>
Expand All @@ -24,7 +24,7 @@ class BootstrapOtherComponentsTest < ActionView::TestCase

expected = <<~HTML
<div class="mb-3 row">
<label class="form-label col-form-label col-sm-2 required" for="custom_id">Email</label>
<label class="col-form-label col-sm-2 required" for="custom_id">Email</label>
<div class="col-sm-10">
<input aria-required="true" required="required" class="form-control-plaintext" id="custom_id" name="user[email]" readonly="readonly" type="text" value="[email protected]"/>
</div>
Expand All @@ -38,7 +38,7 @@ class BootstrapOtherComponentsTest < ActionView::TestCase

expected = <<~HTML
<div class="mb-3 row">
<label class="form-label col-form-label col-sm-2" for="user_">My Label</label>
<label class="col-form-label col-sm-2" for="user_">My Label</label>
<div class="col-sm-10">
<input class="form-control-plaintext" id="user_" name="user[]" readonly="readonly" type="text" value="this is a test"/>
</div>
Expand All @@ -52,7 +52,7 @@ class BootstrapOtherComponentsTest < ActionView::TestCase

expected = <<~HTML
<div class="mb-3 row">
<label class="form-label col-form-label col-sm-2" for="user_">Custom Label</label>
<label class="col-form-label col-sm-2" for="user_">Custom Label</label>
<div class="col-sm-10">
<input class="form-control-plaintext" id="user_" name="user[]" readonly="readonly" type="text" value="Custom Control"/>
</div>
Expand All @@ -66,7 +66,7 @@ class BootstrapOtherComponentsTest < ActionView::TestCase

expected = <<~HTML
<div class="mb-3 row">
<label class="form-label col-form-label col-sm-2" for="user_">Custom Label</label>
<label class="col-form-label col-sm-2" for="user_">Custom Label</label>
<div class="col-sm-10">
<input class="form-control-plaintext" id="user_" name="user[]" readonly="readonly" type="text"/>
</div>
Expand All @@ -80,7 +80,7 @@ class BootstrapOtherComponentsTest < ActionView::TestCase

expected = <<~HTML
<div class="mb-3 row">
<label class="form-label col-form-label col-sm-2 required" for="user_email">Email</label>
<label class="col-form-label col-sm-2 required" for="user_email">Email</label>
<div class="col-sm-10">
<input aria-required="true" required="required" class="test_class form-control-plaintext" id="user_email" name="user[email]" readonly="readonly" type="text" value="[email protected]"/>
</div>
Expand All @@ -96,7 +96,7 @@ class BootstrapOtherComponentsTest < ActionView::TestCase

expected = <<~HTML
<div class="mb-3 row">
<label class="form-label col-form-label col-sm-2 required" for="user_email">Email</label>
<label class="col-form-label col-sm-2 required" for="user_email">Email</label>
<div class="col-sm-10">this is a test</div>
</div>
HTML
Expand All @@ -110,7 +110,7 @@ class BootstrapOtherComponentsTest < ActionView::TestCase

expected = <<~HTML
<div class="mb-3 row">
<label class="form-label col-form-label col-sm-2" for="user_">My Label</label>
<label class="col-form-label col-sm-2" for="user_">My Label</label>
<div class="col-sm-10">this is a test</div>
</div>
HTML
Expand All @@ -124,7 +124,7 @@ class BootstrapOtherComponentsTest < ActionView::TestCase

expected = <<~HTML
<div class="mb-3 row">
<label class="form-label col-form-label col-sm-2" for="user_">Custom Label</label>
<label class="col-form-label col-sm-2" for="user_">Custom Label</label>
<div class="col-sm-10">Custom Control</div>
</div>
HTML
Expand Down
2 changes: 1 addition & 1 deletion test/bootstrap_selects_test.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -390,7 +390,7 @@ def options_range(start: 1, stop: 31, selected: nil, months: false)
<form accept-charset="UTF-8" action="/users" class="new_user" id="new_user" method="post">
#{'<input name="utf8" type="hidden" value="&#x2713;"/>' unless ::Rails::VERSION::STRING >= '6'}
<div class="mb-3 row">
<label class="form-label col-form-label col-sm-2" for="user_misc">Misc</label>
<label class="col-form-label col-sm-2" for="user_misc">Misc</label>
<div class="col-sm-10">
<div class="rails-bootstrap-forms-date-select col-auto g-3">
<select class="form-select" id="user_misc_1i" name="user[misc(1i)]">
Expand Down

0 comments on commit 7437dc9

Please sign in to comment.