Badge number (#29100)

* init number component

* use single nodes

* clean up

* add current class

* clean up

* fallback

* fix: Safari render issue

* test: fix test case

* test: fix test case

* test: fix test case

* test: fix test case

* test: fix test case

* test: fix test case

* test : Update snaposhot

* test : Update cp snaposhot

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

@@ -38,158 +38,13 @@ Array [
       >
         <span
           class="ant-scroll-number-only"
-          style="transition:none;-ms-transform:translateY(-1100%);-webkit-transform:translateY(-1100%);transform:translateY(-1100%)"
+          style="transition:none"
         >
-          <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 current"
           >
             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"
-          >
-            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>

components/badge/ScrollNumber.tsx

@@ -1,39 +1,8 @@
 import * as React from 'react';
-import { useState } from 'react';
 import classNames from 'classnames';
 import { ConfigContext } from '../config-provider';
 import { cloneElement } from '../_util/reactNode';
-
+import SingleNumber from './SingleNumber';
-function getNumberArray(num: string | number | undefined | null) {
-  return num
-    ? num
-        .toString()
-        .split('')
-        .reverse()
-        .map(i => {
-          const current = Number(i);
-          return isNaN(current) ? i : current;
-        })
-    : [];
-}
-
-function renderNumberList(position: number, className: string) {
-  const childrenToReturn: React.ReactElement<any>[] = [];
-  for (let i = 0; i < 30; i++) {
-    childrenToReturn.push(
-      <p
-        key={i.toString()}
-        className={classNames(className, {
-          current: position === i,
-        })}
-      >
-        {i % 10}
-      </p>,
-    );
-  }
-
-  return childrenToReturn;
-}
 
 export interface ScrollNumberProps {
   prefixCls?: string;
@@ -42,7 +11,6 @@ export interface ScrollNumberProps {
   count?: string | number | null;
   children?: React.ReactElement<HTMLElement>;
   component?: string;
-  onAnimated?: Function;
   style?: React.CSSProperties;
   title?: string | number | null;
   show: boolean;
@@ -55,7 +23,7 @@ export interface ScrollNumberState {
 
 const ScrollNumber: React.FC<ScrollNumberProps> = ({
   prefixCls: customizePrefixCls,
-  count: customizeCount,
+  count,
   className,
   motionClassName,
   style,
@@ -63,64 +31,11 @@ const ScrollNumber: React.FC<ScrollNumberProps> = ({
   show,
   component = 'sup',
   children,
-  onAnimated = () => {},
   ...restProps
 }) => {
-  const [animateStarted, setAnimateStarted] = useState(true);
-  const [count, setCount] = useState(customizeCount);
-  const [prevCount, setPrevCount] = useState(customizeCount);
-  const [lastCount, setLastCount] = useState(customizeCount);
   const { getPrefixCls } = React.useContext(ConfigContext);
   const prefixCls = getPrefixCls('scroll-number', customizePrefixCls);
 
-  if (prevCount !== customizeCount) {
-    setAnimateStarted(true);
-    setPrevCount(customizeCount);
-  }
-
-  React.useEffect(() => {
-    setLastCount(count);
-    let timeout: number;
-    if (animateStarted) {
-      // Let browser has time to reset the scroller before actually
-      // performing the transition.
-      timeout = setTimeout(() => {
-        setAnimateStarted(false);
-        setCount(customizeCount);
-        onAnimated();
-      });
-    }
-    return () => {
-      if (timeout) {
-        clearTimeout(timeout);
-      }
-    };
-  }, [animateStarted, customizeCount, onAnimated]);
-
-  // =========================== Function ===========================
-  const getPositionByNum = (num: number, i: number) => {
-    const currentCount = Math.abs(Number(count));
-    const lstCount = Math.abs(Number(lastCount));
-    const currentDigit = Math.abs(getNumberArray(count)[i] as number);
-    const lastDigit = Math.abs(getNumberArray(lstCount)[i] as number);
-
-    if (animateStarted) {
-      return 10 + num;
-    }
-
-    // 同方向则在同一侧切换数字
-    if (currentCount > lstCount) {
-      if (currentDigit >= lastDigit) {
-        return 10 + num;
-      }
-      return 20 + num;
-    }
-    if (currentDigit <= lastDigit) {
-      return 10 + num;
-    }
-    return num;
-  };
-
   // ============================ Render ============================
   const newProps = {
     ...restProps,
@@ -130,39 +45,21 @@ const ScrollNumber: React.FC<ScrollNumberProps> = ({
     title: title as string,
   };
 
-  const renderCurrentNumber = (num: number | string, i: number) => {
+  // Only integer need motion
-    if (typeof num === 'number') {
+  let numberNodes: React.ReactNode = count;
-      const position = getPositionByNum(num, i);
+  if (count && Number(count) % 1 === 0) {
-      const removeTransition = animateStarted || getNumberArray(lastCount)[i] === undefined;
+    const numberList = String(count).split('');
-      return React.createElement(
-        'span',
-        {
-          className: `${prefixCls}-only`,
-          style: {
-            transition: removeTransition ? 'none' : undefined,
-            msTransform: `translateY(${-position * 100}%)`,
-            WebkitTransform: `translateY(${-position * 100}%)`,
-            transform: `translateY(${-position * 100}%)`,
-          },
-          key: i,
-        },
-        renderNumberList(position, `${prefixCls}-only-unit`),
-      );
-    }
 
-    return (
+    numberNodes = numberList.map((num, i) => (
-      <span key="symbol" className={`${prefixCls}-symbol`}>
+      <SingleNumber
-        {num}
+        prefixCls={prefixCls}
-      </span>
+        count={Number(count)}
-    );
+        value={num}
-  };
+        // eslint-disable-next-line react/no-array-index-key
-
+        key={numberList.length - i}
-  const numberNode =
+      />
-    count && Number(count) % 1 === 0
+    ));
-      ? getNumberArray(count)
+  }
-          .map((num, i) => renderCurrentNumber(num, i))
-          .reverse()
-      : count;
 
   // allow specify the border
   // mock border-color by box-shadow for compatible with old usage:
@@ -178,7 +75,7 @@ const ScrollNumber: React.FC<ScrollNumberProps> = ({
       className: classNames(`${prefixCls}-custom-component`, oriProps?.className, motionClassName),
     }));
   }
-  return React.createElement(component as any, newProps, numberNode);
+  return React.createElement(component as any, newProps, numberNodes);
 };
 
 export default ScrollNumber;

components/badge/SingleNumber.tsx

@@ -0,0 +1,124 @@
+import * as React from 'react';
+import classNames from 'classnames';
+
+export interface UnitNumberProps {
+  prefixCls: string;
+  value: string | number;
+  offset?: number;
+  current?: boolean;
+}
+
+function UnitNumber({ prefixCls, value, current, offset = 0 }: UnitNumberProps) {
+  let style: React.CSSProperties | undefined;
+
+  if (offset) {
+    style = {
+      position: 'absolute',
+      top: `${offset}00%`,
+      left: 0,
+    };
+  }
+
+  return (
+    <p
+      style={style}
+      className={classNames(`${prefixCls}-only-unit`, {
+        current,
+      })}
+    >
+      {value}
+    </p>
+  );
+}
+
+export interface SingleNumberProps {
+  prefixCls: string;
+  value: string;
+  count: number;
+}
+
+function getOffset(start: number, end: number, unit: -1 | 1) {
+  let index = start;
+  let offset = 0;
+
+  while ((index + 10) % 10 !== end) {
+    index += unit;
+    offset += unit;
+  }
+
+  return offset;
+}
+
+export default function SingleNumber(props: SingleNumberProps) {
+  const { prefixCls, count: originCount, value: originValue } = props;
+  const value = Number(originValue);
+  const count = Math.abs(originCount);
+  const [prevValue, setPrevValue] = React.useState(value);
+  const [prevCount, setPrevCount] = React.useState(count);
+
+  // ============================= Events =============================
+  const onTransitionEnd = () => {
+    setPrevValue(value);
+    setPrevCount(count);
+  };
+
+  // Fallback if transition event not support
+  React.useEffect(() => {
+    const timeout = setTimeout(() => {
+      onTransitionEnd();
+    }, 1000);
+
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, [value]);
+
+  // ============================= Render =============================
+  // Render unit list
+  let unitNodes: React.ReactElement[];
+  let offsetStyle: React.CSSProperties | undefined;
+
+  if (prevValue === value || Number.isNaN(value) || Number.isNaN(prevValue)) {
+    // Nothing to change
+    unitNodes = [<UnitNumber {...props} key={value} current />];
+    offsetStyle = {
+      transition: 'none',
+    };
+  } else {
+    unitNodes = [];
+
+    // Fill basic number units
+    const end = value + 10;
+    const unitNumberList: number[] = [];
+    for (let index = value; index <= end; index += 1) {
+      unitNumberList.push(index);
+    }
+
+    // Fill with number unit nodes
+    const prevIndex = unitNumberList.findIndex(n => n % 10 === prevValue);
+    unitNodes = unitNumberList.map((n, index) => {
+      const singleUnit = n % 10;
+      return (
+        <UnitNumber
+          {...props}
+          key={n}
+          value={singleUnit}
+          offset={index - prevIndex}
+          current={index === prevIndex}
+        />
+      );
+    });
+
+    // Calculate container offset value
+    const unit = prevCount < count ? 1 : -1;
+    offsetStyle = {
+      transform: `translateY(${-getOffset(prevValue, value, unit)}00%)`,
+    };
+  }
+
+  return (
+    <span className={`${prefixCls}-only`} style={offsetStyle} onTransitionEnd={onTransitionEnd}>
+      {unitNodes}
+    </span>
+  );
+}

components/badge/__tests__/index.test.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { mount } from 'enzyme';
+import { act } from 'react-dom/test-utils';
 import Badge from '../index';
 import Tooltip from '../../tooltip';
 import mountTest from '../../../tests/shared/mountTest';
@@ -31,10 +32,10 @@ describe('Badge', () => {
 
   it('badge should support float number', () => {
     let wrapper = mount(<Badge count={3.5} />);
-    expect(wrapper.render()).toMatchSnapshot();
+    expect(wrapper.find('.ant-badge-multiple-words').first().text()).toEqual('3.5');
 
     wrapper = mount(<Badge count="3.5" />);
-    expect(wrapper.render()).toMatchSnapshot();
+    expect(wrapper.find('.ant-badge-multiple-words').first().text()).toEqual('3.5');
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
@@ -58,31 +59,33 @@ describe('Badge', () => {
         <Badge status="error" />
       </Tooltip>,
     );
-    wrapper.find('Badge').simulate('mouseenter');
+
-    jest.runAllTimers();
+    act(() => {
-    expect(ref.current.props.visible).toBe(true);
+      wrapper.find('Badge').simulate('mouseenter');
+      jest.runAllTimers();
+    });
+    expect(ref.current.props.visible).toBeTruthy();
   });
 
   it('should render when count is changed', () => {
     const wrapper = mount(<Badge count={9} />);
-    wrapper.setProps({ count: 10 });
+
-    jest.runAllTimers();
+    function updateMatch(count) {
-    expect(wrapper.render()).toMatchSnapshot();
+      wrapper.setProps({ count });
-    wrapper.setProps({ count: 11 });
+
-    jest.runAllTimers();
+      act(() => {
-    expect(wrapper.render()).toMatchSnapshot();
+        jest.runAllTimers();
-    wrapper.setProps({ count: 11 });
+        wrapper.update();
-    jest.runAllTimers();
+        expect(wrapper.render()).toMatchSnapshot();
-    expect(wrapper.render()).toMatchSnapshot();
+      });
-    wrapper.setProps({ count: 111 });
+    }
-    jest.runAllTimers();
+
-    expect(wrapper.render()).toMatchSnapshot();
+    updateMatch(10);
-    wrapper.setProps({ count: 10 });
+    updateMatch(11);
-    jest.runAllTimers();
+    updateMatch(11);
-    expect(wrapper.render()).toMatchSnapshot();
+    updateMatch(111);
-    jest.runAllTimers();
+    updateMatch(10);
-    wrapper.setProps({ count: 9 });
+    updateMatch(9);
-    expect(wrapper.render()).toMatchSnapshot();
   });
 
   it('should be compatible with borderColor style', () => {
@@ -152,20 +155,6 @@ describe('Badge', () => {
 
     expect(wrapper.find('.ant-badge')).toHaveLength(2);
   });
-
-  it('render Badge size when contains children', () => {
-    const wrapper = mount(
-      <div>
-        <Badge size="default" count={5}>
-          <a />
-        </Badge>
-        <Badge size="small" count={5}>
-          <a />
-        </Badge>
-      </div>,
-    );
-    expect(wrapper.render()).toMatchSnapshot();
-  });
 });
 
 describe('Ribbon', () => {

components/badge/demo/change.md

@@ -15,7 +15,7 @@ The count will be animated as it changes.
 
 ```jsx
 import { Badge, Button, Switch } from 'antd';
-import { MinusOutlined, PlusOutlined } from '@ant-design/icons';
+import { MinusOutlined, PlusOutlined, QuestionOutlined } from '@ant-design/icons';
 
 const ButtonGroup = Button.Group;
 
@@ -38,6 +38,11 @@ class Demo extends React.Component {
     this.setState({ count });
   };
 
+  random = () => {
+    const count = Math.floor(Math.random() * 100);
+    this.setState({ count });
+  };
+
   onChange = show => {
     this.setState({ show });
   };
@@ -56,6 +61,9 @@ class Demo extends React.Component {
             <Button onClick={this.increase}>
               <PlusOutlined />
             </Button>
+            <Button onClick={this.random}>
+              <QuestionOutlined />
+            </Button>
           </ButtonGroup>
         </div>
         <div style={{ marginTop: 10 }}>

components/badge/demo/title.md

@@ -22,6 +22,9 @@ ReactDOM.render(
     <Badge count={5} title="Custom hover text">
       <a href="#" className="head-example" />
     </Badge>
+    <Badge count={-5} title="Negative">
+      <a href="#" className="head-example" />
+    </Badge>
   </div>,
   mountNode,
 );

components/badge/index.tsx

@@ -200,8 +200,6 @@ const Badge: CompoundedComponent = ({
             scrollNumberStyle.background = color;
           }
 
-          console.log('===>', isDot, scrollNumberCls);
-
           return (
             <ScrollNumber
               prefixCls={scrollNumberPrefixCls}

components/badge/style/index.less

@@ -177,15 +177,25 @@
   }
 }
 
+// Safari will blink with transform when inner element has absolute style.
+.safari-fix-motion() {
+  -webkit-transform-style: preserve-3d;
+  -webkit-backface-visibility: hidden;
+}
+
 .@{number-prefix-cls} {
   overflow: hidden;
   &-only {
+    position: relative;
     display: inline-block;
     height: @badge-height;
     transition: all @animation-duration-slow @ease-in-out;
+    .safari-fix-motion;
+
     > p.@{number-prefix-cls}-only-unit {
       height: @badge-height;
       margin: 0;
+      .safari-fix-motion;
     }
   }
 

components/config-provider/__tests__/__snapshots__/components.test.js.snap

@@ -817,158 +817,13 @@ exports[`ConfigProvider components Badge configProvider 1`] = `
     >
       <span
         class="config-scroll-number-only"
-        style="transition:none;-ms-transform:translateY(-1500%);-webkit-transform:translateY(-1500%);transform:translateY(-1500%)"
+        style="transition:none"
       >
-        <p
-          class="config-scroll-number-only-unit"
-        >
-          0
-        </p>
-        <p
-          class="config-scroll-number-only-unit"
-        >
-          1
-        </p>
-        <p
-          class="config-scroll-number-only-unit"
-        >
-          2
-        </p>
-        <p
-          class="config-scroll-number-only-unit"
-        >
-          3
-        </p>
-        <p
-          class="config-scroll-number-only-unit"
-        >
-          4
-        </p>
-        <p
-          class="config-scroll-number-only-unit"
-        >
-          5
-        </p>
-        <p
-          class="config-scroll-number-only-unit"
-        >
-          6
-        </p>
-        <p
-          class="config-scroll-number-only-unit"
-        >
-          7
-        </p>
-        <p
-          class="config-scroll-number-only-unit"
-        >
-          8
-        </p>
-        <p
-          class="config-scroll-number-only-unit"
-        >
-          9
-        </p>
-        <p
-          class="config-scroll-number-only-unit"
-        >
-          0
-        </p>
-        <p
-          class="config-scroll-number-only-unit"
-        >
-          1
-        </p>
-        <p
-          class="config-scroll-number-only-unit"
-        >
-          2
-        </p>
-        <p
-          class="config-scroll-number-only-unit"
-        >
-          3
-        </p>
-        <p
-          class="config-scroll-number-only-unit"
-        >
-          4
-        </p>
         <p
           class="config-scroll-number-only-unit current"
         >
           5
         </p>
-        <p
-          class="config-scroll-number-only-unit"
-        >
-          6
-        </p>
-        <p
-          class="config-scroll-number-only-unit"
-        >
-          7
-        </p>
-        <p
-          class="config-scroll-number-only-unit"
-        >
-          8
-        </p>
-        <p
-          class="config-scroll-number-only-unit"
-        >
-          9
-        </p>
-        <p
-          class="config-scroll-number-only-unit"
-        >
-          0
-        </p>
-        <p
-          class="config-scroll-number-only-unit"
-        >
-          1
-        </p>
-        <p
-          class="config-scroll-number-only-unit"
-        >
-          2
-        </p>
-        <p
-          class="config-scroll-number-only-unit"
-        >
-          3
-        </p>
-        <p
-          class="config-scroll-number-only-unit"
-        >
-          4
-        </p>
-        <p
-          class="config-scroll-number-only-unit"
-        >
-          5
-        </p>
-        <p
-          class="config-scroll-number-only-unit"
-        >
-          6
-        </p>
-        <p
-          class="config-scroll-number-only-unit"
-        >
-          7
-        </p>
-        <p
-          class="config-scroll-number-only-unit"
-        >
-          8
-        </p>
-        <p
-          class="config-scroll-number-only-unit"
-        >
-          9
-        </p>
       </span>
     </sup>
   </span>
@@ -997,158 +852,13 @@ exports[`ConfigProvider components Badge configProvider componentSize large 1`]
     >
       <span
         class="config-scroll-number-only"
-        style="transition:none;-ms-transform:translateY(-1500%);-webkit-transform:translateY(-1500%);transform:translateY(-1500%)"
+        style="transition:none"
       >
-        <p
-          class="config-scroll-number-only-unit"
-        >
-          0
-        </p>
-        <p
-          class="config-scroll-number-only-unit"
-        >
-          1
-        </p>
-        <p
-          class="config-scroll-number-only-unit"
-        >
-          2
-        </p>
-        <p
-          class="config-scroll-number-only-unit"
-        >
-          3
-        </p>
-        <p
-          class="config-scroll-number-only-unit"
-        >
-          4
-        </p>
-        <p
-          class="config-scroll-number-only-unit"
-        >
-          5
-        </p>
-        <p
-          class="config-scroll-number-only-unit"
-        >
-          6
-        </p>
-        <p
-          class="config-scroll-number-only-unit"
-        >
-          7
-        </p>
-        <p
-          class="config-scroll-number-only-unit"
-        >
-          8
-        </p>
-        <p
-          class="config-scroll-number-only-unit"
-        >
-          9
-        </p>
-        <p
-          class="config-scroll-number-only-unit"
-        >
-          0
-        </p>
-        <p
-          class="config-scroll-number-only-unit"
-        >
-          1
-        </p>
-        <p
-          class="config-scroll-number-only-unit"
-        >
-          2
-        </p>
-        <p
-          class="config-scroll-number-only-unit"
-        >
-          3
-        </p>
-        <p
-          class="config-scroll-number-only-unit"
-        >
-          4
-        </p>
         <p
           class="config-scroll-number-only-unit current"
         >
           5
         </p>
-        <p
-          class="config-scroll-number-only-unit"
-        >
-          6
-        </p>
-        <p
-          class="config-scroll-number-only-unit"
-        >
-          7
-        </p>
-        <p
-          class="config-scroll-number-only-unit"
-        >
-          8
-        </p>
-        <p
-          class="config-scroll-number-only-unit"
-        >
-          9
-        </p>
-        <p
-          class="config-scroll-number-only-unit"
-        >
-          0
-        </p>
-        <p
-          class="config-scroll-number-only-unit"
-        >
-          1
-        </p>
-        <p
-          class="config-scroll-number-only-unit"
-        >
-          2
-        </p>
-        <p
-          class="config-scroll-number-only-unit"
-        >
-          3
-        </p>
-        <p
-          class="config-scroll-number-only-unit"
-        >
-          4
-        </p>
-        <p
-          class="config-scroll-number-only-unit"
-        >
-          5
-        </p>
-        <p
-          class="config-scroll-number-only-unit"
-        >
-          6
-        </p>
-        <p
-          class="config-scroll-number-only-unit"
-        >
-          7
-        </p>
-        <p
-          class="config-scroll-number-only-unit"
-        >
-          8
-        </p>
-        <p
-          class="config-scroll-number-only-unit"
-        >
-          9
-        </p>
       </span>
     </sup>
   </span>
@@ -1177,158 +887,13 @@ exports[`ConfigProvider components Badge configProvider componentSize middle 1`]
     >
       <span
         class="config-scroll-number-only"
-        style="transition:none;-ms-transform:translateY(-1500%);-webkit-transform:translateY(-1500%);transform:translateY(-1500%)"
+        style="transition:none"
       >
-        <p
-          class="config-scroll-number-only-unit"
-        >
-          0
-        </p>
-        <p
-          class="config-scroll-number-only-unit"
-        >
-          1
-        </p>
-        <p
-          class="config-scroll-number-only-unit"
-        >
-          2
-        </p>
-        <p
-          class="config-scroll-number-only-unit"
-        >
-          3
-        </p>
-        <p
-          class="config-scroll-number-only-unit"
-        >
-          4
-        </p>
-        <p
-          class="config-scroll-number-only-unit"
-        >
-          5
-        </p>
-        <p
-          class="config-scroll-number-only-unit"
-        >
-          6
-        </p>
-        <p
-          class="config-scroll-number-only-unit"
-        >
-          7
-        </p>
-        <p
-          class="config-scroll-number-only-unit"
-        >
-          8
-        </p>
-        <p
-          class="config-scroll-number-only-unit"
-        >
-          9
-        </p>
-        <p
-          class="config-scroll-number-only-unit"
-        >
-          0
-        </p>
-        <p
-          class="config-scroll-number-only-unit"
-        >
-          1
-        </p>
-        <p
-          class="config-scroll-number-only-unit"
-        >
-          2
-        </p>
-        <p
-          class="config-scroll-number-only-unit"
-        >
-          3
-        </p>
-        <p
-          class="config-scroll-number-only-unit"
-        >
-          4
-        </p>
         <p
           class="config-scroll-number-only-unit current"
         >
           5
         </p>
-        <p
-          class="config-scroll-number-only-unit"
-        >
-          6
-        </p>
-        <p
-          class="config-scroll-number-only-unit"
-        >
-          7
-        </p>
-        <p
-          class="config-scroll-number-only-unit"
-        >
-          8
-        </p>
-        <p
-          class="config-scroll-number-only-unit"
-        >
-          9
-        </p>
-        <p
-          class="config-scroll-number-only-unit"
-        >
-          0
-        </p>
-        <p
-          class="config-scroll-number-only-unit"
-        >
-          1
-        </p>
-        <p
-          class="config-scroll-number-only-unit"
-        >
-          2
-        </p>
-        <p
-          class="config-scroll-number-only-unit"
-        >
-          3
-        </p>
-        <p
-          class="config-scroll-number-only-unit"
-        >
-          4
-        </p>
-        <p
-          class="config-scroll-number-only-unit"
-        >
-          5
-        </p>
-        <p
-          class="config-scroll-number-only-unit"
-        >
-          6
-        </p>
-        <p
-          class="config-scroll-number-only-unit"
-        >
-          7
-        </p>
-        <p
-          class="config-scroll-number-only-unit"
-        >
-          8
-        </p>
-        <p
-          class="config-scroll-number-only-unit"
-        >
-          9
-        </p>
       </span>
     </sup>
   </span>
@@ -1357,158 +922,13 @@ exports[`ConfigProvider components Badge configProvider virtual and dropdownMatc
     >
       <span
         class="ant-scroll-number-only"
-        style="transition:none;-ms-transform:translateY(-1500%);-webkit-transform:translateY(-1500%);transform:translateY(-1500%)"
+        style="transition:none"
       >
-        <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>
@@ -1537,158 +957,13 @@ exports[`ConfigProvider components Badge normal 1`] = `
     >
       <span
         class="ant-scroll-number-only"
-        style="transition:none;-ms-transform:translateY(-1500%);-webkit-transform:translateY(-1500%);transform:translateY(-1500%)"
+        style="transition:none"
       >
-        <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>
@@ -1717,158 +992,13 @@ exports[`ConfigProvider components Badge prefixCls 1`] = `
     >
       <span
         class="prefix-scroll-number-only"
-        style="transition:none;-ms-transform:translateY(-1500%);-webkit-transform:translateY(-1500%);transform:translateY(-1500%)"
+        style="transition:none"
       >
-        <p
-          class="prefix-scroll-number-only-unit"
-        >
-          0
-        </p>
-        <p
-          class="prefix-scroll-number-only-unit"
-        >
-          1
-        </p>
-        <p
-          class="prefix-scroll-number-only-unit"
-        >
-          2
-        </p>
-        <p
-          class="prefix-scroll-number-only-unit"
-        >
-          3
-        </p>
-        <p
-          class="prefix-scroll-number-only-unit"
-        >
-          4
-        </p>
-        <p
-          class="prefix-scroll-number-only-unit"
-        >
-          5
-        </p>
-        <p
-          class="prefix-scroll-number-only-unit"
-        >
-          6
-        </p>
-        <p
-          class="prefix-scroll-number-only-unit"
-        >
-          7
-        </p>
-        <p
-          class="prefix-scroll-number-only-unit"
-        >
-          8
-        </p>
-        <p
-          class="prefix-scroll-number-only-unit"
-        >
-          9
-        </p>
-        <p
-          class="prefix-scroll-number-only-unit"
-        >
-          0
-        </p>
-        <p
-          class="prefix-scroll-number-only-unit"
-        >
-          1
-        </p>
-        <p
-          class="prefix-scroll-number-only-unit"
-        >
-          2
-        </p>
-        <p
-          class="prefix-scroll-number-only-unit"
-        >
-          3
-        </p>
-        <p
-          class="prefix-scroll-number-only-unit"
-        >
-          4
-        </p>
         <p
           class="prefix-scroll-number-only-unit current"
         >
           5
         </p>
-        <p
-          class="prefix-scroll-number-only-unit"
-        >
-          6
-        </p>
-        <p
-          class="prefix-scroll-number-only-unit"
-        >
-          7
-        </p>
-        <p
-          class="prefix-scroll-number-only-unit"
-        >
-          8
-        </p>
-        <p
-          class="prefix-scroll-number-only-unit"
-        >
-          9
-        </p>
-        <p
-          class="prefix-scroll-number-only-unit"
-        >
-          0
-        </p>
-        <p
-          class="prefix-scroll-number-only-unit"
-        >
-          1
-        </p>
-        <p
-          class="prefix-scroll-number-only-unit"
-        >
-          2
-        </p>
-        <p
-          class="prefix-scroll-number-only-unit"
-        >
-          3
-        </p>
-        <p
-          class="prefix-scroll-number-only-unit"
-        >
-          4
-        </p>
-        <p
-          class="prefix-scroll-number-only-unit"
-        >
-          5
-        </p>
-        <p
-          class="prefix-scroll-number-only-unit"
-        >
-          6
-        </p>
-        <p
-          class="prefix-scroll-number-only-unit"
-        >
-          7
-        </p>
-        <p
-          class="prefix-scroll-number-only-unit"
-        >
-          8
-        </p>
-        <p
-          class="prefix-scroll-number-only-unit"
-        >
-          9
-        </p>
       </span>
     </sup>
   </span>

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

@@ -33,158 +33,13 @@ exports[`renders ./components/radio/demo/badge.md correctly 1`] = `
     >
       <span
         class="ant-scroll-number-only"
-        style="transition:none;-ms-transform:translateY(-1100%);-webkit-transform:translateY(-1100%);transform:translateY(-1100%)"
+        style="transition:none"
       >
-        <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 current"
         >
           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"
-        >
-          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>
@@ -217,158 +72,13 @@ exports[`renders ./components/radio/demo/badge.md correctly 1`] = `
     >
       <span
         class="ant-scroll-number-only"
-        style="transition:none;-ms-transform:translateY(-1200%);-webkit-transform:translateY(-1200%);transform:translateY(-1200%)"
+        style="transition:none"
       >
-        <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 current"
         >
           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"
-        >
-          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>