From 6c349be92b5e7e41b5dd30afd8a82408177e1c53 Mon Sep 17 00:00:00 2001 From: Elisa Shapiro <83474365+ElisaShapiro@users.noreply.github.com> Date: Tue, 24 Sep 2024 10:07:56 -0400 Subject: [PATCH] [PBNTR-532] Add multiple pagination components example and dynamic key copy (#3715) **What does this PR do?** A clear and concise description with your runway ticket url. [PBNTR-532](https://runway.powerhrg.com/backlog_items/PBNTR-532) updates the react pagination kit doc example and copy to show a dev how to implement dynamic keys to keep multiple pagination components on a page in sync. **Screenshots:** Screenshots to visualize your addition/change for PR page change doc example and copy **How to test?** Steps to confirm the desired behavior: 1. Go to the react pagination kit page [Page Change doc example](https://pr3715.playbook.beta.px.powerapp.cloud/kits/pagination/react#page-change) and see the updated copy. 2. Click on any number or the forward/backward carets in either the top or bottom pagination bar: the table data should update and both pagination bars should update to the new activePage number. #### Checklist: - [x] **LABELS** Add a label: `enhancement`, `bug`, `improvement`, `new kit`, `deprecated`, or `breaking`. See [Changelog & Labels](https://github.com/powerhome/playbook/wiki/Changelog-&-Labels) for details. - [x] **DEPLOY** I have added the `milano` label to show I'm ready for a review. ~~- [ ] **TESTS** I have added test coverage to my code.~~ Co-authored-by: Nida Ghuman --- .../pb_pagination/docs/_pagination_page_change.jsx | 13 ++++++++++++- .../docs/_pagination_page_change_react.md | 4 +++- 2 files changed, 15 insertions(+), 2 deletions(-) diff --git a/playbook/app/pb_kits/playbook/pb_pagination/docs/_pagination_page_change.jsx b/playbook/app/pb_kits/playbook/pb_pagination/docs/_pagination_page_change.jsx index b5c97e6fc6..3a3a4718d7 100644 --- a/playbook/app/pb_kits/playbook/pb_pagination/docs/_pagination_page_change.jsx +++ b/playbook/app/pb_kits/playbook/pb_pagination/docs/_pagination_page_change.jsx @@ -22,6 +22,16 @@ const PaginationPageChange = (props) => { return (
+ + {