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( ++ 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. +
+ > +); + +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垂直分割线
样式自定义
组件 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