Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[EuiPagination] Extract PaginationButton creation #5048

Merged
merged 9 commits into from
Aug 19, 2021

Conversation

thompsongl
Copy link
Contributor

@thompsongl thompsongl commented Aug 18, 2021

Summary

Fixes #5046, in which EuiPagination failed to update state in EuiResizableContainer. The problem was not with EuiResizableContainer specifically, but could occur anytime a pagination change resulted in a parent rerender. Because the internal PaginationButton component was created inside another component, it was recreated with old state on every rerender.

The solution here is to extract PaginationButton creation, eliminating rerender recreation.

See the to-be-reverted change in the first EuiResizableContainer example for verification.

Checklist

- [ ] Check against all themes for compatibility in both light and dark modes
- [ ] Checked in mobile

  • Checked in Chrome, Safari, Edge, and Firefox

- [ ] Props have proper autodocs and playground toggles
- [ ] Added documentation

- [ ] Added or updated jest tests

  • Checked for breaking changes and labeled appropriately
  • Checked for accessibility including keyboard-only and screenreader modes
  • A changelog entry exists and is marked appropriately
  • Reverted revert me docs commit

@kibanamachine
Copy link

Preview documentation changes for this PR: https://eui.elastic.co/pr_5048/

@thompsongl
Copy link
Contributor Author

10:23:39 Errors on tp://localhost:9999/#/layout/resizable-container
10:24:18 [landmark-unique]: Landmarks must have a unique role or role/label/title (i.e. accessible name) combination
10:24:18 Help: https://dequeuniversity.com/rules/axe/4.1/landmark-unique?application=axe-puppeteer
10:24:18 Elements:
10:24:18 - #resizable-panel_59667c20-0038-11ec-b1bd-7d3c9fc90fde > .euiPanel--transparent.euiResizablePanel__content.euiResizablePanel__content--scrollable > .euiPagination
10:24:18 1 accessibility errors

CI errors will be resolved when the docs change is reverted

Copy link
Member

@cee-chen cee-chen left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

QA'd the fix and it looks great! Super impressed by the clean and elegant solution to the problem also, huge kudos. Feel free to revert the resizable documentation example - I'll approve after that.

I mostly have small comments/questions that are by no means blockers, but would def appreciate your thoughts!

src/components/pagination/pagination.tsx Show resolved Hide resolved
src/components/pagination/pagination.tsx Outdated Show resolved Hide resolved
src/components/pagination/pagination.tsx Outdated Show resolved Hide resolved
src/components/pagination/pagination.tsx Outdated Show resolved Hide resolved
@kibanamachine
Copy link

Preview documentation changes for this PR: https://eui.elastic.co/pr_5048/

Copy link
Member

@cee-chen cee-chen left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Changes look great - thanks a million Greg!

I think resizable_container_basic.js changes still need to be reverted, but other than that looks GTG!

@kibanamachine
Copy link

Preview documentation changes for this PR: https://eui.elastic.co/pr_5048/

@kibanamachine
Copy link

Preview documentation changes for this PR: https://eui.elastic.co/pr_5048/

@thompsongl thompsongl merged commit 5910360 into elastic:master Aug 19, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[EuiResizableContainer] EuiPagination doesn't work inside EuiResizableContainer
3 participants