fix(badge): fix badge number is rtl (ant-design#43998)

* fix(badge): fix badge number is rtl * test: fix snapshots * feat: use dir attribute instead of bdi * test: update snapshots * test: back of snapshot --------- Co-authored-by: 二货机器人 <smith3816@gmail.com>
ammar-knowledge · Aug 14, 2023 · e0e373f · e0e373f
1 parent d1bd2d0
commit e0e373f
Show file tree

Hide file tree

Showing 12 changed files with 1,353 additions and 1,163 deletions.
diff --git a/components/avatar/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/avatar/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -39,16 +39,18 @@ exports[`renders components/avatar/demo/badge.tsx extend context correctly 1`] =
         data-show="true"
         title="1"
       >
-        <span
-          class="ant-scroll-number-only"
-          style="transition: none;"
-        >
+        <bdi>
           <span
-            class="ant-scroll-number-only-unit current"
+            class="ant-scroll-number-only"
+            style="transition: none;"
           >
-            1
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              1
+            </span>
           </span>
-        </span>
+        </bdi>
       </sup>
     </span>
   </div>
@@ -531,16 +533,18 @@ Array [
           data-show="true"
           title="1"
         >
-          <span
-            class="ant-scroll-number-only"
-            style="transition: none;"
-          >
+          <bdi>
             <span
-              class="ant-scroll-number-only-unit current"
+              class="ant-scroll-number-only"
+              style="transition: none;"
             >
-              1
+              <span
+                class="ant-scroll-number-only-unit current"
+              >
+                1
+              </span>
             </span>
-          </span>
+          </bdi>
         </sup>
       </span>
     </div>

diff --git a/components/avatar/__tests__/__snapshots__/demo.test.tsx.snap b/components/avatar/__tests__/__snapshots__/demo.test.tsx.snap
@@ -39,16 +39,18 @@ exports[`renders components/avatar/demo/badge.tsx correctly 1`] = `
         data-show="true"
         title="1"
       >
-        <span
-          class="ant-scroll-number-only"
-          style="transition:none"
-        >
+        <bdi>
           <span
-            class="ant-scroll-number-only-unit current"
+            class="ant-scroll-number-only"
+            style="transition:none"
           >
-            1
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              1
+            </span>
           </span>
-        </span>
+        </bdi>
       </sup>
     </span>
   </div>
@@ -438,16 +440,18 @@ Array [
           data-show="true"
           title="1"
         >
-          <span
-            class="ant-scroll-number-only"
-            style="transition:none"
-          >
+          <bdi>
             <span
-              class="ant-scroll-number-only-unit current"
+              class="ant-scroll-number-only"
+              style="transition:none"
             >
-              1
+              <span
+                class="ant-scroll-number-only-unit current"
+              >
+                1
+              </span>
             </span>
-          </span>
+          </bdi>
         </sup>
       </span>
     </div>

diff --git a/components/badge/ScrollNumber.tsx b/components/badge/ScrollNumber.tsx
@@ -51,15 +51,19 @@ const ScrollNumber = React.forwardRef<HTMLElement, ScrollNumberProps>((props, re
   if (count && Number(count) % 1 === 0) {
     const numberList = String(count).split('');
 
-    numberNodes = numberList.map((num, i) => (
-      <SingleNumber
-        prefixCls={prefixCls}
-        count={Number(count)}
-        value={num}
-        // eslint-disable-next-line react/no-array-index-key
-        key={numberList.length - i}
-      />
-    ));
+    numberNodes = (
+      <bdi>
+        {numberList.map((num, i) => (
+          <SingleNumber
+            prefixCls={prefixCls}
+            count={Number(count)}
+            value={num}
+            // eslint-disable-next-line react/no-array-index-key
+            key={numberList.length - i}
+          />
+        ))}
+      </bdi>
+    );
   }
 
   // allow specify the border