fix(Form): correct alignment of FormItems (#1305)

Author: Lukas742

packages/main/src/components/Form/Form.jss.ts

@@ -14,7 +14,7 @@ const labelSpanClasses = () => {
 const styles = {
   form: {
     display: 'grid',
-    alignItems: 'center',
+    alignItems: 'baseline',
     rowGap: '0.25rem',
     columnGap: '0.5rem',
     gridTemplateColumns: `repeat(12, 1fr)`,

packages/main/src/components/Form/Form.stories.mdx

@@ -3,6 +3,7 @@ import { CheckBox } from '@ui5/webcomponents-react/lib/CheckBox';
 import { Form } from '@ui5/webcomponents-react/lib/Form';
 import { FormGroup } from '@ui5/webcomponents-react/lib/FormGroup';
 import { FormItem } from '@ui5/webcomponents-react/lib/FormItem';
+import { TextArea } from '@ui5/webcomponents-react/lib/TextArea';
 import { Input } from '@ui5/webcomponents-react/lib/Input';
 import { InputType } from '@ui5/webcomponents-react/lib/InputType';
 import { Option } from '@ui5/webcomponents-react/lib/Option';
@@ -55,6 +56,9 @@ import { DocsHeader } from '@shared/stories/DocsHeader';
               <Option>Italy</Option>
             </Select>
           </FormItem>
+          <FormItem label="Additional Comment">
+            <TextArea rows={5} style={{ width: '210px' }} />
+          </FormItem>
           <FormItem label={'Home address'}>
             <CheckBox checked />
           </FormItem>

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

@@ -29,14 +29,11 @@ const useStyles = createUseStyles(
     label: {
       gridColumnEnd: 'span var(--ui5wcr_form_label_span)',
       justifySelf: 'var(--ui5wcr_form_label_text_align)',
-      textAlign: 'var(--ui5wcr_form_label_text_align)',
-      alignSelf: 'start',
-      paddingTop: CssSizeVariables.sapWcrFormLabelPaddingTop,
-      paddingBottom: '0.075rem'
+      textAlign: 'var(--ui5wcr_form_label_text_align)'
     },
     content: {
-      gridColumnEnd: 'span var(--ui5wcr_form_content_span)',
-      alignSelf: 'end'
+      display: 'flex',
+      gridColumnEnd: 'span var(--ui5wcr_form_content_span)'
     }
   },
   { name: 'FormItem' }