From 2d261e89a0ef3c5d8d555effac6150facedee324 Mon Sep 17 00:00:00 2001
From: Kartik Desai <xdeskart@amazon.com>
Date: Thu, 28 Jul 2022 17:04:39 -0500
Subject: [PATCH] [UX] Restyle global breadcrumbs (#1954)

* Issue-1858 Restyle global breadcrumbs

Signed-off-by: kaddy645 <xdeskart@amazon.com>

* Undo max count

Signed-off-by: kaddy645 <xdeskart@amazon.com>

* update snapshot

Signed-off-by: kaddy645 <xdeskart@amazon.com>

* add svg round-filter

Signed-off-by: kaddy645 <xdeskart@amazon.com>

* update tests

Signed-off-by: kaddy645 <xdeskart@amazon.com>

* spelling err

Signed-off-by: kaddy645 <xdeskart@amazon.com>

* remove un-necessary width

Signed-off-by: kaddy645 <xdeskart@amazon.com>

* pr updates

Signed-off-by: kaddy645 <xdeskart@amazon.com>

* pr updates

Signed-off-by: kaddy645 <xdeskart@amazon.com>

* clean code

Signed-off-by: kaddy645 <xdeskart@amazon.com>
---
 src/core/public/_variables.scss               |  3 +
 .../chrome/public/assets/round_filter.svg     |  8 +++
 .../header/__snapshots__/header.test.tsx.snap | 18 ++++--
 .../header_breadcrumbs.test.tsx.snap          |  6 +-
 .../chrome/ui/header/header_breadcrumbs.scss  | 55 +++++++++++++++++++
 .../chrome/ui/header/header_breadcrumbs.tsx   | 12 +++-
 6 files changed, 92 insertions(+), 10 deletions(-)
 create mode 100644 src/core/public/chrome/public/assets/round_filter.svg
 create mode 100644 src/core/public/chrome/ui/header/header_breadcrumbs.scss

diff --git a/src/core/public/_variables.scss b/src/core/public/_variables.scss
index 9d8077b50ad4..b36b21eb667c 100644
--- a/src/core/public/_variables.scss
+++ b/src/core/public/_variables.scss
@@ -1,3 +1,6 @@
 @import "@elastic/eui/src/global_styling/variables/header";
 
 $osdHeaderOffset: $euiHeaderHeightCompensation;
+$osdHeaderBreadcrumbBlueBackground: #b9d9eb;
+$osdHeaderBreadcrumbGrayBackground: #d9e1e2;
+$osdHeaderBreadcrumbCollapsedLink: #002a3a;
diff --git a/src/core/public/chrome/public/assets/round_filter.svg b/src/core/public/chrome/public/assets/round_filter.svg
new file mode 100644
index 000000000000..84cf36058553
--- /dev/null
+++ b/src/core/public/chrome/public/assets/round_filter.svg
@@ -0,0 +1,8 @@
+<svg style="visibility: hidden; position: absolute;" width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1">
+  <defs>
+        <filter id="round"><feGaussianBlur in="SourceGraphic" stdDeviation="2"/>    
+            <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />
+            <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
+        </filter>
+    </defs>
+</svg>
\ No newline at end of file
diff --git a/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap b/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap
index a3ee7aec2cd1..b2af9f57e011 100644
--- a/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap
+++ b/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap
@@ -3595,11 +3595,13 @@ exports[`Header handles visibility and lock changes 1`] = `
               breadcrumbs={
                 Array [
                   Object {
+                    "className": "osdBreadcrumbs",
                     "data-test-subj": "breadcrumb first last",
                     "text": "test",
                   },
                 ]
               }
+              className="osdHeaderBreadcrumbs"
               data-test-subj="breadcrumbs"
               max={10}
             >
@@ -3607,25 +3609,26 @@ exports[`Header handles visibility and lock changes 1`] = `
                 breadcrumbs={
                   Array [
                     Object {
+                      "className": "osdBreadcrumbs",
                       "data-test-subj": "breadcrumb first last",
                       "text": "test",
                     },
                   ]
                 }
-                className="euiHeaderBreadcrumbs"
+                className="euiHeaderBreadcrumbs osdHeaderBreadcrumbs"
                 data-test-subj="breadcrumbs"
                 max={10}
                 truncate={true}
               >
                 <nav
                   aria-label="breadcrumb"
-                  className="euiBreadcrumbs euiHeaderBreadcrumbs euiBreadcrumbs--truncate"
+                  className="euiBreadcrumbs euiHeaderBreadcrumbs osdHeaderBreadcrumbs euiBreadcrumbs--truncate"
                   data-test-subj="breadcrumbs"
                 >
                   <EuiInnerText>
                     <span
                       aria-current="page"
-                      className="euiBreadcrumb euiBreadcrumb--last"
+                      className="euiBreadcrumb osdBreadcrumbs euiBreadcrumb--last"
                       data-test-subj="breadcrumb first last"
                       title="test"
                     >
@@ -8824,11 +8827,13 @@ exports[`Header renders condensed header 1`] = `
               breadcrumbs={
                 Array [
                   Object {
+                    "className": "osdBreadcrumbs",
                     "data-test-subj": "breadcrumb first",
                     "text": "test",
                   },
                 ]
               }
+              className="osdHeaderBreadcrumbs"
               data-test-subj="breadcrumbs"
               max={10}
             >
@@ -8836,25 +8841,26 @@ exports[`Header renders condensed header 1`] = `
                 breadcrumbs={
                   Array [
                     Object {
+                      "className": "osdBreadcrumbs",
                       "data-test-subj": "breadcrumb first",
                       "text": "test",
                     },
                   ]
                 }
-                className="euiHeaderBreadcrumbs"
+                className="euiHeaderBreadcrumbs osdHeaderBreadcrumbs"
                 data-test-subj="breadcrumbs"
                 max={10}
                 truncate={true}
               >
                 <nav
                   aria-label="breadcrumb"
-                  className="euiBreadcrumbs euiHeaderBreadcrumbs euiBreadcrumbs--truncate"
+                  className="euiBreadcrumbs euiHeaderBreadcrumbs osdHeaderBreadcrumbs euiBreadcrumbs--truncate"
                   data-test-subj="breadcrumbs"
                 >
                   <EuiInnerText>
                     <span
                       aria-current="page"
-                      className="euiBreadcrumb euiBreadcrumb--last"
+                      className="euiBreadcrumb osdBreadcrumbs euiBreadcrumb--last"
                       data-test-subj="breadcrumb first"
                       title="test"
                     >
diff --git a/src/core/public/chrome/ui/header/__snapshots__/header_breadcrumbs.test.tsx.snap b/src/core/public/chrome/ui/header/__snapshots__/header_breadcrumbs.test.tsx.snap
index 5080b23e99c2..2308839a19a9 100644
--- a/src/core/public/chrome/ui/header/__snapshots__/header_breadcrumbs.test.tsx.snap
+++ b/src/core/public/chrome/ui/header/__snapshots__/header_breadcrumbs.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`HeaderBreadcrumbs renders updates to the breadcrumbs$ observable 1`] = `
 <span
   aria-current="page"
-  className="euiBreadcrumb euiBreadcrumb--last"
+  className="euiBreadcrumb osdBreadcrumbs euiBreadcrumb--last"
   data-test-subj="breadcrumb first last"
   title="First"
 >
@@ -15,7 +15,7 @@ exports[`HeaderBreadcrumbs renders updates to the breadcrumbs$ observable 2`] =
 Array [
   <span
     aria-current="false"
-    className="euiBreadcrumb"
+    className="euiBreadcrumb osdBreadcrumbs"
     data-test-subj="breadcrumb first"
     title="First"
   >
@@ -23,7 +23,7 @@ Array [
   </span>,
   <span
     aria-current="page"
-    className="euiBreadcrumb euiBreadcrumb--last"
+    className="euiBreadcrumb osdBreadcrumbs euiBreadcrumb--last"
     data-test-subj="breadcrumb last"
     title="Second"
   >
diff --git a/src/core/public/chrome/ui/header/header_breadcrumbs.scss b/src/core/public/chrome/ui/header/header_breadcrumbs.scss
new file mode 100644
index 000000000000..2d1fd2cf2107
--- /dev/null
+++ b/src/core/public/chrome/ui/header/header_breadcrumbs.scss
@@ -0,0 +1,55 @@
+@import "../../../../public/variables";
+
+$firstBreadcrumbPolygon: polygon(
+  0% 0%,
+  100% 0%,
+  calc(100% - #{$euiSizeS}) 100%,
+  0% 100%
+);
+$breadcrumbPolygon: polygon(
+  $euiSizeS 0%,
+  100% 0%,
+  calc(100% - #{$euiSizeS}) 100%,
+  0% 100%
+);
+
+.osdHeaderBreadcrumbs {
+  /*
+  filter defines a custom filter effect by grouping atomic filter primitives!
+  here we are using Gaussian filter with stdDeviation for applying
+  border-radius on clipped background.
+  */
+
+  filter: url("../../public/assets/round_filter.svg#round");
+
+  .osdBreadcrumbs {
+    clip-path: $breadcrumbPolygon;
+    background-color: $osdHeaderBreadcrumbGrayBackground;
+    padding: $euiSizeXS - 2.5 $euiSizeL - $euiSizeXS;
+
+    &:first-child {
+      clip-path: $firstBreadcrumbPolygon;
+    }
+
+    &:last-child {
+      background-color: $osdHeaderBreadcrumbBlueBackground;
+    }
+  }
+
+  .euiBreadcrumbSeparator {
+    display: none;
+  }
+
+  .euiBreadcrumb__collapsedLink {
+    color: $osdHeaderBreadcrumbCollapsedLink;
+    background: $euiColorEmptyShade;
+  }
+
+  .euiPopover__anchor {
+    padding: 0 $euiSizeS;
+  }
+
+  .euiBreadcrumb:not(.euiBreadcrumb:last-child) {
+    margin-right: 0;
+  }
+}
diff --git a/src/core/public/chrome/ui/header/header_breadcrumbs.tsx b/src/core/public/chrome/ui/header/header_breadcrumbs.tsx
index ca50b15d5af6..634651dc1229 100644
--- a/src/core/public/chrome/ui/header/header_breadcrumbs.tsx
+++ b/src/core/public/chrome/ui/header/header_breadcrumbs.tsx
@@ -35,6 +35,8 @@ import useObservable from 'react-use/lib/useObservable';
 import { Observable } from 'rxjs';
 import { ChromeBreadcrumb } from '../../chrome_service';
 
+import './header_breadcrumbs.scss';
+
 interface Props {
   appTitle$: Observable<string>;
   breadcrumbs$: Observable<ChromeBreadcrumb[]>;
@@ -57,7 +59,15 @@ export function HeaderBreadcrumbs({ appTitle$, breadcrumbs$ }: Props) {
       i === 0 && 'first',
       i === breadcrumbs.length - 1 && 'last'
     ),
+    className: classNames('osdBreadcrumbs'),
   }));
 
-  return <EuiHeaderBreadcrumbs breadcrumbs={crumbs} max={10} data-test-subj="breadcrumbs" />;
+  return (
+    <EuiHeaderBreadcrumbs
+      breadcrumbs={crumbs}
+      max={10}
+      data-test-subj="breadcrumbs"
+      className="osdHeaderBreadcrumbs"
+    />
+  );
 }