[EuiHeader] Added sections and position props#2928
Conversation
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_2928/ |
|
Hmm, don't review this PR just yet, I've got a truncation issue with the breadcrumbs. |
sections and position propssections and position props
|
I take this one back for now, I want to rethink it some more. This is originally just the quick way I did it in the K8 POC, but I don't think it's the right solution. Since I can't put into draft status, it is in WIP status. |
sections and position propssections and position props
|
Ok, I think I came up with a better solution and I've pulled this back into read for review status. |
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_2928/ |
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_2928/ |
|
I really need to start making sure I push my changes before I create or update PR's. I'm really sorrry @thompsongl & @snide if you've already starting looking at this, but apparently I never pushed my last commit which actually fixes it from my last attempt. It is now up to date. 😑 |
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_2928/ |
|
jenkins, test this |
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_2928/ |
thompsongl
left a comment
There was a problem hiding this comment.
Code changes LGTM
Need to rebase or merge master and update the CL entry
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_2928/ |
elizabetdev
left a comment
There was a problem hiding this comment.
I reviewed the code and the build preview and everything LGTM! 🎉
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_2928/ |
Continuing support for new nav updates
Sections
One of the most complex components to build is the EuiHeader. There are 6 different components you have to weave together the right way to display in the header.
This PR is an attempt to simplify a portion of that by allowing the user to pass
sectionsinstead ofchildren.The docs example basically spits out the same content as the example above it but in 20 less lines of code (where it matters: in the render).
The passed prop looks something like this:
Where
itemsis just an array of nodes, andbreadcrumbsis an array of breadcrumbs. All the truncation should work properly and each section is spaced viaspace-between.Position
I also decided that we should be managing the fixed position since we also know the height of the header. So I added the prop
positionwhich defaults tostaticbut if changed tofixedwill also apply a class to the window body with the correct padding.Checklist
[ ] Checked for breaking changes and labeled appropriately[ ] Checked for accessibility including keyboard-only and screenreader modes