From bddb40f1480b3b8d645614606463db0a5839f2be Mon Sep 17 00:00:00 2001 From: Karthik Balasubramanian Date: Sat, 5 May 2018 00:39:25 -0700 Subject: [PATCH 1/3] Fix breadcrum rendering issue #4786 --- .../components/Breadcrumb/Breadcrumb.base.tsx | 17 +- .../components/Breadcrumb/Breadcrumb.test.tsx | 28 + .../__snapshots__/Breadcrumb.test.tsx.snap | 494 ++++++++++++++++++ .../examples/Breadcrumb.Basic.Example.tsx | 2 +- 4 files changed, 533 insertions(+), 8 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.base.tsx b/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.base.tsx index a70ae271a4ff6..8c73965a4dd7a 100644 --- a/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.base.tsx +++ b/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.base.tsx @@ -127,12 +127,13 @@ export class BreadcrumbBase extends BaseComponent { // Find index of last rendered item so the divider icon // knows not to render on that item const lastItemIndex = renderedItems.length - 1; + const hasOverflowItems = renderedOverflowItems && renderedOverflowItems.length !== 0; const itemElements: JSX.Element[] = renderedItems.map( (item, index) => (
  • { onRenderItem(item, this._onRenderItem) } - { index !== lastItemIndex && ( + { (index !== lastItemIndex || (hasOverflowItems && index === overflowIndex! - 1)) && ( {
    • )); - if (renderedOverflowItems && renderedOverflowItems.length !== 0) { + if (hasOverflowItems) { itemElements.splice(overflowIndex!, 0, (
  • { directionalHint: DirectionalHint.bottomLeftEdge } } /> - + { overflowIndex !== lastItemIndex + 1 && ( + + ) }
    • )); } diff --git a/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.test.tsx b/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.test.tsx index 8749931410928..540728c3ef40b 100644 --- a/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.test.tsx +++ b/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.test.tsx @@ -74,6 +74,34 @@ describe('Breadcrumb', () => { const tree = component.toJSON(); expect(tree).toMatchSnapshot(); }); + + it('renders breadcumb correctly 5', () => { + // With maxDisplayedItems and overflowIndex + const component = renderer.create( + + ); + + const tree = component.toJSON(); + expect(tree).toMatchSnapshot(); + }); + + it('renders breadcumb correctly 6', () => { + // With maxDisplayedItems and overflowIndex as 0 + const component = renderer.create( + + ); + + const tree = component.toJSON(); + expect(tree).toMatchSnapshot(); + }); }); it('can call the callback when an item is clicked', () => { diff --git a/packages/office-ui-fabric-react/src/components/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap b/packages/office-ui-fabric-react/src/components/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap index 4c19fa80cd792..e39e23fd37344 100644 --- a/packages/office-ui-fabric-react/src/components/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap +++ b/packages/office-ui-fabric-react/src/components/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap @@ -1359,6 +1359,500 @@ exports[`Breadcrumb basic rendering renders breadcumb correctly 4 1`] = ` `; +exports[`Breadcrumb basic rendering renders breadcumb correctly 5 1`] = ` +
    +
    +
    +
    +
      +
    1. + +
      + TestText1 +
      +       + +  + +
      2. +
    2. + +
      3. +
    +
    +
    +
    +
    +`; + +exports[`Breadcrumb basic rendering renders breadcumb correctly 6 1`] = ` +
    +
    +
    +
    +
      +
    1. + +
      2. +
    +
    +
    +
    +
    +`; + exports[`Breadcrumb renders empty breadcrumb 1`] = `
    { ariaLabel={ 'Website breadcrumb' } /> - + Date: Sat, 5 May 2018 00:40:28 -0700 Subject: [PATCH 2/3] Add change file --- .../office-ui-fabric-react-4786_2018-05-05-07-40.json | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 common/changes/office-ui-fabric-react/office-ui-fabric-react-4786_2018-05-05-07-40.json diff --git a/common/changes/office-ui-fabric-react/office-ui-fabric-react-4786_2018-05-05-07-40.json b/common/changes/office-ui-fabric-react/office-ui-fabric-react-4786_2018-05-05-07-40.json new file mode 100644 index 0000000000000..e9c6356414b00 --- /dev/null +++ b/common/changes/office-ui-fabric-react/office-ui-fabric-react-4786_2018-05-05-07-40.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "Fix breadcrumb rendering issue when overflow index is at last", + "type": "patch" + } + ], + "packageName": "office-ui-fabric-react", + "email": "kabalas@microsoft.com" +} \ No newline at end of file From 6fdd0dfaaf731096b1e04d9d1340d86c9dcddb15 Mon Sep 17 00:00:00 2001 From: Karthik Balasubramanian Date: Mon, 7 May 2018 10:52:38 -0700 Subject: [PATCH 3/3] Included paranthesis to scope the condition correctly --- .../src/components/Breadcrumb/Breadcrumb.base.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.base.tsx b/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.base.tsx index 8c73965a4dd7a..ad53606dcd3ab 100644 --- a/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.base.tsx +++ b/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.base.tsx @@ -133,7 +133,7 @@ export class BreadcrumbBase extends BaseComponent { (item, index) => (
  • { onRenderItem(item, this._onRenderItem) } - { (index !== lastItemIndex || (hasOverflowItems && index === overflowIndex! - 1)) && ( + { (index !== lastItemIndex || (hasOverflowItems && index === (overflowIndex! - 1))) && (