feature: CP support Drawer closeicon (#46894)

* feat: CP support Drawer closeIcon * fix: fix * fix: fix * type: update * type: lint * fix: fix * fix: fix * Update index.en-US.md Signed-off-by: lijianan <574980606@qq.com> * Update index.zh-CN.md Signed-off-by: lijianan <574980606@qq.com> * type: fix type --------- Signed-off-by: lijianan <574980606@qq.com>
ant-design · Jan 26, 2024 · bb6b475 · bb6b475
1 parent 7664f39
commit bb6b475
Show file tree

Hide file tree

Showing 6 changed files with 12 additions and 9 deletions.
diff --git a/components/config-provider/__tests__/style.test.tsx b/components/config-provider/__tests__/style.test.tsx
@@ -157,18 +157,21 @@ describe('ConfigProvider support style and className props', () => {
     expect(container.querySelector('.ant-divider'))?.toHaveStyle({ color: 'red', height: '80px' });
   });
 
-  it('Should Drawer className works', () => {
+  it('Should Drawer className & closeIcon works', () => {
     render(
       <ConfigProvider
         drawer={{
           className: 'test-class',
+          closeIcon: <span className="cp-test-close-icon">close</span>,
         }}
       >
         <Drawer title="Test Drawer" open />
       </ConfigProvider>,
     );
 
+    const selectors = '.ant-drawer-content .ant-drawer-close .cp-test-close-icon';
     expect(document.querySelector('.ant-drawer-content')).toHaveClass('test-class');
+    expect(document.querySelector<HTMLSpanElement>(selectors)).toBeTruthy();
   });
 
   it('Should Drawer style works', () => {

diff --git a/components/config-provider/context.ts b/components/config-provider/context.ts
@@ -81,10 +81,8 @@ export interface ButtonConfig extends ComponentStyleConfig {
   styles?: ButtonProps['styles'];
 }
 
-export interface DrawerConfig extends ComponentStyleConfig {
-  classNames?: DrawerProps['classNames'];
-  styles?: DrawerProps['styles'];
-}
+export type DrawerConfig = ComponentStyleConfig &
+  Pick<DrawerProps, 'classNames' | 'styles' | 'closeIcon'>;
 
 export interface FlexConfig extends ComponentStyleConfig {
   vertical?: FlexProps['vertical'];

diff --git a/components/config-provider/index.en-US.md b/components/config-provider/index.en-US.md
@@ -118,7 +118,7 @@ const {
 | rangePicker | Set rangePicker common props | { className?: string, style?: React.CSSProperties } | - | 5.11.0 |
 | descriptions | Set Descriptions common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | divider | Set Divider common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
-| drawer | Set Drawer common props | { className?: string, style?: React.CSSProperties, classNames?: [DrawerProps\["classNames"\]](/components/drawer-cn#api), styles?: [DrawerProps\["styles"\]](/components/drawer-cn#api) } | - | 5.7.0, `classNames` and `styles`: 5.10.0 |
+| drawer | Set Drawer common props | { className?: string, style?: React.CSSProperties, classNames?: [DrawerProps\["classNames"\]](/components/drawer-cn#api), styles?: [DrawerProps\["styles"\]](/components/drawer-cn#api), closeIcon?: ReactNode } | - | 5.7.0, `classNames` and `styles`: 5.10.0, `closeIcon`: 5.14.0 |
 | dropdown | Set Dropdown common props | { className?: string, style?: React.CSSProperties } | - | 5.11.0 |
 | empty | Set Empty common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | flex | Set Flex common props | { className?: string, style?: React.CSSProperties, vertical?: boolean } | - | 5.10.0 |

diff --git a/components/config-provider/index.tsx b/components/config-provider/index.tsx
@@ -8,7 +8,8 @@ import useMemo from 'rc-util/lib/hooks/useMemo';
 import { merge } from 'rc-util/lib/utils/set';
 import type { Options } from 'scroll-into-view-if-needed';
 
-import warning, { WarningContext, type WarningContextProps } from '../_util/warning';
+import warning, { WarningContext } from '../_util/warning';
+import type { WarningContextProps } from '../_util/warning';
 import type { RequiredMark } from '../form/Form';
 import ValidateMessagesContext from '../form/validateMessagesContext';
 import type { InputProps } from '../input';

diff --git a/components/config-provider/index.zh-CN.md b/components/config-provider/index.zh-CN.md
@@ -120,7 +120,7 @@ const {
 | rangePicker | 设置 RangePicker 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.11.0 |
 | descriptions | 设置 Descriptions 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | divider | 设置 Divider 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
-| drawer | 设置 Drawer 组件的通用属性 | { className?: string, style?: React.CSSProperties, classNames?: [DrawerProps\["classNames"\]](/components/drawer-cn#api), styles?: [DrawerProps\["styles"\]](/components/drawer-cn#api) } | - | 5.7.0, `classNames` 和 `styles`: 5.10.0 |
+| drawer | 设置 Drawer 组件的通用属性 | { className?: string, style?: React.CSSProperties, classNames?: [DrawerProps\["classNames"\]](/components/drawer-cn#api), styles?: [DrawerProps\["styles"\]](/components/drawer-cn#api), closeIcon?: ReactNode } | - | 5.7.0, `classNames` 和 `styles`: 5.10.0, `closeIcon`: 5.14.0 |
 | dropdown | 设置 Dropdown 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.11.0 |
 | empty | 设置 Empty 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | flex | 设置 Flex 组件的通用属性 | { className?: string, style?: React.CSSProperties, vertical?: boolean } | - | 5.10.0 |

diff --git a/components/drawer/DrawerPanel.tsx b/components/drawer/DrawerPanel.tsx
@@ -78,9 +78,10 @@ const DrawerPanel: React.FC<DrawerPanelProps> = (props) => {
     ),
     [onClose],
   );
+
   const [mergedClosable, mergedCloseIcon] = useClosable(
     closable,
-    closeIcon,
+    typeof closeIcon !== 'undefined' ? closeIcon : drawerContext?.closeIcon,
     customCloseIconRender,
     undefined,
     true,