feat: ConfigProvider support Drawer className and style properties (#43396)

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

@@ -14,6 +14,7 @@ import Collapse from '../../collapse';
 import ColorPicker from '../../color-picker';
 import Descriptions from '../../descriptions';
 import Divider from '../../divider';
+import Drawer from '../../drawer';
 import Empty from '../../empty';
 import Form from '../../form';
 import Image from '../../image';
@@ -151,6 +152,36 @@ describe('ConfigProvider support style and className props', () => {
     expect(container.querySelector('.ant-divider'))?.toHaveStyle({ color: 'red', height: '80px' });
   });
 
+  it('Should Drawer className works', () => {
+    render(
+      <ConfigProvider
+        drawer={{
+          className: 'test-class',
+        }}
+      >
+        <Drawer title="Test Drawer" open />
+      </ConfigProvider>,
+    );
+
+    expect(document.querySelector('.ant-drawer-content')).toHaveClass('test-class');
+  });
+
+  it('Should Drawer style works', () => {
+    render(
+      <ConfigProvider
+        drawer={{
+          style: { color: 'red' },
+        }}
+      >
+        <Drawer title="Test Drawer" style={{ fontSize: '16px' }} open />
+      </ConfigProvider>,
+    );
+
+    expect(document.querySelector('.ant-drawer-content')).toHaveStyle(
+      'color: red; font-size: 16px;',
+    );
+  });
+
   it('Should Cascader className & style works', () => {
     const options = [
       {

components/config-provider/context.ts

@@ -98,6 +98,7 @@ export interface ConfigConsumerProps {
   anchor?: ComponentStyleConfig;
   button?: ButtonConfig;
   divider?: ComponentStyleConfig;
+  drawer?: ComponentStyleConfig;
   calendar?: ComponentStyleConfig;
   cascader?: ComponentStyleConfig;
   collapse?: ComponentStyleConfig;

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

@@ -115,6 +115,7 @@ const {
 | colorPicker | Set ColorPicker common props | { className?: string, style?: React.CSSProperties } | - | 5.7.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 } | - | 5.7.0 |
 | empty | Set Empty common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | form | Set Form common props | { className?: string, style?: React.CSSProperties, validateMessages?: [ValidateMessages](/components/form/#validatemessages), requiredMark?: boolean \| `optional`, scrollToFirstError?: boolean \| [Options](https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options) } | - | requiredMark: 4.8.0; colon: 4.18.0; scrollToFirstError: 5.2.0; className: 5.7.0; style: 5.7.0 |
 | image | Set Image common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |

components/config-provider/index.tsx

@@ -145,6 +145,7 @@ export interface ConfigProviderProps {
   cascader?: ComponentStyleConfig;
   collapse?: ComponentStyleConfig;
   divider?: ComponentStyleConfig;
+  drawer?: ComponentStyleConfig;
   typography?: ComponentStyleConfig;
   skeleton?: ComponentStyleConfig;
   spin?: ComponentStyleConfig;
@@ -279,6 +280,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
     checkbox,
     descriptions,
     divider,
+    drawer,
     skeleton,
     steps,
     image,
@@ -372,6 +374,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
     checkbox,
     descriptions,
     divider,
+    drawer,
     skeleton,
     steps,
     image,

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

@@ -117,6 +117,7 @@ const {
 | colorPicker | 设置 ColorPicker 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.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 } | - | 5.7.0 |
 | empty | 设置 Empty 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | form | 设置 Form 组件的通用属性 | { className?: string, style?: React.CSSProperties, validateMessages?: [ValidateMessages](/components/form-cn#validatemessages), requiredMark?: boolean \| `optional`, colon?: boolean, scrollToFirstError?: boolean \| [Options](https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options)} | - | requiredMark: 4.8.0; colon: 4.18.0; scrollToFirstError: 5.2.0; className: 5.7.0; style: 5.7.0 |
 | image | 设置 Image 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |

components/drawer/index.tsx

@@ -1,18 +1,18 @@
 import classNames from 'classnames';
-import RcDrawer from 'rc-drawer';
 import type { DrawerProps as RcDrawerProps } from 'rc-drawer';
+import RcDrawer from 'rc-drawer';
 import type { CSSMotionProps } from 'rc-motion';
 import * as React from 'react';
-import { ConfigContext } from '../config-provider';
-import { NoFormStyle } from '../form/context';
 import { getTransitionName } from '../_util/motion';
 import warning from '../_util/warning';
-import DrawerPanel from './DrawerPanel';
+import { ConfigContext } from '../config-provider';
+import { NoFormStyle } from '../form/context';
 import type { DrawerPanelProps } from './DrawerPanel';
+import DrawerPanel from './DrawerPanel';
 
 // CSSINJS
-import useStyle from './style';
 import { NoCompactStyle } from '../space/Compact';
+import useStyle from './style';
 
 const SizeTypes = ['default', 'large'] as const;
 type sizeType = typeof SizeTypes[number];
@@ -51,6 +51,8 @@ function Drawer(props: DrawerProps) {
     onClose,
     prefixCls: customizePrefixCls,
     getContainer: customizeGetContainer,
+    style,
+    className,
 
     // Deprecated
     visible,
@@ -59,7 +61,7 @@ function Drawer(props: DrawerProps) {
     ...rest
   } = props;
 
-  const { getPopupContainer, getPrefixCls, direction } = React.useContext(ConfigContext);
+  const { getPopupContainer, getPrefixCls, direction, drawer } = React.useContext(ConfigContext);
   const prefixCls = getPrefixCls('drawer', customizePrefixCls);
 
   // Style
@@ -141,6 +143,8 @@ function Drawer(props: DrawerProps) {
           push={push}
           width={mergedWidth}
           height={mergedHeight}
+          style={{ ...drawer?.style, ...style }}
+          className={classNames(drawer?.className, className)}
           rootClassName={drawerClassName}
           getContainer={getContainer}
           afterOpenChange={afterOpenChange ?? afterVisibleChange}