feat(Pagination): add caption properties

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',
         },
       ]}

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) => <Pagination {...props} navigationButtonsStyle="caption" />,
+    undefined,
+    'with only caption',
+  );
+
+  baselineComponent(
+    (props) => <Pagination {...props} navigationButtonsStyle="both" />,
+    undefined,
+    'with both',
+  );
 });

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<HTMLAttributesWithRootRef<HTMLElem
    */
   disabled?: boolean;
   /**
-   * Переопределение текста для обозначения блока навигации.
-   * По умолчанию используется текст на "ru_RU".
+   * Декоративный текст для кнопки навигации назад.
+   *
+   * > 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 = ({
       <VisuallyHidden Component={navigationLabelComponent}>{navigationLabel}</VisuallyHidden>
       <ul className={styles['Pagination__list']}>
         <li className={styles['Pagination__prevButtonContainer']}>
-          <Button
-            size="l"
-            before={
-              <>
-                <VisuallyHidden>{prevButtonLabel}</VisuallyHidden>{' '}
-                <Icon24ChevronCompactLeft width={24} />
-              </>
-            }
-            appearance="accent"
-            mode="tertiary"
+          <PaginationNavigationButton
+            type="prev"
+            style={navigationButtonsStyle}
+            caption={prevButtonCaption}
+            Icon={Icon24ChevronCompactLeft}
+            a11yLabel={prevButtonLabel}
             disabled={isFirstPage || disabled}
             onClick={handlePrevClick}
           />
         </li>
         {pages.map(renderPages)}
         <li className={styles['Pagination__nextButtonContainer']}>
-          <Button
-            size="l"
-            after={
-              <>
-                <VisuallyHidden>{nextButtonLabel}</VisuallyHidden>
-                <Icon24ChevronCompactRight width={24} />
-              </>
-            }
-            appearance="accent"
-            mode="tertiary"
+          <PaginationNavigationButton
+            type="next"
+            style={navigationButtonsStyle}
+            caption={nextButtonCaption}
+            Icon={Icon24ChevronCompactRight}
+            a11yLabel={nextButtonLabel}
             disabled={isLastPage || disabled}
             onClick={handleNextClick}
           />

packages/vkui/src/components/Pagination/PaginationNavigationButton/PaginationNavigationButton.tsx

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import { Button } from '../../Button/Button';
+import { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden';
+
+export interface PaginationNavigationButtonProps {
+  type: 'prev' | 'next';
+  style: 'icon' | 'caption' | 'both';
+  caption: React.ReactNode;
+  Icon: React.ComponentType;
+  a11yLabel: React.ReactNode;
+  disabled?: boolean;
+  onClick(): void;
+}
+
+/**
+ * @private
+ */
+export const PaginationNavigationButton = ({
+  type,
+  style,
+  caption: captionProp,
+  Icon,
+  a11yLabel,
+  disabled,
+  onClick,
+}: PaginationNavigationButtonProps) => {
+  const icon: React.ReactElement | null =
+    style !== 'caption' ? (
+      <>
+        <VisuallyHidden>{a11yLabel}</VisuallyHidden>
+        <Icon />
+      </>
+    ) : null;
+  const caption: React.ReactElement | null =
+    style === 'caption' ? (
+      <>
+        <VisuallyHidden>{a11yLabel}</VisuallyHidden>
+        <span aria-hidden="true">{captionProp}</span>
+      </>
+    ) : style !== 'icon' ? (
+      <span aria-hidden="true">{captionProp}</span>
+    ) : null;
+
+  return (
+    <Button
+      size="l"
+      before={type === 'prev' ? icon : null}
+      after={type === 'next' ? icon : null}
+      appearance={style === 'caption' ? 'neutral' : 'accent'}
+      mode="tertiary"
+      disabled={disabled}
+      onClick={onClick}
+    >
+      {caption}
+    </Button>
+  );
+};

packages/vkui/src/components/Pagination/Readme.md

@@ -13,6 +13,7 @@
 ```jsx { "props": { "layout": false, "adaptivity": true, "iframe": false } }
 const Example = () => {
   const [sizeY, setSizeY] = useState('compact');
+  const [navigationButtonsStyle, setNavigationButtonsStyle] = useState('icon');
   const [currentPage, setCurrentPage] = useState(1);
   const [siblingCount, setSiblingCount] = useState(0);
   const [boundaryCount, setBoundaryCount] = useState(1);
@@ -28,6 +29,7 @@ const Example = () => {
       <AdaptivityProvider sizeY={sizeY}>
         <div style={demoContainerStyles}>
           <Pagination
+            navigationButtonsStyle={navigationButtonsStyle}
             currentPage={currentPage}
             siblingCount={siblingCount}
             boundaryCount={boundaryCount}
@@ -48,6 +50,17 @@ const Example = () => {
             ]}
           />
         </FormItem>
+        <FormItem top="prop[navigationButtonsStyle]">
+          <Select
+            value={navigationButtonsStyle}
+            onChange={(e) => setNavigationButtonsStyle(e.target.value)}
+            options={[
+              { label: 'icon', value: 'icon' },
+              { label: 'caption', value: 'caption' },
+              { label: 'both', value: 'both' },
+            ]}
+          />
+        </FormItem>
         <FormItem top="prop[currentPage]">
           <Input
             type="number"