From 6ac8aa3c9ec60727b954fd46b52ec34a5462a777 Mon Sep 17 00:00:00 2001 From: CooperHash <2597905281@qq.com> Date: Fri, 29 Mar 2024 16:57:54 +0800 Subject: [PATCH 1/6] feat: add styles props to support Badge wrapper style --- components/badge/Ribbon.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/components/badge/Ribbon.tsx b/components/badge/Ribbon.tsx index 4bd8ef5ff998..16bbcb70b92f 100644 --- a/components/badge/Ribbon.tsx +++ b/components/badge/Ribbon.tsx @@ -13,6 +13,7 @@ export interface RibbonProps { className?: string; prefixCls?: string; style?: React.CSSProperties; // style of ribbon element, not the wrapper + styles?: React.CSSProperties; // style of ribbon wrapper text?: React.ReactNode; color?: LiteralUnion; children?: React.ReactNode; @@ -25,6 +26,7 @@ const Ribbon: React.FC = (props) => { className, prefixCls: customizePrefixCls, style, + styles, color, children, text, @@ -55,7 +57,7 @@ const Ribbon: React.FC = (props) => { cornerColorStyle.color = color; } return wrapCSSVar( -
+
{children}
{text} From f88fd312b5a0c5a933897924eeb8eefa298053f1 Mon Sep 17 00:00:00 2001 From: CooperHash <2597905281@qq.com> Date: Wed, 3 Apr 2024 13:21:24 +0800 Subject: [PATCH 2/6] add body to styles --- components/badge/Ribbon.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/components/badge/Ribbon.tsx b/components/badge/Ribbon.tsx index 16bbcb70b92f..472dcb395629 100644 --- a/components/badge/Ribbon.tsx +++ b/components/badge/Ribbon.tsx @@ -13,7 +13,9 @@ export interface RibbonProps { className?: string; prefixCls?: string; style?: React.CSSProperties; // style of ribbon element, not the wrapper - styles?: React.CSSProperties; // style of ribbon wrapper + styles?: { + body?: React.CSSProperties; + }; text?: React.ReactNode; color?: LiteralUnion; children?: React.ReactNode; @@ -57,7 +59,10 @@ const Ribbon: React.FC = (props) => { cornerColorStyle.color = color; } return wrapCSSVar( -
+
{children}
{text} From 1054a11551a8e01415227f3e8c5ef4b7f5ffd893 Mon Sep 17 00:00:00 2001 From: CooperHash <2597905281@qq.com> Date: Thu, 4 Apr 2024 16:37:31 +0800 Subject: [PATCH 3/6] fix and test --- components/badge/Ribbon.tsx | 5 +--- .../__snapshots__/ribbon.test.tsx.snap | 25 +++++++++++++++++++ components/badge/__tests__/ribbon.test.tsx | 9 +++++++ components/badge/index.en-US.md | 6 +++++ components/badge/index.zh-CN.md | 6 +++++ 5 files changed, 47 insertions(+), 4 deletions(-) diff --git a/components/badge/Ribbon.tsx b/components/badge/Ribbon.tsx index 472dcb395629..3b3491e09ad7 100644 --- a/components/badge/Ribbon.tsx +++ b/components/badge/Ribbon.tsx @@ -59,10 +59,7 @@ const Ribbon: React.FC = (props) => { cornerColorStyle.color = color; } return wrapCSSVar( -
+
{children}
{text} diff --git a/components/badge/__tests__/__snapshots__/ribbon.test.tsx.snap b/components/badge/__tests__/__snapshots__/ribbon.test.tsx.snap index 6a4f0245ab74..f508494a63f3 100644 --- a/components/badge/__tests__/__snapshots__/ribbon.test.tsx.snap +++ b/components/badge/__tests__/__snapshots__/ribbon.test.tsx.snap @@ -16,3 +16,28 @@ exports[`Ribbon rtl render component should be rendered correctly in RTL directi
`; + +exports[`Ribbon should support custom styles 1`] = ` +
+
+
+ custom styles +
+
+ + Hippies + +
+
+
+
+`; diff --git a/components/badge/__tests__/ribbon.test.tsx b/components/badge/__tests__/ribbon.test.tsx index 9206bf43b870..a026d12220c8 100644 --- a/components/badge/__tests__/ribbon.test.tsx +++ b/components/badge/__tests__/ribbon.test.tsx @@ -79,4 +79,13 @@ describe('Ribbon', () => { expect(container.querySelectorAll('.cool').length).toEqual(1); }); }); + + it('should support custom styles', () => { + const { container } = render( + +
custom styles
+ , + ); + expect(container).toMatchSnapshot(); + }); }); diff --git a/components/badge/index.en-US.md b/components/badge/index.en-US.md index 325d290187c3..bb11aed806b0 100644 --- a/components/badge/index.en-US.md +++ b/components/badge/index.en-US.md @@ -62,6 +62,12 @@ Common props ref：[Common props](/docs/react/common-props) | placement | The placement of the Ribbon, `start` and `end` follow text direction (RTL or LTR) | `start` \| `end` | `end` | | | text | Content inside the Ribbon | ReactNode | - | | +### `styles` attribute + +| Property | Description | +| -------- | ------------------------------------- | +| body | The style of Ribbon Wrapper Container | + ## Semantic DOM diff --git a/components/badge/index.zh-CN.md b/components/badge/index.zh-CN.md index b53b26acc228..97d6fc80c9c6 100644 --- a/components/badge/index.zh-CN.md +++ b/components/badge/index.zh-CN.md @@ -63,6 +63,12 @@ group: 数据展示 | placement | 缎带的位置，`start` 和 `end` 随文字方向（RTL 或 LTR）变动 | `start` \| `end` | `end` | | | text | 缎带中填入的内容 | ReactNode | - | | +### `styles` 属性 + +| 名称 | 说明 | +| ---- | ------------ | +| body | 缎带容器样式 | + ## Semantic DOM From 1200bb0daa5b3001f3d268b934a176448bf590c8 Mon Sep 17 00:00:00 2001 From: CooperHash <2597905281@qq.com> Date: Thu, 4 Apr 2024 22:21:50 +0800 Subject: [PATCH 4/6] use toHaveStyle instead of toMatchSnapshot --- .../__snapshots__/ribbon.test.tsx.snap | 25 ------------------- components/badge/__tests__/ribbon.test.tsx | 3 ++- 2 files changed, 2 insertions(+), 26 deletions(-) diff --git a/components/badge/__tests__/__snapshots__/ribbon.test.tsx.snap b/components/badge/__tests__/__snapshots__/ribbon.test.tsx.snap index f508494a63f3..6a4f0245ab74 100644 --- a/components/badge/__tests__/__snapshots__/ribbon.test.tsx.snap +++ b/components/badge/__tests__/__snapshots__/ribbon.test.tsx.snap @@ -16,28 +16,3 @@ exports[`Ribbon rtl render component should be rendered correctly in RTL directi
`; - -exports[`Ribbon should support custom styles 1`] = ` -
-
-
- custom styles -
-
- - Hippies - -
-
-
-
-`; diff --git a/components/badge/__tests__/ribbon.test.tsx b/components/badge/__tests__/ribbon.test.tsx index a026d12220c8..957e4bc50fbd 100644 --- a/components/badge/__tests__/ribbon.test.tsx +++ b/components/badge/__tests__/ribbon.test.tsx @@ -86,6 +86,7 @@ describe('Ribbon', () => {
custom styles
, ); - expect(container).toMatchSnapshot(); + const element = container.querySelector('.ant-ribbon-wrapper'); + expect(element).toHaveStyle({ color: 'red' }); }); }); From a3a47dd53dfe9805a5e087e56e57c561e963b627 Mon Sep 17 00:00:00 2001 From: CooperHash <2597905281@qq.com> Date: Thu, 4 Apr 2024 22:48:40 +0800 Subject: [PATCH 5/6] Improve documentation on styles --- components/badge/index.zh-CN.md | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/components/badge/index.zh-CN.md b/components/badge/index.zh-CN.md index 97d6fc80c9c6..a545366b6f3a 100644 --- a/components/badge/index.zh-CN.md +++ b/components/badge/index.zh-CN.md @@ -62,12 +62,13 @@ group: 数据展示 | color | 自定义缎带的颜色 | string | - | | | placement | 缎带的位置，`start` 和 `end` 随文字方向（RTL 或 LTR）变动 | `start` \| `end` | `end` | | | text | 缎带中填入的内容 | ReactNode | - | | +| styles | 配置缎带内置模块的 style | body?: CSSProperties; | - | 5.16.0 | ### `styles` 属性 -| 名称 | 说明 | -| ---- | ------------ | -| body | 缎带容器样式 | +| 名称 | 说明 | 版本 | +| ---- | ------------ | ------ | +| body | 缎带容器样式 | 5.16.0 | ## Semantic DOM From a14ba759577cdc9f8fed4cde0416d80a763dc1ed Mon Sep 17 00:00:00 2001 From: CooperHash <2597905281@qq.com> Date: Thu, 4 Apr 2024 22:53:07 +0800 Subject: [PATCH 6/6] update en --- components/badge/index.en-US.md | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/components/badge/index.en-US.md b/components/badge/index.en-US.md index bb11aed806b0..ef77b57ecbe7 100644 --- a/components/badge/index.en-US.md +++ b/components/badge/index.en-US.md @@ -61,12 +61,13 @@ Common props ref：[Common props](/docs/react/common-props) | color | Customize Ribbon color | string | - | | | placement | The placement of the Ribbon, `start` and `end` follow text direction (RTL or LTR) | `start` \| `end` | `end` | | | text | Content inside the Ribbon | ReactNode | - | | +| styles | Configure Ribbon build-in module's style | body?: CSSProperties; | - | 5.16.0 | ### `styles` attribute -| Property | Description | -| -------- | ------------------------------------- | -| body | The style of Ribbon Wrapper Container | +| Property | Description | Version | +| -------- | ------------------------------------- | ------- | +| body | The style of Ribbon Wrapper Container | 5.16.0 | ## Semantic DOM