diff --git a/packages/vkui/src/components/Pagination/Pagination.e2e-playground.tsx b/packages/vkui/src/components/Pagination/Pagination.e2e-playground.tsx
index 5e9b92020f..77db2eefda 100644
--- a/packages/vkui/src/components/Pagination/Pagination.e2e-playground.tsx
+++ b/packages/vkui/src/components/Pagination/Pagination.e2e-playground.tsx
@@ -8,6 +8,7 @@ export const PaginationPlayground = (props: ComponentPlaygroundProps) => {
{...props}
propSets={[
{
+ navigationButtonsStyle: ['icon', 'caption', 'both'],
$adaptivity: 'y',
},
{
@@ -20,6 +21,7 @@ export const PaginationPlayground = (props: ComponentPlaygroundProps) => {
currentPage: [4],
totalPages: [123],
siblingCount: [0],
+ navigationButtonsStyle: ['icon', 'caption', 'both'],
$adaptivity: 'y',
},
]}
diff --git a/packages/vkui/src/components/Pagination/Pagination.test.tsx b/packages/vkui/src/components/Pagination/Pagination.test.tsx
index 31f23130bd..6c13b3b0d5 100644
--- a/packages/vkui/src/components/Pagination/Pagination.test.tsx
+++ b/packages/vkui/src/components/Pagination/Pagination.test.tsx
@@ -1,6 +1,19 @@
+import * as React from 'react';
import { baselineComponent } from '../../testing/utils';
import { Pagination } from './Pagination';
describe('Pagination', () => {
- baselineComponent(Pagination);
+ baselineComponent(Pagination, undefined, 'with only icon');
+
+ baselineComponent(
+ (props) => ,
+ undefined,
+ 'with only caption',
+ );
+
+ baselineComponent(
+ (props) => ,
+ undefined,
+ 'with both',
+ );
});
diff --git a/packages/vkui/src/components/Pagination/Pagination.tsx b/packages/vkui/src/components/Pagination/Pagination.tsx
index a6f27885a6..4e8ccd5d42 100644
--- a/packages/vkui/src/components/Pagination/Pagination.tsx
+++ b/packages/vkui/src/components/Pagination/Pagination.tsx
@@ -2,9 +2,12 @@ import * as React from 'react';
import { Icon24ChevronCompactLeft, Icon24ChevronCompactRight } from '@vkontakte/icons';
import { PaginationPageType, usePagination } from '../../hooks/usePagination';
import type { HasComponent, HTMLAttributesWithRootRef } from '../../types';
-import { Button } from '../Button/Button';
import { RootComponent } from '../RootComponent/RootComponent';
import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';
+import {
+ PaginationNavigationButton,
+ type PaginationNavigationButtonProps,
+} from './PaginationNavigationButton/PaginationNavigationButton';
import { PaginationPageButton } from './PaginationPage/PaginationPageButton';
import { PaginationPageEllipsis } from './PaginationPage/PaginationPageEllipsis';
import { getPageLabelDefault } from './utils';
@@ -32,24 +35,40 @@ export interface PaginationProps extends Omit Note: Экранные дикторы будут использовать `prevButtonLabel`.
+ */
+ prevButtonCaption?: string;
+ /**
+ * Декоративный текст для кнопки навигации вперёд.
+ *
+ * > Note: Экранные дикторы будут использовать `nextButtonLabel`.
+ */
+ nextButtonCaption?: string;
+ /**
+ * Задаёт стиль отображения кнопок навигации.
+ *
+ * - `icon` – показывать только иконку;
+ * - `caption` – показывать только подпись;
+ * - `both` – показывать и иконку, и подпись.
+ */
+ navigationButtonsStyle?: PaginationNavigationButtonProps['style'];
+ /**
+ * [a11y] Метка для обозначения блока навигации.
*/
navigationLabel?: string;
navigationLabelComponent?: HasComponent['Component'];
/**
- * Переопределение текста для кнопки навигации назад.
- * По умолчанию используется текст на "ru_RU".
+ * [a11y] Метка для кнопки навигации назад.
*/
prevButtonLabel?: string;
/**
- * Переопределение текста для кнопки навигации вперёд.
- * По умолчанию используется текст на "ru_RU".
+ * [a11y] Метка для кнопки навигации вперёд.
*/
nextButtonLabel?: string;
/**
- * Функция для переопределения и/или локализации текста кнопки страницы.
- * По умолчанию используется текст на "ru_RU".
+ * [a11y] Функция для переопределения и/или локализации метки кнопки страницы.
*/
getPageLabel?(isCurrent: boolean): string;
onChange?(page: number): void;
@@ -64,6 +83,9 @@ export const Pagination = ({
boundaryCount = 1,
totalPages = 1,
disabled,
+ prevButtonCaption = 'Назад',
+ nextButtonCaption = 'Вперёд',
+ navigationButtonsStyle = 'icon',
getPageLabel = getPageLabelDefault,
navigationLabel = 'Навигация по страницам',
navigationLabelComponent = 'h2',
@@ -136,32 +158,24 @@ export const Pagination = ({
{navigationLabel}
-
-
{pages.map(renderPages)}
-
-