From 5a5af385b86a04bbf84e09fb4c68ecd4791ab462 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E7=88=B1=E5=90=83=E7=99=BD=E8=90=9D?=
 =?UTF-8?q?=E5=8D=9C?= <smith3816@gmail.com>
Date: Sun, 3 Sep 2023 10:20:24 +0800
Subject: [PATCH] fix: CheckableTag miss CP tag (#44602)

* fix: CheckableTag miss CP tag

* chore: bump tag

* chore: fix failed

* chore: fix circle
---
 .circleci/config.yml                          |  4 +++-
 .../config-provider/__tests__/style.test.tsx  |  6 ++++++
 components/tag/CheckableTag.tsx               | 19 ++++++++++++++++---
 3 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index ed1f4c5e93..6e9cf06d5d 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -7,7 +7,9 @@ version: 2.1
 jobs:
   test-argos-ci:
     docker:
-      - image: cimg/node:16.20-browsers
+      - image: cimg/node:18.17-browsers
+    environment:
+      NODE_OPTIONS: --openssl-legacy-provider
     steps:
       - checkout
       - run:
diff --git a/components/config-provider/__tests__/style.test.tsx b/components/config-provider/__tests__/style.test.tsx
index 622a9ed40d..d202d543c1 100644
--- a/components/config-provider/__tests__/style.test.tsx
+++ b/components/config-provider/__tests__/style.test.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+
 import ConfigProvider from '..';
 import { fireEvent, render } from '../../../tests/utils';
 import Alert from '../../alert';
@@ -942,11 +943,16 @@ describe('ConfigProvider support style and className props', () => {
     const { container } = render(
       <ConfigProvider tag={{ className: 'cp-tag', style: { backgroundColor: 'blue' } }}>
         <Tag>Test</Tag>
+        <Tag.CheckableTag checked>CheckableTag</Tag.CheckableTag>
       </ConfigProvider>,
     );
     const element = container.querySelector<HTMLSpanElement>('.ant-tag');
     expect(element).toHaveClass('cp-tag');
     expect(element).toHaveStyle({ backgroundColor: 'blue' });
+
+    const checkableElement = container.querySelector<HTMLSpanElement>('.ant-tag-checkable');
+    expect(checkableElement).toHaveClass('cp-tag');
+    expect(checkableElement).toHaveStyle({ backgroundColor: 'blue' });
   });
 
   it('Should Table className & style works', () => {
diff --git a/components/tag/CheckableTag.tsx b/components/tag/CheckableTag.tsx
index 7690c48f7c..3329f03e45 100644
--- a/components/tag/CheckableTag.tsx
+++ b/components/tag/CheckableTag.tsx
@@ -1,5 +1,6 @@
-import classNames from 'classnames';
 import * as React from 'react';
+import classNames from 'classnames';
+
 import { ConfigContext } from '../config-provider';
 import useStyle from './style';
 
@@ -21,13 +22,14 @@ export interface CheckableTagProps {
 const CheckableTag: React.FC<CheckableTagProps> = (props) => {
   const {
     prefixCls: customizePrefixCls,
+    style,
     className,
     checked,
     onChange,
     onClick,
     ...restProps
   } = props;
-  const { getPrefixCls } = React.useContext(ConfigContext);
+  const { getPrefixCls, tag } = React.useContext(ConfigContext);
 
   const handleClick = (e: React.MouseEvent<HTMLSpanElement, MouseEvent>) => {
     onChange?.(!checked);
@@ -44,11 +46,22 @@ const CheckableTag: React.FC<CheckableTagProps> = (props) => {
     {
       [`${prefixCls}-checkable-checked`]: checked,
     },
+    tag?.className,
     className,
     hashId,
   );
 
-  return wrapSSR(<span {...restProps} className={cls} onClick={handleClick} />);
+  return wrapSSR(
+    <span
+      {...restProps}
+      style={{
+        ...style,
+        ...tag?.style,
+      }}
+      className={cls}
+      onClick={handleClick}
+    />,
+  );
 };
 
 export default CheckableTag;