fix(page): fixed fill/scroll with notification drawer#7130
fix(page): fixed fill/scroll with notification drawer#7130mcoker merged 1 commit intopatternfly:mainfrom
Conversation
|
Preview: https://patternfly-pr-7130.surge.sh A11y report: https://patternfly-pr-7130-a11y.surge.sh |
| .#{$drawer}__body > .#{$page}__main { | ||
| height: 100%; | ||
| } | ||
|
|
There was a problem hiding this comment.
Old v5 style, doesn't match the v6 structure.
There was a problem hiding this comment.
Is the drawer body container being removed completely?
There was a problem hiding this comment.
Not from the component, just from the page component structure when the page-main-container/page-main elements are a child of the drawer content. AFAIK the only way to get that structure in react is via <Page notificationDrawer={...}>. So we would just remove the wrapper element <DrawerContentBody> here - https://github.com/patternfly/patternfly-react/blob/5decd6a8bf9632288abdbc98d3cac1902303c04e/packages/react-core/src/components/Page/Page.tsx#L349
There was a problem hiding this comment.
Oh, it looks like it is just in relation to the page and does not impact the drawer component.
|
|
||
| .#{$page}__drawer > .#{$drawer} { | ||
| flex: 1 0 auto; | ||
| .#{$page}__drawer .#{$page}__main-container { |
There was a problem hiding this comment.
There should only be one .#{$page}__main-container in .#{$page}__drawer unless anyone can think of a situation where that isn't the case? cc @srambach @mattnolting @dlabrecq
| .#{$page}__drawer > .#{$drawer} { | ||
| flex: 1 0 auto; | ||
| .#{$page}__drawer .#{$page}__main-container { | ||
| align-self: revert; |
There was a problem hiding this comment.
default for .#{$page}__main-container is align-self: start<
8000
/code> which pushes that element to the top of the page component's grid layout. Since .#{$page}__main-container goes in .#{$drawer}__content (a flex column), that pushes __main-container to the left. This can just be the default/stretch.
| align-self: revert; | ||
|
|
||
| &.pf-m-fill { | ||
| flex-grow: 1; |
There was a problem hiding this comment.
Default for __main-container.pf-m-fill is align-self: stretch which works great in the page grid layout. Since this is in a flex column, it can just grow.
| {{#> drawer}} | ||
| {{#> drawer-main}} | ||
| {{#> drawer-content}} | ||
| {{#> drawer-content drawer-content--NoBody=true}} |
There was a problem hiding this comment.
Just removes drawer__body, so page__main-container is a child of drawer__content, a flex column. Allows us to manage the height/alignment of page__main-container better
There was a problem hiding this comment.
🏎️ Go! Looks awesome, good detecting
There was a problem hiding this comment.
🏎️ Go! Looks awesome, good detecting
To avoid "stacking contexts" problems which avoid sticky page sections behave as expected. Such a workaround will be not needed when migrating to latest versions of PF6, since the problem has been addressed by droping the DrawerContentBody from the Page component, see patternfly/patternfly#7130 and related links See also https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context
fixes #7127