chore: checkbox use wave

components/_util/wave/WaveEffect.tsx

@@ -157,8 +157,11 @@ export default function showWaveEffect(
   holder.style.top = `0px`;
   node.parentElement?.appendChild(holder);
 
+  // Target
+  const target = node.querySelector<HTMLElement>('.antd-wave-target') || node;
+
   render(
-    <WaveWrapper target={node} className={className} token={token} wave={wave} holder={holder} />,
+    <WaveWrapper target={target} className={className} token={token} wave={wave} holder={holder} />,
     holder,
   );
 }

components/checkbox/Checkbox.tsx

@@ -8,6 +8,7 @@ import { GroupContext } from './Group';
 import DisabledContext from '../config-provider/DisabledContext';
 
 import useStyle from './style';
+import Wave from '../_util/wave';
 
 export interface AbstractCheckboxProps<T> {
   prefixCls?: string;
@@ -122,28 +123,33 @@ const InternalCheckbox: React.ForwardRefRenderFunction<HTMLInputElement, Checkbo
     {
       [`${prefixCls}-indeterminate`]: indeterminate,
     },
+    'antd-wave-target',
     hashId,
   );
   const ariaChecked = indeterminate ? 'mixed' : undefined;
+
+  /* eslint-disable jsx-a11y/label-has-associated-control */
   return wrapSSR(
-    // eslint-disable-next-line jsx-a11y/label-has-associated-control
-    <label
-      className={classString}
-      style={style}
-      onMouseEnter={onMouseEnter}
-      onMouseLeave={onMouseLeave}
-    >
-      <RcCheckbox
-        aria-checked={ariaChecked}
-        {...checkboxProps}
-        prefixCls={prefixCls}
-        className={checkboxClass}
-        disabled={mergedDisabled}
-        ref={ref}
-      />
-      {children !== undefined && <span>{children}</span>}
-    </label>,
+    <Wave>
+      <label
+        className={classString}
+        style={style}
+        onMouseEnter={onMouseEnter}
+        onMouseLeave={onMouseLeave}
+      >
+        <RcCheckbox
+          aria-checked={ariaChecked}
+          {...checkboxProps}
+          prefixCls={prefixCls}
+          className={checkboxClass}
+          disabled={mergedDisabled}
+          ref={ref}
+        />
+        {children !== undefined && <span>{children}</span>}
+      </label>
+    </Wave>,
   );
+  /* eslint-enable */
 };
 
 const Checkbox = React.forwardRef<unknown, CheckboxProps>(InternalCheckbox);

components/checkbox/style/index.ts

@@ -1,4 +1,3 @@
-import { Keyframes } from '@ant-design/cssinjs';
 import type { FullToken, GenerateStyle } from '../../theme/internal';
 import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 import { genFocusOutline, resetComponent } from '../../style';
@@ -10,19 +9,6 @@ interface CheckboxToken extends FullToken<'Checkbox'> {
   checkboxSize: number;
 }
 
-// ============================== Motion ==============================
-const antCheckboxEffect = new Keyframes('antCheckboxEffect', {
-  '0%': {
-    transform: 'scale(1)',
-    opacity: 0.5,
-  },
-
-  '100%': {
-    transform: 'scale(1.6)',
-    opacity: 0,
-  },
-});
-
 // ============================== Styles ==============================
 export const genCheckboxStyle: GenerateStyle<CheckboxToken> = (token) => {
   const { checkboxCls } = token;
@@ -77,14 +63,17 @@ export const genCheckboxStyle: GenerateStyle<CheckboxToken> = (token) => {
         whiteSpace: 'nowrap',
         lineHeight: 1,
         cursor: 'pointer',
+        borderRadius: token.borderRadiusSM,
 
         // Wrapper > Checkbox > input
         [`${checkboxCls}-input`]: {
           position: 'absolute',
-          inset: 0,
           zIndex: 1,
-          width: '100%',
-          height: '100%',
+          inset: `0 auto 0 auto`,
+          width: 0,
+          height: 0,
+          padding: 0,
+          margin: 0,
           cursor: 'pointer',
           opacity: 0,
 
@@ -159,13 +148,7 @@ export const genCheckboxStyle: GenerateStyle<CheckboxToken> = (token) => {
 
     // ===================== Hover =====================
     {
-      // Wrapper
-      [`${wrapperCls}:hover ${checkboxCls}:after`]: {
-        visibility: 'visible',
-      },
-
       // Wrapper & Wrapper > Checkbox
-
       [`
         ${wrapperCls}:not(${wrapperCls}-disabled),
         ${checkboxCls}:not(${checkboxCls}-disabled)
@@ -200,24 +183,6 @@ export const genCheckboxStyle: GenerateStyle<CheckboxToken> = (token) => {
             transition: `all ${token.motionDurationMid} ${token.motionEaseOutBack} ${token.motionDurationFast}`,
           },
         },
-
-        // Checked Effect
-        '&:after': {
-          position: 'absolute',
-          top: 0,
-          insetInlineStart: 0,
-          width: '100%',
-          height: '100%',
-          borderRadius: token.borderRadiusSM,
-          visibility: 'hidden',
-          border: `${token.lineWidthBold}px solid ${token.colorPrimary}`,
-          animationName: antCheckboxEffect,
-          animationDuration: token.motionDurationSlow,
-          animationTimingFunction: 'ease-in-out',
-          animationFillMode: 'backwards',
-          content: '""',
-          transition: `all ${token.motionDurationSlow}`,
-        },
       },
 
       [`
@@ -228,9 +193,6 @@ export const genCheckboxStyle: GenerateStyle<CheckboxToken> = (token) => {
           backgroundColor: token.colorPrimaryHover,
           borderColor: 'transparent',
         },
-        [`&:hover ${checkboxCls}:after`]: {
-          borderColor: token.colorPrimaryHover,
-        },
       },
     },
 

components/theme/themesToken/happy/wave.tsx

@@ -45,7 +45,6 @@ function HappyWave({ target, token, onFinish }: HappyWaveProps) {
   useWaveStyle(token);
 
   // ========================= Dots =========================
-
   React.useEffect(() => {
     const id = raf(() => {
       const rect = target.getBoundingClientRect();