From d15e5f845347392890ab82d16cdd2a1140457705 Mon Sep 17 00:00:00 2001
From: spotikhanov <spotikhanov@yandex.ru>
Date: Mon, 19 Aug 2024 18:37:22 +0300
Subject: [PATCH] feat(Pagination): support 's' and 'xl' variants in
 PaginationSize

---
 .../components/PaginationEllipsis/PaginationEllipsis.scss | 8 ++++++++
 .../components/PaginationInput/PaginationInput.scss       | 8 ++++++++
 .../components/PaginationPage/PaginationPage.scss         | 8 ++++++++
 .../components/PaginationPageOf/PaginationPageOf.scss     | 8 ++++++++
 src/components/Pagination/types.ts                        | 2 +-
 5 files changed, 33 insertions(+), 1 deletion(-)

diff --git a/src/components/Pagination/components/PaginationEllipsis/PaginationEllipsis.scss b/src/components/Pagination/components/PaginationEllipsis/PaginationEllipsis.scss
index f7940fb8a7..53fd9e2ae0 100644
--- a/src/components/Pagination/components/PaginationEllipsis/PaginationEllipsis.scss
+++ b/src/components/Pagination/components/PaginationEllipsis/PaginationEllipsis.scss
@@ -9,6 +9,10 @@ $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;
     }
@@ -16,4 +20,8 @@ $block: '.#{variables.$ns}pagination-ellipsis';
     &_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
index 2907e28832..df08256e53 100644
--- a/src/components/Pagination/components/PaginationInput/PaginationInput.scss
+++ b/src/components/Pagination/components/PaginationInput/PaginationInput.scss
@@ -3,6 +3,10 @@
 $block: '.#{variables.$ns}pagination-input';
 
 #{$block} {
+    &#{$block}_size_s {
+        width: 70px;
+    }
+
     &#{$block}_size_m {
         width: 80px;
     }
@@ -10,4 +14,8 @@ $block: '.#{variables.$ns}pagination-input';
     &#{$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
index 6abfa0f10b..1c366eaf77 100644
--- a/src/components/Pagination/components/PaginationPage/PaginationPage.scss
+++ b/src/components/Pagination/components/PaginationPage/PaginationPage.scss
@@ -9,6 +9,10 @@ $block: '.#{variables.$ns}pagination-page';
         display: flex;
         align-items: center;
 
+        &_size_s {
+            padding: 0 8px;
+        }
+
         &_size_m {
             padding: 0 13px;
         }
@@ -16,5 +20,9 @@ $block: '.#{variables.$ns}pagination-page';
         &_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
index 9e9363fc4d..937427d65f 100644
--- a/src/components/Pagination/components/PaginationPageOf/PaginationPageOf.scss
+++ b/src/components/Pagination/components/PaginationPageOf/PaginationPageOf.scss
@@ -9,6 +9,10 @@ $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;
     }
@@ -16,4 +20,8 @@ $block: '.#{variables.$ns}pagination-page-of';
     &_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
index 3f243e1947..f926dbfcd1 100644
--- 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 = {
     /**