fix(antd/next): fix tooltip style incorrect of formitem (#1749)

alibaba · Jul 8, 2021 · 4ad1884 · 4ad1884
1 parent 66fd1bc
commit 4ad1884
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 35 deletions.
diff --git a/packages/antd/docs/components/FormLayout.md b/packages/antd/docs/components/FormLayout.md
@@ -35,6 +35,9 @@ export default () => (
           name="input"
           title="输入框"
           x-decorator="FormItem"
+          x-decorator-props={{
+            tooltip: <div>123</div>,
+          }}
           x-component="Input"
           required
         />
@@ -77,13 +80,17 @@ const schema = {
       'x-component-props': {
         labelCol: 6,
         wrapperCol: 10,
+        layout: 'vertical',
       },
       properties: {
         input: {
           type: 'string',
           title: '输入框',
           required: true,
           'x-decorator': 'FormItem',
+          'x-decorator-props': {
+            tooltip: <div>123</div>,
+          },
           'x-component': 'Input',
         },
         select: {

diff --git a/packages/antd/src/form-item/style.less b/packages/antd/src/form-item/style.less
@@ -14,10 +14,6 @@
   &-label {
     line-height: @height-base;
     min-height: @height-base - 2;
-
-    * {
-      line-height: @height-base;
-    }
   }
 
   textarea.@{ant-prefix}-input {
@@ -211,10 +207,6 @@
   .@{form-item-cls}-label {
     line-height: @height-sm;
     min-height: @height-sm - 2;
-
-    * {
-      line-height: @height-sm;
-    }
   }
 
   .@{form-item-cls}-control-content {
@@ -350,10 +342,6 @@
   .@{form-item-cls}-label {
     line-height: @height-lg;
     min-height: @height-lg - 2;
-
-    * {
-      line-height: @height-lg;
-    }
   }
 
   .@{form-item-cls}-control-content {
@@ -494,11 +482,6 @@
     .@{form-item-cls}-label {
       min-height: @height-base - 10;
       line-height: 1.5715;
-
-      * {
-        min-height: @height-base - 10;
-        line-height: 1.5715;
-      }
     }
   }
 }
@@ -512,7 +495,7 @@
   color: #00000073;
   display: flex;
   align-items: center;
-  height: @height-base;
+  max-height: @height-base;
 
   span {
     display: inline-flex;

diff --git a/packages/next/docs/components/FormLayout.md b/packages/next/docs/components/FormLayout.md
@@ -35,6 +35,9 @@ export default () => (
           name="input"
           title="输入框"
           x-decorator="FormItem"
+          x-decorator-props={{
+            tooltip: <div>123</div>,
+          }}
           x-component="Input"
           required
         />
@@ -77,13 +80,17 @@ const schema = {
       'x-component-props': {
         labelCol: 6,
         wrapperCol: 10,
+        layout: 'vertical',
       },
       properties: {
         input: {
           type: 'string',
           title: '输入框',
           required: true,
           'x-decorator': 'FormItem',
+          'x-decorator-props': {
+            tooltip: <div>123</div>,
+          },
           'x-component': 'Input',
         },
         select: {

diff --git a/packages/next/src/form-item/main.scss b/packages/next/src/form-item/main.scss
@@ -10,10 +10,6 @@
   line-height: $form-element-medium-height;
   font-size: $form-element-medium-font-size;
 
-  &-label * {
-    line-height: $form-element-medium-height;
-  }
-
   &-label-content {
     min-height: $form-element-medium-height;
   }
@@ -176,10 +172,6 @@
 .#{$form-item-cls}-size-small {
   font-size: $form-element-small-font-size;
 
-  .#{$form-item-cls}-label * {
-    line-height: $form-element-small-height;
-  }
-
   .#{$form-item-cls}-label-content {
     min-height: $form-element-small-height;
   }
@@ -224,10 +216,6 @@
 .#{$form-item-cls}-size-large {
   font-size: $form-element-large-font-size;
 
-  .#{$form-item-cls}-label * {
-    line-height: $form-element-large-height;
-  }
-
   .#{$form-item-cls}-label-content {
     min-height: $form-element-large-height;
   }
@@ -269,10 +257,6 @@
   &-layout-vertical {
     display: block;
 
-    .#{$form-item-cls}-label * {
-      line-height: $form-element-medium-height - 10 !important;
-    }
-
     .#{$form-item-cls}-label-content {
       min-height: $form-element-medium-height - 10 !important;
     }
@@ -286,8 +270,8 @@
 .#{$form-item-cls}-label-tooltip-icon {
   margin-left: 4px;
   color: #00000073;
-  height: $form-element-medium-height;
   cursor: pointer;
+  max-height: $form-element-medium-height;
 }
 
 .#{$form-item-cls}-control-align-left {