feat: CP support Pagination className and style (#43100)

* feat: CP support Pagination className and style

* Update BrowserMockup.tsx

* Update Reset.tsx

* Update Responsive.tsx

* Update index.en-US.md

* fix

* update showSizeChanger

* fix

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

@@ -6,6 +6,7 @@ import Checkbox from '../../checkbox';
 import Descriptions from '../../descriptions';
 import Divider from '../../divider';
 import Image from '../../image';
+import Pagination from '../../pagination';
 import Result from '../../result';
 import Segmented from '../../segmented';
 import Slider from '../../slider';
@@ -224,7 +225,7 @@ describe('ConfigProvider support style and className props', () => {
     const { container } = render(
       <ConfigProvider
         checkbox={{
-          className: 'cp-breadcrumb',
+          className: 'cp-checkbox',
           style: {
             background: 'red',
           },
@@ -234,10 +235,23 @@ describe('ConfigProvider support style and className props', () => {
       </ConfigProvider>,
     );
 
-    expect(container.querySelector('.ant-checkbox-wrapper')).toHaveClass('cp-breadcrumb');
+    expect(container.querySelector('.ant-checkbox-wrapper')).toHaveClass('cp-checkbox');
     expect(container.querySelector('.ant-checkbox-wrapper')).toHaveStyle({ background: 'red' });
   });
 
+  it('Should Pagination className & style works', () => {
+    const { container } = render(
+      <ConfigProvider
+        pagination={{ className: 'cp-pagination', style: { backgroundColor: 'blue' } }}
+      >
+        <Pagination />
+      </ConfigProvider>,
+    );
+    const element = container.querySelector<HTMLUListElement>('.ant-pagination');
+    expect(element).toHaveClass('cp-pagination');
+    expect(element).toHaveStyle({ backgroundColor: 'blue' });
+  });
+
   it('Should Descriptions className & style works', () => {
     const { container } = render(
       <ConfigProvider

components/config-provider/context.ts

@@ -60,9 +60,7 @@ export interface ConfigConsumerProps {
   input?: {
     autoComplete?: string;
   };
-  pagination?: {
-    showSizeChanger?: boolean;
-  };
+  pagination?: ComponentStyleConfig & { showSizeChanger?: boolean };
   locale?: Locale;
   pageHeader?: {
     ghost: boolean;

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

@@ -109,6 +109,7 @@ const {
 | form | Set Form common props | { 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 |
 | image | Set Image common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | input | Set Input common props | { autoComplete?: string } | - | 4.2.0 |
+| pagination | Set Pagination common props | { showSizeChanger?: boolean, className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | result | Set Result common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | segmented | Set Segmented common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | select | Set Select common props | { showSearch?: boolean } | - |  |

components/config-provider/index.tsx

@@ -113,9 +113,7 @@ export interface ConfigProviderProps {
   select?: {
     showSearch?: boolean;
   };
-  pagination?: {
-    showSizeChanger?: boolean;
-  };
+  pagination?: ComponentStyleConfig & { showSizeChanger?: boolean };
   locale?: Locale;
   pageHeader?: {
     ghost: boolean;
@@ -246,6 +244,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
     result,
     slider,
     breadcrumb,
+    pagination,
   } = props;
 
   // =================================== Warning ===================================
@@ -308,6 +307,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
     result,
     slider,
     breadcrumb,
+    pagination,
   };
 
   const config = {

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

@@ -111,6 +111,7 @@ const {
 | form | 设置 Form 组件的通用属性 | { 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 |
 | image | 设置 Image 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | input | 设置 Input 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| pagination | 设置 Pagination 组件的通用属性 | { showSizeChanger?: boolean, className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | result | 设置 Result 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | segmented | 设置 Segmented 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | select | 设置 Select 组件的通用属性 | { showSearch?: boolean } | - |  |

components/pagination/Pagination.tsx

@@ -39,6 +39,7 @@ const Pagination: React.FC<PaginationProps> = ({
   selectPrefixCls: customizeSelectPrefixCls,
   className,
   rootClassName,
+  style,
   size: customizeSize,
   locale: customLocale,
   selectComponentClass,
@@ -104,20 +105,25 @@ const Pagination: React.FC<PaginationProps> = ({
   const isSmall = mergedSize === 'small' || !!(xs && !mergedSize && responsive);
 
   const selectPrefixCls = getPrefixCls('select', customizeSelectPrefixCls);
+
   const extendedClassName = classNames(
     {
       [`${prefixCls}-mini`]: isSmall,
       [`${prefixCls}-rtl`]: direction === 'rtl',
     },
+    pagination?.className,
     className,
     rootClassName,
     hashId,
   );
 
+  const mergedStyle: React.CSSProperties = { ...pagination?.style, ...style };
+
   return wrapSSR(
     <RcPagination
       {...iconsProps}
       {...restProps}
+      style={mergedStyle}
       prefixCls={prefixCls}
       selectPrefixCls={selectPrefixCls}
       className={extendedClassName}