Better breadcrumb truncation

[cchaos]

Before this PR, applying truncation to EuiBreadcrumbs would max-width every breadcrumb to 160px. This caused some issues with the last item being unnecessarily truncated.

In this PR, I've altered the way EuiBreadcrumbs handle the truncate prop as well as added the ability to add truncate to individual breadcrumbs.

The new behavior is this:

1. Applying truncate to an individual breadcrumb (in the breadcrumbs object prop) will singly max-width that breadcrumb at 160px. This allows for more granular handling of the truncation ability.
2. Applying truncate to the whole EuiBreadcrumbs component, will contain the whole thing to a single line of text and max-width every breadcrumb at 160px except for the last item. This last item will still truncate if it meets the right side of the container.

EuiHeader

In order for these to truncate properly, the breadcrumb container had to be a direct child of the EuiHeader. This means, that the breadcrumbs need to be pulled out of a EuiHeaderSection. This meant I had to alter/add some of the props for those items as well.

Example of it working

https://d.pr/free/v/6Ge7ZD

Checklist

• This was checked in mobile
• This was checked in IE11
• This was checked in dark mode
• Any props added have proper autodocs
• Documentation examples were added
• A changelog entry exists and is marked appropriately
• This was checked for breaking changes and labeled appropriately
• Jest tests were updated or added to match the most common scenarios
• [ ] This was checked against keyboard-only and screenreader scenarios
• [ ] This required updates to Framer X components

[snide]

Tested in IE11 for ya..... and it works fine :)

Left some small comments on the docs. This is a clever solution and works much better than the original.

[cchaos]

Awesome, thank you for testing in IE @snide!!

[snide]

I thought about that. It's not technically, because it's just a pattern. I think it's ok as long as we immediately make the change on upgrade. Cloud doesn't use breadcrumbs so I think we are ok. Some communication should be enough.

…

On Wed, Dec 5, 2018, 6:55 AM Caroline Horn ***@***.*** wrote: ***@***.**** commented on this pull request. ------------------------------ In src-docs/src/views/header/header.js <#1346 (comment)>: > </EuiHeaderSection> + {this.renderBreadcrumbs()} Would this be considered a breaking a change? That the breadcrumbs need to shift it's location within the EuiHeader dom, though it's just a pattern and not a component? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1346 (review)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AATzp_hl632xWF6hN06J_XV_Nw9s2wDsks5u195NgaJpZM4ZBvg9> .

[cchaos]

Sounds good! Thanks!

[spalger]

Looks awesome and works great in the docs, doesn't work in Kibana though. Probably not a blocker for merging this PR:

[cchaos]

@spalger, Sorry I wasn't too clear on the changes that need to be made in the EuiHeader. But in order for this to work properly, the EuiHeaderBreadcrumbs needs to be a direct descendant of EuiHeader and not inside of a EuiHeaderSection. If you alter the implementation like so:

Then it will behave like so:

erg, something's broke with github's embedded img's, here's the link: https://d.pr/free/i/zplxwe