ndr_ui 5.0.1 → 5.0.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ac1513f28fb442cd411ed3448be7429df4e1b31257f9f824582f7e7dade4a792
-  data.tar.gz: 94183bcd72c12668f441de2c11ad9c94ae3821a597d743888abb6b5ccec14210
+  metadata.gz: b2c8d679fa84b0f26d8aeb70275d1a156923d26bce76e99d6b67f9a48f07b6c9
+  data.tar.gz: a05615082e74f125753a45e9461ca92c372bfda67d2a3243a3f3008dd24ef388
 SHA512:
-  metadata.gz: cb20871cec4626f5ec59384fdb698d284f041064ae4e5d49e28bacf3e1f465ff459ace458a3f28f575fde366e063b42bcdc40534e6168bf1df393f8b50a2b69a
-  data.tar.gz: 2b40d49fb9d537f91dcdada361515988431a0565bb44512eff1df38a49e193d3ced8026ffa13fc31e74d9f2316114f280a32e8d335303778600025166919f026
+  metadata.gz: 4449ba00a2a7d0e0619e017c48b4b3ca312524a747b9e6ea2d2fbc78e3119e3027ef8ec24b7442daf8c3484b8b9bbbf2c845d060a3f3f34b2d930b5af5761f3e
+  data.tar.gz: 3def4371d15455acaefa62d56808f5bfcce96513aa0210c348fecf0506042ab6fe4cd183117cf6ec732572cd87bf51ee7e38fdf775231c58e82a601112b824dc

data/CHANGELOG.md

@@ -1,6 +1,15 @@
 ## [Unreleased]
 * no unreleased changes *
 
+## 5.0.3 / 2025-03-07
+### Fixed
+* fix input group UI style in form and readonly mode
+
+## 5.0.2 / 2025-03-02
+### Fixed
+* 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
 * fix cancel modal button

data/app/assets/stylesheets/ndr_ui/index.scss

@@ -7,16 +7,50 @@ $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. 
-.input-group {
-  .form-control-plaintext + .input-group-text {
-    background: none;
-    border:0;
+// UI fix for form element in .input-group
+form .input-group {
+  // 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;
+  }
+
+  // for input-addons in readonly mode, reserve the border style for plain text and add more spacing on both sides
+  > .form-control-plaintext:has(+ .input-group-text),
+  > .input-group-text + .form-control-plaintext {
+    border: var(--bs-border-width) solid var(--bs-border-color);
+    padding-left: 8px;
+    padding-right: 8px;
+  }
+
+  // BS radius fix for elements in .input-group, as we added `.has-validation` class to .input-group by default
+  // remove right radius if an element is followed by another
+  // > .form-control in edit mode
+  .form-control:has(+ .input-group-text),
+  .input-group-text:has(+ .form-control) {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  // > .form-control-plaintext in readonly mode
+  .form-control-plaintext:has(+ .input-group-text),
+  .input-group-text:has(+ .form-control-plaintext) {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  // as a general global fix, ensure correct radius on first and last element
+  > :first-child {
+    border-top-left-radius: var(--bs-border-radius);
+    border-bottom-left-radius: var(--bs-border-radius);
+  }
+  > :last-child {
+    border-top-right-radius: var(--bs-border-radius);
+    border-bottom-right-radius: var(--bs-border-radius);
   }
 }
 

data/app/builders/ndr_ui/bootstrap/input_group_addons.rb

@@ -18,7 +18,7 @@ module NdrUi
         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

data/app/helpers/ndr_ui/bootstrap/modal_helper.rb

@@ -227,8 +227,8 @@ module NdrUi
       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

data/app/helpers/ndr_ui/bootstrap_helper.rb

@@ -381,7 +381,7 @@ module NdrUi
     # ==== 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 @@ module NdrUi
       # 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.

data/lib/ndr_ui/version.rb

@@ -2,5 +2,5 @@
 
 # This stores the current version of the NdrUi gem. Use semantic versioning http://semver.org
 module NdrUi
-  VERSION = '5.0.1'
+  VERSION = '5.0.3'
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: ndr_ui
 version: !ruby/object:Gem::Version
-  version: 5.0.1
+  version: 5.0.3
 platform: ruby
 authors:
 - NDR Development Team
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-02-03 00:00:00.000000000 Z
+date: 2025-03-07 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bootstrap