Skip to content

more Bootstrap fixes #67

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
bshand merged 4 commits into from
Mar 2, 2025
Merged

more Bootstrap fixes #67

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
95aa6a4
add row class to horizontal form row (.form-group)
suezhou Feb 18, 2025
bd17525
add missing tests
suezhou Feb 18, 2025
1e1a3c3
minor fixes
suezhou Mar 2, 2025
f7377d8
rubocop fix
suezhou Mar 2, 2025
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
3 changes: 2 additions & 1 deletion CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
## [Unreleased]
* no unreleased changes *
* add row class to horizontal form row (.form-group)
* add `has-validation` class to input fields with addons

## 5.0.1 / 2025-02-03
### Fixed
Expand Down
22 changes: 19 additions & 3 deletions app/assets/stylesheets/ndr_ui/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,9 @@ $bootstrap-icons-font-dir: ".";
// Fieldsets don't behave properly with Bootstrap in Firefox
// https://stackoverflow.com/questions/17408815/fieldset-resizes-wrong-appears-to-have-unremovable-min-width-min-content/17863685#17863685
@-moz-document url-prefix() {
fieldset {
display: table-cell;
}
fieldset {
display: table-cell;
}
}

// for input fields with input-addons, remove background and border when the form is readonly.
Expand All @@ -20,6 +20,22 @@ $bootstrap-icons-font-dir: ".";
}
}

// UI fix for .input-group in readonly mode
form .input-group {
// for input-addons in readonly mode, remove background and border
.form-control-plaintext + .input-group-text,
.input-group-text:has(+ .form-control-plaintext) {
background: none;
border:0;
}

// for readonly fields following or followed by input-addons, set auto width to display content in one line
.form-control-plaintext:has(+ .input-group-text),
.input-group-text + .form-control-plaintext {
width: auto;
}
}

// Bootstrap don't have btn-default anymore
// however, we keep btn-default in codebase/helpers and set global default setting here.
.btn-default {
Expand Down
2 changes: 1 addition & 1 deletion app/builders/ndr_ui/bootstrap/input_group_addons.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ def text_field(method, options = {})
div_content << text_field_without_inline_errors(method, options)
div_content << @template.content_tag(:span, append, class: 'input-group-text') if append.present?

@template.content_tag(:div, @template.safe_join(div_content), class: 'input-group')
@template.content_tag(:div, @template.safe_join(div_content), class: 'input-group has-validation')
end
end
end
Expand Down
4 changes: 2 additions & 2 deletions app/helpers/ndr_ui/bootstrap/modal_helper.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -227,8 +227,8 @@ def bootstrap_modal_button(label)
def bootstrap_modal_classes(options)
options = options.stringify_keys

classes = %w(modal-dialog)
classes << "modal-#{options['size']}" if MODAL_SIZES.include?(options['size'])
classes = %w[modal-dialog]
classes << "modal-#{options['size']}" if MODAL_SIZES.include?(options['size'].to_s)
classes.join(' ')
end
end
Expand Down
4 changes: 2 additions & 2 deletions app/helpers/ndr_ui/bootstrap_helper.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -381,7 +381,7 @@ def bootstrap_progressbar_tag(*args)
# ==== Examples
# bootstrap_horizontal_form_group("The Label", [3, 9]) { 'This is the content' }
# # =>
# <div class="form-group">
# <div class="form-group row">
# <label class="col-sm-3 col-form-label">The Label</label>
# <div class="col-sm-9">This is the content</div>
# </div>
Expand All @@ -395,7 +395,7 @@ def bootstrap_horizontal_form_group(label = nil, ratio = [2, 10], &block)
# Prepend optional label:
content = content_tag(:label, label, class: "col-sm-#{l} col-form-label") + content unless label.nil?

content_tag(:div, content, class: 'form-group')
content_tag(:div, content, class: 'form-group row')
end

# This helper produces a pair of HTML dt, dd tags to display name and value pairs.
Expand Down
6 changes: 3 additions & 3 deletions test/builders/ndr_ui/bootstrap_builder/input_group_addons_test.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ class InputGroupAddonsTest < ActionView::TestCase
post = Post.new
bootstrap_form_for post do |form|
assert_dom_equal(
'<div class="input-group">' \
'<div class="input-group has-validation">' \
'<span class="input-group-text">apples</span>' \
'<input id="post_id" name="post[id]" class="form-control" type="text" />' \
'</div>' \
Expand All @@ -26,7 +26,7 @@ class InputGroupAddonsTest < ActionView::TestCase
post = Post.new
bootstrap_form_for post do |form|
assert_dom_equal(
'<div class="input-group">' \
'<div class="input-group has-validation">' \
'<input id="post_id" name="post[id]" class="form-control" type="text" />' \
'<span class="input-group-text">pears</span>' \
'</div>' \
Expand All @@ -43,7 +43,7 @@ class InputGroupAddonsTest < ActionView::TestCase
post = Post.new
bootstrap_form_for post do |form|
assert_dom_equal(
'<div class="input-group">' \
'<div class="input-group has-validation">' \
'<span class="input-group-text">apples</span>' \
'<input id="post_id" name="post[id]" class="form-control" type="text" />' \
'<span class="input-group-text">pears</span>' \
Expand Down
10 changes: 5 additions & 5 deletions test/helpers/ndr_ui/bootstrap_helper_test.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -298,14 +298,14 @@ class BootstrapHelperTest < ActionView::TestCase
# TODO: bootstrap_pagination_tag(*args, &block)

test 'button_control_group' do
assert_dom_equal '<div class="form-group"><div class="col-sm-9 offset-sm-3">' \
assert_dom_equal '<div class="form-group row"><div class="col-sm-9 offset-sm-3">' \
'Apples</div></div>',
button_control_group('Apples')

html = button_control_group(class: 'some_class') do
'Pears'
end
assert_dom_equal '<div class="form-group"><div class="col-sm-9 offset-sm-3">' \
assert_dom_equal '<div class="form-group row"><div class="col-sm-9 offset-sm-3">' \
'<div class="some_class">Pears</div></div></div>',
html

Expand Down Expand Up @@ -334,19 +334,19 @@ class BootstrapHelperTest < ActionView::TestCase
test 'bootstrap_horizontal_form_group' do
# Test with standard columns:
actual = bootstrap_horizontal_form_group('The Label') { 'This is the content' }
expected = '<div class="form-group"><label class="col-sm-2 col-form-label">' \
expected = '<div class="form-group row"><label class="col-sm-2 col-form-label">' \
'The Label</label><div class="col-sm-10">This is the content</div></div>'
assert_dom_equal expected, actual

# Test with different columns:
actual = bootstrap_horizontal_form_group('The Label', [3, 9]) { 'This is the content' }
expected = '<div class="form-group"><label class="col-sm-3 col-form-label">' \
expected = '<div class="form-group row"><label class="col-sm-3 col-form-label">' \
'The Label</label><div class="col-sm-9">This is the content</div></div>'
assert_dom_equal expected, actual

# Test with no label:
actual = bootstrap_horizontal_form_group { 'This is the content' }
expected = '<div class="form-group"><div class="col-sm-10 offset-sm-2">' \
expected = '<div class="form-group row"><div class="col-sm-10 offset-sm-2">' \
'This is the content</div></div>'
assert_dom_equal expected, actual
end
Expand Down