[EuiBreadcrumb] Allow to configure max-width for truncation

[Dosant]

Is your feature request related to a problem? Please describe.

In Kibana we'd like to increase the max-width of the first breadcrumb before it is truncated. The default max-width is pretty short and this is user generated title we don't have control over.
elastic/kibana#170758.

Currently the truncation max-width is static 160px

eui/src/components/breadcrumbs/breadcrumb.styles.ts

Lines 74 to 76 in 9c891fa

	isTruncated: css`
	${euiTextTruncate(mathWithUnits(euiTheme.size.base, (x) => x * 10))}
	`,

We don't want to disable truncation completely

Describe the solution you'd like

Expose a maxWidth prop on EUIBreadcrumb

Describe alternatives you've considered

I think we could hack it with css on Kibana side

Desired timeline

If this doesn't look like a short term fix, please let us know, we could override with css short term.

Additional context

In case you'd have any other suggestions, would love to consider them

[tkajtoch]

Hi @Dosant! This sounds like something that should be configurable. I'll look deeper into it tomorrow and see if we could make this option generic enough to be introduced straight into EUI. I'll keep you posted!

[cee-chen]

Can we clarify the requirements/spec of this a bit?

• Is the ask for a single breadcrumbMaxWidth prop on the parent <EuiBreadcrumbs> that allows configuring every single child breadcrumb in 1 go?
• Or does there also need to be a maxWidth prop on the breadcrumbs items array, so that each individual <EuiBreadcrumb> can set its own unique max-width depending on its content?

[Dosant]

@cee-chen, for elastic/kibana#170758, we're specifically interested in maxWidth prop for each individual breadcrumb, as we'd like to increase maxWidth only for the first breadcrumb

[cee-chen]

Thanks for clarifying Anton! For completeness, we'd likely want to support both.

[cee-chen]

@Dosant Actually, if you only need to increase the max width of a single specific breadcrumb, can you consider simply passing a single inline style prop to that breadcrumb object instead?

<EuiBreadcrumbs
  breadcrumbs={[
    { text: 'First long untruncated breadcrumb', style: { maxWidth: '100%' }, // Or none, or 500px, or whatever
    { text: 'Second truncated normal breadcrumb', href: '#' },
  ]}
/>

Example CodeSandbox: https://codesandbox.io/s/agitated-architecture-28svh6?file=/demo.tsx:241-298

[Dosant]

@cee-chen,

@Dosant Actually, if you only need to increase the max width of a single specific breadcrumb, can you consider simply passing a single inline style prop to that breadcrumb object instead?

<EuiBreadcrumbs
  breadcrumbs={[
    { text: 'First long untruncated breadcrumb', style: { maxWidth: '100%' }, // Or none, or 500px, or whatever
    { text: 'Second truncated normal breadcrumb', href: '#' },
  ]}
/>

Example CodeSandbox: https://codesandbox.io/s/agitated-architecture-28svh6?file=/demo.tsx:241-298

@cee-chen, I'll give it a try. If it works, then great!
I thought that the workaround would be ugly as it would require overriding css through internal eui classes, but if this style prop works, then lgtm

---

Update: I opened a pr in Kibana, seems like style: { maxWidth does the job. Go ahead and close this issue if the workaround looks good

[cee-chen]

Hooray! Thanks Anton. Based on what you've described for your specific use case, I think we'd prefer to have this be a one-off / implemented on Kibana's side of things.

Since this is the first time it's come up in years, I don't think configuring the truncation max width is a very common use case, so I'm going to close this as not planned for now. That being said, if anyone else has a more generic use case in the future, we'd certainly be open to re-opening this issue or creating a new one!