feat(Pagination): support 's' and 'xl' variants in PaginationSize

gravity-ui · Aug 22, 2024 · d15e5f8 · d15e5f8
1 parent a50e619
commit d15e5f8
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 1 deletion.
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 = {
     /**