diff --git a/plugins/search-react/src/components/SearchPagination/SearchPagination.stories.tsx b/plugins/search-react/src/components/SearchPagination/SearchPagination.stories.tsx
index eca668d165..c23fb1e863 100644
--- a/plugins/search-react/src/components/SearchPagination/SearchPagination.stories.tsx
+++ b/plugins/search-react/src/components/SearchPagination/SearchPagination.stories.tsx
@@ -47,11 +47,15 @@ export const Default = () => {
};
export const CustomPageLimitLabel = () => {
- return ;
+ return ;
};
export const CustomPageLimitText = () => {
- return `${from}-${to}`} />;
+ return (
+ `${from}-${to} of more than ${to}`}
+ />
+ );
};
export const CustomPageLimitOptions = () => {
diff --git a/plugins/search-react/src/components/SearchPagination/SearchPagination.test.tsx b/plugins/search-react/src/components/SearchPagination/SearchPagination.test.tsx
index 723a8a0031..6e4abcdbda 100644
--- a/plugins/search-react/src/components/SearchPagination/SearchPagination.test.tsx
+++ b/plugins/search-react/src/components/SearchPagination/SearchPagination.test.tsx
@@ -47,7 +47,7 @@ describe('SearchPagination', () => {
expect(screen.getByText('Results per page:')).toBeInTheDocument();
expect(screen.getByText('25')).toBeInTheDocument();
- expect(screen.getByText('1-25 of more than 25')).toBeInTheDocument();
+ expect(screen.getByText('1-25')).toBeInTheDocument();
expect(screen.getByLabelText('Next page')).toBeEnabled();
expect(screen.getByLabelText('Previous page')).toBeDisabled();
});
@@ -88,12 +88,14 @@ describe('SearchPagination', () => {
await renderWithEffects(
- `${from}-${to}`} />
+ `${from}-${to} of more than ${to}`}
+ />
,
);
- expect(screen.getByText('1-25')).toBeInTheDocument();
+ expect(screen.getByText('1-25 of more than 25')).toBeInTheDocument();
});
it('Accept custom page limit options', async () => {
@@ -153,7 +155,7 @@ describe('SearchPagination', () => {
await userEvent.click(screen.getByLabelText('Next page'));
- expect(screen.getByText('51-75 of more than 75')).toBeInTheDocument();
+ expect(screen.getByText('51-75')).toBeInTheDocument();
expect(query).toHaveBeenLastCalledWith(
expect.objectContaining({
@@ -163,7 +165,7 @@ describe('SearchPagination', () => {
await userEvent.click(screen.getByLabelText('Previous page'));
- expect(screen.getByText('26-50 of more than 50')).toBeInTheDocument();
+ expect(screen.getByText('26-50')).toBeInTheDocument();
expect(query).toHaveBeenLastCalledWith(
expect.objectContaining({
diff --git a/plugins/search-react/src/components/SearchPagination/SearchPagination.tsx b/plugins/search-react/src/components/SearchPagination/SearchPagination.tsx
index c0d1c127c8..e5807832e9 100644
--- a/plugins/search-react/src/components/SearchPagination/SearchPagination.tsx
+++ b/plugins/search-react/src/components/SearchPagination/SearchPagination.tsx
@@ -110,7 +110,7 @@ export const SearchPaginationBase = (props: SearchPaginationBaseProps) => {
onPageCursorChange,
pageLimit: rowsPerPage = 25,
pageLimitLabel: labelRowsPerPage = 'Results per page:',
- pageLimitText: labelDisplayedRows,
+ pageLimitText: labelDisplayedRows = ({ from, to }) => `${from}-${to}`,
pageLimitOptions: rowsPerPageOptions,
onPageLimitChange,
...rest