feat(ConfigProvider): support Modal centered global config (#52343)

components/config-provider/context.ts

@@ -145,7 +145,7 @@ export type DescriptionsConfig = ComponentStyleConfig &
 export type EmptyConfig = ComponentStyleConfig & Pick<EmptyProps, 'classNames' | 'styles'>;
 
 export type ModalConfig = ComponentStyleConfig &
-  Pick<ModalProps, 'classNames' | 'styles' | 'closeIcon' | 'closable'>;
+  Pick<ModalProps, 'classNames' | 'styles' | 'closeIcon' | 'closable' | 'centered'>;
 
 export type TabsConfig = ComponentStyleConfig &
   Pick<TabsProps, 'indicator' | 'indicatorSize' | 'more' | 'moreIcon' | 'addIcon' | 'removeIcon'>;

components/modal/Modal.tsx

@@ -99,7 +99,7 @@ const Modal: React.FC<ModalProps> = (props) => {
   const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
 
   const wrapClassNameExtended = classNames(wrapClassName, {
-    [`${prefixCls}-centered`]: !!centered,
+    [`${prefixCls}-centered`]: centered ?? modalContext?.centered,
     [`${prefixCls}-wrap-rtl`]: direction === 'rtl',
   });
 

components/modal/__tests__/Modal.test.tsx

@@ -6,6 +6,7 @@ import { resetWarned } from '../../_util/warning';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
 import { createEvent, fireEvent, render } from '../../../tests/utils';
+import ConfigProvider from '../../config-provider';
 
 jest.mock('rc-util/lib/Portal');
 
@@ -208,4 +209,27 @@ describe('Modal', () => {
       '--ant-modal-xxl-width': '40%',
     });
   });
+
+  it('Should support centered prop', () => {
+    render(<Modal open centered />);
+    expect(document.querySelector('.ant-modal-centered')).toBeTruthy();
+  });
+
+  it('Should support centered global config', () => {
+    render(
+      <ConfigProvider modal={{ centered: true }}>
+        <Modal open />
+      </ConfigProvider>,
+    );
+    expect(document.querySelector('.ant-modal-centered')).toBeTruthy();
+  });
+
+  it('Should prefer centered prop over centered global config', () => {
+    render(
+      <ConfigProvider modal={{ centered: true }}>
+        <Modal open centered={false} />
+      </ConfigProvider>,
+    );
+    expect(document.querySelector('.ant-modal-centered')).toBeFalsy();
+  });
 });