fix(ui-form-field): should not change layout when only screenreader-only message is present

INSTUI-4673

Author: HerrTopi

packages/ui-form-field/src/FormFieldLayout/styles.ts

@@ -29,6 +29,7 @@ import type {
 } from './props'
 import type { FormFieldLayoutTheme } from '@instructure/shared-types'
 import { mapSpacingToShorthand } from '@instructure/emotion'
+import type { FormMessage } from '../FormPropTypes'
 
 const generateGridLayout = (
   isInlineLayout: boolean,
@@ -75,10 +76,16 @@ const generateStyle = (
   props: FormFieldLayoutProps,
   styleProps: FormFieldStyleProps
 ): FormFieldLayoutStyle => {
-  const { inline, layout, vAlign, labelAlign, margin } = props
+  const { inline, layout, vAlign, labelAlign, margin, messages } = props
   const { hasMessages, hasVisibleLabel, hasNewErrorMsgAndIsGroup } = styleProps
   const cssMargin = mapSpacingToShorthand(margin, componentTheme.spacing)
   const isInlineLayout = layout === 'inline'
+
+  const hasNonEmptyMessages = messages?.reduce(
+    (_, message) => message.type !== 'screenreader-only',
+    false
+  )
+
   // This is quite ugly, we should simplify it
   const gridTemplateAreas = generateGridLayout(
     isInlineLayout,
@@ -150,7 +157,7 @@ const generateStyle = (
           )
         },
       columnGap: '0.375rem',
-      rowGap: '0.75rem',
+      rowGap: hasNonEmptyMessages ? '0.75rem' : '0',
       width: '100%',
       ...(inline && {
         display: 'inline-grid',
@@ -162,7 +169,9 @@ const generateStyle = (
       ...labelStyles,
       // NOTE: needs separate groups for `:is()` and `:-webkit-any()` because of css selector group validation (see https://www.w3.org/TR/selectors-3/#grouping)
       '&:is(label)': labelStyles,
-      '&:-webkit-any(label)': labelStyles
+      '&:-webkit-any(label)': labelStyles,
+
+      paddingBottom: hasNonEmptyMessages ? '0' : '0.75rem'
     },
     formFieldChildren: {
       label: 'formFieldLayout__children',