feat: 💄 Divider support plain for lighter style (#23405)

* 💄 Divider support `asHeading` for lighter style

* ✅ fix demo snapshot

* docs: 📖 Divider asHeading documentation

* fix tsd

* ✅ fix demo snapshot

* asHeading to plain

* ✅ fix demo snapshot

* fix css

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

@@ -1,83 +1,59 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders ./components/divider/demo/customize-style.md correctly 1`] = `
-<div>
+Array [
   <div
     class="ant-divider ant-divider-horizontal"
     role="separator"
     style="height:2px;background-color:#7cb305"
-  />
+  />,
   <div
     class="ant-divider ant-divider-horizontal ant-divider-dashed"
     role="separator"
     style="border-color:#7cb305"
-  />
+  />,
   <div
     class="ant-divider ant-divider-vertical"
     role="separator"
     style="height:60px;background-color:#7cb305"
-  />
+  />,
   <div
     class="ant-divider ant-divider-vertical ant-divider-dashed"
     role="separator"
     style="height:60px;border-color:#7cb305"
-  />
+  />,
-</div>
+]
 `;
 
 exports[`renders ./components/divider/demo/horizontal.md correctly 1`] = `
-<div>
+Array [
   <p>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
-  </p>
+  </p>,
   <div
     class="ant-divider ant-divider-horizontal"
     role="separator"
-  />
+  />,
   <p>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
-  </p>
+  </p>,
   <div
     class="ant-divider ant-divider-horizontal ant-divider-dashed"
     role="separator"
-  />
+  />,
   <p>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
-  </p>
+  </p>,
-</div>
+]
 `;
 
-exports[`renders ./components/divider/demo/vertical.md correctly 1`] = `
+exports[`renders ./components/divider/demo/plain.md correctly 1`] = `
-<div>
+Array [
-  Text
-  <div
-    class="ant-divider ant-divider-vertical"
-    role="separator"
-  />
-  <a
-    href="#"
-  >
-    Link
-  </a>
-  <div
-    class="ant-divider ant-divider-vertical"
-    role="separator"
-  />
-  <a
-    href="#"
-  >
-    Link
-  </a>
-</div>
-`;
-
-exports[`renders ./components/divider/demo/with-text.md correctly 1`] = `
-<div>
   <p>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
-  </p>
+  </p>,
   <div
-    class="ant-divider ant-divider-horizontal ant-divider-with-text-center"
+    class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-center ant-divider-plain"
     role="separator"
   >
     <span
@@ -85,12 +61,12 @@ exports[`renders ./components/divider/demo/with-text.md correctly 1`] = `
     >
       Text
     </span>
-  </div>
+  </div>,
   <p>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
-  </p>
+  </p>,
   <div
-    class="ant-divider ant-divider-horizontal ant-divider-with-text-left"
+    class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left ant-divider-plain"
     role="separator"
   >
     <span
@@ -98,12 +74,12 @@ exports[`renders ./components/divider/demo/with-text.md correctly 1`] = `
     >
       Left Text
     </span>
-  </div>
+  </div>,
   <p>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
-  </p>
+  </p>,
   <div
-    class="ant-divider ant-divider-horizontal ant-divider-with-text-right"
+    class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-right ant-divider-plain"
     role="separator"
   >
     <span
@@ -111,9 +87,80 @@ exports[`renders ./components/divider/demo/with-text.md correctly 1`] = `
     >
       Right Text
     </span>
-  </div>
+  </div>,
   <p>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
-  </p>
+  </p>,
-</div>
+]
+`;
+
+exports[`renders ./components/divider/demo/vertical.md correctly 1`] = `
+Array [
+  "Text",
+  <div
+    class="ant-divider ant-divider-vertical"
+    role="separator"
+  />,
+  <a
+    href="#"
+  >
+    Link
+  </a>,
+  <div
+    class="ant-divider ant-divider-vertical"
+    role="separator"
+  />,
+  <a
+    href="#"
+  >
+    Link
+  </a>,
+]
+`;
+
+exports[`renders ./components/divider/demo/with-text.md correctly 1`] = `
+Array [
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
+  </p>,
+  <div
+    class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-center"
+    role="separator"
+  >
+    <span
+      class="ant-divider-inner-text"
+    >
+      Text
+    </span>
+  </div>,
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
+  </p>,
+  <div
+    class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
+    role="separator"
+  >
+    <span
+      class="ant-divider-inner-text"
+    >
+      Left Text
+    </span>
+  </div>,
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
+  </p>,
+  <div
+    class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-right"
+    role="separator"
+  >
+    <span
+      class="ant-divider-inner-text"
+    >
+      Right Text
+    </span>
+  </div>,
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
+  </p>,
+]
 `;

components/divider/demo/customize-style.md

@@ -18,12 +18,12 @@ Use `style` to change default style.
 import { Divider } from 'antd';
 
 ReactDOM.render(
-  <div>
+  <>
     <Divider style={{ height: 2, backgroundColor: '#7cb305' }} />
     <Divider style={{ borderColor: '#7cb305' }} dashed />
     <Divider type="vertical" style={{ height: 60, backgroundColor: '#7cb305' }} />
     <Divider type="vertical" style={{ height: 60, borderColor: '#7cb305' }} dashed />
-  </div>,
+  </>,
   mountNode,
 );
 ```

components/divider/demo/horizontal.md

@@ -17,7 +17,7 @@ Divider is `horizontal` by default. You can add text within Divider.
 import { Divider } from 'antd';
 
 ReactDOM.render(
-  <div>
+  <>
     <p>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
       probare, quae sunt a te dicta? Refert tamen, quo modo.
@@ -32,7 +32,7 @@ ReactDOM.render(
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
       probare, quae sunt a te dicta? Refert tamen, quo modo.
     </p>
-  </div>,
+  </>,
   mountNode,
 );
 ```

components/divider/demo/plain.md

@@ -0,0 +1,47 @@
+---
+order: 2
+title:
+  zh-CN: 分割文字使用正文样式
+  en-US: Text without heading style
+---
+
+## zh-CN
+
+使用 `plain` 可以设置为更轻量的分割文字样式。
+
+## en-US
+
+You can use non-heading style of divider text by setting `plain`.
+
+```jsx
+import { Divider } from 'antd';
+
+ReactDOM.render(
+  <>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
+      probare, quae sunt a te dicta? Refert tamen, quo modo.
+    </p>
+    <Divider plain>Text</Divider>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
+      probare, quae sunt a te dicta? Refert tamen, quo modo.
+    </p>
+    <Divider orientation="left" plain>
+      Left Text
+    </Divider>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
+      probare, quae sunt a te dicta? Refert tamen, quo modo.
+    </p>
+    <Divider orientation="right" plain>
+      Right Text
+    </Divider>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
+      probare, quae sunt a te dicta? Refert tamen, quo modo.
+    </p>
+  </>,
+  mountNode,
+);
+```

components/divider/demo/vertical.md

@@ -1,5 +1,5 @@
 ---
-order: 2
+order: 3
 title:
   zh-CN: 垂直分割线
   en-US: Vertical
@@ -17,13 +17,13 @@ Use `type="vertical"` make it vertical.
 import { Divider } from 'antd';
 
 ReactDOM.render(
-  <div>
+  <>
     Text
     <Divider type="vertical" />
     <a href="#">Link</a>
     <Divider type="vertical" />
     <a href="#">Link</a>
-  </div>,
+  </>,
   mountNode,
 );
 ```

components/divider/demo/with-text.md

@@ -17,7 +17,7 @@ Divider with inner title, set `orientation="left/right"` to align it.
 import { Divider } from 'antd';
 
 ReactDOM.render(
-  <div>
+  <>
     <p>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
       probare, quae sunt a te dicta? Refert tamen, quo modo.
@@ -37,7 +37,7 @@ ReactDOM.render(
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
       probare, quae sunt a te dicta? Refert tamen, quo modo.
     </p>
-  </div>,
+  </>,
   mountNode,
 );
 ```

components/divider/index.en-US.md

@@ -2,7 +2,6 @@
 category: Components
 type: Other
 title: Divider
-cols: 1
 ---
 
 A divider line separates different content.
@@ -23,3 +22,4 @@ A divider line separates different content.
 | orientation | position of title inside divider | `left` \| `right` \| `center` | `center` |  |
 | style | style object of container | object | - |  |
 | type | direction type of divider | `horizontal` \| `vertical` | `horizontal` |  |
+| plain | divider text show as plain style | boolean | true | 4.2.0 |

components/divider/index.tsx

@@ -10,6 +10,7 @@ export interface DividerProps {
   children?: React.ReactNode;
   dashed?: boolean;
   style?: React.CSSProperties;
+  plain?: boolean;
 }
 
 const Divider: React.FC<DividerProps> = props => (
@@ -22,13 +23,17 @@ const Divider: React.FC<DividerProps> = props => (
         className,
         children,
         dashed,
+        plain,
         ...restProps
       } = props;
       const prefixCls = getPrefixCls('divider', customizePrefixCls);
       const orientationPrefix = orientation.length > 0 ? `-${orientation}` : orientation;
+      const hasChildren = !!children;
       const classString = classNames(className, prefixCls, `${prefixCls}-${type}`, {
-        [`${prefixCls}-with-text${orientationPrefix}`]: children,
+        [`${prefixCls}-with-text`]: hasChildren,
+        [`${prefixCls}-with-text${orientationPrefix}`]: hasChildren,
         [`${prefixCls}-dashed`]: !!dashed,
+        [`${prefixCls}-plain`]: !!plain,
       });
       return (
         <div className={classString} {...restProps} role="separator">

components/divider/index.zh-CN.md

@@ -14,10 +14,11 @@ subtitle: 分割线
 
 ## API
 
-| 参数        | 说明             | 类型                          | 默认值       | 版本 |
+| 参数        | 说明                       | 类型                          | 默认值       | 版本  |
-| ----------- | ---------------- | ----------------------------- | ------------ | ---- |
+| ----------- | -------------------------- | ----------------------------- | ------------ | ----- |
-| className   | 分割线样式类     | string                        | -            |      |
+| className   | 分割线样式类               | string                        | -            |       |
-| dashed      | 是否虚线         | boolean                       | false        |      |
+| dashed      | 是否虚线                   | boolean                       | false        |       |
-| orientation | 分割线标题的位置 | `left` \| `right` \| `center` | `center`     |      |
+| orientation | 分割线标题的位置           | `left` \| `right` \| `center` | `center`     |       |
-| style       | 分割线样式对象   | object                        | -            |      |
+| style       | 分割线样式对象             | object                        | -            |       |
-| type        | 水平还是垂直类型 | `horizontal` \| `vertical`    | `horizontal` |      |
+| type        | 水平还是垂直类型           | `horizontal` \| `vertical`    | `horizontal` |       |
+| plain       | 文字是否显示为普通正文样式 | boolean                       | false        | 4.2.0 |

components/divider/style/index.less

@@ -29,9 +29,7 @@
     margin: 24px 0;
   }
 
-  &-horizontal&-with-text-center,
+  &-horizontal&-with-text {
-  &-horizontal&-with-text-left,
-  &-horizontal&-with-text-right {
     display: table;
     margin: 16px 0;
     color: @heading-color;
@@ -52,14 +50,6 @@
     }
   }
 
-  &-horizontal&-with-text-left,
-  &-horizontal&-with-text-right {
-    .@{divider-prefix-cls}-inner-text {
-      display: inline-block;
-      padding: 0 @divider-text-padding;
-    }
-  }
-
   &-horizontal&-with-text-left {
     &::before {
       top: 50%;
@@ -94,9 +84,7 @@
     border-width: 1px 0 0;
   }
 
-  &-horizontal&-with-text-center&-dashed,
+  &-horizontal&-with-text&-dashed {
-  &-horizontal&-with-text-left&-dashed,
-  &-horizontal&-with-text-right&-dashed {
     border-top: 0;
     &::before,
     &::after {
@@ -107,4 +95,10 @@
   &-vertical&-dashed {
     border-width: 0 0 0 1px;
   }
+
+  &-plain&-with-text {
+    color: @text-color;
+    font-weight: normal;
+    font-size: @font-size-base;
+  }
 }

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

@@ -74,7 +74,7 @@ Array [
 exports[`renders ./components/grid/demo/flex.md correctly 1`] = `
 Array [
   <div
-    class="ant-divider ant-divider-horizontal ant-divider-with-text-left"
+    class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
     role="separator"
     style="color:#333;font-weight:normal"
   >
@@ -109,7 +109,7 @@ Array [
     </div>
   </div>,
   <div
-    class="ant-divider ant-divider-horizontal ant-divider-with-text-left"
+    class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
     role="separator"
     style="color:#333;font-weight:normal"
   >
@@ -144,7 +144,7 @@ Array [
     </div>
   </div>,
   <div
-    class="ant-divider ant-divider-horizontal ant-divider-with-text-left"
+    class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
     role="separator"
     style="color:#333;font-weight:normal"
   >
@@ -179,7 +179,7 @@ Array [
     </div>
   </div>,
   <div
-    class="ant-divider ant-divider-horizontal ant-divider-with-text-left"
+    class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
     role="separator"
     style="color:#333;font-weight:normal"
   >
@@ -214,7 +214,7 @@ Array [
     </div>
   </div>,
   <div
-    class="ant-divider ant-divider-horizontal ant-divider-with-text-left"
+    class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
     role="separator"
     style="color:#333;font-weight:normal"
   >
@@ -254,7 +254,7 @@ Array [
 exports[`renders ./components/grid/demo/flex-align.md correctly 1`] = `
 Array [
   <div
-    class="ant-divider ant-divider-horizontal ant-divider-with-text-left"
+    class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
     role="separator"
     style="color:#333;font-weight:normal"
   >
@@ -305,7 +305,7 @@ Array [
     </div>
   </div>,
   <div
-    class="ant-divider ant-divider-horizontal ant-divider-with-text-left"
+    class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
     role="separator"
     style="color:#333;font-weight:normal"
   >
@@ -356,7 +356,7 @@ Array [
     </div>
   </div>,
   <div
-    class="ant-divider ant-divider-horizontal ant-divider-with-text-left"
+    class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
     role="separator"
     style="color:#333;font-weight:normal"
   >
@@ -439,7 +439,7 @@ exports[`renders ./components/grid/demo/flex-order.md correctly 1`] = `
 exports[`renders ./components/grid/demo/flex-stretch.md correctly 1`] = `
 Array [
   <div
-    class="ant-divider ant-divider-horizontal ant-divider-with-text-left"
+    class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
     role="separator"
     style="color:#333;font-weight:normal"
   >
@@ -466,7 +466,7 @@ Array [
     </div>
   </div>,
   <div
-    class="ant-divider ant-divider-horizontal ant-divider-with-text-left"
+    class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
     role="separator"
     style="color:#333;font-weight:normal"
   >
@@ -493,7 +493,7 @@ Array [
     </div>
   </div>,
   <div
-    class="ant-divider ant-divider-horizontal ant-divider-with-text-left"
+    class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
     role="separator"
     style="color:#333;font-weight:normal"
   >
@@ -525,7 +525,7 @@ Array [
 exports[`renders ./components/grid/demo/gutter.md correctly 1`] = `
 Array [
   <div
-    class="ant-divider ant-divider-horizontal ant-divider-with-text-left"
+    class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
     role="separator"
     style="color:#333;font-weight:normal"
   >
@@ -581,7 +581,7 @@ Array [
     </div>
   </div>,
   <div
-    class="ant-divider ant-divider-horizontal ant-divider-with-text-left"
+    class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
     role="separator"
     style="color:#333;font-weight:normal"
   >
@@ -637,7 +637,7 @@ Array [
     </div>
   </div>,
   <div
-    class="ant-divider ant-divider-horizontal ant-divider-with-text-left"
+    class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
     role="separator"
     style="color:#333;font-weight:normal"
   >

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

@@ -645,7 +645,7 @@ exports[`renders ./components/list/demo/resposive.md correctly 1`] = `
 exports[`renders ./components/list/demo/simple.md correctly 1`] = `
 Array [
   <div
-    class="ant-divider ant-divider-horizontal ant-divider-with-text-left"
+    class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
     role="separator"
   >
     <span
@@ -745,7 +745,7 @@ Array [
     </div>
   </div>,
   <div
-    class="ant-divider ant-divider-horizontal ant-divider-with-text-left"
+    class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
     role="separator"
   >
     <span
@@ -810,7 +810,7 @@ Array [
     </div>
   </div>,
   <div
-    class="ant-divider ant-divider-horizontal ant-divider-with-text-left"
+    class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
     role="separator"
   >
     <span