Bug - Page headers - inconsistent with shadow, no shadow, border, no border

[garrett]

Describe the problem

PatternFly page headers (with a title and/or breadcrumbs) are inconsistent. There are demos that have a shadow, demos that have a line, and demos that have neither.

As a result, in Cockpit, we're also inconsistently using headers too.

Expected behavior

Page headers should be styled the same.

---

Has a shadow

https://www.patternfly.org/v4/components/page/react-demos/sticky-section-group/

https://www.patternfly.org/v4/components/page/html-demos/centered-section/

Doesn't have a shadow

https://www.patternfly.org/v4/components/page/react-demos/sticky-section-breadcrumb-with-breakpoints/

(Well, it does have a shadow on the breadcrumbs, but not on the main title part)

https://www.patternfly.org/v4/components/page/html-demos/basic/

https://www.patternfly.org/v4/demos/card-view/react-demos/card-view/

https://www.patternfly.org/v4/demos/dashboard/html-demos/basic/

Uses a border

All the screenshots (except for the first one) in the guidelines for card view use borders to separate the page heading from the content.

https://www.patternfly.org/v4/demos/card-view/design-guidelines

Primary detail uses a border

https://www.patternfly.org/v4/demos/primary-detail/react-demos/primary-detail-full-page/

https://www.patternfly.org/v4/demos/primary-detail/react-demos/primary-detail-content-padding/

https://www.patternfly.org/v4/demos/primary-detail/react-demos/primary-detail-card-view/

https://www.patternfly.org/v4/demos/primary-detail/react-demos/primary-detail-simple-list-in-card/

---

There are many others; these are just some of the 3 main different types I've seen on PatternFly.org.

Cockpit also has this problem as a result, as different people referenced different pages when implementing their own part.

Moreover, something changed in a recent release of PatternFly that had me look into this, where some of the headings that had shadows no longer do. (But some still do.)

Additionally, at least in Cockpit, some of the headers were truncated as the result of having an improper stacking (which seems to become resolved by setting a z-index).

I'm unsure if this is due to some Cockpit-ism or something within PatternFly.

[andrew-ronaldson]

Hey @garrett I reviewed these examples with our PF Designers and it looks like there are two distinctions. Any page header section that is sticky uses the drop shadow to raise it above scrollable content. If the header is scrollable with the rest of the page content it does not have a shadow. One of the examples you shared has a sticky breadcrumb with the dropshadow while the rest of the header scroll beneath it. I can create an issue to better document these distinctions. @lboehling It may be worth having separate variations of the header in the Design Kit for any teams creating mockups. Not sure if that exists in our Sketch kit today?

@mcoker @srambach do you have any thoughts around the issues listed in Garrett's description?

[srambach]

I agree with everything you said @andrew-ronaldson. If there's a rule, let's make sure it's well documented and we are following it in all the examples.

[mcoker]

@andrew-ronaldson that all sounds right to me.

[andrew-ronaldson]

Closed by org issue 3751