[Page Layouts] Adding content props to EuiPageHeader for pre-determined page layout patterns

[cchaos]

To make it easier for Elastic products to follow the new page layout patterns, this PR adds some content-specific props for passing in things like pageTitle, and tabs. The left side content is the most prescriptive because there really are only a few options for how the titling, description and/or tabs should be handled. However, there's a wide variety of ways our products will utilize the right side of the page header, so I've opted to keep that one less specific.

The new docs section explains it best.

This PR doesn't quite handle any Amsterdam specific theming or how the page header interacts with other page components yet. That will be forthcoming.

Also, to note, in order to make the component easier to manage, there is a new component called EuiPageHeaderContent which just handles the display of the content-specific props.

Checklist

• Check against all themes for compatibility in both light and dark modes
• Checked in mobile
• Checked in Chrome, Safari, Edge, and Firefox
• Props have proper autodocs and playground toggles
• Added documentation
• Checked Code Sandbox works for the any docs examples
• Added or updated jest tests
• [ ] Checked for breaking changes and labeled appropriately
• Checked for accessibility including keyboard-only and screenreader modes
• A changelog entry exists and is marked appropriately

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_4451/

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_4451/

[thompsongl]

Both comments (somewhat) addressed in cchaos#39
Not at all happy with the current method to toggle simulated content, but wanted to be sure this is what you were thinking.

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_4451/

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_4451/

[thompsongl]

👉 cchaos#40

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_4451/

[snide]

@cchaos PR for you cchaos#41

This is great!

I found the docs needed some clarity around the new components. I primarily wanted the main example to show off the full, common layout that you're driving for. I know this is just a temporary state till you add more to it, but the previous example only told a partial story and with big "family" docs like these, I think it's good to start big and then break down the components as you read. Before it seemed to jump around a bit in the order (first page and header, then page, then header, then back to page).

This gave me a moment to get familiar with the new code, which worked really well. Only commentary there is that maybe you might want to label rightSideContent as something more generic. Will it always be on the right? Never know! From a prop naming standpoint some of the props use prefixes: pageTitle vs. description and tabs. I don't think matters which, but best to stick with one or the other. Preference would be to just use title?

[cchaos]

Thanks @snide ! I've gone through your PR and did a couple updates before merging as well.

Only commentary there is that maybe you might want to label rightSideContent as something more generic. Will it always be on the right? Never know!

Yes it will. 😉 There's no way for users not to have it be on the right.

pageTitle vs. description and tabs. I don't think matters which, but best to stick with one or the other. Preference would be to just use title

I had this thought too but that would conflict with the regular HTML DOM property title.

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_4451/

[elizabetdev]

I love the way you thought about all the props. It makes the EuiPageHeader much more flexible. 🎉

Tested in Chrome, Firefox, Edge, and Safari, and it looks good. I just have a few suggestions.

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_4451/

[thompsongl]

Just a couple small TS things and a question

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_4451/

[thompsongl]

LGTM after the CL update 👍

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_4451/