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

Allow nested EuiAccordions #2136

Merged
merged 10 commits into from
Jul 19, 2019
Merged

Conversation

thompsongl
Copy link
Contributor

@thompsongl thompsongl commented Jul 17, 2019

Summary

Fixes #2129, in which an EuiAccordion with an EuiAccordion as a child element does not account for height change when the nested accordion opens.
More generally, EuiAccordion will now account for more than just nested instances, but any style mutation on children elements.
The solution involves abstracting a transition delay/duration service out of EuiPopover. These services work with MutationObserver to sum transition timings and run a callback using requestAnimationFrame

Checklist

- [ ] This was checked in mobile
- [ ] This was checked in IE11
- [ ] This was checked in dark mode
- [ ] Any props added have proper autodocs

  • Documentation examples were added
  • A changelog entry exists and is marked appropriately

- [ ] This was checked for breaking changes and labeled appropriately

- [ ] Jest tests were updated or added to match the most common scenarios

- [ ] This was checked against keyboard-only and screenreader scenarios
- [ ] This required updates to Framer X components

@chandlerprall chandlerprall self-requested a review July 18, 2019 14:43
src/services/transition/transition.ts Outdated Show resolved Hide resolved
src/services/transition/transition.ts Outdated Show resolved Hide resolved
src/services/transition/transition.ts Show resolved Hide resolved
src/services/transition/transition.ts Outdated Show resolved Hide resolved
@thompsongl
Copy link
Contributor Author

As far as I can tell, jsdom doesn't allow for setting the full gamut of style properties. CSSStyleDeclaration never gets the correct values for transition properties, even with browser prefixing. As such, I haven't found a way to test the added services, as they rely on reading CSSStyleDeclaration values.

@thompsongl thompsongl marked this pull request as ready for review July 18, 2019 19:10
Copy link
Contributor

@chandlerprall chandlerprall left a comment

Choose a reason for hiding this comment

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

Played with some testing ideas, it would be far more work than worth it to test for a regression here.

LGTM; pulled & tested locally

@thompsongl thompsongl merged commit c5ceab9 into elastic:master Jul 19, 2019
@thompsongl thompsongl deleted the 2129-accordion branch July 19, 2019 17:54
@snide snide mentioned this pull request Jul 22, 2019
7 tasks
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.

EuiAccordion with EuiAccordion inside changes height incorrectly
2 participants