refactor(ui-form-field): fix wrong bottom margin when layout is inline

Also correct the margin between controls and messages in DateTimeInput

Author: matyasf

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

@@ -154,7 +154,11 @@ class FormFieldLayout extends Component<FormFieldLayoutProps> {
         )
       }
       // needs to be wrapped because it needs an `id`
-      return <div id={this._labelId}>{this.props.label}</div>
+      return (
+        <div id={this._labelId} style={{ display: 'contents' }}>
+          {this.props.label}
+        </div>
+      )
     } else return null
   }
 

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

@@ -102,8 +102,8 @@ const generateStyle = (
     fontWeight: componentTheme.fontWeight,
     fontSize: componentTheme.fontSize,
     lineHeight: componentTheme.lineHeight,
-    margin: '0 0 0.75rem 0',
     ...(isInlineLayout && {
+      margin: '0',
       // when inline add a small padding between the label and the control
       paddingRight: componentTheme.inlinePadding,
       // and use the horizontal alignment prop
@@ -150,6 +150,7 @@ const generateStyle = (
           )
         },
       columnGap: '0.375rem',
+      rowGap: '0.75rem',
       width: '100%',
       ...(inline && {
         display: 'inline-grid',
@@ -158,20 +159,16 @@ const generateStyle = (
     },
     formFieldLabel: {
       label: 'formFieldLayout__label',
-      ...(hasVisibleLabel && {
-        ...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
-      })
+      ...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
     },
     formFieldChildren: {
       label: 'formFieldLayout__children',
       gridArea: 'controls',
       // add a small margin between the message and the controls
       ...(hasMessages && hasNewErrorMsgAndIsGroup && { marginTop: '0.375rem' }),
-      ...(hasMessages &&
-        !hasNewErrorMsgAndIsGroup && { marginBottom: '0.75rem' }),
       ...(isInlineLayout &&
         inline && {
           [`@media screen and (min-width: ${componentTheme.stackedOrInlineBreakpoint})`]: