[core] feat(Breadcrumb): render icon if provided through props (#3786)

palantir · Nov 3, 2019 · dd6e610 · dd6e610
1 parent 0da1787
commit dd6e610
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 2 deletions.
diff --git a/packages/core/src/components/breadcrumbs/_breadcrumbs.scss b/packages/core/src/components/breadcrumbs/_breadcrumbs.scss
@@ -53,7 +53,8 @@ Styleguide breadcrumbs
 .#{$ns}-breadcrumb,
 .#{$ns}-breadcrumb-current,
 .#{$ns}-breadcrumbs-collapsed {
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
   font-size: $pt-font-size-large;
 }
 
@@ -71,6 +72,10 @@ Styleguide breadcrumbs
     cursor: not-allowed;
     color: $pt-text-color-disabled;
   }
+
+  .#{$ns}-icon {
+    margin-right: $pt-grid-size / 2;
+  }
 }
 
 .#{$ns}-breadcrumb-current {

diff --git a/packages/core/src/components/breadcrumbs/breadcrumb.tsx b/packages/core/src/components/breadcrumbs/breadcrumb.tsx
@@ -19,6 +19,7 @@ import * as React from "react";
 
 import * as Classes from "../../common/classes";
 import { IActionProps, ILinkProps } from "../../common/props";
+import { Icon } from "../icon/icon";
 
 export interface IBreadcrumbProps extends IActionProps, ILinkProps {
     /** Whether this breadcrumb is the current breadcrumb. */
@@ -34,9 +35,13 @@ export const Breadcrumb: React.SFC<IBreadcrumbProps> = breadcrumbProps => {
         },
         breadcrumbProps.className,
     );
+
+    const icon = breadcrumbProps.icon != null ? <Icon icon={breadcrumbProps.icon} /> : undefined;
+
     if (breadcrumbProps.href == null && breadcrumbProps.onClick == null) {
         return (
             <span className={classes}>
+                {icon}
                 {breadcrumbProps.text}
                 {breadcrumbProps.children}
             </span>
@@ -50,6 +55,7 @@ export const Breadcrumb: React.SFC<IBreadcrumbProps> = breadcrumbProps => {
             tabIndex={breadcrumbProps.disabled ? null : 0}
             target={breadcrumbProps.target}
         >
+            {icon}
             {breadcrumbProps.text}
             {breadcrumbProps.children}
         </a>

diff --git a/packages/core/test/breadcrumbs/breadcrumbTests.tsx b/packages/core/test/breadcrumbs/breadcrumbTests.tsx
@@ -19,7 +19,7 @@ import { shallow } from "enzyme";
 import * as React from "react";
 import { spy } from "sinon";
 
-import { Breadcrumb, Classes } from "../../src/index";
+import { Breadcrumb, Classes, Icon } from "../../src/index";
 
 describe("Breadcrumb", () => {
     it("renders its contents", () => {
@@ -50,4 +50,9 @@ describe("Breadcrumb", () => {
         assert.lengthOf(shallow(<Breadcrumb />).find("a"), 0);
         assert.lengthOf(shallow(<Breadcrumb />).find("span"), 1);
     });
+
+    it("renders an icon if one is provided", () => {
+        assert.lengthOf(shallow(<Breadcrumb />).find(Icon), 0);
+        assert.lengthOf(shallow(<Breadcrumb icon="folder-close" />).find(Icon), 1);
+    });
 });