From 61846c78a767040b3106f9b24110a0b6d489f72a Mon Sep 17 00:00:00 2001 From: Lucas Arcoverde Date: Mon, 13 Nov 2023 12:09:43 -0300 Subject: [PATCH 1/4] feat(pagination): replace native select with Select component --- .../components/src/pagination/pagination.css | 35 +------- .../components/src/pagination/pagination.tsx | 89 ++++++++++++------- 2 files changed, 59 insertions(+), 65 deletions(-) diff --git a/packages/components/src/pagination/pagination.css b/packages/components/src/pagination/pagination.css index 9aebf6c58a..4de67fed69 100644 --- a/packages/components/src/pagination/pagination.css +++ b/packages/components/src/pagination/pagination.css @@ -5,37 +5,10 @@ letter-spacing: var(--sl-text-emphasis-letter-spacing); } - [data-sl-pagination-size] { - position: relative; - } - - [data-sl-pagination-size-select] { - color: var(--sl-fg-muted); - border: none; - border-radius: var(--sl-border-radius-medium); - background: var(--sl-bg); - padding: var(--sl-space-1) var(--sl-space-3); - padding-right: var(--sl-space-8); - appearance: none; - cursor: pointer; - - &:focus { - outline: none; - } - - &:focus-visible { - box-shadow: var(--sl-focus-ring); - } - } - - [data-sl-pagination-size-select-icon] { - color: var(--sl-fg-soft); - position: absolute; - right: var(--sl-space-3); - top: var(--sl-space-0); - bottom: var(--sl-space-0); - margin: auto; - pointer-events: none; + [data-sl-pagination-select-popover] { + margin-top: var(--sl-space-1); + max-height: 12.75rem; + overflow-y: auto; } [data-sl-pagination-actions] { diff --git a/packages/components/src/pagination/pagination.tsx b/packages/components/src/pagination/pagination.tsx index 8881a7b9df..4fa94edeba 100644 --- a/packages/components/src/pagination/pagination.tsx +++ b/packages/components/src/pagination/pagination.tsx @@ -1,5 +1,5 @@ import type { ComponentPropsWithoutRef } from 'react' -import React, { forwardRef } from 'react' +import React, { forwardRef, useMemo } from 'react' import { Stack } from '../stack' import { Action } from '../action' import { @@ -7,10 +7,10 @@ import { IconCaretLeft, IconCaretRight, } from '@vtex/shoreline-icons' -import { AccessibleIcon } from '../accessible-icon' -import { VisuallyHidden } from '../visually-hidden' -import { useId } from '@vtex/shoreline-utils' + import './pagination.css' +import { Select, SelectOption, SelectPopover, SelectProvider } from '../select' +import { Bleed } from '../bleed' /** * Pagination triggers allow merchants to view the size of a list and navigate between pages. @@ -42,37 +42,34 @@ export const Pagination = forwardRef( const totalPages = Math.ceil(total / size) - const id = useId() + const pageOptions = useMemo( + () => [...Array(totalPages).keys()].slice(1), + [total, size] + ) return (
{hasSizes && ( -
- - - - - - - - -
+ onSizeChange?.(Number(value))} + > + + + + {sizeOptions.map((sizeOption) => ( + + Show {sizeOption} + + ))} + + + )}
{total} items
@@ -89,9 +86,33 @@ export const Pagination = forwardRef( > -
- {page} of {totalPages} -
+ + {totalPages === 1 ? ( +
+ {page} of {totalPages} +
+ ) : ( + onPageChange?.(Number(value), 'selection')} + > + + + + {pageOptions.map((pageOption) => ( + + {pageOption} + + ))} + + + + )} + { @@ -111,7 +132,7 @@ export const Pagination = forwardRef( ) export interface PaginationProps extends ComponentPropsWithoutRef<'div'> { - onPageChange?: (page: number, type: 'next' | 'prev') => void + onPageChange?: (page: number, type: 'next' | 'prev' | 'selection') => void onSizeChange?: (size: number) => void sizeOptions?: number[] size: number From a3dc543f9c9d0566a994c7e86183fa201a5f4854 Mon Sep 17 00:00:00 2001 From: Lucas Arcoverde Date: Mon, 13 Nov 2023 16:36:49 -0300 Subject: [PATCH 2/4] feat(pagination): add loading behavior --- .../src/pagination/pagination-select.tsx | 67 ++++++++++++ .../components/src/pagination/pagination.css | 15 +++ .../components/src/pagination/pagination.tsx | 100 ++++++++---------- .../pagination/stories/pagination.stories.tsx | 26 +++-- .../stories/pagination.stories.tsx | 7 +- 5 files changed, 150 insertions(+), 65 deletions(-) create mode 100644 packages/components/src/pagination/pagination-select.tsx diff --git a/packages/components/src/pagination/pagination-select.tsx b/packages/components/src/pagination/pagination-select.tsx new file mode 100644 index 0000000000..6d35726089 --- /dev/null +++ b/packages/components/src/pagination/pagination-select.tsx @@ -0,0 +1,67 @@ +import type { ComponentPropsWithoutRef, ReactNode } from 'react' +import React, { forwardRef } from 'react' + +import { Action } from '../action' + +import { Select, SelectPopover, SelectProvider } from '../select' +import { Bleed } from '../bleed' +import { Skeleton } from '../skeleton' + +export const PaginationSelect = forwardRef< + HTMLDivElement, + PaginationSelectProps +>(function Pagination(props, ref) { + const { + loading = false, + value, + options, + label, + onValueChange, + children, + disabled = false, + ...otherProps + } = props + + if (loading) { + console.log({ loading }) + + return ( +
+ +
+ ) + } + + return ( +
+ {options.length === 1 ? ( +
{label}
+ ) : ( + onValueChange?.(Number(value))} + > + + + + {children} + + + + )} +
+ ) +}) + +export interface PaginationSelectProps extends ComponentPropsWithoutRef<'div'> { + onValueChange?: (value: number) => void + value: number + options: number[] + loading?: boolean + label: ReactNode + disabled?: boolean +} diff --git a/packages/components/src/pagination/pagination.css b/packages/components/src/pagination/pagination.css index 4de67fed69..a012386609 100644 --- a/packages/components/src/pagination/pagination.css +++ b/packages/components/src/pagination/pagination.css @@ -5,12 +5,27 @@ letter-spacing: var(--sl-text-emphasis-letter-spacing); } + [data-sl-pagination-select-action] { + font: var(--sl-text-emphasis-font); + letter-spacing: var(--sl-text-emphasis-letter-spacing); + } + [data-sl-pagination-select-popover] { margin-top: var(--sl-space-1); max-height: 12.75rem; overflow-y: auto; } + [data-sl-pagination-select][data-loading='true'] { + width: 2.75rem; + height: 1.25rem; + } + + [data-sl-pagination-total-label][data-loading='true'] { + width: 4.125rem; + height: 1.25rem; + } + [data-sl-pagination-actions] { display: flex; align-items: center; diff --git a/packages/components/src/pagination/pagination.tsx b/packages/components/src/pagination/pagination.tsx index 4fa94edeba..38944d630e 100644 --- a/packages/components/src/pagination/pagination.tsx +++ b/packages/components/src/pagination/pagination.tsx @@ -2,15 +2,12 @@ import type { ComponentPropsWithoutRef } from 'react' import React, { forwardRef, useMemo } from 'react' import { Stack } from '../stack' import { Action } from '../action' -import { - IconCaretDown, - IconCaretLeft, - IconCaretRight, -} from '@vtex/shoreline-icons' +import { IconCaretLeft, IconCaretRight } from '@vtex/shoreline-icons' import './pagination.css' -import { Select, SelectOption, SelectPopover, SelectProvider } from '../select' -import { Bleed } from '../bleed' +import { SelectOption } from '../select' +import { Skeleton } from '../skeleton' +import { PaginationSelect } from './pagination-select' /** * Pagination triggers allow merchants to view the size of a list and navigate between pages. @@ -35,44 +32,43 @@ export const Pagination = forwardRef( total, onSizeChange, onPageChange, + loading = false, ...otherProps } = props const hasSizes = sizeOptions.length > 0 - const totalPages = Math.ceil(total / size) + const totalPages = useMemo(() => Math.ceil(total / size), [total, size]) - const pageOptions = useMemo( - () => [...Array(totalPages).keys()].slice(1), - [total, size] - ) + const pageOptions = useMemo(() => { + const totalPages = Math.ceil(total / size) + + return [...Array(totalPages).keys()].slice(1) + }, [total, size]) return (
{hasSizes && ( - onSizeChange?.(Number(value))} + onSizeChange?.(value)} + label={`Show ${size}`} + disabled={loading} > - - - - {sizeOptions.map((sizeOption) => ( - - Show {sizeOption} - - ))} - - - + {sizeOptions.map((option) => ( + + Show {option} + + ))} + )} -
{total} items
+
+ {loading ? : `${total} items`} +
( onClick={() => { onPageChange?.(page - 1, 'prev') }} - disabled={page === 1} + disabled={page === 1 || loading} aria-label="Previous page" data-sl-pagination-action-prev > - {totalPages === 1 ? ( -
- {page} of {totalPages} -
- ) : ( - onPageChange?.(Number(value), 'selection')} - > - - - - {pageOptions.map((pageOption) => ( - - {pageOption} - - ))} - - - - )} + onPageChange?.(value, 'selection')} + value={page} + options={pageOptions} + loading={loading} + label={`${page} of ${pageOptions.length}`} + > + {pageOptions.map((option) => ( + {option} + ))} + { onPageChange?.(page + 1, 'next') }} - disabled={page === totalPages} + disabled={page === totalPages || loading} aria-label="Next page" data-sl-pagination-action-next > @@ -138,4 +121,5 @@ export interface PaginationProps extends ComponentPropsWithoutRef<'div'> { size: number page: number total: number + loading?: boolean } diff --git a/packages/components/src/pagination/stories/pagination.stories.tsx b/packages/components/src/pagination/stories/pagination.stories.tsx index 6adac42634..bbce5368bf 100644 --- a/packages/components/src/pagination/stories/pagination.stories.tsx +++ b/packages/components/src/pagination/stories/pagination.stories.tsx @@ -1,4 +1,5 @@ import './style.css' + import React, { useState } from 'react' import { Pagination } from '../index' @@ -8,20 +9,19 @@ export default { } export function Default() { - const [page, setPage] = useState(1) - const [pageSize, setPageSize] = useState(25) + const [pagination, setPagination] = useState({ page: 1, size: 25 }) return (
{ - setPage(page) + setPagination((prev) => ({ ...prev, page })) }} total={754} sizeOptions={[25, 50, 100]} - size={pageSize} - onSizeChange={(size) => setPageSize(size)} + size={pagination.size} + onSizeChange={(size) => setPagination((prev) => ({ ...prev, size }))} />
) @@ -43,3 +43,17 @@ export function WithoutPageSize() {
) } + +export function Loading() { + return ( +
+ +
+ ) +} diff --git a/packages/components/src/simple-table/stories/pagination.stories.tsx b/packages/components/src/simple-table/stories/pagination.stories.tsx index a2b5e54d51..7cd2bbb1b9 100644 --- a/packages/components/src/simple-table/stories/pagination.stories.tsx +++ b/packages/components/src/simple-table/stories/pagination.stories.tsx @@ -149,7 +149,7 @@ function getItems(page: number, size: number) { const paginatedData = data.slice(currentIndex, currentIndex + size) res(paginatedData) - }, 200) + }, 2000) }) } @@ -227,11 +227,15 @@ export function ServerPagination() { ) const [{ page, size }, setPagination] = useState({ page: 1, size: 10 }) + const [loading, setLoading] = useState(true) const [products, setProducts] = useState([]) useEffect(() => { + if (loading) setLoading(true) + getItems(page, size).then((products: Product[]) => { + setLoading(false) setProducts(products) }) }, [page, size]) @@ -239,6 +243,7 @@ export function ServerPagination() { return ( Date: Tue, 14 Nov 2023 07:33:56 -0300 Subject: [PATCH 3/4] feat(pagination): fix pagination select --- packages/components/src/pagination/pagination-select.tsx | 9 ++++----- packages/components/src/pagination/pagination.tsx | 9 ++++----- .../src/pagination/tests/pagination.vitest.test.tsx | 3 +++ 3 files changed, 11 insertions(+), 10 deletions(-) diff --git a/packages/components/src/pagination/pagination-select.tsx b/packages/components/src/pagination/pagination-select.tsx index 6d35726089..3851029e2f 100644 --- a/packages/components/src/pagination/pagination-select.tsx +++ b/packages/components/src/pagination/pagination-select.tsx @@ -1,4 +1,4 @@ -import type { ComponentPropsWithoutRef, ReactNode } from 'react' +import type { ReactNode } from 'react' import React, { forwardRef } from 'react' import { Action } from '../action' @@ -23,8 +23,6 @@ export const PaginationSelect = forwardRef< } = props if (loading) { - console.log({ loading }) - return (
@@ -48,7 +46,7 @@ export const PaginationSelect = forwardRef< - {children} + {options.map((option) => children(option))} @@ -57,10 +55,11 @@ export const PaginationSelect = forwardRef< ) }) -export interface PaginationSelectProps extends ComponentPropsWithoutRef<'div'> { +export interface PaginationSelectProps { onValueChange?: (value: number) => void value: number options: number[] + children: (option: number) => ReactNode loading?: boolean label: ReactNode disabled?: boolean diff --git a/packages/components/src/pagination/pagination.tsx b/packages/components/src/pagination/pagination.tsx index 38944d630e..0fbf7ab531 100644 --- a/packages/components/src/pagination/pagination.tsx +++ b/packages/components/src/pagination/pagination.tsx @@ -8,7 +8,6 @@ import './pagination.css' import { SelectOption } from '../select' import { Skeleton } from '../skeleton' import { PaginationSelect } from './pagination-select' - /** * Pagination triggers allow merchants to view the size of a list and navigate between pages. * @@ -58,11 +57,11 @@ export const Pagination = forwardRef( label={`Show ${size}`} disabled={loading} > - {sizeOptions.map((option) => ( + {(option) => ( Show {option} - ))} + )} )} @@ -91,9 +90,9 @@ export const Pagination = forwardRef( loading={loading} label={`${page} of ${pageOptions.length}`} > - {pageOptions.map((option) => ( + {(option) => ( {option} - ))} + )} { expect( container.querySelector('[data-sl-pagination-actions]') ).toBeInTheDocument() + expect( + container.querySelector('[data-sl-pagination-page-select]') + ).toBeInTheDocument() expect( container.querySelector('[data-sl-pagination-total-label]') ).toBeInTheDocument() From f93cb157eac02da00ef208d01659d6bd5534e2a8 Mon Sep 17 00:00:00 2001 From: Lucas Arcoverde Date: Tue, 14 Nov 2023 10:28:35 -0300 Subject: [PATCH 4/4] feat(pagination): add intl messages --- .../src/pagination/messages/bg.json | 7 +++++ .../src/pagination/messages/de.json | 7 +++++ .../src/pagination/messages/en.json | 7 +++++ .../src/pagination/messages/es.json | 7 +++++ .../src/pagination/messages/fr.json | 7 +++++ .../src/pagination/messages/index.ts | 27 ++++++++++++++++ .../src/pagination/messages/it.json | 7 +++++ .../src/pagination/messages/ja.json | 7 +++++ .../src/pagination/messages/ko.json | 7 +++++ .../src/pagination/messages/nl.json | 7 +++++ .../src/pagination/messages/pt.json | 7 +++++ .../src/pagination/messages/ro.json | 7 +++++ .../src/pagination/messages/th.json | 7 +++++ .../components/src/pagination/pagination.tsx | 31 +++++++++++++------ .../pagination/stories/pagination.stories.tsx | 22 +++++++++++++ 15 files changed, 154 insertions(+), 10 deletions(-) create mode 100644 packages/components/src/pagination/messages/bg.json create mode 100644 packages/components/src/pagination/messages/de.json create mode 100644 packages/components/src/pagination/messages/en.json create mode 100644 packages/components/src/pagination/messages/es.json create mode 100644 packages/components/src/pagination/messages/fr.json create mode 100644 packages/components/src/pagination/messages/index.ts create mode 100644 packages/components/src/pagination/messages/it.json create mode 100644 packages/components/src/pagination/messages/ja.json create mode 100644 packages/components/src/pagination/messages/ko.json create mode 100644 packages/components/src/pagination/messages/nl.json create mode 100644 packages/components/src/pagination/messages/pt.json create mode 100644 packages/components/src/pagination/messages/ro.json create mode 100644 packages/components/src/pagination/messages/th.json diff --git a/packages/components/src/pagination/messages/bg.json b/packages/components/src/pagination/messages/bg.json new file mode 100644 index 0000000000..a5e1911473 --- /dev/null +++ b/packages/components/src/pagination/messages/bg.json @@ -0,0 +1,7 @@ +{ + "size-select": "Show {size}", + "page-select": "{page} of {pages}", + "total-label": "{total} items", + "next-page-action": "Next page", + "previous-page-action": "Previous page" +} diff --git a/packages/components/src/pagination/messages/de.json b/packages/components/src/pagination/messages/de.json new file mode 100644 index 0000000000..a5e1911473 --- /dev/null +++ b/packages/components/src/pagination/messages/de.json @@ -0,0 +1,7 @@ +{ + "size-select": "Show {size}", + "page-select": "{page} of {pages}", + "total-label": "{total} items", + "next-page-action": "Next page", + "previous-page-action": "Previous page" +} diff --git a/packages/components/src/pagination/messages/en.json b/packages/components/src/pagination/messages/en.json new file mode 100644 index 0000000000..a5e1911473 --- /dev/null +++ b/packages/components/src/pagination/messages/en.json @@ -0,0 +1,7 @@ +{ + "size-select": "Show {size}", + "page-select": "{page} of {pages}", + "total-label": "{total} items", + "next-page-action": "Next page", + "previous-page-action": "Previous page" +} diff --git a/packages/components/src/pagination/messages/es.json b/packages/components/src/pagination/messages/es.json new file mode 100644 index 0000000000..a5e1911473 --- /dev/null +++ b/packages/components/src/pagination/messages/es.json @@ -0,0 +1,7 @@ +{ + "size-select": "Show {size}", + "page-select": "{page} of {pages}", + "total-label": "{total} items", + "next-page-action": "Next page", + "previous-page-action": "Previous page" +} diff --git a/packages/components/src/pagination/messages/fr.json b/packages/components/src/pagination/messages/fr.json new file mode 100644 index 0000000000..a5e1911473 --- /dev/null +++ b/packages/components/src/pagination/messages/fr.json @@ -0,0 +1,7 @@ +{ + "size-select": "Show {size}", + "page-select": "{page} of {pages}", + "total-label": "{total} items", + "next-page-action": "Next page", + "previous-page-action": "Previous page" +} diff --git a/packages/components/src/pagination/messages/index.ts b/packages/components/src/pagination/messages/index.ts new file mode 100644 index 0000000000..7093d13cdd --- /dev/null +++ b/packages/components/src/pagination/messages/index.ts @@ -0,0 +1,27 @@ +import bg from './bg.json' +import de from './de.json' +import en from './en.json' +import es from './es.json' +import fr from './fr.json' +import it from './it.json' +import ja from './ja.json' +import ko from './ko.json' +import nl from './nl.json' +import pt from './pt.json' +import ro from './ro.json' +import th from './th.json' + +export const messages = { + 'en-US': en, + 'es-AR': es, + 'fr-FR': fr, + 'pt-BR': pt, + 'ja-JP': ja, + 'ko-KR': ko, + 'it-IT': it, + 'nl-NL': nl, + 'ro-RO': ro, + 'bg-BG': bg, + 'th-TH': th, + 'de-DE': de, +} diff --git a/packages/components/src/pagination/messages/it.json b/packages/components/src/pagination/messages/it.json new file mode 100644 index 0000000000..a5e1911473 --- /dev/null +++ b/packages/components/src/pagination/messages/it.json @@ -0,0 +1,7 @@ +{ + "size-select": "Show {size}", + "page-select": "{page} of {pages}", + "total-label": "{total} items", + "next-page-action": "Next page", + "previous-page-action": "Previous page" +} diff --git a/packages/components/src/pagination/messages/ja.json b/packages/components/src/pagination/messages/ja.json new file mode 100644 index 0000000000..a5e1911473 --- /dev/null +++ b/packages/components/src/pagination/messages/ja.json @@ -0,0 +1,7 @@ +{ + "size-select": "Show {size}", + "page-select": "{page} of {pages}", + "total-label": "{total} items", + "next-page-action": "Next page", + "previous-page-action": "Previous page" +} diff --git a/packages/components/src/pagination/messages/ko.json b/packages/components/src/pagination/messages/ko.json new file mode 100644 index 0000000000..a5e1911473 --- /dev/null +++ b/packages/components/src/pagination/messages/ko.json @@ -0,0 +1,7 @@ +{ + "size-select": "Show {size}", + "page-select": "{page} of {pages}", + "total-label": "{total} items", + "next-page-action": "Next page", + "previous-page-action": "Previous page" +} diff --git a/packages/components/src/pagination/messages/nl.json b/packages/components/src/pagination/messages/nl.json new file mode 100644 index 0000000000..a5e1911473 --- /dev/null +++ b/packages/components/src/pagination/messages/nl.json @@ -0,0 +1,7 @@ +{ + "size-select": "Show {size}", + "page-select": "{page} of {pages}", + "total-label": "{total} items", + "next-page-action": "Next page", + "previous-page-action": "Previous page" +} diff --git a/packages/components/src/pagination/messages/pt.json b/packages/components/src/pagination/messages/pt.json new file mode 100644 index 0000000000..1bbb282818 --- /dev/null +++ b/packages/components/src/pagination/messages/pt.json @@ -0,0 +1,7 @@ +{ + "size-select": "Mostrar {size}", + "page-select": "{page} de {pages}", + "total-label": "{total} itens", + "next-page-action": "Próxima página", + "previous-page-action": "Página anterior" +} diff --git a/packages/components/src/pagination/messages/ro.json b/packages/components/src/pagination/messages/ro.json new file mode 100644 index 0000000000..a5e1911473 --- /dev/null +++ b/packages/components/src/pagination/messages/ro.json @@ -0,0 +1,7 @@ +{ + "size-select": "Show {size}", + "page-select": "{page} of {pages}", + "total-label": "{total} items", + "next-page-action": "Next page", + "previous-page-action": "Previous page" +} diff --git a/packages/components/src/pagination/messages/th.json b/packages/components/src/pagination/messages/th.json new file mode 100644 index 0000000000..a5e1911473 --- /dev/null +++ b/packages/components/src/pagination/messages/th.json @@ -0,0 +1,7 @@ +{ + "size-select": "Show {size}", + "page-select": "{page} of {pages}", + "total-label": "{total} items", + "next-page-action": "Next page", + "previous-page-action": "Previous page" +} diff --git a/packages/components/src/pagination/pagination.tsx b/packages/components/src/pagination/pagination.tsx index 0fbf7ab531..419a4452c1 100644 --- a/packages/components/src/pagination/pagination.tsx +++ b/packages/components/src/pagination/pagination.tsx @@ -8,6 +8,11 @@ import './pagination.css' import { SelectOption } from '../select' import { Skeleton } from '../skeleton' import { PaginationSelect } from './pagination-select' +import { createMessageHook } from '../locale' +import { messages } from './messages' + +const useMessage = createMessageHook(messages) + /** * Pagination triggers allow merchants to view the size of a list and navigate between pages. * @@ -35,14 +40,17 @@ export const Pagination = forwardRef( ...otherProps } = props - const hasSizes = sizeOptions.length > 0 + const getMessage = useMessage() - const totalPages = useMemo(() => Math.ceil(total / size), [total, size]) + const hasSizes = sizeOptions.length > 0 - const pageOptions = useMemo(() => { + const { totalPages, pageOptions } = useMemo(() => { const totalPages = Math.ceil(total / size) + const pageOptions = Array(totalPages) + .fill(1) + .map((_, index) => index + 1) - return [...Array(totalPages).keys()].slice(1) + return { totalPages, pageOptions } }, [total, size]) return ( @@ -54,19 +62,19 @@ export const Pagination = forwardRef( value={size} options={sizeOptions} onValueChange={(value) => onSizeChange?.(value)} - label={`Show ${size}`} + label={getMessage('size-select', { size })} disabled={loading} > {(option) => ( - Show {option} + {getMessage('size-select', { size: option })} )} )}
- {loading ? : `${total} items`} + {loading ? : getMessage('total-label', { total })}
@@ -76,7 +84,7 @@ export const Pagination = forwardRef( onPageChange?.(page - 1, 'prev') }} disabled={page === 1 || loading} - aria-label="Previous page" + aria-label={getMessage('previous-page-action')} data-sl-pagination-action-prev > @@ -88,7 +96,10 @@ export const Pagination = forwardRef( value={page} options={pageOptions} loading={loading} - label={`${page} of ${pageOptions.length}`} + label={getMessage('page-select', { + page, + pages: totalPages, + })} > {(option) => ( {option} @@ -101,7 +112,7 @@ export const Pagination = forwardRef( onPageChange?.(page + 1, 'next') }} disabled={page === totalPages || loading} - aria-label="Next page" + aria-label={getMessage('next-page-action')} data-sl-pagination-action-next > diff --git a/packages/components/src/pagination/stories/pagination.stories.tsx b/packages/components/src/pagination/stories/pagination.stories.tsx index bbce5368bf..04e1c00726 100644 --- a/packages/components/src/pagination/stories/pagination.stories.tsx +++ b/packages/components/src/pagination/stories/pagination.stories.tsx @@ -3,6 +3,7 @@ import './style.css' import React, { useState } from 'react' import { Pagination } from '../index' +import { LocaleProvider } from '../../locale' export default { title: 'shoreline-components/pagination', @@ -57,3 +58,24 @@ export function Loading() {
) } + +export function Intl() { + const [pagination, setPagination] = useState({ page: 1, size: 25 }) + + return ( + +
+ { + setPagination((prev) => ({ ...prev, page })) + }} + total={100} + sizeOptions={[25, 50, 100]} + size={pagination.size} + onSizeChange={(size) => setPagination((prev) => ({ ...prev, size }))} + /> +
+ + ) +}