nested Drawer components open when parent drawer opens

[christianvogt]

Describe the issue. What is the expected and unexpected behavior?
When a a Drawer contains another Drawer anywhere as a child, as soon as the parent Drawer opens, the child does as well.

Expected each Drawer to operate independently.

Please provide the steps to reproduce. Feel free to link CodeSandbox or another tool.

https://codesandbox.io/s/compassionate-panini-snm5m

Is this a bug or enhancement? If this issue is a bug, is this issue blocking you or is there a work-around?
Bug

What is your product and what release version are you targeting?
OpenShift Console 4.6

[mcoker]

@christianvogt I've filed a core issue to investigate and fix any issues that arise on the CSS side from nesting drawers, including adding a demo to the workspace that we can reference going forward to help ensure no other sorts of issues pop up going forward - patternfly/patternfly#3260. We'll prioritize this in our upcoming sprint.

[kmcfaul]

@mcoker

Tinkering around withe codesandbox, I found that the nested pf-c-drawer-panel gets pf-m-expanded styling applied from an outer expanded container, even when its parent Drawer does not have the modifier applied and the panel has the hidden property. Adding a secondary toggle button to control the second drawer appears to work as intended (toggling pf-m-expanded and the panel hidden property) but the styling doesn't change. When the outer Drawer isn't expanded, the inner Drawer will work as normal, but as soon as the outer Drawer is expanded it forces the expanded styling on the inner Drawer.

Any thoughts about why the panel class may be getting overridden by an outer modifier?

Drawer inside a Drawer body: https://codesandbox.io/s/tender-snowflake-8y3lv
Drawer inside a Drawer panel: https://codesandbox.io/s/jolly-sound-vecgw

[christianvogt]

@mcoker looks like the fix I thought was going to work actually fails at certain breakpoints. Between width is 768 and 1800 the inner drawer remains closed.

This is a priority issue for us now to find a resolution.

[mcoker]

@kmcfaul thanks for digging. We likely have some styles that aren't scoped properly.

@christianvogt

looks like the fix I thought was going to work actually fails at certain breakpoints. Between width is 768 and 1800 the inner drawer remains closed.

Can you include the fix you're referencing? Do you have a codesandbox or build where I can see the issue?

@mattnolting put up a PR (patternfly/patternfly#3268) to resolve patternfly/patternfly#3267 - is that the same issue? I'd love to be able to reproduce that one, too, and see how the entire app is being wrapped in a drawer and what the issue is.

Also resolving this is my priority this sprint as well, and have patternfly/patternfly#3260 where I will be tracking the work.

[christianvogt]

@mcoker my mistake. The breakpoints are actually console breakpoints where the isInline prop gets toggled.

To reproduce the issue you need to place a Drawer with isInline={true} within another drawer. The inner drawer cannot be opened while the outer is closed.

https://codesandbox.io/s/reverent-thompson-1gpz3

[kmcfaul]

patternfly/patternfly#3328

[mcoker]

@kmcfaul patternfly/patternfly#3328 was merged

[kmcfaul]

Issue is resolved in core (patternfly/patternfly#3328) and the version has been updated in react!