From 8b4c37323d0f882838fca3c6922d9d631dc7ed67 Mon Sep 17 00:00:00 2001 From: Inomdzhon Mirdzhamolov Date: Mon, 26 Feb 2024 15:27:22 +0300 Subject: [PATCH] feat(Pagination): add caption properties --- .../Pagination/Pagination.e2e-playground.tsx | 2 + .../components/Pagination/Pagination.test.tsx | 15 +++- .../src/components/Pagination/Pagination.tsx | 72 +++++++++++-------- .../PaginationNavigationButton.tsx | 57 +++++++++++++++ .../vkui/src/components/Pagination/Readme.md | 13 ++++ ...agination-android-chromium-dark-1-snap.png | 4 +- ...gination-android-chromium-light-1-snap.png | 4 +- .../pagination-ios-webkit-dark-1-snap.png | 4 +- .../pagination-ios-webkit-light-1-snap.png | 4 +- .../pagination-vkcom-chromium-dark-1-snap.png | 4 +- ...pagination-vkcom-chromium-light-1-snap.png | 4 +- .../pagination-vkcom-firefox-dark-1-snap.png | 4 +- .../pagination-vkcom-firefox-light-1-snap.png | 4 +- .../pagination-vkcom-webkit-dark-1-snap.png | 4 +- .../pagination-vkcom-webkit-light-1-snap.png | 4 +- 15 files changed, 149 insertions(+), 50 deletions(-) create mode 100644 packages/vkui/src/components/Pagination/PaginationNavigationButton/PaginationNavigationButton.tsx 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)}
  • - + ); +}; diff --git a/packages/vkui/src/components/Pagination/Readme.md b/packages/vkui/src/components/Pagination/Readme.md index 9a3d385d80..b0fc598895 100644 --- a/packages/vkui/src/components/Pagination/Readme.md +++ b/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 = () => {
    { ]} /> + +