feat: CP support Card className and style (#43308)

components/card/Card.tsx

@@ -46,14 +46,13 @@ export interface CardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 't
   tabProps?: TabsProps;
 }
 
-function getAction(actions: React.ReactNode[]) {
-  const actionList = actions.map((action, index) => (
+function getAction(actions: React.ReactNode[]): React.ReactNode[] {
+  return actions.map<React.ReactNode>((action, index) => (
     // eslint-disable-next-line react/no-array-index-key
     <li style={{ width: `${100 / actions.length}%` }} key={`action-${index}`}>
       <span>{action}</span>
     </li>
   ));
-  return actionList;
 }
 
 const Card = React.forwardRef<HTMLDivElement, CardProps>((props, ref) => {
@@ -61,6 +60,7 @@ const Card = React.forwardRef<HTMLDivElement, CardProps>((props, ref) => {
     prefixCls: customizePrefixCls,
     className,
     rootClassName,
+    style,
     extra,
     headStyle = {},
     bodyStyle = {},
@@ -81,7 +81,7 @@ const Card = React.forwardRef<HTMLDivElement, CardProps>((props, ref) => {
     ...others
   } = props;
 
-  const { getPrefixCls, direction } = React.useContext(ConfigContext);
+  const { getPrefixCls, direction, card } = React.useContext(ConfigContext);
 
   const onTabChange = (key: string) => {
     props.onTabChange?.(key);
@@ -125,10 +125,7 @@ const Card = React.forwardRef<HTMLDivElement, CardProps>((props, ref) => {
         {...extraProps}
         className={`${prefixCls}-head-tabs`}
         onChange={onTabChange}
-        items={tabList.map(({ tab, ...item }) => ({
-          label: tab,
-          ...item,
-        }))}
+        items={tabList.map(({ tab, ...item }) => ({ label: tab, ...item }))}
       />
     ) : null;
   if (title || extra || tabs) {
@@ -152,9 +149,12 @@ const Card = React.forwardRef<HTMLDivElement, CardProps>((props, ref) => {
     actions && actions.length ? (
       <ul className={`${prefixCls}-actions`}>{getAction(actions)}</ul>
     ) : null;
+
   const divProps = omit(others, ['onTabChange']);
+
   const classString = classNames(
     prefixCls,
+    card?.className,
     {
       [`${prefixCls}-loading`]: loading,
       [`${prefixCls}-bordered`]: bordered,
@@ -170,8 +170,10 @@ const Card = React.forwardRef<HTMLDivElement, CardProps>((props, ref) => {
     hashId,
   );
 
+  const mergedStyle: React.CSSProperties = { ...card?.style, ...style };
+
   return wrapSSR(
-    <div ref={ref} {...divProps} className={classString}>
+    <div ref={ref} {...divProps} className={classString} style={mergedStyle}>
       {head}
       {coverDom}
       {body}

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

@@ -4,6 +4,7 @@ import { render } from '../../../tests/utils';
 import Anchor from '../../anchor';
 import Badge from '../../badge';
 import Breadcrumb from '../../breadcrumb';
+import Card from '../../card';
 import Cascader from '../../cascader';
 import Checkbox from '../../checkbox';
 import Descriptions from '../../descriptions';
@@ -629,4 +630,15 @@ describe('ConfigProvider support style and className props', () => {
     expect(element).toHaveClass('cp-table');
     expect(element).toHaveStyle({ backgroundColor: 'blue' });
   });
+
+  it('Should Card className & style works', () => {
+    const { container } = render(
+      <ConfigProvider card={{ className: 'cp-card', style: { backgroundColor: 'blue' } }}>
+        <Card>test</Card>
+      </ConfigProvider>,
+    );
+    const element = container.querySelector<HTMLDivElement>('.ant-card');
+    expect(element).toHaveClass('cp-card');
+    expect(element).toHaveStyle({ backgroundColor: 'blue' });
+  });
 });

components/config-provider/context.ts

@@ -118,6 +118,7 @@ export interface ConfigConsumerProps {
   switch?: ComponentStyleConfig;
   tag?: ComponentStyleConfig;
   table?: ComponentStyleConfig;
+  card?: ComponentStyleConfig;
 }
 
 const defaultGetPrefixCls = (suffixCls?: string, customizePrefixCls?: string) => {

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

@@ -105,6 +105,7 @@ const {
 | 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 |
+| card | Set Card common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | cascader | Set Cascader common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | checkbox | Set Checkbox common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | descriptions | Set Descriptions common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |

components/config-provider/index.tsx

@@ -162,6 +162,7 @@ export interface ConfigProviderProps {
   switch?: ComponentStyleConfig;
   tag?: ComponentStyleConfig;
   table?: ComponentStyleConfig;
+  card?: ComponentStyleConfig;
 }
 
 interface ProviderChildrenProps extends ConfigProviderProps {
@@ -276,6 +277,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
     switch: SWITCH,
     tag,
     table,
+    card,
   } = props;
 
   // =================================== Warning ===================================
@@ -352,6 +354,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
     switch: SWITCH,
     tag,
     table,
+    card,
   };
 
   const config = {

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

@@ -107,6 +107,7 @@ const {
 | 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 |
+| card | 设置 Card 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | cascader | 设置 Cascader 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | checkbox | 设置 Checkbox 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | descriptions | 设置 Descriptions 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |