Fix alignment of InputGroups with error messages

Author: HDinger

.changeset/many-sheep-yell.md

@@ -0,0 +1,5 @@
+---
+'@openproject/primer-view-components': patch
+---
+
+Align Primer::OpenProject::InputGroup with error messages

app/components/primer/open_project/input_group.html.erb

@@ -4,6 +4,15 @@
     <%= trailing_action %>
   <% end %>
 
+  <% if @text_input_validation_message %>
+    <div class="FormControl-inlineValidation mt-1" id="<%= @text_input_validation_message_id %>">
+      <span class="FormControl-inlineValidation--visual">
+        <%= render(Primer::Beta::Octicon.new(icon: :"alert-fill", size: :xsmall, aria: { hidden: true })) %>
+      </span>
+      <span><%= @text_input_validation_message %></span>
+    </div>
+  <% end %>
+
   <% if caption %>
     <%= caption %>
   <% end %>

app/components/primer/open_project/input_group.rb

@@ -49,6 +49,19 @@ class InputGroup < Primer::Component
       renders_one :text_input, lambda { |readonly: true, **system_arguments|
         deny_single_argument(:input_width, "Set the `input_width` on the `InputGroup`", **system_arguments)
         deny_single_argument(:caption, "Set the `caption` on the `InputGroup`", **system_arguments)
+
+        # Extract validation_message so it can be rendered outside the flex row.
+        # This prevents the trailing action from misaligning when validation is present.
+        @text_input_validation_message = system_arguments.delete(:validation_message)
+        if @text_input_validation_message
+          @text_input_validation_message_id = self.class.generate_id(base_name: "input-group-validation")
+          system_arguments[:invalid] = true
+          system_arguments[:aria] = merge_aria(
+            system_arguments,
+            { aria: { describedby: @text_input_validation_message_id } }
+          )
+        end
+
         system_arguments[:input_width] = @system_arguments[:input_width]
 
         system_arguments[:classes] = class_names(

previews/primer/open_project/input_group_preview.rb

@@ -71,6 +71,15 @@ def with_caption
           menu.with_caption { "Some caption" }
         end
       end
+
+      # @label With error message
+      # @snapshot
+      def with_error_message
+        render(Primer::OpenProject::InputGroup.new) do |menu|
+          menu.with_text_input(name: "a name", label: "My input group", validation_message: "Custom validation message", value: "Copyable value")
+          menu.with_trailing_action_clipboard_copy_button(id: "button", value: "Copyable value", aria: { label: "Copy some text" })
+        end
+      end
     end
   end
 end

test/components/primer/open_project/input_group_test.rb

@@ -53,6 +53,17 @@ def test_renders_caption
     assert_selector(".FormControl-caption")
   end
 
+  def test_renders_validation_message_outside_flex_row
+    render_inline(Primer::OpenProject::InputGroup.new) do |menu|
+      menu.with_text_input(name: "a name", label: "My input group", value: "Copyable value", validation_message: "Custom validation message")
+      menu.with_trailing_action_clipboard_copy_button(id: "button", value: "Copyable value", aria: { label: "Copy some text" })
+    end
+
+    validation_id = page.find(".InputGroup > .FormControl-inlineValidation", text: "Custom validation message")[:id]
+    assert_selector(%(.FormControl-input[aria-describedby~="#{validation_id}"]))
+    assert_selector(".FormControl-input[aria-invalid]")
+  end
+
   def test_does_not_render_caption_from_system_argument
     render_inline(Primer::OpenProject::InputGroup.new(caption: "Some caption")) do |menu|
       menu.with_text_input(name: "a name", label: "My input group", value: "Copyable value")