fix(Form): add gap between columns (#5832)

Author: MarcusNotheis

packages/main/src/components/Form/Form.module.css

@@ -6,17 +6,26 @@
   display: grid;
   align-items: center;
   row-gap: 0.25rem;
-  column-gap: 0.5rem;
+  column-gap: 0;
 
-  /* first row padding if form title is set*/
-  & > [ui5-title] ~ [data-row-index-label='2']:has(+ [data-row-index='3']) {
-    margin-block-start: 0.5rem;
+  --_ui5wcr_form_label_text_align: end;
+
+  [data-component-name='FormGroupTitle'] {
+    margin-inline: 1rem;
   }
-  & > [ui5-title] ~ [data-row-index-label='2'] + [data-row-index='2'] {
-    margin-block-start: 0.5rem;
+
+  [data-label-span='12'] {
+    margin-inline: 1rem;
   }
 
-  --_ui5wcr_form_label_text_align: end;
+  [data-component-name='FormItemLabel']:not([data-label-span='12']) {
+    margin-inline-start: 1rem;
+    margin-inline-end: 0.5rem;
+
+    & ~ [data-component-name='FormItemContent'] {
+      margin-inline-end: 1rem;
+    }
+  }
 }
 
 @container (max-width: 599px) {
@@ -70,11 +79,20 @@
   font-size: var(--sapGroup_Title_FontSize);
   height: 2.75rem;
   line-height: 2.75rem;
-}
+  padding-inline: 1rem;
 
-.labelSpan12 {
-  --_ui5wcr_form_content_span: 12;
-  --_ui5wcr_form_label_text_align: start;
-  --_ui5wcr_form_label_span: 12;
-  row-gap: 0;
+  &:not(:has(~ [data-component-name='FormGroupTitle'])) {
+    margin-block-end: 0.5rem;
+  }
+
+  &:not(
+      :has(
+          ~ [data-component-name='FormGroupTitle']:not(:empty)
+            + [data-component-name='FormItemLabel'][data-row-index-label='3']
+        )
+    ):has(
+      ~ [data-component-name='FormGroupTitle']:empty + [data-component-name='FormItemLabel'][data-row-index-label='3']
+    ) {
+    margin-block-end: 0.5rem;
+  }
 }

packages/main/src/components/FormGroup/FormGroupTitle.module.css

@@ -5,7 +5,6 @@
   font-family: var(--sapFontHeaderFamily);
   color: var(--sapGroup_TitleTextColor);
   font-size: var(--sapFontHeader6Size);
-  margin: 0;
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;

packages/main/src/components/FormItem/index.tsx

@@ -54,6 +54,7 @@ function FormItemLabel({ label, style, className, rowIndex }: FormItemLabelProps
         data-label-span={labelSpan}
         showColon={!!label}
         data-row-index-label={rowIndex}
+        data-component-name="FormItemLabel"
       >
         {label}
       </Label>
@@ -62,7 +63,13 @@ function FormItemLabel({ label, style, className, rowIndex }: FormItemLabelProps
 
   if (isValidElement(label)) {
     const { showColon, wrappingType, style: labelStyle, children } = label.props;
-    return cloneElement<LabelPropTypes & { 'data-label-span'?: number; 'data-row-index-label'?: number }>(
+    return cloneElement<
+      LabelPropTypes & {
+        'data-label-span'?: number;
+        'data-row-index-label'?: number;
+        'data-component-name'?: string;
+      }
+    >(
       label,
       {
         showColon: showColon ?? true,
@@ -73,7 +80,8 @@ function FormItemLabel({ label, style, className, rowIndex }: FormItemLabelProps
           ...(labelStyle || {})
         },
         'data-label-span': labelSpan,
-        'data-row-index-label': rowIndex
+        'data-row-index-label': rowIndex,
+        'data-component-name': 'FormItemLabel'
       },
       children ?? ''
     );
@@ -159,6 +167,7 @@ const FormItem = (props: FormItemPropTypes) => {
         }}
         data-label-span={labelSpan}
         data-row-index={calculatedGridRowStart}
+        data-component-name="FormItemContent"
       >
         {flattenFragments(children).map((child, index) => {
           // @ts-expect-error: type can't be string because of `isValidElement`