-
Notifications
You must be signed in to change notification settings - Fork 837
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[EuiBreadcrumb] Extend HTMLElement
and EuiLink.color
& [EuiPageHeader] Adding breadcrumbs
as an option
#5634
Conversation
Preview documentation changes for this PR: https://eui.elastic.co/pr_5634/ |
breadcrumbs
as an optionHTMLElement
and EuiLink.color
& [EuiPageHeader] Adding breadcrumbs
as an option
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This PR is ready for review. I didn't point it to the EuiPageTemplate feature PR because it's not really dependent on any of that work.
Also, I do need some help in a couple of places.
Preview documentation changes for this PR: https://eui.elastic.co/pr_5634/ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM! 🎉
Tested in Chrome, Safari, Edge, and Firefox.
const breadcrumbs: EuiBreadcrumb[] = [ | ||
{ | ||
text: 'Animals', | ||
href: '#', | ||
color: 'primary', | ||
onClick: (e: { preventDefault: () => void }) => { | ||
e.preventDefault(); | ||
}, | ||
}, | ||
{ | ||
text: 'Reptiles', | ||
color: 'primary', | ||
}, | ||
{ | ||
text: ( | ||
<> | ||
<EuiIcon type="alert" size="s" /> Boa constrictor | ||
</> | ||
), | ||
title: 'Boa constrictor has an error', | ||
href: '#', | ||
color: 'danger', | ||
onClick: (e: { preventDefault: () => void }) => { | ||
e.preventDefault(); | ||
}, | ||
}, | ||
{ | ||
text: 'Edit', | ||
}, | ||
]; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Maybe you can provide a better real-world example.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Is animal classification not real world? 🤣
Preview documentation changes for this PR: https://eui.elastic.co/pr_5634/ |
Co-authored-by: Greg Thompson <thompson.glowe@gmail.com>
Preview documentation changes for this PR: https://eui.elastic.co/pr_5634/ |
1 similar comment
Preview documentation changes for this PR: https://eui.elastic.co/pr_5634/ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Code changes LGTM!
Preview documentation changes for this PR: https://eui.elastic.co/pr_5634/ |
Preview documentation changes for this PR: https://eui.elastic.co/pr_5634/ |
EuiBreadcrumbs
Each EuiBreadcrumb now extends a basic
HTMLElement
in order to customize thetitle
for indicating things like alerts, as well ascolor
from EuiLink (but only if rendering as an EuiLink otherwise it stays subdued).EuiPageHeader
I've been seeing more and more patterns of folks introducing breadcrumbs, or at the very least a "Return" link, to the top of the page header. This PR adds this ability directly into
EuiPageHeader
via a newbreadcrumbs
prop.Checklist
[ ] Checked for breaking changes and labeled appropriately