feat(Pagination): add size prop (#1759)

gravity-ui · Aug 23, 2024 · 12e5597 · 12e5597
1 parent 1c95f75
commit 12e5597
Show file tree

Hide file tree

Showing 10 changed files with 121 additions and 4 deletions.
diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx
@@ -15,7 +15,7 @@ import {
 } from './components';
 import {usePagination} from './hooks/usePagination';
 import type {PaginationProps} from './types';
-import {getResultPage, getResultTotal} from './utils';
+import {getResultPage, getResultTotal, getSize} from './utils';
 
 import './Pagination.scss';
 
@@ -25,6 +25,7 @@ export const Pagination = ({
     page,
     pageSize,
     total,
+    size: propSize,
     onUpdate,
     compact: propCompact = true,
     pageSizeOptions,
@@ -35,7 +36,7 @@ export const Pagination = ({
 }: PaginationProps) => {
     const mobile = useMobile();
 
-    const size = mobile ? 'l' : 'm';
+    const size = getSize({propSize, mobile});
     const compact = mobile ? true : propCompact;
 
     const resultTotal = getResultTotal(total);

diff --git a/src/components/Pagination/README.md b/src/components/Pagination/README.md
@@ -30,6 +30,7 @@ const pagination = <Pagination page={1} pageSize={100} total={1000} onUpdate={ha
 | className       | HTML `class` attribute                                                                                   |  `string`  |         |
 | compact         | Hides the title for the `First`, `Previous`, and `Next` buttons. Always set to `true` in mobile version. | `boolean`  | `true`  |
 | onUpdate        | Called when the page number or `pageSize` is changed                                                     | `Function` |         |
+| size            | Size of the pagination items. By default, 'l' in mobile version, 'm' in desktop version                  |  `string`  |         |
 | page            | Current page number                                                                                      |  `number`  |         |
 | pageSize        | Number of data items per page                                                                            |  `number`  |         |
 | pageSizeOptions | Allows you to specify the `sizeChanger` options                                                          | `number[]` |         |

diff --git a/src/components/Pagination/__tests__/Pagination.test.tsx b/src/components/Pagination/__tests__/Pagination.test.tsx
@@ -3,8 +3,11 @@ import React from 'react';
 import {noop} from 'lodash';
 
 import {render, screen} from '../../../../test-utils/utils';
+import {MobileProvider} from '../../mobile';
 import {Pagination} from '../Pagination';
 import {PaginationQa, getPaginationPageQa} from '../constants';
+import type {PaginationSize} from '../types';
+import {getSize} from '../utils';
 
 describe('Pagination component', () => {
     test('Single page', () => {
@@ -82,4 +85,46 @@ describe('Pagination component', () => {
 
         expect(nextButton).not.toBeDisabled();
     });
+
+    test.each(new Array<PaginationSize | undefined>('m', 'l', undefined))(
+        '[desktop]: render with given "%s" size',
+        (size) => {
+            render(<Pagination pageSize={20} onUpdate={noop} page={0} total={20} size={size} />);
+
+            const expectedSize = getSize({mobile: false, propSize: size});
+            const expectedClass = `g-button_size_${expectedSize}`;
+
+            const firstButton = screen.getByTestId(PaginationQa.PaginationButtonFirst);
+            expect(firstButton).toHaveClass(expectedClass);
+
+            const prevButton = screen.getByTestId(PaginationQa.PaginationButtonPrevious);
+            expect(prevButton).toHaveClass(expectedClass);
+
+            const nextButton = screen.getByTestId(PaginationQa.PaginationButtonNext);
+            expect(nextButton).toHaveClass(expectedClass);
+        },
+    );
+
+    test.each(new Array<PaginationSize | undefined>('m', 'l', undefined))(
+        '[mobile]: render with given "%s" size',
+        (size) => {
+            render(
+                <MobileProvider mobile>
+                    <Pagination pageSize={20} onUpdate={noop} page={0} total={20} size={size} />,
+                </MobileProvider>,
+            );
+
+            const expectedSize = getSize({mobile: true, propSize: size});
+            const expectedClass = `g-button_size_${expectedSize}`;
+
+            const firstButton = screen.getByTestId(PaginationQa.PaginationButtonFirst);
+            expect(firstButton).toHaveClass(expectedClass);
+
+            const prevButton = screen.getByTestId(PaginationQa.PaginationButtonPrevious);
+            expect(prevButton).toHaveClass(expectedClass);
+
+            const nextButton = screen.getByTestId(PaginationQa.PaginationButtonNext);
+            expect(nextButton).toHaveClass(expectedClass);
+        },
+    );
 });
diff --git a/src/components/Pagination/components/PaginationEllipsis/PaginationEllipsis.scss b/src/components/Pagination/components/PaginationEllipsis/PaginationEllipsis.scss
@@ -9,11 +9,19 @@ $block: '.#{variables.$ns}pagination-ellipsis';
     align-items: flex-end;
     color: var(--g-color-text-secondary);
 
+    &_size_s {
+        padding-block-end: 3px;
+    }
+
     &_size_m {
         padding-block-end: 5px;
     }
 
     &_size_l {
         padding-block-end: 9px;
     }
+
+    &_size_xl {
+        padding-block-end: 11px;
+    }
 }
diff --git a/src/components/Pagination/components/PaginationInput/PaginationInput.scss b/src/components/Pagination/components/PaginationInput/PaginationInput.scss
@@ -3,11 +3,19 @@
 $block: '.#{variables.$ns}pagination-input';
 
 #{$block} {
+    &#{$block}_size_s {
+        width: 70px;
+    }
+
     &#{$block}_size_m {
         width: 80px;
     }
 
     &#{$block}_size_l {
         width: 90px;
     }
+
+    &#{$block}_size_xl {
+        width: 100px;
+    }
 }
diff --git a/src/components/Pagination/components/PaginationPage/PaginationPage.scss b/src/components/Pagination/components/PaginationPage/PaginationPage.scss
@@ -9,12 +9,20 @@ $block: '.#{variables.$ns}pagination-page';
         display: flex;
         align-items: center;
 
+        &_size_s {
+            padding: 0 8px;
+        }
+
         &_size_m {
             padding: 0 13px;
         }
 
         &_size_l {
             padding: 0 18px;
         }
+
+        &_size_xl {
+            padding: 0 21px;
+        }
     }
 }
diff --git a/src/components/Pagination/components/PaginationPageOf/PaginationPageOf.scss b/src/components/Pagination/components/PaginationPageOf/PaginationPageOf.scss
@@ -9,11 +9,19 @@ $block: '.#{variables.$ns}pagination-page-of';
     align-items: flex-end;
     color: var(--g-color-text-secondary);
 
+    &_size_s {
+        padding-block-end: 3px;
+    }
+
     &_size_m {
         padding-block-end: 5px;
     }
 
     &_size_l {
         padding-block-end: 9px;
     }
+
+    &_size_xl {
+        padding-block-end: 11px;
+    }
 }
diff --git a/src/components/Pagination/types.ts b/src/components/Pagination/types.ts
@@ -2,7 +2,7 @@ import type {QAProps} from '../types';
 
 export type ActionName = 'previous' | 'next' | 'first';
 
-export type PaginationSize = 'm' | 'l';
+export type PaginationSize = 's' | 'm' | 'l' | 'xl';
 
 export type PaginationProps = {
     /**
@@ -13,6 +13,10 @@ export type PaginationProps = {
      * Number of data items per page.
      */
     pageSize: number;
+    /**
+     * Size of the pagination items.
+     */
+    size?: PaginationSize;
     /**
      * Called when the page number or pageSize is changed.
      */

diff --git a/src/components/Pagination/utils.test.ts b/src/components/Pagination/utils.test.ts
@@ -1,4 +1,4 @@
-import {getNumerationList} from './utils';
+import {getNumerationList, getSize} from './utils';
 
 describe('Pagination utils', () => {
     describe('[desktop]: getNumerationList', () => {
@@ -342,4 +342,22 @@ describe('Pagination utils', () => {
             ]);
         });
     });
+
+    describe('[desktop]: getSize', () => {
+        it('without size  prop', () => {
+            expect(getSize({mobile: false})).toEqual('m');
+        });
+        it('size prop is accounted', () => {
+            expect(getSize({mobile: false, propSize: 'l'})).toEqual('l');
+        });
+    });
+
+    describe('[mobile]: getSize', () => {
+        it('without size  prop', () => {
+            expect(getSize({mobile: true})).toEqual('l');
+        });
+        it('size prop is accounted', () => {
+            expect(getSize({mobile: false, propSize: 'm'})).toEqual('m');
+        });
+    });
 });
diff --git a/src/components/Pagination/utils.ts b/src/components/Pagination/utils.ts
@@ -1,5 +1,7 @@
 import uniq from 'lodash/uniq';
 
+import type {PaginationSize} from './types';
+
 export function getNumerationList({
     page,
     numberOfPages,
@@ -56,6 +58,20 @@ export function getResultTotal(total: number | undefined) {
     return total === undefined || total > 0 ? total : 1;
 }
 
+export function getSize({
+    propSize,
+    mobile,
+}: {
+    propSize?: PaginationSize;
+    mobile: boolean;
+}): PaginationSize {
+    if (propSize) {
+        return propSize;
+    }
+
+    return mobile ? 'l' : 'm';
+}
+
 export function getResultPage({
     page,
     total,