diff --git a/CHANGELOG.md b/CHANGELOG.md index e6bfc9b..1a8fb0e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -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 diff --git a/app/assets/stylesheets/ndr_ui/index.scss b/app/assets/stylesheets/ndr_ui/index.scss index 2bc60c1..610479b 100644 --- a/app/assets/stylesheets/ndr_ui/index.scss +++ b/app/assets/stylesheets/ndr_ui/index.scss @@ -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. @@ -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 { diff --git a/app/builders/ndr_ui/bootstrap/input_group_addons.rb b/app/builders/ndr_ui/bootstrap/input_group_addons.rb index 5b2dce1..b7769b5 100644 --- a/app/builders/ndr_ui/bootstrap/input_group_addons.rb +++ b/app/builders/ndr_ui/bootstrap/input_group_addons.rb @@ -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 diff --git a/app/helpers/ndr_ui/bootstrap/modal_helper.rb b/app/helpers/ndr_ui/bootstrap/modal_helper.rb index 789bd2a..ae85bb3 100644 --- a/app/helpers/ndr_ui/bootstrap/modal_helper.rb +++ b/app/helpers/ndr_ui/bootstrap/modal_helper.rb @@ -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 diff --git a/app/helpers/ndr_ui/bootstrap_helper.rb b/app/helpers/ndr_ui/bootstrap_helper.rb index 14e5cd1..6fc72c0 100644 --- a/app/helpers/ndr_ui/bootstrap_helper.rb +++ b/app/helpers/ndr_ui/bootstrap_helper.rb @@ -381,7 +381,7 @@ def bootstrap_progressbar_tag(*args) # ==== Examples # bootstrap_horizontal_form_group("The Label", [3, 9]) { 'This is the content' } # # => - #
+ #
# #
This is the content
#
@@ -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. diff --git a/test/builders/ndr_ui/bootstrap_builder/input_group_addons_test.rb b/test/builders/ndr_ui/bootstrap_builder/input_group_addons_test.rb index f4fa7ed..494f781 100644 --- a/test/builders/ndr_ui/bootstrap_builder/input_group_addons_test.rb +++ b/test/builders/ndr_ui/bootstrap_builder/input_group_addons_test.rb @@ -9,7 +9,7 @@ class InputGroupAddonsTest < ActionView::TestCase post = Post.new bootstrap_form_for post do |form| assert_dom_equal( - '
' \ + '
' \ 'apples' \ '' \ '
' \ @@ -26,7 +26,7 @@ class InputGroupAddonsTest < ActionView::TestCase post = Post.new bootstrap_form_for post do |form| assert_dom_equal( - '
' \ + '
' \ '' \ 'pears' \ '
' \ @@ -43,7 +43,7 @@ class InputGroupAddonsTest < ActionView::TestCase post = Post.new bootstrap_form_for post do |form| assert_dom_equal( - '
' \ + '
' \ 'apples' \ '' \ 'pears' \ diff --git a/test/helpers/ndr_ui/bootstrap_helper_test.rb b/test/helpers/ndr_ui/bootstrap_helper_test.rb index f0af737..948b3f8 100644 --- a/test/helpers/ndr_ui/bootstrap_helper_test.rb +++ b/test/helpers/ndr_ui/bootstrap_helper_test.rb @@ -298,14 +298,14 @@ class BootstrapHelperTest < ActionView::TestCase # TODO: bootstrap_pagination_tag(*args, &block) test 'button_control_group' do - assert_dom_equal '
' \ + assert_dom_equal '
' \ 'Apples
', button_control_group('Apples') html = button_control_group(class: 'some_class') do 'Pears' end - assert_dom_equal '
' \ + assert_dom_equal '
' \ '
Pears
', html @@ -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 = '