feat(Divider): added orientationMargin APIs for customizing margin-left/right of title (#32084)

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

@@ -173,5 +173,33 @@ 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-left ant-divider-no-default-orientation-margin-left"
+    role="separator"
+  >
+    <span
+      class="ant-divider-inner-text"
+      style="margin-left:0"
+    >
+      Left Text with 0 orientationMargin
+    </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 ant-divider-no-default-orientation-margin-right"
+    role="separator"
+  >
+    <span
+      class="ant-divider-inner-text"
+      style="margin-right:50px"
+    >
+      Right Text with 50px orientationMargin
+    </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/with-text.md

@@ -37,6 +37,20 @@ 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>
+    <Divider orientation="left" orientationMargin="0">
+      Left Text with 0 orientationMargin
+    </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" orientationMargin={50}>
+      Right Text with 50px orientationMargin
+    </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/index.en-US.md

@@ -16,9 +16,11 @@ A divider line separates different content.
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
+| children | The wrapped title | ReactNode | - |  |
 | className | The className of container | string | - |  |
 | dashed | Whether line is dashed | boolean | false |  |
 | orientation | The position of title inside divider | `left` \| `right` \| `center` | `center` |  |
+| orientationMargin | The margin-left/right between the title and its closest border, while the `orientation` must be `left` or `right` | string \| number | - |  |
 | plain | Divider text show as plain style | boolean | true | 4.2.0 |
 | style | The style object of container | CSSProperties | - |  |
 | type | The direction type of divider | `horizontal` \| `vertical` | `horizontal` |  |

components/divider/index.tsx

@@ -6,6 +6,7 @@ export interface DividerProps {
   prefixCls?: string;
   type?: 'horizontal' | 'vertical';
   orientation?: 'left' | 'right' | 'center';
+  orientationMargin?: string | number;
   className?: string;
   children?: React.ReactNode;
   dashed?: boolean;
@@ -20,6 +21,7 @@ const Divider: React.FC<DividerProps> = props => (
         prefixCls: customizePrefixCls,
         type = 'horizontal',
         orientation = 'center',
+        orientationMargin,
         className,
         children,
         dashed,
@@ -29,6 +31,8 @@ const Divider: React.FC<DividerProps> = props => (
       const prefixCls = getPrefixCls('divider', customizePrefixCls);
       const orientationPrefix = orientation.length > 0 ? `-${orientation}` : orientation;
       const hasChildren = !!children;
+      const hasCustomMarginLeft = orientation === 'left' && orientationMargin != null;
+      const hasCustomMarginRight = orientation === 'right' && orientationMargin != null;
       const classString = classNames(
         prefixCls,
         `${prefixCls}-${type}`,
@@ -38,12 +42,24 @@ const Divider: React.FC<DividerProps> = props => (
           [`${prefixCls}-dashed`]: !!dashed,
           [`${prefixCls}-plain`]: !!plain,
           [`${prefixCls}-rtl`]: direction === 'rtl',
+          [`${prefixCls}-no-default-orientation-margin-left`]: hasCustomMarginLeft,
+          [`${prefixCls}-no-default-orientation-margin-right`]: hasCustomMarginRight,
         },
         className,
       );
+
+      const innerStyle = {
+        ...(hasCustomMarginLeft && { marginLeft: orientationMargin }),
+        ...(hasCustomMarginRight && { marginRight: orientationMargin }),
+      };
+
       return (
         <div className={classString} {...restProps} role="separator">
-          {children && <span className={`${prefixCls}-inner-text`}>{children}</span>}
+          {children && (
+            <span className={`${prefixCls}-inner-text`} style={innerStyle}>
+              {children}
+            </span>
+          )}
         </div>
       );
     }}

components/divider/index.zh-CN.md

@@ -17,9 +17,11 @@ cover: https://gw.alipayobjects.com/zos/alicdn/5swjECahe/Divider.svg
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
+| children | 嵌套的标题 | ReactNode | - |  |
 | className | 分割线样式类 | string | - |  |
 | dashed | 是否虚线 | boolean | false |  |
 | orientation | 分割线标题的位置 | `left` \| `right` \| `center` | `center` |  |
+| orientationMargin | 标题和最近 left/right 边框之间的距离，去除了分割线，同时 `orientation` 必须为 `left` 或 `right` | string \| number | - |  |
 | plain | 文字是否显示为普通正文样式 | boolean | false | 4.2.0 |
 | style | 分割线样式对象 | CSSProperties | - |  |
 | type | 水平还是垂直类型 | `horizontal` \| `vertical` | `horizontal` |  |

components/divider/style/index.less

@@ -103,6 +103,30 @@
     font-weight: normal;
     font-size: @font-size-base;
   }
+
+  &-horizontal&-with-text-left&-no-default-orientation-margin-left {
+    &::before {
+      width: 0;
+    }
+    &::after {
+      width: 100%;
+    }
+    .ant-divider-inner-text {
+      padding-left: 0;
+    }
+  }
+
+  &-horizontal&-with-text-right&-no-default-orientation-margin-right {
+    &::before {
+      width: 100%;
+    }
+    &::after {
+      width: 0;
+    }
+    .ant-divider-inner-text {
+      padding-right: 0;
+    }
+  }
 }
 
 @import './rtl';