From 3750d808b4ed5630b9d5c87502f4c41c06655b8c Mon Sep 17 00:00:00 2001 From: wuxh Date: Tue, 22 Nov 2022 00:20:45 +0800 Subject: [PATCH 1/8] chore: update style --- components/badge/style/index.tsx | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/components/badge/style/index.tsx b/components/badge/style/index.tsx index a2f87ab555b7..a84a5bbd20f8 100644 --- a/components/badge/style/index.tsx +++ b/components/badge/style/index.tsx @@ -276,6 +276,15 @@ const genSharedBadgeStyle: GenerateStyle = (token: BadgeToken): CSSO }, [`${numberPrefixCls}-symbol`]: { verticalAlign: 'top' }, }, + + // ====================== RTL ======================= + '&-rtl': { + direction: 'rtl', + + [`${componentCls}-count, ${componentCls}-dot, ${numberPrefixCls}-custom-component`]: { + insetInlineEnd: 'auto', + }, + }, }, [`${ribbonWrapperPrefixCls}`]: { position: 'relative' }, [`${ribbonPrefixCls}`]: { @@ -318,6 +327,22 @@ const genSharedBadgeStyle: GenerateStyle = (token: BadgeToken): CSSO borderColor: 'currentcolor currentcolor transparent transparent', }, }, + + // ====================== RTL ======================= + '&-rtl': { + direction: 'rtl', + + [`&${ribbonPrefixCls}-placement-end`]: { + [`${ribbonPrefixCls}-corner`]: { + borderColor: 'currentcolor currentcolor transparent transparent', + }, + }, + [`&${ribbonPrefixCls}-placement-start`]: { + [`${ribbonPrefixCls}-corner`]: { + borderColor: 'currentcolor transparent transparent currentcolor', + }, + }, + }, }, }; }; From 52b0dab94276ab8e121faffcf581e6c217420bcb Mon Sep 17 00:00:00 2001 From: wuxh Date: Tue, 22 Nov 2022 00:45:00 +0800 Subject: [PATCH 2/8] docs(badge): add debug demo --- components/badge/demo/offset-debug.md | 7 +++++++ components/badge/demo/offset-debug.tsx | 29 ++++++++++++++++++++++++++ components/badge/index.en-US.md | 1 + components/badge/index.zh-CN.md | 1 + 4 files changed, 38 insertions(+) create mode 100644 components/badge/demo/offset-debug.md create mode 100644 components/badge/demo/offset-debug.tsx diff --git a/components/badge/demo/offset-debug.md b/components/badge/demo/offset-debug.md new file mode 100644 index 000000000000..d1f20e9359cf --- /dev/null +++ b/components/badge/demo/offset-debug.md @@ -0,0 +1,7 @@ +## zh-CN + +调试使用 + +## en-US + +Debug Usage diff --git a/components/badge/demo/offset-debug.tsx b/components/badge/demo/offset-debug.tsx new file mode 100644 index 000000000000..23603ef68996 --- /dev/null +++ b/components/badge/demo/offset-debug.tsx @@ -0,0 +1,29 @@ +import { Avatar, Badge, Slider, Form } from 'antd'; +import React from 'react'; + +const App: React.FC = () => { + const [offset, setOffset] = React.useState<[number, number]>([10, 10]); + + return ( + <> +
{ + setOffset([x, y]); + }} + > + + + + + + +
+ + + + + ); +}; + +export default App; diff --git a/components/badge/index.en-US.md b/components/badge/index.en-US.md index 2a3e86b18964..c2324a6657bf 100644 --- a/components/badge/index.en-US.md +++ b/components/badge/index.en-US.md @@ -23,6 +23,7 @@ Badge normally appears in proximity to notifications or user avatars with eye-ca Dynamic Clickable Offset +Offset Debug Size Status Colorful Badge diff --git a/components/badge/index.zh-CN.md b/components/badge/index.zh-CN.md index 9acc1d97239c..c97b63c105d7 100644 --- a/components/badge/index.zh-CN.md +++ b/components/badge/index.zh-CN.md @@ -24,6 +24,7 @@ group: 数据展示 动态 可点击 自定义位置偏移 +Offset Debug 大小 状态点 多彩徽标 From 6b2ec60e42da7fc8472b1ea2b86701853864d34a Mon Sep 17 00:00:00 2001 From: wuxh Date: Tue, 22 Nov 2022 00:47:45 +0800 Subject: [PATCH 3/8] test: update snapshot --- .../__snapshots__/demo-extend.test.ts.snap | 196 ++++++++++++++++++ .../__tests__/__snapshots__/demo.test.ts.snap | 148 +++++++++++++ 2 files changed, 344 insertions(+) diff --git a/components/badge/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/badge/__tests__/__snapshots__/demo-extend.test.ts.snap index 35b3f831a19a..840424712f5f 100644 --- a/components/badge/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/badge/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -1606,6 +1606,202 @@ exports[`renders ./components/badge/demo/offset.tsx extend context correctly 1`] `; +exports[`renders ./components/badge/demo/offset-debug.tsx extend context correctly 1`] = ` +Array [ +
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ +
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ +
+
+
+
+
+
+
+
+
+ , + + + + + + + + 5 + + + + , +] +`; + exports[`renders ./components/badge/demo/overflow.tsx extend context correctly 1`] = `
`; +exports[`renders ./components/badge/demo/offset-debug.tsx correctly 1`] = ` +Array [ +
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ , + + + + + + + + 5 + + + + , +] +`; + exports[`renders ./components/badge/demo/overflow.tsx correctly 1`] = `
Date: Tue, 22 Nov 2022 01:31:29 +0800 Subject: [PATCH 4/8] test: offset solution ref: https://github.com/ant-design/ant-design/pull/38828 --- components/badge/index.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/components/badge/index.tsx b/components/badge/index.tsx index 9bae21b51dd5..8c87e8ad29db 100644 --- a/components/badge/index.tsx +++ b/components/badge/index.tsx @@ -111,10 +111,13 @@ const Badge: CompoundedComponent = ({ } const offsetStyle: React.CSSProperties = { marginTop: offset[1] }; + const offsetX = parseInt(offset[0] as string, 10); + if (direction === 'rtl') { - offsetStyle.left = parseInt(offset[0] as string, 10); + offsetStyle.left = -offsetX; + offsetStyle.transform = 'translate(-50%, -50%)'; } else { - offsetStyle.right = -parseInt(offset[0] as string, 10); + offsetStyle.right = -offsetX; } return { From df58c2585bf25e8e94156d58e22f36fc69b669a3 Mon Sep 17 00:00:00 2001 From: wuxh Date: Tue, 22 Nov 2022 13:34:09 +0800 Subject: [PATCH 5/8] chore: update style --- components/badge/style/index.tsx | 17 ++++------------- 1 file changed, 4 insertions(+), 13 deletions(-) diff --git a/components/badge/style/index.tsx b/components/badge/style/index.tsx index a84a5bbd20f8..1505bd7eef05 100644 --- a/components/badge/style/index.tsx +++ b/components/badge/style/index.tsx @@ -316,7 +316,8 @@ const genSharedBadgeStyle: GenerateStyle = (token: BadgeToken): CSSO borderEndEndRadius: 0, [`${ribbonPrefixCls}-corner`]: { insetInlineEnd: 0, - borderColor: 'currentcolor transparent transparent currentcolor', + borderInlineEndColor: 'transparent', + borderBlockEndColor: 'transparent', }, }, [`&${ribbonPrefixCls}-placement-start`]: { @@ -324,24 +325,14 @@ const genSharedBadgeStyle: GenerateStyle = (token: BadgeToken): CSSO borderEndStartRadius: 0, [`${ribbonPrefixCls}-corner`]: { insetInlineStart: 0, - borderColor: 'currentcolor currentcolor transparent transparent', + borderBlockEndColor: 'transparent', + borderInlineStartColor: 'transparent', }, }, // ====================== RTL ======================= '&-rtl': { direction: 'rtl', - - [`&${ribbonPrefixCls}-placement-end`]: { - [`${ribbonPrefixCls}-corner`]: { - borderColor: 'currentcolor currentcolor transparent transparent', - }, - }, - [`&${ribbonPrefixCls}-placement-start`]: { - [`${ribbonPrefixCls}-corner`]: { - borderColor: 'currentcolor transparent transparent currentcolor', - }, - }, }, }, }; From 33e3520839d977d3bc0fec615cbbd742c7509481 Mon Sep 17 00:00:00 2001 From: wuxh Date: Tue, 22 Nov 2022 13:34:18 +0800 Subject: [PATCH 6/8] Revert "test: offset solution" This reverts commit aacf9c337809797159a1c4ba38ded0a5ea44443c. --- components/badge/index.tsx | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/components/badge/index.tsx b/components/badge/index.tsx index 8c87e8ad29db..9bae21b51dd5 100644 --- a/components/badge/index.tsx +++ b/components/badge/index.tsx @@ -111,13 +111,10 @@ const Badge: CompoundedComponent = ({ } const offsetStyle: React.CSSProperties = { marginTop: offset[1] }; - const offsetX = parseInt(offset[0] as string, 10); - if (direction === 'rtl') { - offsetStyle.left = -offsetX; - offsetStyle.transform = 'translate(-50%, -50%)'; + offsetStyle.left = parseInt(offset[0] as string, 10); } else { - offsetStyle.right = -offsetX; + offsetStyle.right = -parseInt(offset[0] as string, 10); } return { From 2cb9ed1ad899f84a80b7c8476662f0ebc1cf1067 Mon Sep 17 00:00:00 2001 From: wuxh Date: Tue, 22 Nov 2022 13:34:36 +0800 Subject: [PATCH 7/8] Revert "docs(badge): add debug demo" This reverts commit 52b0dab94276ab8e121faffcf581e6c217420bcb. --- components/badge/demo/offset-debug.md | 7 ------- components/badge/demo/offset-debug.tsx | 29 -------------------------- components/badge/index.en-US.md | 1 - components/badge/index.zh-CN.md | 1 - 4 files changed, 38 deletions(-) delete mode 100644 components/badge/demo/offset-debug.md delete mode 100644 components/badge/demo/offset-debug.tsx diff --git a/components/badge/demo/offset-debug.md b/components/badge/demo/offset-debug.md deleted file mode 100644 index d1f20e9359cf..000000000000 --- a/components/badge/demo/offset-debug.md +++ /dev/null @@ -1,7 +0,0 @@ -## zh-CN - -调试使用 - -## en-US - -Debug Usage diff --git a/components/badge/demo/offset-debug.tsx b/components/badge/demo/offset-debug.tsx deleted file mode 100644 index 23603ef68996..000000000000 --- a/components/badge/demo/offset-debug.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import { Avatar, Badge, Slider, Form } from 'antd'; -import React from 'react'; - -const App: React.FC = () => { - const [offset, setOffset] = React.useState<[number, number]>([10, 10]); - - return ( - <> -
{ - setOffset([x, y]); - }} - > - - - - - - -
- - - - - ); -}; - -export default App; diff --git a/components/badge/index.en-US.md b/components/badge/index.en-US.md index c2324a6657bf..2a3e86b18964 100644 --- a/components/badge/index.en-US.md +++ b/components/badge/index.en-US.md @@ -23,7 +23,6 @@ Badge normally appears in proximity to notifications or user avatars with eye-ca Dynamic Clickable Offset -Offset Debug Size Status Colorful Badge diff --git a/components/badge/index.zh-CN.md b/components/badge/index.zh-CN.md index c97b63c105d7..9acc1d97239c 100644 --- a/components/badge/index.zh-CN.md +++ b/components/badge/index.zh-CN.md @@ -24,7 +24,6 @@ group: 数据展示 动态 可点击 自定义位置偏移 -Offset Debug 大小 状态点 多彩徽标 From d477deb9c9da02189431d7f5950b44ba65fa9067 Mon Sep 17 00:00:00 2001 From: wuxh Date: Tue, 22 Nov 2022 13:36:37 +0800 Subject: [PATCH 8/8] test: update snapshot --- .../__snapshots__/demo-extend.test.ts.snap | 196 ------------------ .../__tests__/__snapshots__/demo.test.ts.snap | 148 ------------- 2 files changed, 344 deletions(-) diff --git a/components/badge/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/badge/__tests__/__snapshots__/demo-extend.test.ts.snap index 840424712f5f..35b3f831a19a 100644 --- a/components/badge/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/badge/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -1606,202 +1606,6 @@ exports[`renders ./components/badge/demo/offset.tsx extend context correctly 1`] `; -exports[`renders ./components/badge/demo/offset-debug.tsx extend context correctly 1`] = ` -Array [ -
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
- -
- -
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
- -
- -
-
-
-
-
-
-
-
-
- , - - - - - - - - 5 - - - - , -] -`; - exports[`renders ./components/badge/demo/overflow.tsx extend context correctly 1`] = `
`; -exports[`renders ./components/badge/demo/offset-debug.tsx correctly 1`] = ` -Array [ -
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- , - - - - - - - - 5 - - - - , -] -`; - exports[`renders ./components/badge/demo/overflow.tsx correctly 1`] = `