feat: CP support Badge className / classNames and style / styles (#43197)

* feat: CP support Badge className and style

* fix

* Update basic.tsx

* fix

* fix

* fix

* Update components/config-provider/context.ts

Co-authored-by: MadCcc <1075746765@qq.com>

* Update components/badge/index.tsx

Co-authored-by: MadCcc <1075746765@qq.com>

* Update components/badge/index.tsx

Co-authored-by: MadCcc <1075746765@qq.com>

* fix

* fix

* fix

* fix

---------

Co-authored-by: MadCcc <1075746765@qq.com>

components/badge/index.tsx

@@ -72,7 +72,7 @@ const InternalBadge: React.ForwardRefRenderFunction<HTMLSpanElement, BadgeProps>
     showZero = false,
     ...restProps
   } = props;
-  const { getPrefixCls, direction } = React.useContext(ConfigContext);
+  const { getPrefixCls, direction, badge } = React.useContext(ConfigContext);
   const prefixCls = getPrefixCls('badge', customizePrefixCls);
 
   // Style
@@ -123,7 +123,7 @@ const InternalBadge: React.ForwardRefRenderFunction<HTMLSpanElement, BadgeProps>
   // =============================== Styles ===============================
   const mergedStyle = useMemo<React.CSSProperties>(() => {
     if (!offset) {
-      return { ...style };
+      return { ...badge?.style, ...style };
     }
 
     const offsetStyle: React.CSSProperties = { marginTop: offset[1] };
@@ -133,11 +133,8 @@ const InternalBadge: React.ForwardRefRenderFunction<HTMLSpanElement, BadgeProps>
       offsetStyle.right = -parseInt(offset[0] as string, 10);
     }
 
-    return {
+    return { ...offsetStyle, ...badge?.style, ...style };
-      ...offsetStyle,
+  }, [direction, offset, style, badge?.style]);
-      ...style,
-    };
-  }, [direction, offset, style]);
 
   // =============================== Render ===============================
   // >>> Title
@@ -154,17 +151,14 @@ const InternalBadge: React.ForwardRefRenderFunction<HTMLSpanElement, BadgeProps>
     !livingCount || typeof livingCount !== 'object'
       ? undefined
       : cloneElement(livingCount, (oriProps) => ({
-          style: {
+          style: { ...mergedStyle, ...oriProps.style },
-            ...mergedStyle,
-            ...oriProps.style,
-          },
         }));
 
   // InternalColor
   const isInternalColor = isPresetColor(color, false);
 
   // Shared styles
-  const statusCls = classnames(classNames?.indicator, {
+  const statusCls = classnames(classNames?.indicator, badge?.classNames?.indicator, {
     [`${prefixCls}-status-dot`]: hasStatus,
     [`${prefixCls}-status-${status}`]: !!status,
     [`${prefixCls}-color-${color}`]: isInternalColor,
@@ -185,6 +179,8 @@ const InternalBadge: React.ForwardRefRenderFunction<HTMLSpanElement, BadgeProps>
     },
     className,
     rootClassName,
+    badge?.className,
+    badge?.classNames?.root,
     classNames?.root,
     hashId,
   );
@@ -193,8 +189,15 @@ const InternalBadge: React.ForwardRefRenderFunction<HTMLSpanElement, BadgeProps>
   if (!children && hasStatus) {
     const statusTextColor = mergedStyle.color;
     return wrapSSR(
-      <span {...restProps} className={badgeClassName} style={{ ...styles?.root, ...mergedStyle }}>
+      <span
-        <span className={statusCls} style={{ ...styles?.indicator, ...statusStyle }} />
+        {...restProps}
+        className={badgeClassName}
+        style={{ ...styles?.root, ...badge?.styles?.root, ...mergedStyle }}
+      >
+        <span
+          className={statusCls}
+          style={{ ...styles?.indicator, ...badge?.styles?.indicator, ...statusStyle }}
+        />
         {text && (
           <span style={{ color: statusTextColor }} className={`${prefixCls}-status-text`}>
             {text}
@@ -205,7 +208,12 @@ const InternalBadge: React.ForwardRefRenderFunction<HTMLSpanElement, BadgeProps>
   }
 
   return wrapSSR(
-    <span ref={ref} {...restProps} className={badgeClassName} style={styles?.root}>
+    <span
+      ref={ref}
+      {...restProps}
+      className={badgeClassName}
+      style={{ ...badge?.styles?.root, ...styles?.root }}
+    >
       {children}
       <CSSMotion
         visible={!isHidden}
@@ -221,7 +229,7 @@ const InternalBadge: React.ForwardRefRenderFunction<HTMLSpanElement, BadgeProps>
 
           const isDot = isDotRef.current;
 
-          const scrollNumberCls = classnames(classNames?.indicator, {
+          const scrollNumberCls = classnames(classNames?.indicator, badge?.classNames?.indicator, {
             [`${prefixCls}-dot`]: isDot,
             [`${prefixCls}-count`]: !isDot,
             [`${prefixCls}-count-sm`]: size === 'small',
@@ -231,7 +239,12 @@ const InternalBadge: React.ForwardRefRenderFunction<HTMLSpanElement, BadgeProps>
             [`${prefixCls}-color-${color}`]: isInternalColor,
           });
 
-          let scrollNumberStyle: React.CSSProperties = { ...styles?.indicator, ...mergedStyle };
+          let scrollNumberStyle: React.CSSProperties = {
+            ...styles?.indicator,
+            ...badge?.styles?.indicator,
+            ...mergedStyle,
+          };
+
           if (color && !isInternalColor) {
             scrollNumberStyle = scrollNumberStyle || {};
             scrollNumberStyle.background = color;

components/config-provider/__tests__/style.test.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import ConfigProvider from '..';
 import { render } from '../../../tests/utils';
 import Anchor from '../../anchor';
+import Badge from '../../badge';
 import Breadcrumb from '../../breadcrumb';
 import Cascader from '../../cascader';
 import Checkbox from '../../checkbox';
@@ -544,4 +545,40 @@ describe('ConfigProvider support style and className props', () => {
     expect(container.querySelector('.ant-empty')).toHaveClass('cp-className');
     expect(container.querySelector('.ant-empty')).toHaveStyle({ background: 'red' });
   });
+
+  it('Should Badge className & style & classNames works', () => {
+    const { container } = render(
+      <ConfigProvider
+        badge={{
+          className: 'cp-badge',
+          style: {
+            backgroundColor: 'blue',
+          },
+          classNames: {
+            root: 'cp-badge-root',
+            indicator: 'cp-badge-indicator',
+          },
+          styles: {
+            root: { color: 'yellow' },
+            indicator: { color: 'green' },
+          },
+        }}
+      >
+        <Badge count={10}>test</Badge>
+      </ConfigProvider>,
+    );
+    const element = container.querySelector<HTMLSpanElement>('.ant-badge');
+
+    // test className
+    expect(element).toHaveClass('cp-badge');
+    expect(element).toHaveClass('cp-badge-root');
+    expect(element?.querySelector<HTMLElement>('sup')).toHaveClass('cp-badge-indicator');
+
+    // test style
+    expect(element).toHaveStyle({ color: 'yellow' });
+    expect(element?.querySelector<HTMLElement>('sup')).toHaveStyle({
+      color: 'green',
+      backgroundColor: 'blue',
+    });
+  });
 });

components/config-provider/context.ts

@@ -1,6 +1,7 @@
 import type { DerivativeFunc } from '@ant-design/cssinjs';
 import * as React from 'react';
 import type { Options } from 'scroll-into-view-if-needed';
+import type { BadgeProps } from '../badge';
 import type { ButtonProps } from '../button';
 import type { RequiredMark } from '../form/Form';
 import type { InputProps } from '../input';
@@ -42,6 +43,11 @@ export interface ComponentStyleConfig {
   style?: React.CSSProperties;
 }
 
+export interface BadgeConfig extends ComponentStyleConfig {
+  classNames?: BadgeProps['classNames'];
+  styles?: BadgeProps['styles'];
+}
+
 export interface ButtonConfig extends ComponentStyleConfig {
   classNames?: ButtonProps['classNames'];
   styles?: ButtonProps['styles'];
@@ -106,6 +112,7 @@ export interface ConfigConsumerProps {
   checkbox?: ComponentStyleConfig;
   descriptions?: ComponentStyleConfig;
   empty?: ComponentStyleConfig;
+  badge?: BadgeConfig;
   radio?: ComponentStyleConfig;
 }
 

components/config-provider/index.en-US.md

@@ -102,6 +102,7 @@ const {
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
 | anchor | Set Anchor common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| badge | Set Badge common props | { className?: string, style?: React.CSSProperties, classNames?: { count?: string, indicator?: string }, styles?: { count?: React.CSSProperties, indicator?: React.CSSProperties } } | - | 5.7.0 |
 | breadcrumb | Set Breadcrumb common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | button | Set Button common props | { className?: string, style?: React.CSSProperties, classNames?: { icon: string }, styles?: { icon: React.CSSProperties } } | - | 5.6.0 |
 | cascader | Set Cascader common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |

components/config-provider/index.tsx

@@ -19,6 +19,7 @@ import type { SpaceProps } from '../space';
 import { DesignTokenContext } from '../theme/internal';
 import defaultSeedToken from '../theme/themes/seed';
 import type {
+  BadgeConfig,
   ButtonConfig,
   ComponentStyleConfig,
   ConfigConsumerProps,
@@ -155,6 +156,7 @@ export interface ConfigProviderProps {
   checkbox?: ComponentStyleConfig;
   descriptions?: ComponentStyleConfig;
   empty?: ComponentStyleConfig;
+  badge?: BadgeConfig;
   radio?: ComponentStyleConfig;
 }
 
@@ -208,7 +210,9 @@ const setGlobalConfig = ({
 
 export const globalConfig = () => ({
   getPrefixCls: (suffixCls?: string, customizePrefixCls?: string) => {
-    if (customizePrefixCls) return customizePrefixCls;
+    if (customizePrefixCls) {
+      return customizePrefixCls;
+    }
     return suffixCls ? `${getGlobalPrefixCls()}-${suffixCls}` : getGlobalPrefixCls();
   },
   getIconPrefixCls: getGlobalIconPrefixCls,
@@ -262,6 +266,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
     pagination,
     input,
     empty,
+    badge,
     radio,
   } = props;
 
@@ -333,6 +338,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
     breadcrumb,
     pagination,
     empty,
+    badge,
     radio,
   };
 

components/config-provider/index.zh-CN.md

@@ -104,6 +104,7 @@ const {
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
 | anchor | 设置 Anchor 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| badge | 设置 Badge 组件的通用属性 | { className?: string, style?: React.CSSProperties, classNames?: { count?: string, indicator?: string }, styles?: { count?: React.CSSProperties, indicator?: React.CSSProperties } } | - | 5.7.0 |
 | breadcrumb | 设置 Breadcrumb 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | button | 设置 Button 组件的通用属性 | { className?: string, style?: React.CSSProperties, classNames?: { icon: string }, styles?: { icon: React.CSSProperties } } | - | 5.6.0 |
 | cascader | 设置 Cascader 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |