Changes alignment of form control validation message icon (#3121)

* changes alignment of validation message icon

* Create .changeset/big-days-obey.md

* updates snapshots

* updates snapshots again

* refactors layout styles

* test(vrt): update snapshots

---------

Co-authored-by: joshblack <joshblack@users.noreply.github.com>

.changeset/big-days-obey.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Changes the alignment of the validation message icon to be vertically center-aligned with the first line of text.

src/TextInput/TextInput.stories.tsx

@@ -26,7 +26,7 @@ export const Playground = (args: FormControlArgs<TextInputProps>) => {
   }
 
   return (
-    <Box as="form">
+    <Box as="form" maxWidth={200}>
       <FormControl {...parentArgs}>
         <FormControl.Label {...labelArgs} />
         <TextInput value={value} onChange={handleChange} {...args} />

src/_InputValidation.tsx

@@ -29,12 +29,18 @@ const InputValidation: React.FC<React.PropsWithChildren<Props>> = ({children, id
   const IconComponent = validationStatus ? validationIconMap[validationStatus] : undefined
   const fgColor = validationStatus ? validationColorMap[validationStatus] : undefined
 
+  // TODO: use `text-caption-lineHeight` token as a custom property when it's available
+  // then, we can move this all to CSS and use `calc` to get our height values
+  const captionLineHeight = 16 / 12
+  const iconSize = 12
+  const iconBoxMinHeight = iconSize * captionLineHeight
+
   return (
     <Text
       sx={{
         fontSize: 0,
         fontWeight: 'bold',
-        alignItems: 'center',
+        alignItems: 'start',
         color: fgColor,
         display: 'flex',
         a: {
@@ -46,11 +52,13 @@ const InputValidation: React.FC<React.PropsWithChildren<Props>> = ({children, id
       aria-live="polite"
     >
       {IconComponent && (
-        <Box as="span" mr={1} sx={{display: 'flex'}} aria-hidden="true">
-          <IconComponent size={12} fill="currentColor" />
+        <Box as="span" alignItems="center" display="flex" minHeight={iconBoxMinHeight} mr={1} aria-hidden="true">
+          <IconComponent size={iconSize} fill="currentColor" />
         </Box>
       )}
-      <span id={id}>{children}</span>
+      <Box as="span" id={id} sx={{lineHeight: captionLineHeight}}>
+        {children}
+      </Box>
     </Text>
   )
 }

src/__tests__/deprecated/__snapshots__/ChoiceFieldset.test.tsx.snap

@@ -1993,6 +1993,15 @@ exports[`ChoiceFieldset renders with a success validation message 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  min-height: 16px;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c14 {
+  line-height: 1.3333333333333333;
 }
 
 .c2 {
@@ -2019,10 +2028,10 @@ exports[`ChoiceFieldset renders with a success validation message 1`] = `
 .c12 {
   font-size: 12px;
   font-weight: bold;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
+  -webkit-align-items: start;
+  -webkit-box-align: start;
+  -ms-flex-align: start;
+  align-items: start;
   color: success.fg;
   display: -webkit-box;
   display: -webkit-flex;
@@ -2209,6 +2218,7 @@ exports[`ChoiceFieldset renders with a success validation message 1`] = `
             <span
               aria-hidden="true"
               class="c13"
+              display="flex"
             >
               <svg
                 aria-hidden="true"
@@ -2227,6 +2237,7 @@ exports[`ChoiceFieldset renders with a success validation message 1`] = `
               </svg>
             </span>
             <span
+              class="c14"
               id="react-aria-1-validationMsg"
             >
               You made the right selection
@@ -2288,6 +2299,15 @@ exports[`ChoiceFieldset renders with an error validation message 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  min-height: 16px;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c14 {
+  line-height: 1.3333333333333333;
 }
 
 .c2 {
@@ -2314,10 +2334,10 @@ exports[`ChoiceFieldset renders with an error validation message 1`] = `
 .c12 {
   font-size: 12px;
   font-weight: bold;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
+  -webkit-align-items: start;
+  -webkit-box-align: start;
+  -ms-flex-align: start;
+  align-items: start;
   color: danger.fg;
   display: -webkit-box;
   display: -webkit-flex;
@@ -2504,6 +2524,7 @@ exports[`ChoiceFieldset renders with an error validation message 1`] = `
             <span
               aria-hidden="true"
               class="c13"
+              display="flex"
             >
               <svg
                 aria-hidden="true"
@@ -2522,6 +2543,7 @@ exports[`ChoiceFieldset renders with an error validation message 1`] = `
               </svg>
             </span>
             <span
+              class="c14"
               id="react-aria-1-validationMsg"
             >
               You made the wrong selection