feat: add Typography.Title level 5 (#25861)

* feat: add Typography.Title level 5

* fix test

components/style/mixins/typography.less

@@ -47,3 +47,12 @@
     @typography-title-margin-bottom
   );
 }
+.typography-title-5() {
+  .typography-title(
+    @heading-5-size,
+    @typography-title-font-weight,
+    1.5,
+    @heading-color,
+    @typography-title-margin-bottom
+  );
+}

components/style/themes/default.less

@@ -69,6 +69,7 @@
 @heading-2-size: ceil(@font-size-base * 2.14);
 @heading-3-size: ceil(@font-size-base * 1.71);
 @heading-4-size: ceil(@font-size-base * 1.42);
+@heading-5-size: ceil(@font-size-base * 1.14);
 // https://github.com/ant-design/ant-design/issues/20210
 @line-height-base: 1.5715;
 @border-radius-base: 2px;

components/typography/Title.tsx

@@ -3,7 +3,7 @@ import devWarning from '../_util/devWarning';
 import Base, { BlockProps } from './Base';
 import { tupleNum, Omit } from '../_util/type';
 
-const TITLE_ELE_LIST = tupleNum(1, 2, 3, 4);
+const TITLE_ELE_LIST = tupleNum(1, 2, 3, 4, 5);
 
 export type TitleProps = Omit<BlockProps & { level?: typeof TITLE_ELE_LIST[number] }, 'strong'>;
 
@@ -14,7 +14,11 @@ const Title: React.FC<TitleProps> = props => {
   if (TITLE_ELE_LIST.indexOf(level) !== -1) {
     component = `h${level}`;
   } else {
-    devWarning(false, 'Typography.Title', 'Title only accept `1 | 2 | 3 | 4` as `level` value.');
+    devWarning(
+      false,
+      'Typography.Title',
+      'Title only accept `1 | 2 | 3 | 4 | 5` as `level` value. And `5` need 4.6.0+ version.',
+    );
     component = 'h1';
   }
 

components/typography/__tests__/__snapshots__/demo.test.js.snap

@@ -933,5 +933,10 @@ Array [
   >
     h4. Ant Design
   </h4>,
+  <h5
+    class="ant-typography"
+  >
+    h5. Ant Design
+  </h5>,
 ]
 `;

components/typography/__tests__/index.test.js

@@ -65,7 +65,7 @@ describe('Typography', () => {
       mount(<Title level={false} />);
 
       expect(errorSpy).toHaveBeenCalledWith(
-        'Warning: [antd: Typography.Title] Title only accept `1 | 2 | 3 | 4` as `level` value.',
+        'Warning: [antd: Typography.Title] Title only accept `1 | 2 | 3 | 4 | 5` as `level` value. And `5` need 4.6.0+ version.',
       );
     });
   });

components/typography/demo/title.md

@@ -24,6 +24,7 @@ ReactDOM.render(
     <Title level={2}>h2. Ant Design</Title>
     <Title level={3}>h3. Ant Design</Title>
     <Title level={4}>h4. Ant Design</Title>
+    <Title level={5}>h5. Ant Design</Title>
   </>,
   mountNode,
 );

components/typography/index.en-US.md

@@ -42,7 +42,7 @@ Basic text writing, including headings, body text, lists, and more.
 | disabled | Disabled content | boolean | false |  |
 | editable | If editable. Can control edit state when is object | boolean \| { editing: boolean, maxLength: number, autoSize: true \| false \| { minRows: number, maxRows: number }, onStart: function, onChange: function(string) } | false | maxLength and autoSize: 4.6.0 |
 | ellipsis | Display ellipsis when text overflows. Can configure rows and expandable by using object | boolean \| { rows: number, expandable: boolean, onExpand: function(event), onEllipsis: function(ellipsis) } | false | onEllipsis: 4.2.0 |
-| level | Set content importance. Match with `h1`, `h2`, `h3`, `h4` | number: 1, 2, 3, 4 | 1 |  |
+| level | Set content importance. Match with `h1`, `h2`, `h3`, `h4`, `h5` | number: 1, 2, 3, 4, 5 | 1 | 5: 4.6.0 |
 | mark | Marked style | boolean | false |  |
 | underline | Underlined style | boolean | false |  |
 | onChange | Trigger when user edits the content | function(string) | - |  |

components/typography/index.zh-CN.md

@@ -42,7 +42,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/GOM1KQ24O/Typography.svg
 | disabled | 禁用文本 | boolean | false |  |
 | editable | 是否可编辑，为对象时可对编辑进行控制 | boolean \| { editing: boolean, maxLength: number, autoSize: true \| false \| { minRows: number, maxRows: number }, onStart: function, onChange: function(string) } | false | maxLength and autoSize: 4.6.0 |
 | ellipsis | 自动溢出省略，为对象时可设置省略行数与是否可展开等 | boolean \| { rows: number, expandable: boolean, onExpand: function(event), onEllipsis: function(ellipsis) } | false | onEllipsis: 4.2.0 |
-| level | 重要程度，相当于 `h1`、`h2`、`h3`、`h4` | number: 1, 2, 3, 4 | 1 |  |
+| level | 重要程度，相当于 `h1`、`h2`、`h3`、`h4`、`h5` | number: 1, 2, 3, 4, 5 | 1 | 5: 4.6.0 |
 | mark | 添加标记样式 | boolean | false |  |
 | underline | 添加下划线样式 | boolean | false |  |
 | onChange | 当用户提交编辑内容时触发 | function(string) | - |  |

components/typography/style/index.less

@@ -48,11 +48,16 @@
   h4 {
     .typography-title-4();
   }
+  h5&,
+  h5 {
+    .typography-title-5();
+  }
 
   h1&,
   h2&,
   h3&,
-  h4& {
+  h4&,
+  h5& {
     .@{typography-prefix-cls} + & {
       margin-top: @typography-title-margin-top;
     }
@@ -65,11 +70,13 @@
   h1,
   h2,
   h3,
-  h4 {
+  h4,
+  h5 {
     + h1,
     + h2,
     + h3,
-    + h4 {
+    + h4,
+    + h5 {
       margin-top: @typography-title-margin-top;
     }
   }