diff --git a/app/components/Table/Pagination.tsx b/app/components/Table/Pagination.tsx index 1d7057005..0ee824e6b 100644 --- a/app/components/Table/Pagination.tsx +++ b/app/components/Table/Pagination.tsx @@ -1,7 +1,5 @@ import React from 'react'; -import { Dropdown, Button } from '@button-inc/bcgov-theme'; -import styled from 'styled-components'; -import TablePagination from '@mui/material/TablePagination'; +import { IconButtonProps, TablePagination } from '@mui/material'; interface Props { /** @@ -25,21 +23,7 @@ export const DEFAULT_PAGE_SIZE = 20; const PAGE_SIZE_OPTIONS = [20, 50, 100]; -const paginationComponents = { - select: Dropdown, - toolbar: styled.div` - display: flex; - font-size: 0.8rem; - justify-content: flex-end; - align-items: baseline; - & > * { - margin-right: 0.5rem; - } - `, -}; - -const actionButtonProps = { - variant: 'secondary', +const actionButtonProps: IconButtonProps = { size: 'small', style: { padding: '0.33rem 0.50rem', @@ -47,29 +31,6 @@ const actionButtonProps = { }, }; -const paginationComponentsProps = { - actions: { - components: { - FirstButton: Button, - LastButton: Button, - NextButton: Button, - BackButton: Button, - }, - componentsProps: { - firstButton: actionButtonProps, - lastButton: actionButtonProps, - nextButton: actionButtonProps, - backButton: actionButtonProps, - }, - showFirstButton: true, - showLastButton: true, - }, - select: { - size: 'small', - style: { width: '3.5rem' }, - }, -}; - const FilterableTablePagination: React.FunctionComponent = ({ totalCount, pageSize = DEFAULT_PAGE_SIZE, @@ -97,16 +58,28 @@ const FilterableTablePagination: React.FunctionComponent = ({ className={disabled ? 'disabled' : ''} > ); diff --git a/app/tests/components/Table/Pagination.test.tsx b/app/tests/components/Table/Pagination.test.tsx index 80ca9c3b7..b329a9792 100644 --- a/app/tests/components/Table/Pagination.test.tsx +++ b/app/tests/components/Table/Pagination.test.tsx @@ -137,9 +137,13 @@ describe('PaginationBar', () => { ); - fireEvent.change(screen.getByLabelText(/items per page/i), { - target: { value: 50 }, + const pageSizeSelect = screen.getByRole('combobox', { + name: /items per page/i, }); + fireEvent.mouseDown(pageSizeSelect); + + const pageSizeOption = screen.getByRole('option', { name: /50/i }); + fireEvent.click(pageSizeOption); expect(handlePageSizeChange).toHaveBeenCalledWith(50); });