fix: typography title margin issue

ant-design · Mar 4, 2022 · ec85ed8 · ec85ed8
1 parent c7fe1c8
commit ec85ed8
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 39 deletions.
diff --git a/components/typography/demo/interactive.md b/components/typography/demo/interactive.md
@@ -15,7 +15,7 @@ Provide additional interactive capacity of editable and copyable.
 
 ```jsx
 import React, { useState } from 'react';
-import { Checkbox, Radio, Typography } from 'antd';
+import { Checkbox, Radio, Typography, Divider } from 'antd';
 import { CheckOutlined, HighlightOutlined, SmileOutlined, SmileFilled } from '@ant-design/icons';
 
 const { Paragraph } = Typography;
@@ -59,11 +59,6 @@ const Demo = () => {
 
   return (
     <>
-      <Typography.Title editable level={1}>h1. Ant Design</Typography.Title>
-      <Typography.Title editable level={2}>h2. Ant Design</Typography.Title>
-      <Typography.Title editable level={3}>h3. Ant Design</Typography.Title>
-      <Typography.Title editable level={4}>h4. Ant Design</Typography.Title>
-      <Typography.Title editable level={5}>h5. Ant Design</Typography.Title>
       <Paragraph editable={{ onChange: setEditableStr }}>{editableStr}</Paragraph>
       <Paragraph
         editable={{
@@ -124,6 +119,22 @@ const Demo = () => {
       >
         {lengthLimitedStr}
       </Paragraph>
+      <Typography.Title editable level={1} style={{ margin: 0 }}>
+        h1. Ant Design
+      </Typography.Title>
+      <Typography.Title editable level={2} style={{ margin: 0 }}>
+        h2. Ant Design
+      </Typography.Title>
+      <Typography.Title editable level={3} style={{ margin: 0 }}>
+        h3. Ant Design
+      </Typography.Title>
+      <Typography.Title editable level={4} style={{ margin: 0 }}>
+        h4. Ant Design
+      </Typography.Title>
+      <Typography.Title editable level={5} style={{ margin: 0 }}>
+        h5. Ant Design
+      </Typography.Title>
+      <Divider />
       <Paragraph copyable>This is a copyable text.</Paragraph>
       <Paragraph copyable={{ text: 'Hello, Ant Design!' }}>Replace copy text.</Paragraph>
       <Paragraph

diff --git a/components/typography/style/index.less b/components/typography/style/index.less
@@ -77,22 +77,16 @@
     .typography-title-5();
   }
 
-  div&-h1,
-  div&-h2,
-  div&-h3,
-  div&-h4,
-  div&-h5 {
-   & > textarea {
-      margin-bottom: 0;
-      padding-top: 0;
-      padding-bottom: 0;
+  h1&,
+  h2&,
+  h3&,
+  h4&,
+  h5& {
+    .@{typography-prefix-cls} + & {
+      margin-top: @typography-title-margin-top;
     }
   }
 
-  div&-h5 > textarea {
-      padding-top: 3px;
-  }
-
   div,
   ul,
   li,
@@ -226,26 +220,6 @@
       /* stylelint-disable-next-line property-no-vendor-prefix */
       -moz-transition: none;
     }
-
-    .@{typography-prefix-cls}& {
-      &.@{typography-prefix-cls}-h1,
-      &.@{typography-prefix-cls}-h2,
-      &.@{typography-prefix-cls}-h3 {
-        margin-top: -1px;
-        margin-bottom: calc(@typography-title-margin-bottom - 1px);
-      }
-
-      &.@{typography-prefix-cls}-h4 {
-        margin-top: -2px;
-        margin-bottom: calc(@typography-title-margin-bottom - 2px);
-      }
-
-      &.@{typography-prefix-cls}-h5 {
-        margin-top: -4px;
-        margin-bottom: calc(@typography-title-margin-bottom - 4px);
-        line-height: 1;
-      }
-    }
   }
 
   // list