fix: add drawer styles.content / classNames.content warning (ant-design#56898)

Author: thinkasany

components/drawer/Drawer.tsx

@@ -127,32 +127,6 @@ const Drawer: React.FC<DrawerProps> & {
       ? () => getPopupContainer(document.body)
       : customizeGetContainer;
 
-  // ========================== Warning ===========================
-  if (process.env.NODE_ENV !== 'production') {
-    const warning = devUseWarning('Drawer');
-    [
-      ['headerStyle', 'styles.header'],
-      ['bodyStyle', 'styles.body'],
-      ['footerStyle', 'styles.footer'],
-      ['contentWrapperStyle', 'styles.wrapper'],
-      ['maskStyle', 'styles.mask'],
-      ['drawerStyle', 'styles.section'],
-      ['destroyInactivePanel', 'destroyOnHidden'],
-      ['width', 'size'],
-      ['height', 'size'],
-    ].forEach(([deprecatedName, newName]) => {
-      warning.deprecated(!(deprecatedName in props), deprecatedName, newName);
-    });
-
-    if (getContainer !== undefined && props.style?.position === 'absolute') {
-      warning(
-        false,
-        'breaking',
-        '`style` is replaced by `rootStyle` in v5. Please check that `position: absolute` is necessary.',
-      );
-    }
-  }
-
   // ============================ Size ============================
   const drawerSize = React.useMemo<string | number | undefined>(() => {
     if (typeof size === 'number') {
@@ -231,6 +205,38 @@ const Drawer: React.FC<DrawerProps> & {
     props: mergedProps,
   });
 
+  // ========================== Warning ===========================
+  if (process.env.NODE_ENV !== 'production') {
+    const warning = devUseWarning('Drawer');
+    [
+      ['headerStyle', 'styles.header'],
+      ['bodyStyle', 'styles.body'],
+      ['footerStyle', 'styles.footer'],
+      ['contentWrapperStyle', 'styles.wrapper'],
+      ['maskStyle', 'styles.mask'],
+      ['drawerStyle', 'styles.section'],
+      ['destroyInactivePanel', 'destroyOnHidden'],
+      ['width', 'size'],
+      ['height', 'size'],
+    ].forEach(([deprecatedName, newName]) => {
+      warning.deprecated(!(deprecatedName in props), deprecatedName, newName);
+    });
+
+    if (getContainer !== undefined && props.style?.position === 'absolute') {
+      warning(
+        false,
+        'breaking',
+        '`style` is replaced by `rootStyle` in v5. Please check that `position: absolute` is necessary.',
+      );
+    }
+
+    warning.deprecated(
+      !(mergedClassNames?.content || mergedStyles?.content),
+      'classNames.content and styles.content',
+      'classNames.section and styles.section',
+    );
+  }
+
   const drawerClassName = clsx(
     {
       'no-mask': !mergedMask,

components/drawer/DrawerPanel.tsx

@@ -22,6 +22,10 @@ export type DrawerSemanticClassNames = {
   wrapper?: string;
   dragger?: string;
   close?: string;
+  /**
+   * @deprecated please use `classNames.section` instead.
+   */
+  content?: string;
 };
 
 export type DrawerSemanticStyles = {
@@ -36,6 +40,10 @@ export type DrawerSemanticStyles = {
   wrapper?: React.CSSProperties;
   dragger?: React.CSSProperties;
   close?: React.CSSProperties;
+  /**
+   * @deprecated please use `styles.section` instead.
+   */
+  content?: React.CSSProperties;
 };
 
 export type DrawerClassNamesType = SemanticClassNamesType<DrawerProps, DrawerSemanticClassNames>;

components/drawer/__tests__/semantic.test.tsx

@@ -1,9 +1,12 @@
 import React from 'react';
+import { warning } from '@rc-component/util';
 
 import Drawer from '..';
 import type { DrawerProps } from '..';
 import { render } from '../../../tests/utils';
 
+const { resetWarned } = warning;
+
 describe('Drawer.Semantic', () => {
   it('should apply custom classnames & styles to Drawer', () => {
     const customClassNames: DrawerProps['classNames'] = {
@@ -217,4 +220,24 @@ describe('Drawer.Semantic', () => {
     expect(footerElement).toHaveStyle({ color: 'rgb(255, 255, 0)' });
     expect(closeElement).toHaveStyle({ color: 'rgb(90, 0, 0)' });
   });
+
+  it('warning with both deprecated classNames.content and styles.content props', () => {
+    const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+    resetWarned();
+
+    render(
+      <Drawer
+        open
+        classNames={{ content: 'custom-content' }}
+        styles={{ content: { color: 'red' } }}
+      >
+        Here is content of Drawer
+      </Drawer>,
+    );
+    expect(errorSpy).toHaveBeenCalledWith(
+      'Warning: [antd: Drawer] `classNames.content and styles.content` is deprecated. Please use `classNames.section and styles.section` instead.',
+    );
+
+    errorSpy.mockRestore();
+  });
 });