Add truncate prop.

src-docs/src/views/breadcrumbs/breadcrumbs_example.js

@@ -19,6 +19,10 @@ import Responsive from './responsive';
 const responsiveSource = require('!!raw-loader!./responsive');
 const responsiveHtml = renderToHtml(Responsive);
 
+import Truncate from './truncate';
+const truncateSource = require('!!raw-loader!./truncate');
+const truncateHtml = renderToHtml(Truncate);
+
 export const BreadcrumbsExample = {
   title: 'Breadcrumbs',
   sections: [{
@@ -54,5 +58,21 @@ export const BreadcrumbsExample = {
     ),
     props: { EuiBreadcrumbs },
     demo: <Responsive />,
+  }, {
+    title: 'Truncate',
+    source: [{
+      type: GuideSectionTypes.JS,
+      code: truncateSource,
+    }, {
+      type: GuideSectionTypes.HTML,
+      code: truncateHtml,
+    }],
+    text: (
+      <p>
+        The <EuiCode>truncate</EuiCode> prop will truncate breadcrumbs which are too long.
+      </p>
+    ),
+    props: { EuiBreadcrumbs },
+    demo: <Truncate />,
   }],
 };

src-docs/src/views/breadcrumbs/truncate.js

@@ -0,0 +1,19 @@
+import React from 'react';
+
+import {
+  EuiBreadcrumbs,
+} 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',
+  }];
+
+  return <EuiBreadcrumbs breadcrumbs={breadcrumbs} truncate />;
+};

src/components/breadcrumbs/__snapshots__/breadcrumbs.test.js.snap

@@ -62,3 +62,24 @@ exports[`EuiBreadcrumbs props responsive is rendered 1`] = `
   </span>
 </div>
 `;
+
+exports[`EuiBreadcrumbs props truncate is rendered 1`] = `
+<div
+  class="euiBreadcrumbs euiBreadcrumbs--truncate"
+>
+  <button
+    class="euiLink euiLink--subdued euiBreadcrumb"
+    type="button"
+  >
+    Animals
+  </button>
+  <div
+    class="euiBreadcrumbSeparator"
+  />
+  <span
+    class="euiBreadcrumb euiBreadcrumb--last"
+  >
+    Edit
+  </span>
+</div>
+`;

src/components/breadcrumbs/_breadcrumbs.scss

@@ -60,3 +60,12 @@
     }
   }
 }
+
+.euiBreadcrumbs--truncate {
+  .euiBreadcrumb {
+    white-space: nowrap;
+    max-width: 150px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+}

src/components/breadcrumbs/breadcrumbs.js

@@ -8,6 +8,7 @@ export const EuiBreadcrumbs = ({
   breadcrumbs,
   className,
   responsive,
+  truncate,
   ...rest,
 }) => {
   const breadcrumbElements = breadcrumbs.map((breadcrumb, index) => {
@@ -62,6 +63,7 @@ export const EuiBreadcrumbs = ({
   })
 
   const classes = classNames('euiBreadcrumbs', className, {
+    'euiBreadcrumbs--truncate': truncate,
     'euiBreadcrumbs--responsive': responsive,
   });
 
@@ -75,6 +77,7 @@ export const EuiBreadcrumbs = ({
 EuiBreadcrumbs.propTypes = {
   className: PropTypes.string,
   responsive: PropTypes.bool,
+  truncate: PropTypes.bool,
   breadcrumbs: PropTypes.arrayOf(PropTypes.shape({
     text: PropTypes.node.isRequired,
     href: PropTypes.string,

src/components/breadcrumbs/breadcrumbs.test.js

@@ -42,5 +42,12 @@ describe('EuiBreadcrumbs', () => {
         expect(component).toMatchSnapshot();
       });
     });
+
+    describe('truncate', () => {
+      test('is rendered', () => {
+        const component = render(<EuiBreadcrumbs breadcrumbs={breadcrumbs} truncate />);
+        expect(component).toMatchSnapshot();
+      });
+    });
   });
 });