feat: adding variant props to divider (#49654)

The divider border style can be either solid, dashed or
dotted based on the variant props. The default value is
solid.

Signed-off-by: Pinaki Raj <pinakiraj15@gmail.com>

components/divider/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -203,6 +203,58 @@ Array [
 
 exports[`renders components/divider/demo/plain.tsx extend context correctly 2`] = `[]`;
 
+exports[`renders components/divider/demo/variant.tsx extend context 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"
+    style="border-color: #7cb305;"
+  >
+    <span
+      class="ant-divider-inner-text"
+    >
+      Solid
+    </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-center ant-divider-dotted"
+    role="separator"
+    style="border-color: #7cb305;"
+  >
+    <span
+      class="ant-divider-inner-text"
+    >
+      Dotted
+    </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-center ant-divider-dashed"
+    role="separator"
+    style="border-color: #7cb305;"
+  >
+    <span
+      class="ant-divider-inner-text"
+    >
+      Dashed
+    </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>,
+]
+`;
+
+exports[`renders components/divider/demo/variant.tsx extend context correctly 2`] = `[]`;
+
 exports[`renders components/divider/demo/vertical.tsx extend context correctly 1`] = `
 Array [
   Text,

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

@@ -195,6 +195,56 @@ Array [
 ]
 `;
 
+exports[`renders components/divider/demo/variant.tsx 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"
+    style="border-color:#7cb305"
+  >
+    <span
+      class="ant-divider-inner-text"
+    >
+      Solid
+    </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-center ant-divider-dotted"
+    role="separator"
+    style="border-color:#7cb305"
+  >
+    <span
+      class="ant-divider-inner-text"
+    >
+      Dotted
+    </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-center ant-divider-dashed"
+    role="separator"
+    style="border-color:#7cb305"
+  >
+    <span
+      class="ant-divider-inner-text"
+    >
+      Dashed
+    </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>,
+]
+`;
+
 exports[`renders components/divider/demo/vertical.tsx correctly 1`] = `
 Array [
   Text,

components/divider/__tests__/index.test.tsx

@@ -37,4 +37,15 @@ describe('Divider', () => {
       borderStyle: 'dashed',
     });
   });
+
+  it('support string variant', () => {
+    const { container } = render(
+      <Divider variant="dotted">
+        test dotted
+      </Divider>,
+    );
+    expect(container?.querySelector<HTMLSpanElement>('.ant-divider-dotted')).toHaveStyle({
+      borderStyle: 'dotted',
+    });
+  });
 });

components/divider/demo/variant.md

@@ -0,0 +1,7 @@
+## zh-CN
+
+分隔线默认为 `solid`（实线）变体。您可以将其更改为 `dashed`（虚线）或 `dotted`（点线）。
+
+## en-US
+
+Divider is of `solid` variant by default. You can change that to either `dashed` or `dotted`.

components/divider/demo/variant.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Divider } from 'antd';
+
+const App: React.FC = () => (
+  <>
+    <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 style={{  borderColor: '#7cb305' }}>Solid</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 variant="dotted" style={{ borderColor: '#7cb305' }}>Dotted</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  variant="dashed" style={{  borderColor: '#7cb305' }} dashed >Dashed</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>
+  </>
+);
+
+export default App;

components/divider/index.en-US.md

@@ -25,6 +25,7 @@ group:
 <code src="./demo/vertical.tsx">Vertical</code>
 <code src="./demo/customize-style.tsx" debug>Style Customization</code>
 <code src="./demo/component-token.tsx" debug>Component Token</code>
+<code src="./demo/variant.tsx">Variant</code>
 
 ## API
 
@@ -35,6 +36,7 @@ Common props ref：[Common props](/docs/react/common-props)
 | children | The wrapped title | ReactNode | - |  |
 | className | The className of container | string | - |  |
 | dashed | Whether line is dashed | boolean | false |  |
+| variant | Whether line is dashed, dotted or solid | `dashed` \| `dotted` \| `solid` | solid |  |
 | 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`, If a numeric value of type `string` is provided without a unit, it is assumed to be in pixels (px) by default. | string \| number | - |  |
 | plain | Divider text show as plain style | boolean | true | 4.2.0 |

components/divider/index.tsx

@@ -14,6 +14,7 @@ export interface DividerProps {
   rootClassName?: string;
   children?: React.ReactNode;
   dashed?: boolean;
+  variant?: 'dashed' | 'dotted' | 'solid'
   style?: React.CSSProperties;
   plain?: boolean;
 }
@@ -30,6 +31,7 @@ const Divider: React.FC<DividerProps> = (props) => {
     rootClassName,
     children,
     dashed,
+    variant = 'solid',
     plain,
     style,
     ...restProps
@@ -51,6 +53,7 @@ const Divider: React.FC<DividerProps> = (props) => {
       [`${prefixCls}-with-text`]: hasChildren,
       [`${prefixCls}-with-text-${orientation}`]: hasChildren,
       [`${prefixCls}-dashed`]: !!dashed,
+      [`${prefixCls}-${variant}`]: variant !== 'solid',
       [`${prefixCls}-plain`]: !!plain,
       [`${prefixCls}-rtl`]: direction === 'rtl',
       [`${prefixCls}-no-default-orientation-margin-left`]: hasCustomMarginLeft,

components/divider/index.zh-CN.md

@@ -26,6 +26,7 @@ group:
 <code src="./demo/vertical.tsx">垂直分割线</code>
 <code src="./demo/customize-style.tsx" debug>样式自定义</code>
 <code src="./demo/component-token.tsx" debug>组件 Token</code>
+<code src="./demo/variant.tsx">变体</code>
 
 ## API
 
@@ -36,6 +37,7 @@ group:
 | children | 嵌套的标题 | ReactNode | - |  |
 | className | 分割线样式类 | string | - |  |
 | dashed | 是否虚线 | boolean | false |  |
+| variant | 分割线是虚线、点线还是实线 | `dashed` \| `dotted` \| `solid` | solid |  |
 | orientation | 分割线标题的位置 | `left` \| `right` \| `center` | `center` |  |
 | orientationMargin | 标题和最近 left/right 边框之间的距离，去除了分割线，同时 `orientation` 必须为 `left` 或 `right`。如果传入 `string` 类型的数字且不带单位，默认单位是 px | string \| number | - |  |
 | plain | 文字是否显示为普通正文样式 | boolean | false | 4.2.0 |

components/divider/style/index.ts

@@ -136,6 +136,26 @@ const genSharedDividerStyle: GenerateStyle<DividerToken> = (token): CSSObject =>
         borderBlockEnd: 0,
       },
 
+      '&-dotted': {
+        background: 'none',
+        borderColor: colorSplit,
+        borderStyle: 'dotted',
+        borderWidth: `${unit(lineWidth)} 0 0`,
+      },
+
+      [`&-horizontal${componentCls}-with-text${componentCls}-dotted`]: {
+        '&::before, &::after': {
+          borderStyle: 'dotted none none',
+        },
+      },
+
+      [`&-vertical${componentCls}-dotted`]: {
+        borderInlineStartWidth: lineWidth,
+        borderInlineEnd: 0,
+        borderBlockStart: 0,
+        borderBlockEnd: 0,
+      },
+
       [`&-plain${componentCls}-with-text`]: {
         color: token.colorText,
         fontWeight: 'normal',