Bug fix: Text field validation wrap styles (#2032)

primer · May 31, 2023 · 607889b · 607889b
1 parent 6ac5cb9
commit 607889b
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 3 deletions.
diff --git a/.changeset/friendly-buses-thank.md b/.changeset/friendly-buses-thank.md
@@ -0,0 +1,5 @@
+---
+"@primer/view-components": patch
+---
+
+Bug fix: Text field validation wrap styles
diff --git a/app/components/primer/alpha/form_control.html.erb b/app/components/primer/alpha/form_control.html.erb
@@ -10,7 +10,7 @@
   <% end %>
   <% if @validation_message %>
     <%= render(Primer::BaseComponent.new(tag: :div, **@validation_arguments)) do %>
-      <%= render(Primer::Beta::Octicon.new(icon: :"alert-fill", size: :xsmall, aria: { hidden: true })) %>
+      <span class="FormControl-inlineValidation--visual"><%= render(Primer::Beta::Octicon.new(icon: :"alert-fill", size: :xsmall, aria: { hidden: true })) %></span>
       <span><%= @validation_message %></span>
     <% end %>
   <% end %>

diff --git a/app/components/primer/alpha/text_field.pcss b/app/components/primer/alpha/text_field.pcss
@@ -34,18 +34,25 @@
 .FormControl-inlineValidation {
   display: flex;
   font-size: var(--text-caption-size, 12px);
+  line-height: var(--text-caption-lineHeight, calc(16 / 12));
   font-weight: var(--base-text-weight-semibold, 600);
   color: var(--color-danger-fg);
   fill: var(--color-danger-fg);
   flex-direction: row;
-  align-items: center;
+  align-items: start;
   gap: var(--base-size-4, 4px);
 
   & p {
     margin-bottom: 0;
   }
 }
 
+.FormControl-inlineValidation--visual {
+  align-items: center;
+  display: flex;
+  min-height: var(--base-size-16, 16px);
+}
+
 .FormControl-spacingWrapper {
   display: flex;
   flex-direction: column;

diff --git a/lib/primer/forms/form_control.html.erb b/lib/primer/forms/form_control.html.erb
@@ -10,7 +10,7 @@
     <% end %>
     <%= content %>
     <%= content_tag(:div, **@input.validation_arguments) do %>
-      <%= render(Primer::Beta::Octicon.new(icon: :"alert-fill", size: :xsmall, aria: { hidden: true })) %>
+      <span class="FormControl-inlineValidation--visual"><%= render(Primer::Beta::Octicon.new(icon: :"alert-fill", size: :xsmall, aria: { hidden: true })) %></span>
       <%= content_tag(:span, @input.invalid? ? @input.validation_messages.first : "", **@input.validation_message_arguments) %>
     <% end %>
     <%= render(Caption.new(input: @input)) %>