diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0891ddbc49d..d740c707ed8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,7 @@
## [`master`](https://github.com/elastic/eui/tree/master)
-No public interface changes since `5.4.0`.
+- Altered functionality of `truncate` on `EuiBreadcrumbs` and added `truncate` ability on breadcrumb item ([#1346](https://github.com/elastic/eui/pull/1346))
+- Altered `EuiHeader`'s location of `EuiHeaderBreadcrumbs` based on the new `truncate` ability ([#1346](https://github.com/elastic/eui/pull/1346))
## [`5.4.0`](https://github.com/elastic/eui/tree/v5.4.0)
diff --git a/src-docs/src/views/breadcrumbs/breadcrumbs_example.js b/src-docs/src/views/breadcrumbs/breadcrumbs_example.js
index 5917e2c1dba..f8783118949 100644
--- a/src-docs/src/views/breadcrumbs/breadcrumbs_example.js
+++ b/src-docs/src/views/breadcrumbs/breadcrumbs_example.js
@@ -2,14 +2,9 @@ import React from 'react';
import { renderToHtml } from '../../services';
-import {
- GuideSectionTypes,
-} from '../../components';
+import { GuideSectionTypes } from '../../components';
-import {
- EuiCode,
- EuiBreadcrumbs,
-} from '../../../../src/components';
+import { EuiCode, EuiBreadcrumbs } from '../../../../src/components';
import Breadcrumbs from './breadcrumbs';
const breadcrumbsSource = require('!!raw-loader!./breadcrumbs');
@@ -29,71 +24,97 @@ const maxHtml = renderToHtml(Max);
export const BreadcrumbsExample = {
title: 'Breadcrumbs',
- sections: [{
- source: [{
- type: GuideSectionTypes.JS,
- code: breadcrumbsSource,
- }, {
- type: GuideSectionTypes.HTML,
- code: breadcrumbsHtml,
- }],
- text: (
-
- EuiBreadcrumbs let the user track their progress within and back out of
- a UX flow. They work well within EuiPageContentHeader but be careful
- not to be use them within an app that also uses EuiHeaderBreadcrumbs .
-
- ),
- props: { EuiBreadcrumbs },
- demo:
- The responsive prop will hide breadcrumbs on narrower screens.
-
- ),
- props: { EuiBreadcrumbs },
- demo:
- The truncate prop will truncate breadcrumbs which are too long.
-
- ),
- props: { EuiBreadcrumbs },
- demo:
- Use the max prop to cull breadcrumbs beyond a certain number. By default,
- this number is 5.
-
- ),
- props: { EuiBreadcrumbs },
- demo:
+ EuiBreadcrumbs let the user track their progress within and back out of
+ a UX flow. They work well within EuiPageContentHeader but be careful
+ not to be use them within an app that also uses EuiHeaderBreadcrumbs .
+
+ ),
+ props: { EuiBreadcrumbs },
+ demo:
+ The responsive prop will hide breadcrumbs on narrower screens.
+
+ ),
+ props: { EuiBreadcrumbs },
+ demo:
+
+ There are two ways to truncate breadrumbs,
+
+
+ on the individual breadrcrumb item,
+
+ on the full EuiBreadcrumbs set which will force the full set to a
+ single line, while setting a max width on all items except for the last.
+
+
+
+ Use the max prop to cull breadcrumbs beyond a certain number. By
+ default, this number is 5.
+
+ ),
+ props: { EuiBreadcrumbs },
+ demo:
@@ -38,7 +43,9 @@ export default () => {
- Responsive breadcrumbs do not show at all on small (mobile) screens.
+
+ Only the last item will show on small (mobile) screens.
+
diff --git a/src-docs/src/views/breadcrumbs/truncate.js b/src-docs/src/views/breadcrumbs/truncate.js
index c8929e7b8e6..726b8b24dc6 100644
--- a/src-docs/src/views/breadcrumbs/truncate.js
+++ b/src-docs/src/views/breadcrumbs/truncate.js
@@ -1,19 +1,56 @@
import React from 'react';
-import {
- EuiBreadcrumbs,
-} from '../../../../src/components';
+import { EuiBreadcrumbs, EuiSpacer, EuiTitle } from '../../../../src/components';
export default () => {
- const breadcrumbs = [{
- text: 'Animals',
- href: '#',
- }, {
- text: 'Metazoans is a real mouthful, especially for creatures without mouths',
- href: '#',
- }, {
- text: 'Nebulosa subspecies',
- }];
+ const breadcrumbs = [
+ {
+ text: 'Animals',
+ href: '#',
+ },
+ {
+ text: 'Metazoans is a real mouthful, especially for creatures without mouths',
+ href: '#',
+ truncate: true,
+ },
+ {
+ text: 'Chordates',
+ href: '#',
+ },
+ {
+ text: 'Vertebrates',
+ href: '#',
+ },
+ {
+ text: 'Tetrapods',
+ href: '#',
+ },
+ {
+ text: 'Reptiles',
+ href: '#',
+ },
+ {
+ text: 'Boa constrictor',
+ href: '#',
+ },
+ {
+ text: 'Nebulosa subspecies is also a real mouthful, especially for creatures without mouths',
+ },
+ ];
- return
+
+ Truncation on a single item
+
+
+ Truncation on the entire set
+
+
+ );
};
diff --git a/src-docs/src/views/header/header.js b/src-docs/src/views/header/header.js
index 5eb311aad2e..20b21c34950 100644
--- a/src-docs/src/views/header/header.js
+++ b/src-docs/src/views/header/header.js
@@ -1,6 +1,4 @@
-import React, {
- Component,
-} from 'react';
+import React, { Component } from 'react';
import {
EuiHeader,
@@ -22,46 +20,57 @@ export default class extends Component {
}
renderLogo() {
- return (
-
-
);
}
@@ -69,21 +78,17 @@ export default class extends Component {
render() {
return (
-
-
- {this.renderLogo()}
-
+
+ {this.renderLogo()}
-
- {this.renderBreadcrumbs()}
+ {this.renderBreadcrumbs()}
+
-
- {this.renderSearch()}
-
+ {this.renderSearch()}
@@ -238,10 +238,10 @@ exports[`EuiBreadcrumbs props responsive is rendered 1`] = `
`;
-exports[`EuiBreadcrumbs props truncate is rendered 1`] = `
+exports[`EuiBreadcrumbs props truncate as false is rendered 1`] = `
{
breadcrumbsAtStart.push(
;
-export const EuiBreadcrumbs = ({
- breadcrumbs,
- className,
- responsive,
- truncate,
- max,
- ...rest,
-}) => {
+export const EuiBreadcrumbs = ({ breadcrumbs, className, responsive, truncate, max, ...rest }) => {
const breadcrumbElements = breadcrumbs.map((breadcrumb, index) => {
const {
text,
href,
onClick,
+ truncate,
className: breadcrumbClassName,
...breadcrumbRest
} = breadcrumb;
@@ -68,6 +59,7 @@ export const EuiBreadcrumbs = ({
const breadcrumbClasses = classNames('euiBreadcrumb', breadcrumbClassName, {
'euiBreadcrumb--last': isLastBreadcrumb,
+ 'euiBreadcrumb--truncate': truncate,
});
let link;
@@ -76,11 +68,11 @@ export const EuiBreadcrumbs = ({
link = (
- { text }
+ {text}
);
} else {
@@ -90,7 +82,7 @@ export const EuiBreadcrumbs = ({
href={href}
onClick={onClick}
className={breadcrumbClasses}
- title={truncate ? text : undefined}
+ title={text}
{...breadcrumbRest}
>
{text}
@@ -128,14 +120,39 @@ export const EuiBreadcrumbs = ({
EuiBreadcrumbs.propTypes = {
className: PropTypes.string,
+
+ /**
+ * Hides left most breadcrumbs as window gets smaller
+ */
responsive: PropTypes.bool,
+
+ /**
+ * Forces all breadcrumbs to single line and
+ * truncates each breadcrumb to a particular width,
+ * except for the last item
+ */
truncate: PropTypes.bool,
+
+ /**
+ * Condenses the inner items past the maximum set here
+ * into a single ellipses item
+ */
max: PropTypes.number,
- breadcrumbs: PropTypes.arrayOf(PropTypes.shape({
- text: PropTypes.node.isRequired,
- href: PropTypes.string,
- onClick: PropTypes.func,
- })).isRequired,
+
+ /**
+ * The array of individual breadcrumbs, takes the following props.
+ * `text` (node) (required): visible label of the breadcrumb,
+ * `href` or `onClick`: provide only one (last breadcrumb will not apply either),
+ * `truncate` (bool): Force a max-width on the breadcrumb text
+ */
+ breadcrumbs: PropTypes.arrayOf(
+ PropTypes.shape({
+ text: PropTypes.node.isRequired,
+ href: PropTypes.string,
+ onClick: PropTypes.func,
+ truncate: PropTypes.bool,
+ })
+ ).isRequired,
};
EuiBreadcrumbs.defaultProps = {
diff --git a/src/components/breadcrumbs/breadcrumbs.test.js b/src/components/breadcrumbs/breadcrumbs.test.js
index 309c9edd223..3c5d73b1824 100644
--- a/src/components/breadcrumbs/breadcrumbs.test.js
+++ b/src/components/breadcrumbs/breadcrumbs.test.js
@@ -18,6 +18,7 @@ describe('EuiBreadcrumbs', () => {
}, {
text: 'Boa constrictor',
href: '#',
+ truncate: true,
}, {
text: 'Edit',
}];
@@ -47,9 +48,9 @@ describe('EuiBreadcrumbs', () => {
});
});
- describe('truncate', () => {
+ describe('truncate as false', () => {
test('is rendered', () => {
- const component = render(