Better breadcrumb truncation

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)
 

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: (
-      <p>
-        <EuiCode>EuiBreadcrumbs</EuiCode> let the user track their progress within and back out of
-        a UX flow. They work well within <EuiCode>EuiPageContentHeader</EuiCode> but be careful
-        not to be use them within an app that also uses <EuiCode>EuiHeaderBreadcrumbs</EuiCode>.
-      </p>
-    ),
-    props: { EuiBreadcrumbs },
-    demo: <Breadcrumbs />,
-  }, {
-    title: 'Responsive',
-    source: [{
-      type: GuideSectionTypes.JS,
-      code: responsiveSource,
-    }, {
-      type: GuideSectionTypes.HTML,
-      code: responsiveHtml,
-    }],
-    text: (
-      <p>
-        The <EuiCode>responsive</EuiCode> prop will hide breadcrumbs on narrower screens.
-      </p>
-    ),
-    props: { EuiBreadcrumbs },
-    demo: <Responsive />,
-  }, {
-    title: 'Truncate each breadcrumb',
-    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 />,
-  }, {
-    title: 'Limit the number of breadcrumbs',
-    source: [{
-      type: GuideSectionTypes.JS,
-      code: maxSource,
-    }, {
-      type: GuideSectionTypes.HTML,
-      code: maxHtml,
-    }],
-    text: (
-      <p>
-        Use the <EuiCode>max</EuiCode> prop to cull breadcrumbs beyond a certain number. By default,
-        this number is 5.
-      </p>
-    ),
-    props: { EuiBreadcrumbs },
-    demo: <Max />,
-  }],
+  sections: [
+    {
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: breadcrumbsSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: breadcrumbsHtml,
+        },
+      ],
+      text: (
+        <p>
+          <EuiCode>EuiBreadcrumbs</EuiCode> let the user track their progress within and back out of
+          a UX flow. They work well within <EuiCode>EuiPageContentHeader</EuiCode> but be careful
+          not to be use them within an app that also uses <EuiCode>EuiHeaderBreadcrumbs</EuiCode>.
+        </p>
+      ),
+      props: { EuiBreadcrumbs },
+      demo: <Breadcrumbs />,
+    },
+    {
+      title: 'Responsive',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: responsiveSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: responsiveHtml,
+        },
+      ],
+      text: (
+        <p>
+          The <EuiCode>responsive</EuiCode> prop will hide breadcrumbs on narrower screens.
+        </p>
+      ),
+      props: { EuiBreadcrumbs },
+      demo: <Responsive />,
+    },
+    {
+      title: 'Truncate each breadcrumb',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: truncateSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: truncateHtml,
+        },
+      ],
+      text: (
+        <div>
+          <p>
+            There are two ways to <EuiCode>truncate</EuiCode> breadrumbs,
+          </p>
+          <ol>
+            <li>on the individual breadrcrumb item,</li>
+            <li>
+              on the full <EuiCode>EuiBreadcrumbs</EuiCode> set which will force the full set to a
+              single line, while setting a max width on all items except for the last.
+            </li>
+          </ol>
+        </div>
+      ),
+      props: { EuiBreadcrumbs },
+      demo: <Truncate />,
+    },
+    {
+      title: 'Limit the number of breadcrumbs',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: maxSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: maxHtml,
+        },
+      ],
+      text: (
+        <p>
+          Use the <EuiCode>max</EuiCode> prop to cull breadcrumbs beyond a certain number. By
+          default, this number is 5.
+        </p>
+      ),
+      props: { EuiBreadcrumbs },
+      demo: <Max />,
+    },
+  ],
 };

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

@@ -1,44 +1,51 @@
 import React, { Fragment } from 'react';
 
-import {
-  EuiBreadcrumbs,
-  EuiShowFor,
-  EuiText,
-} from '../../../../src/components';
+import { EuiBreadcrumbs, EuiShowFor, EuiText } from '../../../../src/components';
 
 export default () => {
-  const breadcrumbs = [{
-    text: 'Animals',
-    href: '#',
-  }, {
-    text: 'Metazoans',
-    href: '#',
-  }, {
-    text: 'Chordates',
-    href: '#',
-  }, {
-    text: 'Vertebrates',
-    href: '#',
-  }, {
-    text: 'Tetrapods',
-    href: '#',
-  }, {
-    text: 'Reptiles',
-    href: '#',
-  }, {
-    text: 'Boa constrictor',
-    href: '#',
-  }, {
-    text: 'Nebulosa subspecies',
-  }];
+  const breadcrumbs = [
+    {
+      text: 'Animals',
+      href: '#',
+    },
+    {
+      text: 'Metazoans',
+      href: '#',
+    },
+    {
+      text: 'Chordates',
+      href: '#',
+    },
+    {
+      text: 'Vertebrates',
+      href: '#',
+    },
+    {
+      text: 'Tetrapods',
+      href: '#',
+    },
+    {
+      text: 'Reptiles',
+      href: '#',
+    },
+    {
+      text: 'Boa constrictor',
+      href: '#',
+    },
+    {
+      text: 'Nebulosa subspecies',
+    },
+  ];
 
   return (
     <Fragment>
       <EuiBreadcrumbs breadcrumbs={breadcrumbs} max={null} />
 
       <EuiShowFor sizes={['xs', 's']}>
         <EuiText size="s" color="subdued">
-          <p><em>Responsive breadcrumbs do not show at all on small (mobile) screens.</em></p>
+          <p>
+            <em>Only the last item will show on small (mobile) screens.</em>
+          </p>
         </EuiText>
       </EuiShowFor>
     </Fragment>

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 <EuiBreadcrumbs responsive={false} breadcrumbs={breadcrumbs} />;
+  return (
+    <div>
+      <EuiTitle size="xs">
+        <span>Truncation on a single item</span>
+      </EuiTitle>
+      <EuiSpacer size="s" />
+      <EuiBreadcrumbs responsive={false} truncate={false} breadcrumbs={breadcrumbs} />
+      <EuiSpacer />
+      <EuiTitle size="xs">
+        <span>Truncation on the entire set</span>
+      </EuiTitle>
+      <EuiSpacer size="s" />
+      <EuiBreadcrumbs responsive={false} truncate={true} breadcrumbs={breadcrumbs} />
+    </div>
+  );
 };