feat: add divider orientationMargin

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

@@ -47,4 +47,8 @@ exports[`renders ./components/divider/demo/with-text.vue correctly 1`] = `
 <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>
+<div class="ant-divider ant-divider-horizontal ant-divider-no-default-orientation-margin-left ant-divider-with-text ant-divider-with-text-left" role="separator"><span class="ant-divider-inner-text" style="margin-left: 0px;"> 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-no-default-orientation-margin-right ant-divider-with-text ant-divider-with-text-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.vue

@@ -35,4 +35,18 @@ Divider with inner title, set `orientation="left/right"` to align it.
     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>
+  <a-divider orientation="left" orientation-margin="0px">
+    Left Text with 0 orientationMargin
+  </a-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>
+  <a-divider orientation="right" orientation-margin="50px">
+    Right Text with 50px orientationMargin
+  </a-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>
 </template>

components/divider/index.en-US.md

@@ -20,3 +20,4 @@ A divider line separates different content.
 | orientation | position of title inside divider | enum: `left` `right` `center` | `center` |  |
 | type | direction type of divider | enum: `horizontal` `vertical` | `horizontal` |  |
 | plain | Divider text show as plain style | boolean | true | 2.2.0 |
+| orientationMargin | The margin-left/right between the title and its closest border, while the `orientation` must be `left` or `right` | string \| number | - | 3.0 |

components/divider/index.tsx

@@ -22,6 +22,7 @@ export const dividerProps = {
     type: Boolean,
     default: false,
   },
+  orientationMargin: [String, Number],
 };
 export type DividerProps = Partial<ExtractPropTypes<typeof dividerProps>>;
 
@@ -30,7 +31,12 @@ const Divider = defineComponent({
   props: dividerProps,
   setup(props, { slots }) {
     const { prefixCls: prefixClsRef, direction } = useConfigInject('divider', props);
-
+    const hasCustomMarginLeft = computed(
+      () => props.orientation === 'left' && props.orientationMargin != null,
+    );
+    const hasCustomMarginRight = computed(
+      () => props.orientation === 'right' && props.orientationMargin != null,
+    );
     const classString = computed(() => {
       const { type, dashed, plain } = props;
       const prefixCls = prefixClsRef.value;
@@ -40,9 +46,20 @@ const Divider = defineComponent({
         [`${prefixCls}-dashed`]: !!dashed,
         [`${prefixCls}-plain`]: !!plain,
         [`${prefixCls}-rtl`]: direction.value === 'rtl',
+        [`${prefixCls}-no-default-orientation-margin-left`]: hasCustomMarginLeft.value,
+        [`${prefixCls}-no-default-orientation-margin-right`]: hasCustomMarginRight.value,
+      };
+    });
+    const innerStyle = computed(() => {
+      const marginValue =
+        typeof props.orientationMargin === 'number'
+          ? `${props.orientationMargin}px`
+          : props.orientationMargin;
+      return {
+        ...(hasCustomMarginLeft.value && { marginLeft: marginValue }),
+        ...(hasCustomMarginRight.value && { marginRight: marginValue }),
       };
     });
-
     const orientationPrefix = computed(() =>
       props.orientation.length > 0 ? '-' + props.orientation : props.orientation,
     );
@@ -60,7 +77,9 @@ const Divider = defineComponent({
           role="separator"
         >
           {children.length ? (
-            <span class={`${prefixClsRef.value}-inner-text`}>{children}</span>
+            <span class={`${prefixClsRef.value}-inner-text`} style={innerStyle.value}>
+              {children}
+            </span>
           ) : null}
         </div>
       );

components/divider/index.zh-CN.md

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

components/divider/style/index.less

@@ -57,6 +57,7 @@
       top: 50%;
       width: @divider-orientation-margin;
     }
+
     &::after {
       top: 50%;
       width: 100% - @divider-orientation-margin;
@@ -68,6 +69,7 @@
       top: 50%;
       width: 100% - @divider-orientation-margin;
     }
+
     &::after {
       top: 50%;
       width: @divider-orientation-margin;
@@ -87,7 +89,6 @@
   }
 
   &-horizontal&-with-text&-dashed {
-    border-top: 0;
     &::before,
     &::after {
       border-style: dashed none none;
@@ -103,6 +104,34 @@
     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';

components/divider/style/rtl.less

@@ -14,6 +14,7 @@
         width: 100% - @divider-orientation-margin;
       }
     }
+
     &::after {
       .@{divider-prefix-cls}-rtl& {
         width: @divider-orientation-margin;
@@ -27,6 +28,7 @@
         width: @divider-orientation-margin;
       }
     }
+
     &::after {
       .@{divider-prefix-cls}-rtl& {
         width: 100% - @divider-orientation-margin;