[EuiBreadcrumbs] Always show collapsed items & Amsterdam update to [EuiHeaderBreadcrumbs]

CHANGELOG.md

@@ -2,13 +2,19 @@
 
 - Added `useEuiTextDiff` react hook utility ([#3288](https://github.com/elastic/eui/pull/3288))
 - Converted `EuiOverlayMask` to be a React functional component ([#3555](https://github.com/elastic/eui/pull/3555))
+- Changed `responsive` and `max` behavior of `EuiBreadcrumbs` to always display collapsed items in popover [#3578](https://github.com/elastic/eui/pull/3578))
 
 **Bug fixes**
 
 - Added `display` prop to `EuiDataGridColumnSortingDraggable` to pass` displayAsText` prop correctly to the column sorting popover.([#3574](https://github.com/elastic/eui/pull/3574))
 - Fixed `EuiCodeBlockImpl` testenv mock pass-through of `data-test-subj` attribute ([#3560](https://github.com/elastic/eui/pull/3560))
 - Fixed DOM element creation issues in `EuiOverlayMask` by using lifecycle methods ([#3555](https://github.com/elastic/eui/pull/3555))
 
+**Theme: Amsterdam**
+
+- Updated `EuiCallout` by removing left border, adding border radius and increasing font weight on titles ([#3557](https://github.com/elastic/eui/pull/3557/))
+- Updated `EuiHeaderBreadcrumbs` style to be more prominent ([#3578](https://github.com/elastic/eui/pull/3578/))
+
 ## [`25.0.0`](https://github.com/elastic/eui/tree/v25.0.0)
 
 - Added conditional rendering of the title element in `EuiCallOut` to avoid usage of additional space caused by the rendered `<div>` element ([#3549](https://github.com/elastic/eui/pull/3549))
@@ -26,11 +32,6 @@
 - Improved `EuiPagination`, `EuiDataGrid`, `EuiBasicTable` and `EuiInMemoryTable` accessibility, causing `EuiPaginationButton` to require a new prop `pageIndex` ([#3294](https://github.com/elastic/eui/pull/3294))
 - Replaced all usages of [`KeyboardEvent.keyCode`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode) (deprecated) with [`KeyboardEvent.key`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key). From `@elastic/eui/lib/services`, `keyCodes` has been replaced with `keys`, as has `cascadingMenuKeyCodes`->`cascadingMenuKeys`, and `comboBoxKeyCodes`->`comboBoxKeys`.  The implementation of all of those exports (as well as `accessibleClickKeys`) all now use `KeyboardEvent.key` values. ([#3517](https://github.com/elastic/eui/pull/3517))
 
-**Theme: Amsterdam**
-
-- Updated `EuiCallout` by removing left border, adding border radius and increasing font weight on titles ([#3557](https://github.com/elastic/eui/pull/3557/))
-
-
 ## [`24.1.0`](https://github.com/elastic/eui/tree/v24.1.0)
 
 - Added `displayAsText` prop to `EuiDataGridColumn` ([#3520](https://github.com/elastic/eui/pull/3520))

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

@@ -1,8 +1,9 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 
 import {
   EuiBreadcrumbs,
   EuiButton,
+  EuiPageContent,
   EuiPageContentHeader,
   EuiPageContentHeaderSection,
   EuiTitle,
@@ -19,15 +20,9 @@ export default () => {
         console.log('You clicked Animals');
       },
       'data-test-subj': 'breadcrumbsAnimals',
-      className: 'customClass',
     },
     {
       text: 'Reptiles',
-      href: '#',
-      onClick: e => {
-        e.preventDefault();
-        console.log('You clicked Reptiles');
-      },
     },
     {
       text: 'Boa constrictor',
@@ -43,14 +38,13 @@ export default () => {
   ];
 
   return (
-    <Fragment>
+    <EuiPageContent>
       <EuiBreadcrumbs
         breadcrumbs={breadcrumbs}
         truncate={false}
         aria-label="An example of EuiBreadcrumbs"
       />
       <EuiSpacer size="xs" />
-
       <EuiPageContentHeader>
         <EuiPageContentHeaderSection>
           <EuiTitle size="l">
@@ -62,6 +56,6 @@ export default () => {
           <EuiButton>Cancel</EuiButton>
         </EuiPageContentHeaderSection>
       </EuiPageContentHeader>
-    </Fragment>
+    </EuiPageContent>
   );
 };

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

@@ -1,36 +1,20 @@
 import React from 'react';
+import { Link } from 'react-router-dom';
 
 import { renderToHtml } from '../../services';
 
 import { GuideSectionTypes } from '../../components';
 
 import { EuiCode, EuiBreadcrumbs } from '../../../../src/components';
+import { BreadcrumbResponsiveMaxCount, BreadcrumbProps } from './props';
 
 import Breadcrumbs from './breadcrumbs';
 const breadcrumbsSource = require('!!raw-loader!./breadcrumbs');
 const breadcrumbsHtml = renderToHtml(Breadcrumbs);
-const breadcrumbsSnippet = `<EuiBreadcrumbs
-  breadcrumbs={[
-    {
-      text: 'Breadcrumb 1',
-      href: '#',
-    },
-    {
-      text: 'Breadcrumb 2',
-      href: '#',
-    },
-  ]}
-/>
-`;
 
 import Responsive from './responsive';
 const responsiveSource = require('!!raw-loader!./responsive');
 const responsiveHtml = renderToHtml(Responsive);
-const responsiveSnippet = `<EuiBreadcrumbs
-  responsive={false}
-  breadcrumbs={breadcrumbs}
-/>
-`;
 
 import Truncate from './truncate';
 const truncateSource = require('!!raw-loader!./truncate');
@@ -39,22 +23,12 @@ const truncateHtml = renderToHtml(Truncate);
 import Max from './max';
 const maxSource = require('!!raw-loader!./max');
 const maxHtml = renderToHtml(Max);
-const maxSnippet = `<EuiBreadcrumbs
-  max={4}
-  breadcrumbs={breadcrumbs}
-  responsive={false}
-  truncate={false}
-/>
-`;
 
-import Popover from './popover';
-const popoverSource = require('!!raw-loader!./popover');
-const popoverHtml = renderToHtml(Popover);
-const popoverSnippet = `<EuiBreadcrumbs
-  breadcrumbs={breadcrumbs}
-  showPopover
-/>
-`;
+const breadcrumpProps = {
+  EuiBreadcrumbs,
+  EuiBreadcrumb: BreadcrumbProps,
+  EuiBreadcrumbResponsiveMaxCount: BreadcrumbResponsiveMaxCount,
+};
 
 export const BreadcrumbsExample = {
   title: 'Breadcrumbs',
@@ -77,37 +51,63 @@ export const BreadcrumbsExample = {
           <EuiCode>href</EuiCode> prop on any breadcrumb item that you wish to
           make clickable, including the last item, though we recommend the last
           item represent the current page and therefore the link is unnecessary.
-          They work well within <strong>EuiPageContentHeader</strong> but be
-          careful not to use them within an app that also uses{' '}
-          <strong>EuiHeaderBreadcrumbs</strong>.
+          They work well within{' '}
+          <Link to="/layout/page">
+            <strong>EuiPageContentHeader</strong>
+          </Link>{' '}
+          but be careful not to use them within an app that also uses{' '}
+          <Link to="/layout/header">
+            <strong>EuiHeaderBreadcrumbs</strong>
+          </Link>
+          .
         </p>
       ),
-      props: { EuiBreadcrumbs },
-      snippet: breadcrumbsSnippet,
+      props: breadcrumpProps,
+      snippet: `<EuiBreadcrumbs
+  breadcrumbs={[
+    {
+      text: 'Breadcrumb 1',
+      href: '#',
+    },
+    {
+      text: 'Breadcrumb 2',
+      href: '#',
+    },
+  ]}
+  aria-label=""
+/>
+`,
       demo: <Breadcrumbs />,
     },
     {
-      title: 'Responsive',
+      title: 'Limit the number of breadcrumbs',
       source: [
         {
           type: GuideSectionTypes.JS,
-          code: responsiveSource,
+          code: maxSource,
         },
         {
           type: GuideSectionTypes.HTML,
-          code: responsiveHtml,
+          code: maxHtml,
         },
       ],
       text: (
-        <p>
-          The <EuiCode>responsive</EuiCode> prop will hide breadcrumbs on
-          narrower screens. Set it to false when you want to keep breadcrumb
-          items visible at all screens sizes.
-        </p>
+        <>
+          <p>
+            Use the <EuiCode>max</EuiCode> prop to collapse breadcrumbs beyond a
+            certain number. The center breadcrumbs will collpase into a single
+            item allowing the user to navigate these items from within a
+            popover.
+          </p>
+        </>
       ),
-      props: { EuiBreadcrumbs },
-      snippet: responsiveSnippet,
-      demo: <Responsive />,
+      props: breadcrumpProps,
+      snippet: `<EuiBreadcrumbs
+  max={4}
+  breadcrumbs={breadcrumbs}
+  aria-label=""
+/>`,
+      demo: <Max />,
     },
     {
       title: 'Truncate each breadcrumb',
@@ -122,69 +122,82 @@ export const BreadcrumbsExample = {
         },
       ],
       text: (
-        <div>
+        <>
           <p>
-            There are two ways to <EuiCode>truncate</EuiCode> breadcrumbs,
+            <strong>EuiBreadcrumbs</strong> will truncate the full set by
+            default, forcing it to a single line and setting a max width on all
+            items except for the last. You can turn this off by setting{' '}
+            <EuiCode language="ts">{'truncate={false}'}</EuiCode>. You can also
+            force truncation on single breadcrumb <strong>item</strong> by
+            adding <EuiCode>{'truncate: true'}</EuiCode>.
           </p>
-          <ol>
-            <li>on the individual breadcrumb item,</li>
-            <li>
-              on the full <strong>EuiBreadcrumbs</strong> 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 },
+      props: breadcrumpProps,
       demo: <Truncate />,
-    },
+      snippet: [
+        `<EuiBreadcrumbs
+  truncate={true}
+  breadcrumbs={breadcrumbs}
+  aria-label=""
+/>`,
+        `<EuiBreadcrumbs
+  truncate={false}
+  breadcrumbs={[
     {
-      title: 'Limit the number of breadcrumbs',
-      source: [
-        {
-          type: GuideSectionTypes.JS,
-          code: maxSource,
-        },
-        {
-          type: GuideSectionTypes.HTML,
-          code: maxHtml,
-        },
+      text: 'Breadcrumb',
+      truncate: true,
+    }
+  ]}
+  aria-label=""
+/>`,
       ],
-      text: (
-        <p>
-          Use the <EuiCode>max</EuiCode> prop to cull breadcrumbs beyond a
-          certain number. By default, this number is 5.
-        </p>
-      ),
-      props: { EuiBreadcrumbs },
-      snippet: maxSnippet,
-      demo: <Max />,
     },
     {
-      title: 'Show the hidden items in a popover',
+      title: 'Responsive',
       source: [
         {
           type: GuideSectionTypes.JS,
-          code: popoverSource,
+          code: responsiveSource,
         },
         {
           type: GuideSectionTypes.HTML,
-          code: popoverHtml,
+          code: responsiveHtml,
         },
       ],
       text: (
-        <p>
-          When the breadcrumbs need to be truncated, but you wish to still allow
-          users to navigate to any item in the list, you can use the{' '}
-          <EuiCode>showMaxPopover</EuiCode> prop. When used with the{' '}
-          <EuiCode>max</EuiCode> prop, the hidden breadcrumbs will be rendered
-          into an <strong>EuiPopover</strong>.
-        </p>
+        <>
+          <p>
+            <strong>EuiBreadcrumbs</strong> are <EuiCode>responsive</EuiCode> by
+            default and will collapse breadcrumbs on narrower screens. Setting{' '}
+            <EuiCode language="ts">{'responsive={false}'}</EuiCode> will keep
+            all breadcrumbs visible at all screens sizes.
+          </p>
+          <p>
+            Alternatively, you can change number of breadcrumbs that show per
+            breakpoint by passing a custom responsive object.
+          </p>
+        </>
       ),
-      props: { EuiBreadcrumbs },
-      snippet: popoverSnippet,
-      demo: <Popover />,
+      props: breadcrumpProps,
+      snippet: [
+        `<EuiBreadcrumbs
+  responsive={false}
+  max={null}
+  breadcrumbs={breadcrumbs}
+  aria-label=""
+/>`,
+        `<EuiBreadcrumbs
+  responsive={{
+    xs: 2,
+    s: 5,
+  }}
+  max={null}
+  breadcrumbs={breadcrumbs}
+  aria-label=""
+/>`,
+      ],
+      demo: <Responsive />,
     },
   ],
 };

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

@@ -41,8 +41,6 @@ export default () => {
     <EuiBreadcrumbs
       max={4}
       breadcrumbs={breadcrumbs}
-      responsive={false}
-      truncate={false}
       aria-label="An example of EuiBreadcrumbs with specifying max prop"
     />
   );