style: form label extra change display: block -> flex, add align-items: center, close #324, #372

content/input/form/index-en-US.md

@@ -60,17 +60,26 @@ You can also set label` properties for each field, by default is the same as fie
 
 ```jsx live=true dir="column"
 import React from 'react';
-import { Form } from '@douyinfe/semi-ui';
+import { Form, Tooltip } from '@douyinfe/semi-ui';
+import { IconHelpCircle } from '@douyinfe/semi-icons';
 
 () => (
     <Form layout='horizontal'>
-        <Form.Select field="role" label='UserRole' style={{width:120}}>
+        <Form.Select field="role" label='UserRole' style={{ width:120 }}>
             <Form.Select.Option value="admin">Admin</Form.Select.Option>
             <Form.Select.Option value="user">User</Form.Select.Option>
             <Form.Select.Option value="guest">Guest</Form.Select.Option>
         </Form.Select>
         <Form.Input field='userName' label='UserName' />
         <Form.Input field='password' label='Password' />
+        <Form.Input
+            field='password'
+            label={{ 
+                text: 'Password',
+                extra: <Tooltip content='more detail'><IconHelpCircle style={{ color: '--semi-color-text-1' }}/></Tooltip> 
+            }}
+            style={{ width:176 }}
+        />
     </Form>
 );
 ```

content/input/form/index.md

@@ -65,7 +65,7 @@ Semi Form 同时支持多种写法
 
 ```jsx live=true dir="column"
 import React from 'react';
-import { Form } from '@douyinfe/semi-ui';
+import { Form, Tooltip } from '@douyinfe/semi-ui';
 import { IconHelpCircle } from '@douyinfe/semi-icons';
 
 () => {
@@ -73,13 +73,20 @@ import { IconHelpCircle } from '@douyinfe/semi-icons';
 
     return (
         <Form layout='horizontal'  onValueChange={values=>console.log(values)}>
-            <Form.Select field="Role" label='角色' style={{width:176}}>
+            <Form.Select field="Role" label='角色' style={{ width:176 }}>
                 <Option value="admin">管理员</Option>
                 <Option value="user">普通用户</Option>
                 <Option value="guest">访客</Option>
             </Form.Select>
-            <Form.Input field='UserName' label='用户名' style={{width:80}}/>
-            <Form.Input field='Password' label={{ text: '密码', extra: <IconHelpCircle /> }} style={{width:176}}/>
+            <Form.Input field='UserName' label='用户名' style={{ width:80 }}/>
+            <Form.Input
+                field='Password'
+                label={{ 
+                    text: '密码',
+                    extra: <Tooltip content='详情'><IconHelpCircle style={{ color: '--semi-color-text-1' }}/></Tooltip> 
+                }}
+                style={{ width:176 }}
+            />
         </Form>
     );
 };

packages/semi-foundation/form/form.scss

@@ -91,18 +91,18 @@ $rating: #{$prefix}-rating;
         }
 
         &-with-extra {
-            .#{$field}-label-text,
-            .#{$field}-label-extra {
+            .#{$field}-label-text {
                 display: inline-block;
             }
             .#{$field}-label-extra {
+                display: flex;
+                align-items: center;
                 margin-left: $spacing-form_label_extra-marginLeft;
             }
         }
 
         &-required {
             .#{$field}-label-text {
-
                 &::after {
                     content: "*";
                     margin-left: $spacing-form_label_required-marginLeft;
@@ -156,6 +156,11 @@ $rating: #{$prefix}-rating;
             padding-top: $spacing-form_label_posTop-paddingTop;
             padding-bottom: $spacing-form_label_posTop-paddingBottom;
         }
+        .#{$field}-label-with-extra {
+            display: flex;
+            align-items: center;
+        }
+
     }
 
     &[x-label-pos="left"] {
@@ -168,7 +173,10 @@ $rating: #{$prefix}-rating;
             padding-top: $spacing-form_label-paddingTop;
             padding-bottom: $spacing-form_label-paddingTop;
         }
-
+        .#{$field}-label-with-extra {
+            display: flex;
+            align-items: center;
+        }
         .#{$checkboxGroup},
         .#{$radioGroup} {
             padding-top: $spacing-form_label-paddingTop;