From ea8149f04c0d5fbc03505ad9119984073f0ab80e Mon Sep 17 00:00:00 2001 From: cchaos Date: Tue, 4 Dec 2018 18:19:58 -0500 Subject: [PATCH 1/6] Better breadcrumb truncation --- .../views/breadcrumbs/breadcrumbs_example.js | 169 ++++++++++-------- src-docs/src/views/breadcrumbs/responsive.js | 67 +++---- src-docs/src/views/breadcrumbs/truncate.js | 63 +++++-- src-docs/src/views/header/header.js | 91 +++++----- .../__snapshots__/breadcrumbs.test.js.snap | 34 +--- src/components/breadcrumbs/_breadcrumbs.scss | 37 +++- src/components/breadcrumbs/breadcrumbs.js | 49 +++-- src/components/breadcrumbs/max.js | 0 .../header_breadcrumbs.test.js.snap | 4 - .../_header_breadcrumbs.scss | 9 + .../header_breadcrumbs/header_breadcrumbs.js | 8 +- .../__snapshots__/header_section.test.js.snap | 8 +- .../header_section/_header_section.scss | 7 +- .../header/header_section/header_section.js | 16 +- 14 files changed, 328 insertions(+), 234 deletions(-) delete mode 100644 src/components/breadcrumbs/max.js 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: , - }, { - title: 'Responsive', - source: [{ - type: GuideSectionTypes.JS, - code: responsiveSource, - }, { - type: GuideSectionTypes.HTML, - code: responsiveHtml, - }], - text: ( -

- The responsive prop will hide breadcrumbs on narrower screens. -

- ), - props: { EuiBreadcrumbs }, - demo: , - }, { - title: 'Truncate each breadcrumb', - source: [{ - type: GuideSectionTypes.JS, - code: truncateSource, - }, { - type: GuideSectionTypes.HTML, - code: truncateHtml, - }], - text: ( -

- The truncate prop will truncate breadcrumbs which are too long. -

- ), - props: { EuiBreadcrumbs }, - demo: , - }, { - title: 'Limit the number of breadcrumbs', - source: [{ - type: GuideSectionTypes.JS, - code: maxSource, - }, { - type: GuideSectionTypes.HTML, - code: maxHtml, - }], - text: ( -

- Use the max prop to cull breadcrumbs beyond a certain number. By default, - this number is 5. -

- ), - props: { EuiBreadcrumbs }, - demo: , - }], + 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: , + }, + { + title: 'Responsive', + source: [ + { + type: GuideSectionTypes.JS, + code: responsiveSource, + }, + { + type: GuideSectionTypes.HTML, + code: responsiveHtml, + }, + ], + text: ( +

+ The responsive prop will hide breadcrumbs on narrower screens. +

+ ), + props: { EuiBreadcrumbs }, + demo: , + }, + { + title: 'Truncate each breadcrumb', + source: [ + { + type: GuideSectionTypes.JS, + code: truncateSource, + }, + { + type: GuideSectionTypes.HTML, + code: truncateHtml, + }, + ], + text: ( +
+

+ There are two ways to truncate breadrumbs, +

+
    +
  1. on the individual breadrcrumb item,
    2. +
  2. + 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. +
    3. +
+
+ ), + props: { EuiBreadcrumbs }, + demo: , + }, + { + title: 'Limit the number of breadcrumbs', + source: [ + { + type: GuideSectionTypes.JS, + code: maxSource, + }, + { + type: GuideSectionTypes.HTML, + code: maxHtml, + }, + ], + text: ( +

+ Use the max prop to cull breadcrumbs beyond a certain number. By + default, this number is 5. +

+ ), + props: { EuiBreadcrumbs }, + demo: , + }, + ], }; diff --git a/src-docs/src/views/breadcrumbs/responsive.js b/src-docs/src/views/breadcrumbs/responsive.js index c93dd817bdf..2c37e6b319a 100644 --- a/src-docs/src/views/breadcrumbs/responsive.js +++ b/src-docs/src/views/breadcrumbs/responsive.js @@ -1,36 +1,41 @@ 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 ( @@ -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..cfbd4937786 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', + }, + ]; - return ; + 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 ( - - ); + return ; } renderBreadcrumbs() { - const breadcrumbs = [{ - text: 'Management', - href: '#', - onClick: (e) => { e.preventDefault(); console.log('You clicked management'); }, - 'data-test-subj': 'breadcrumbsAnimals', - className: 'customClass', - }, { - text: 'Truncation test is here for a really long item', - href: '#', - onClick: (e) => { e.preventDefault(); console.log('You clicked truncation test'); }, - }, { - text: 'hidden', - href: '#', - onClick: (e) => { e.preventDefault(); console.log('You clicked hidden'); }, - }, { - text: 'Users', - href: '#', - onClick: (e) => { e.preventDefault(); console.log('You clicked users'); }, - }, { - text: 'Create', - }]; + const breadcrumbs = [ + { + text: 'Management', + href: '#', + onClick: e => { + e.preventDefault(); + console.log('You clicked management'); + }, + 'data-test-subj': 'breadcrumbsAnimals', + className: 'customClass', + }, + { + text: 'Truncation test is here for a really long item', + href: '#', + onClick: e => { + e.preventDefault(); + console.log('You clicked truncation test'); + }, + }, + { + text: 'hidden', + href: '#', + onClick: e => { + e.preventDefault(); + console.log('You clicked hidden'); + }, + }, + { + text: 'Users', + href: '#', + onClick: e => { + e.preventDefault(); + console.log('You clicked users'); + }, + }, + { + text: 'Create', + }, + ]; - return ( - - ); + return ; } renderSearch() { return ( - + ); } @@ -69,21 +78,17 @@ export default class extends Component { render() { return ( - - - {this.renderLogo()} - + + {this.renderLogo()} - - {this.renderBreadcrumbs()} + {this.renderBreadcrumbs()} + - - {this.renderSearch()} - + {this.renderSearch()} diff --git a/src/components/breadcrumbs/__snapshots__/breadcrumbs.test.js.snap b/src/components/breadcrumbs/__snapshots__/breadcrumbs.test.js.snap index 8c4389b1ccc..f7662dae970 100644 --- a/src/components/breadcrumbs/__snapshots__/breadcrumbs.test.js.snap +++ b/src/components/breadcrumbs/__snapshots__/breadcrumbs.test.js.snap @@ -3,14 +3,13 @@ exports[`EuiBreadcrumbs is rendered 1`] = ` `; -exports[`EuiBreadcrumbs props truncate is rendered 1`] = ` +exports[`EuiBreadcrumbs props truncate as false is rendered 1`] = `