refactor(ui-form-field): more pixel pushing, now it should look like the original

Author: matyasf

packages/ui-form-field/src/FormField/README.md

@@ -33,5 +33,11 @@ type: example
     <TextInput id="_foo124"/>
   </FormField>
   test
+  <hr/>
+  <FormField id="_foo121" label={<ScreenReaderContent>hidden text</ScreenReaderContent>} width="400px" layout="stacked">
+    <TextInput id="_foo121" />
+  </FormField>
+  test
+  <hr/>
 </div>
 ```

packages/ui-form-field/src/FormFieldLayout/index.tsx

@@ -149,11 +149,7 @@ class FormFieldLayout extends Component<FormFieldLayoutProps> {
         )
       }
       // needs to be wrapped because it needs an `id`
-      return (
-        <div id={this._labelId} css={this.props.styles?.formFieldLabel}>
-          {this.props.label}
-        </div>
-      )
+      return <div id={this._labelId}>{this.props.label}</div>
     } else return null
   }
 
@@ -177,7 +173,6 @@ class FormFieldLayout extends Component<FormFieldLayoutProps> {
 
     const hasNewErrorMsgAndIsGroup =
       !!messages?.find((m) => m.type === 'newError') && isGroup
-
     return (
       <ElementType
         {...omitProps(props, [...FormFieldLayout.allowedProps])}

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

@@ -68,6 +68,10 @@ type FormFieldLayoutOwnProps = {
    */
   layout?: 'stacked' | 'inline'
   labelAlign?: 'start' | 'end'
+  /**
+   * The vertical alignment of the label and the controls.
+   * "top" by default
+   */
   vAlign?: 'top' | 'middle' | 'bottom'
   width?: string
   /**

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

@@ -28,8 +28,7 @@ import type {
   FormFieldStyleProps
 } from './props'
 import type { FormFieldLayoutTheme } from '@instructure/shared-types'
-// TODO If the label is invisible the top gap is too large
-// TODO DateTimeInput renders empty messages, these leave too large gaps too
+
 /**
  * ---
  * private: true
@@ -45,7 +44,7 @@ const generateStyle = (
   props: FormFieldLayoutProps,
   styleProps: FormFieldStyleProps
 ): FormFieldLayoutStyle => {
-  const { inline, layout } = props
+  const { inline, layout, vAlign } = props
   const { hasMessages, hasVisibleLabel } = styleProps
   // This is quite ugly, we should simplify it
   const inlineContainerAndLabel = layout === 'inline' && !inline
@@ -77,7 +76,7 @@ const generateStyle = (
     fontWeight: componentTheme.fontWeight,
     fontSize: componentTheme.fontSize,
     lineHeight: componentTheme.lineHeight,
-    margin: 0,
+    margin: '0 0 0.75rem 0',
     textAlign: inlineContainerAndLabel ? 'end' : 'start',
     ...(isInlineLayout &&
       inline && {
@@ -95,6 +94,14 @@ const generateStyle = (
       }
   }
 
+  let alignItems = 'start'
+  if (vAlign == 'top') {
+    alignItems = 'start'
+  } else if (vAlign == 'middle') {
+    alignItems = 'center'
+  } else if (vAlign == 'bottom') {
+    alignItems = 'end'
+  }
   return {
     formFieldLayout: {
       label: 'formFieldLayout',
@@ -107,6 +114,7 @@ const generateStyle = (
       textAlign: 'start',
       opacity: 'inherit',
       display: 'grid',
+      alignItems: alignItems,
       gridTemplateColumns: gridTemplateColumns,
       gridTemplateAreas: gridTemplateAreas,
       [`@media screen and (max-width: ${componentTheme.stackedOrInlineBreakpoint})`]:
@@ -119,19 +127,10 @@ const generateStyle = (
             gridTemplateColumns: '100%'
           })
         },
-      [`@media screen and (min-width: ${componentTheme.stackedOrInlineBreakpoint})`]:
-        {
-          ...(isInlineLayout &&
-            inline && {
-              textAlign: 'end' // TODO this is a bug, remove it!
-            })
-        },
-      rowGap: '0.75rem',
       columnGap: '0.375rem',
       width: '100%',
       ...(inline && {
         display: 'inline-grid',
-        verticalAlign: 'middle',
         width: 'auto'
       })
     },
@@ -147,7 +146,7 @@ const generateStyle = (
     formFieldChildren: {
       label: 'formFieldLayout__children',
       gridArea: 'controls',
-      alignSelf: 'center',
+      ...(hasMessages && { marginBottom: '0.75rem' }),
       ...(isInlineLayout &&
         inline && {
           [`@media screen and (min-width: ${componentTheme.stackedOrInlineBreakpoint})`]: