DOP-1220 Search Results Part 1: Generic Pagination #231
Conversation
| const canIncrementPage = useMemo(() => currentPage < totalPages, [currentPage, totalPages]); | ||
| return ( | ||
| <PaginationContainer> | ||
| <PaginationButton |
There was a problem hiding this comment.
Any reason you went with this approach rather than LeafyGreen's IconButton?
There was a problem hiding this comment.
Ah, didn't even know that was a thing! I swapped over to it, thanks!
There was a problem hiding this comment.
Thanks for the quick fix! I'm looking at the staging link now and am not seeing the hover state for the icon buttons (demo here). Any idea why?
There was a problem hiding this comment.
Ah they are disabled right now (mainly because there is no data so no pagination), but specifically:
- We are at page 1, so decrementing is disabled
- We are beyond the last page, so incrementing is disabled
When they are re-enabled once we have data, I'll double check for that hover state
| /* Below removes default hover effects from button */ | ||
| background-image: none; | ||
| border: none; | ||
| box-shadow: none; | ||
| :before { | ||
| display: none; | ||
| } | ||
| :after { | ||
| display: none; | ||
| } |
There was a problem hiding this comment.
We probably don't need this anymore
|
|
||
| const PaginationButton = styled(IconButton)` | ||
| background-color: #fff; | ||
| height: ${BUTTON_HEIGHT}; |
There was a problem hiding this comment.
[nit] Perhaps it would be better to use IconButton's size prop, but either way!
There was a problem hiding this comment.
Ah, well it turns out the default size is the same as this!
|
Thanks Sophie! |
Staging Guides
Staging Ecosystem
^ For these I just left the dropdown open for easier inspection. That is not a change made in this PR.
This PR adds a generic
Paginationcomponent to be used with search results. I also added interaction and snapshot testing for it. This component lets a parent component control the current page and enables/disables actions accordingly.