From 95aa6a49b98959bc8c05e91cbf86752b3f7af92f Mon Sep 17 00:00:00 2001
From: Sue Zhou <sue.zhou@nhs.net>
Date: Tue, 18 Feb 2025 10:40:49 +0000
Subject: [PATCH 1/4] add row class to horizontal form row (.form-group)

---
 CHANGELOG.md                           | 2 +-
 app/helpers/ndr_ui/bootstrap_helper.rb | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e6bfc9b..626b5bf 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,5 @@
 ## [Unreleased]
-* no unreleased changes *
+* add row class to horizontal form row (.form-group)
 
 ## 5.0.1 / 2025-02-03
 ### Fixed
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' }
     #   # =>
-    #     <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>
@@ -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.

From bd17525837acff8747a076fbabafdb60709f444f Mon Sep 17 00:00:00 2001
From: Sue Zhou <sue.zhou@nhs.net>
Date: Tue, 18 Feb 2025 10:46:02 +0000
Subject: [PATCH 2/4] add missing tests

---
 test/helpers/ndr_ui/bootstrap_helper_test.rb | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

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 '<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
 
@@ -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

From 1e1a3c35ef991ba9f7cf258da62f1341a0a7c55b Mon Sep 17 00:00:00 2001
From: Sue Zhou <sue.zhou@nhs.net>
Date: Sun, 2 Mar 2025 11:37:25 +0000
Subject: [PATCH 3/4] minor fixes

---
 CHANGELOG.md                                  |  1 +
 app/assets/stylesheets/ndr_ui/index.scss      | 22 ++++++++++++++++---
 .../ndr_ui/bootstrap/input_group_addons.rb    |  2 +-
 app/helpers/ndr_ui/bootstrap/modal_helper.rb  |  2 +-
 .../input_group_addons_test.rb                |  6 ++---
 5 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 626b5bf..1a8fb0e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,6 @@
 ## [Unreleased]
 * 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..176b88d 100644
--- a/app/helpers/ndr_ui/bootstrap/modal_helper.rb
+++ b/app/helpers/ndr_ui/bootstrap/modal_helper.rb
@@ -228,7 +228,7 @@ def bootstrap_modal_classes(options)
         options = options.stringify_keys
 
         classes = %w(modal-dialog)
-        classes << "modal-#{options['size']}" if MODAL_SIZES.include?(options['size'])
+        classes << "modal-#{options['size']}" if MODAL_SIZES.include?(options['size'].to_s)
         classes.join(' ')
       end
     end
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(
-        '<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>' \
@@ -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>' \
@@ -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>' \

From f7377d83a347980bfe0b60a406cd5d7bc250bc19 Mon Sep 17 00:00:00 2001
From: Sue Zhou <sue.zhou@nhs.net>
Date: Sun, 2 Mar 2025 11:42:34 +0000
Subject: [PATCH 4/4] rubocop fix

---
 app/helpers/ndr_ui/bootstrap/modal_helper.rb | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/helpers/ndr_ui/bootstrap/modal_helper.rb b/app/helpers/ndr_ui/bootstrap/modal_helper.rb
index 176b88d..ae85bb3 100644
--- a/app/helpers/ndr_ui/bootstrap/modal_helper.rb
+++ b/app/helpers/ndr_ui/bootstrap/modal_helper.rb
@@ -227,7 +227,7 @@ def bootstrap_modal_button(label)
       def bootstrap_modal_classes(options)
         options = options.stringify_keys
 
-        classes = %w(modal-dialog)
+        classes = %w[modal-dialog]
         classes << "modal-#{options['size']}" if MODAL_SIZES.include?(options['size'].to_s)
         classes.join(' ')
       end