Skip to content

Commit

Permalink
Update the inline form layout
Browse files Browse the repository at this point in the history
  • Loading branch information
UweKubosch authored and donv committed May 3, 2022
1 parent 8a8b698 commit 1a0e3f6
Show file tree
Hide file tree
Showing 11 changed files with 26 additions and 19 deletions.
1 change: 1 addition & 0 deletions .rubocop.yml
Expand Up @@ -37,6 +37,7 @@ Layout/SpaceAroundEqualsInParameterDefault:
EnforcedStyle: no_space

Metrics/AbcSize:
Max: 18
Exclude:
- "demo/test/**/*"
- "test/**/*"
Expand Down
10 changes: 6 additions & 4 deletions README.md
Expand Up @@ -963,12 +963,12 @@ using screen readers.
This generates:

```html
<form accept-charset="UTF-8" action="/users" class="new_user col-auto g-3" id="new_user" method="post">
<div class="mb-3">
<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="form-label visually-hidden mr-sm-2 required" for="user_email">Email</label>
<input class="form-control" id="user_email" name="user[email]" type="email" value="steve@example.com">
</div>
<div class="mb-3">
<div class="col">
<label class="form-label visually-hidden mr-sm-2" for="user_password">Password</label>
<input class="form-control" id="user_password" name="user[password]" type="password">
</div>
Expand All @@ -977,7 +977,9 @@ This generates:
<input class="form-check-input" id="user_remember_me" name="user[remember_me]" type="checkbox" value="1">
<label class="form-check-label" for="user_remember_me">Remember me</label>
</div>
<input class="btn btn-secondary" data-disable-with="Create User" name="commit" type="submit" value="Create User">
<div class="col">
<input class="btn btn-secondary" data-disable-with="Create User" name="commit" type="submit" value="Create User">
</div>
</form>
```

Expand Down
Binary file modified demo/doc/screenshots/bootstrap/index/02_inline_form.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified demo/doc/screenshots/bootstrap/readme/33_example.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 5 additions & 5 deletions lib/bootstrap_form/form_builder.rb
Expand Up @@ -67,13 +67,14 @@ def add_default_form_attributes_and_form_inline(options)

return unless options[:layout] == :inline

options[:html][:class] = [options[:html][:class], "col-auto", "g-3"].compact.join(" ")
options[:html][:class] =
([*options[:html][:class]&.split(/\s+/)] + %w[row row-cols-auto g-3 align-items-center])
.compact.uniq.join(" ")
end

def fields_for_with_bootstrap(record_name, record_object=nil, fields_options={}, &block)
fields_options = fields_for_options(record_object, fields_options)
record_object.is_a?(Hash) && record_object.extractable_options? &&
record_object = nil
record_object = nil if record_object.is_a?(Hash) && record_object.extractable_options?
fields_for_without_bootstrap(record_name, record_object, fields_options, &block)
end

Expand All @@ -87,8 +88,7 @@ def fields_for_with_bootstrap(record_name, record_object=nil, fields_options={},

def fields_for_options(record_object, fields_options)
field_options = fields_options
record_object.is_a?(Hash) && record_object.extractable_options? &&
field_options = record_object
field_options = record_object if record_object.is_a?(Hash) && record_object.extractable_options?
%i[layout control_col inline_errors label_errors].each do |option|
field_options[option] ||= options[option]
end
Expand Down
6 changes: 5 additions & 1 deletion lib/bootstrap_form/form_group.rb
Expand Up @@ -52,14 +52,18 @@ def form_group_control_class(options)
end

def form_group_classes(options)
classes = options[:class] == false ? [] : (options[:class] || "mb-3").split
classes = options[:class] == false ? [] : (options[:class] || form_group_default_class).split
classes << "row" if horizontal_group_with_gutters?(options[:layout], classes)
classes << "col-auto g-3" if field_inline_override?(options[:layout])
classes << feedback_class if options[:icon]
classes << "form-floating" if options[:floating]
classes.presence
end

def form_group_default_class
(layout == :inline ? "col" : "mb-3")
end

def horizontal_group_with_gutters?(layout, classes)
group_layout_horizontal?(layout) && !classes_include_gutters?(classes)
end
Expand Down
2 changes: 1 addition & 1 deletion lib/bootstrap_form/helpers/bootstrap.rb
Expand Up @@ -8,7 +8,7 @@ def button(value=nil, options={}, &block)

def submit(name=nil, options={})
setup_css_class "btn btn-secondary", options
super
layout == :inline ? form_group { super } : super
end

def primary(name=nil, options={}, &block)
Expand Down
2 changes: 1 addition & 1 deletion test/bootstrap_checkbox_test.rb
Expand Up @@ -123,7 +123,7 @@ class BootstrapCheckboxTest < ActionView::TestCase

test "inline checkboxes from form layout" do
expected = <<~HTML
<form accept-charset="UTF-8" action="/users" class="new_user col-auto g-3" id="new_user" method="post">
<form accept-charset="UTF-8" action="/users" class="new_user row row-cols-auto g-3 align-items-center" id="new_user" method="post">
#{'<input name="utf8" type="hidden" value="&#x2713;"/>' unless ::Rails::VERSION::STRING >= '6'}
<div class="form-check form-check-inline mb-3">
<input #{autocomplete_attr} name="user[terms]" type="hidden" value="0" />
Expand Down
4 changes: 2 additions & 2 deletions test/bootstrap_fields_test.rb
Expand Up @@ -366,9 +366,9 @@ class BootstrapFieldsTest < ActionView::TestCase
end

expected = <<~HTML
<form accept-charset="UTF-8" action="/users" class="new_user col-auto g-3" id="new_user" method="post">
<form accept-charset="UTF-8" action="/users" class="new_user row row-cols-auto g-3 align-items-center" id="new_user" method="post">
#{'<input name="utf8" type="hidden" value="&#x2713;"/>' unless ::Rails::VERSION::STRING >= '6'}
<div class="mb-3">
<div class="col">
<label class="form-label mr-sm-2" for="user_address_attributes_street">Street</label>
<input class="form-control" id="user_address_attributes_street" name="user[address_attributes][street]" type="text" value="123 Main Street" />
</div>
Expand Down
8 changes: 4 additions & 4 deletions test/bootstrap_form_test.rb
Expand Up @@ -130,9 +130,9 @@ class BootstrapFormTest < ActionView::TestCase

test "inline-style forms" do
expected = <<~HTML
<form accept-charset="UTF-8" action="/users" class="new_user col-auto g-3" id="new_user" method="post">
<form accept-charset="UTF-8" action="/users" class="new_user row row-cols-auto g-3 align-items-center" id="new_user" method="post">
#{'<input name="utf8" type="hidden" value="&#x2713;"/>' unless ::Rails::VERSION::STRING >= '6'}
<div class="mb-3">
<div class="col">
<label class="form-label mr-sm-2 required" for="user_email">Email</label>
<input class="form-control" id="user_email" name="user[email]" type="email" value="steve@example.com" />
</div>
Expand All @@ -141,7 +141,7 @@ class BootstrapFormTest < ActionView::TestCase
<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>
<div class="mb-3">
<div class="col">
<label class="form-label mr-sm-2" 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" />
Expand All @@ -152,7 +152,7 @@ class BootstrapFormTest < ActionView::TestCase
<label class="form-check-label" for="user_misc_2">Bar</label>
</div>
</div>
<div class="mb-3">
<div class="col">
<label class="form-label mr-sm-2" for="user_status">Status</label>
<select class="form-select" id="user_status" name="user[status]">
<option value="1">activated</option>
Expand Down
2 changes: 1 addition & 1 deletion test/bootstrap_radio_button_test.rb
Expand Up @@ -98,7 +98,7 @@ class BootstrapRadioButtonTest < ActionView::TestCase

test "radio_button inline label is set correctly from form level" do
expected = <<~HTML
<form accept-charset="UTF-8" action="/users" class="new_user col-auto g-3" id="new_user" method="post">
<form accept-charset="UTF-8" action="/users" class="new_user row row-cols-auto g-3 align-items-center" id="new_user" method="post">
#{'<input name="utf8" type="hidden" value="&#x2713;"/>' unless ::Rails::VERSION::STRING >= '6'}
<div class="form-check form-check-inline">
<input class="form-check-input" id="user_misc_1" name="user[misc]" type="radio" value="1" />
Expand Down

0 comments on commit 1a0e3f6

Please sign in to comment.