fix(menu): removed pf-m-drilldown transition, fixed content height transition #4090
Conversation
|
Preview: https://patternfly-pr-4090.surge.sh A11y report: https://patternfly-pr-4090-coverage.surge.sh CSS Size Report
|
| @@ -173,23 +169,37 @@ | |||
| &.pf-m-drilldown { | |||
| display: flex; | |||
| flex-direction: column; | |||
| transition: var(--pf-c-menu--m-drilldown--Transition); | |||
There was a problem hiding this comment.
I believe this change will fix the original issue. PopperJS is applying transform: translate3d(...) to the outer .pf-c-menu to position the menu relative to the toggle, and this transition on .pf-c-menu.pf-m-drilldown was causing that position to transition in. You can see it if you add className="pf-m-drilldown" to one of the <Menu> components in the composable menu demos.
Unless there's another reason to transition left on the inner menus, I think transitioning translate() is better because it's more performant.
There was a problem hiding this comment.
Also an aside, I found this in the popperJS docs - looks like you may be able to change the way popper positions the menu to stick with top and left positioning if we still have conflicting styles - https://popper.js.org/docs/v2/modifiers/compute-styles/#gpuacceleration.
|
|
||
| .pf-c-menu, | ||
| .pf-c-menu__list { | ||
| transition: var(--pf-c-menu--m-drilldown--Transition); |
There was a problem hiding this comment.
Should this var be renamed?
mattnolting
force-pushed
the
refactor-menu-issue-4062
branch
3 times, most recently
from
9adbda8
to
3222b8b
Compare
mattnolting
force-pushed
the
refactor-menu-issue-4062
branch
from
3222b8b
to
620070d
Compare
mcoker
changed the title
|
🎉 This PR is included in version 4.104.3 🎉 The release is available on: Your semantic-release bot 📦🚀 |
closes #4062