From e93f6608307c7fe4105431b8dc9e6756713bb1c1 Mon Sep 17 00:00:00 2001
From: Wuxh <wxh1220@gmail.com>
Date: Tue, 22 Nov 2022 19:15:44 +0800
Subject: [PATCH] fix(badge): fix the style issue in RTL mode (#38829)

* chore: update style

* docs(badge): add debug demo

* test: update snapshot

* test: offset solution

ref: https://github.com/ant-design/ant-design/pull/38828

* chore: update style

* Revert "test: offset solution"

This reverts commit aacf9c337809797159a1c4ba38ded0a5ea44443c.

* Revert "docs(badge): add debug demo"

This reverts commit 52b0dab94276ab8e121faffcf581e6c217420bcb.

* test: update snapshot
---
 components/badge/style/index.tsx | 20 ++++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/components/badge/style/index.tsx b/components/badge/style/index.tsx
index a2f87ab555..1505bd7eef 100644
--- a/components/badge/style/index.tsx
+++ b/components/badge/style/index.tsx
@@ -276,6 +276,15 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (token: BadgeToken): CSSO
         },
         [`${numberPrefixCls}-symbol`]: { verticalAlign: 'top' },
       },
+
+      // ====================== RTL =======================
+      '&-rtl': {
+        direction: 'rtl',
+
+        [`${componentCls}-count, ${componentCls}-dot, ${numberPrefixCls}-custom-component`]: {
+          insetInlineEnd: 'auto',
+        },
+      },
     },
     [`${ribbonWrapperPrefixCls}`]: { position: 'relative' },
     [`${ribbonPrefixCls}`]: {
@@ -307,7 +316,8 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (token: BadgeToken): CSSO
         borderEndEndRadius: 0,
         [`${ribbonPrefixCls}-corner`]: {
           insetInlineEnd: 0,
-          borderColor: 'currentcolor transparent transparent currentcolor',
+          borderInlineEndColor: 'transparent',
+          borderBlockEndColor: 'transparent',
         },
       },
       [`&${ribbonPrefixCls}-placement-start`]: {
@@ -315,9 +325,15 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (token: BadgeToken): CSSO
         borderEndStartRadius: 0,
         [`${ribbonPrefixCls}-corner`]: {
           insetInlineStart: 0,
-          borderColor: 'currentcolor currentcolor transparent transparent',
+          borderBlockEndColor: 'transparent',
+          borderInlineStartColor: 'transparent',
         },
       },
+
+      // ====================== RTL =======================
+      '&-rtl': {
+        direction: 'rtl',
+      },
     },
   };
 };