diff --git a/components/divider/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/divider/__tests__/__snapshots__/demo-extend.test.ts.snap index e20e15157c..3f70bacb1f 100644 --- a/components/divider/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/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 [ +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo. +

, + , +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo. +

, + , +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo. +

, + , +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo. +

, +] +`; + +exports[`renders components/divider/demo/variant.tsx extend context correctly 2`] = `[]`; + exports[`renders components/divider/demo/vertical.tsx extend context correctly 1`] = ` Array [ Text, diff --git a/components/divider/__tests__/__snapshots__/demo.test.ts.snap b/components/divider/__tests__/__snapshots__/demo.test.ts.snap index 0a5739b88a..68756924ae 100644 --- a/components/divider/__tests__/__snapshots__/demo.test.ts.snap +++ b/components/divider/__tests__/__snapshots__/demo.test.ts.snap @@ -195,6 +195,56 @@ Array [ ] `; +exports[`renders components/divider/demo/variant.tsx correctly 1`] = ` +Array [ +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo. +

, + , +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo. +

, + , +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo. +

, + , +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo. +

, +] +`; + exports[`renders components/divider/demo/vertical.tsx correctly 1`] = ` Array [ Text, diff --git a/components/divider/__tests__/index.test.tsx b/components/divider/__tests__/index.test.tsx index 3728ac74b7..e529ae70b2 100644 --- a/components/divider/__tests__/index.test.tsx +++ b/components/divider/__tests__/index.test.tsx @@ -37,4 +37,15 @@ describe('Divider', () => { borderStyle: 'dashed', }); }); + + it('support string variant', () => { + const { container } = render( + + test dotted + , + ); + expect(container?.querySelector('.ant-divider-dotted')).toHaveStyle({ + borderStyle: 'dotted', + }); + }); }); diff --git a/components/divider/demo/variant.md b/components/divider/demo/variant.md new file mode 100644 index 0000000000..16ece117e0 --- /dev/null +++ b/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`. diff --git a/components/divider/demo/variant.tsx b/components/divider/demo/variant.tsx new file mode 100644 index 0000000000..7f2a9c033e --- /dev/null +++ b/components/divider/demo/variant.tsx @@ -0,0 +1,28 @@ +import React from 'react'; +import { Divider } from 'antd'; + +const App: React.FC = () => ( + <> +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista + probare, quae sunt a te dicta? Refert tamen, quo modo. +

+ Solid +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista + probare, quae sunt a te dicta? Refert tamen, quo modo. +

+ Dotted +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista + probare, quae sunt a te dicta? Refert tamen, quo modo. +

+ Dashed +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista + probare, quae sunt a te dicta? Refert tamen, quo modo. +

+ +); + +export default App; diff --git a/components/divider/index.en-US.md b/components/divider/index.en-US.md index d561c4fd6c..f44374012f 100644 --- a/components/divider/index.en-US.md +++ b/components/divider/index.en-US.md @@ -25,6 +25,7 @@ group: Vertical Style Customization Component Token +Variant ## 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 | diff --git a/components/divider/index.tsx b/components/divider/index.tsx index 954d8f8e05..5fceb34ab1 100644 --- a/components/divider/index.tsx +++ b/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 = (props) => { rootClassName, children, dashed, + variant = 'solid', plain, style, ...restProps @@ -51,6 +53,7 @@ const Divider: React.FC = (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, diff --git a/components/divider/index.zh-CN.md b/components/divider/index.zh-CN.md index 5136d4751c..886b88186e 100644 --- a/components/divider/index.zh-CN.md +++ b/components/divider/index.zh-CN.md @@ -26,6 +26,7 @@ group: 垂直分割线 样式自定义 组件 Token +变体 ## 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 | diff --git a/components/divider/style/index.ts b/components/divider/style/index.ts index 552aeed1cf..ff6a604e68 100644 --- a/components/divider/style/index.ts +++ b/components/divider/style/index.ts @@ -136,6 +136,26 @@ const genSharedDividerStyle: GenerateStyle = (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',