fix: badge offset in rtl (#24724)

* fix: badge offset in rtl

* fix: update snap

* add test

* fix: offset

* fix: snap

components/badge/__tests__/__snapshots__/demo.test.js.snap

@@ -1497,6 +1497,179 @@ exports[`renders ./components/badge/demo/no-wrapper.md correctly 1`] = `
 </div>
 `;
 
+exports[`renders ./components/badge/demo/offset.md correctly 1`] = `
+<span
+  class="ant-badge"
+>
+  <a
+    class="head-example"
+    href="#"
+  />
+  <sup
+    class="ant-scroll-number ant-badge-count"
+    data-show="true"
+    style="right:-10px;margin-top:10px"
+    title="5"
+  >
+    <span
+      class="ant-scroll-number-only"
+      style="transition:none;-ms-transform:translateY(-1500%);-webkit-transform:translateY(-1500%);transform:translateY(-1500%)"
+    >
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        0
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        1
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        2
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        3
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        4
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        5
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        6
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        7
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        8
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        9
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        0
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        1
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        2
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        3
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        4
+      </p>
+      <p
+        class="ant-scroll-number-only-unit current"
+      >
+        5
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        6
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        7
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        8
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        9
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        0
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        1
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        2
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        3
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        4
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        5
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        6
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        7
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        8
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        9
+      </p>
+    </span>
+  </sup>
+</span>
+`;
+
 exports[`renders ./components/badge/demo/overflow.md correctly 1`] = `
 <div>
   <span

components/badge/__tests__/__snapshots__/index.test.js.snap

@@ -762,6 +762,181 @@ exports[`Badge rtl render component should be rendered correctly in RTL directio
 />
 `;
 
+exports[`Badge rtl render component should be rendered correctly in RTL direction 2`] = `
+<span
+  class="ant-badge ant-badge-rtl"
+>
+  <a
+    class="head-example"
+    href="#"
+  >
+    head
+  </a>
+  <sup
+    class="ant-scroll-number ant-badge-count"
+    data-show="true"
+    style="left:10px;margin-top:10px"
+    title="5"
+  >
+    <span
+      class="ant-scroll-number-only"
+      style="transition:none;-ms-transform:translateY(-1500%);-webkit-transform:translateY(-1500%);transform:translateY(-1500%)"
+    >
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        0
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        1
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        2
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        3
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        4
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        5
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        6
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        7
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        8
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        9
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        0
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        1
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        2
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        3
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        4
+      </p>
+      <p
+        class="ant-scroll-number-only-unit current"
+      >
+        5
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        6
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        7
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        8
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        9
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        0
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        1
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        2
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        3
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        4
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        5
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        6
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        7
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        8
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        9
+      </p>
+    </span>
+  </sup>
+</span>
+`;
+
 exports[`Badge should be compatible with borderColor style 1`] = `
 <span
   class="ant-badge ant-badge-not-a-wrapper"

components/badge/__tests__/index.test.js

@@ -8,6 +8,13 @@ import rtlTest from '../../../tests/shared/rtlTest';
 describe('Badge', () => {
   mountTest(Badge);
   rtlTest(Badge);
+  rtlTest(() => (
+    <Badge count={5} offset={[10, 10]}>
+      <a href="#" className="head-example">
+        head
+      </a>
+    </Badge>
+  ));
 
   beforeEach(() => {
     jest.useFakeTimers();

components/badge/demo/offset.md

@@ -0,0 +1,27 @@
+---
+order: 5
+title:
+  zh-CN: 自定义位置偏移
+  en-US: Offset
+---
+
+## zh-CN
+
+设置状态点的位置偏移，格式为 `[left, top]`，表示状态点距默认位置左侧、上方的偏移量。
+
+## en-US
+
+Set offset of the badge dot, the format is `[left, top]`, which represents the offset of the status dot from the left and top of the default position.
+
+```jsx
+import { Badge } from 'antd';
+
+ReactDOM.render(
+  <>
+    <Badge count={5} offset={[10, 10]}>
+      <a href="#" className="head-example" />
+    </Badge>
+  </>,
+  mountNode,
+);
+```

components/badge/index.en-US.md

@@ -13,22 +13,12 @@ Badge normally appears in proximity to notifications or user avatars with eye-ca
 
 ## API
 
-```jsx
-<Badge count={5}>
-  <a href="#" className="head-example" />
-</Badge>
-```
-
-```jsx
-<Badge count={5} />
-```
-
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
 | color | Customize Badge dot color | string | - |  |
 | count | Number to show in badge | ReactNode |  |  |
 | dot | Whether to display a red dot instead of `count` | boolean | `false` |  |
-| offset | set offset of the badge dot, like`[x, y]` | `[number, number]` | - |  |
+| offset | set offset of the badge dot | `[number, number]` | - |  |
 | overflowCount | Max count to show | number | 99 |  |
 | showZero | Whether to show badge when `count` is zero | boolean | `false` |  |
 | status | Set Badge as a status dot | `success` \| `processing` \| `default` \| `error` \| `warning` | `''` |  |

components/badge/index.tsx

@@ -87,6 +87,15 @@ const Badge: React.FC<BadgeProps> = ({
   };
 
   const getStyleWithOffset = () => {
+    if (direction === 'rtl') {
+      return offset
+        ? {
+            left: parseInt(offset[0] as string, 10),
+            marginTop: offset[1],
+            ...style,
+          }
+        : style;
+    }
     return offset
       ? {
           right: -parseInt(offset[0] as string, 10),

components/badge/index.zh-CN.md

@@ -14,22 +14,12 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/6%26GF9WHwvY/Badge.svg
 
 ## API
 
-```jsx
-<Badge count={5}>
-  <a href="#" className="head-example" />
-</Badge>
-```
-
-```jsx
-<Badge count={5} />
-```
-
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
 | color | 自定义小圆点的颜色 | string | - |  |
 | count | 展示的数字，大于 overflowCount 时显示为 `${overflowCount}+`，为 0 时隐藏 | ReactNode |  |  |
 | dot | 不展示数字，只有一个小红点 | boolean | false |  |
-| offset | 设置状态点的位置偏移，格式为 `[x, y]` | `[number, number]` | - |  |
+| offset | 设置状态点的位置偏移 | `[number, number]` | - |  |
 | overflowCount | 展示封顶的数字值 | number | 99 |  |
 | showZero | 当数值为 0 时，是否展示 Badge | boolean | false |  |
 | status | 设置 Badge 为状态点 | `success` \| `processing` \| `default` \| `error` \| `warning` | '' |  |