Update breadcrumbs to new styling (#131) (#379)

* Remove separator Signed-off-by: Matt Provost <[email protected]> * Fix tests and lints Signed-off-by: Matt Provost <[email protected]> * Add new breadcrumb style Signed-off-by: Matt Provost <[email protected]> * Add new style to collapsed breadcrumbs Signed-off-by: Matt Provost <[email protected]> * Fix some styling issues Signed-off-by: Matt Provost <[email protected]> * Small cleanup Signed-off-by: Matt Provost <[email protected]> * Refactor wrapper implementation Signed-off-by: Matt Provost <[email protected]> * Add breadcrumb wall Signed-off-by: Matt Provost <[email protected]> * Update some colors Signed-off-by: Matt Provost <[email protected]> * Fix height issue Signed-off-by: Matt Provost <[email protected]> --------- Signed-off-by: Matt Provost <[email protected]> (cherry picked from commit c8942c1) Co-authored-by: Matt Provost <[email protected]> Co-authored-by: Sean Neumann <[email protected]>
opensearch-project · Feb 28, 2023 · 70c12b0 · 70c12b0
1 parent 5645550
commit 70c12b0
Show file tree

Hide file tree

Showing 8 changed files with 983 additions and 702 deletions.
diff --git a/src/components/breadcrumbs/__snapshots__/breadcrumbs.test.tsx.snap b/src/components/breadcrumbs/__snapshots__/breadcrumbs.test.tsx.snap
diff --git a/src/components/breadcrumbs/_breadcrumbs.scss b/src/components/breadcrumbs/_breadcrumbs.scss
@@ -25,11 +25,14 @@
 
 .ouiBreadcrumb {
   display: inline-block;
-  margin-bottom: $ouiSizeXS; /* 1 */
+  transform: skewX(20deg);
 
   &:not(.ouiBreadcrumb--last) {
-    margin-right: $ouiBreadcrumbSpacing;
     color: $ouiTextSubduedColor;
+
+    &:hover {
+      color: $ouiBreadCrumbHoverColor !important; // sass-lint:disable-line no-important
+    }
   }
 }
 
@@ -39,16 +42,12 @@
 
 .ouiBreadcrumb--collapsed {
   flex-shrink: 0;
+  color: $ouiBreadcrumbCollapsedLink;
+  vertical-align: top !important; // sass-lint:disable-line no-important
 }
 
-.ouiBreadcrumbSeparator {
-  flex-shrink: 0;
-  display: inline-block;
-  margin-right: $ouiBreadcrumbSpacing;
-  width: 1px;
-  height: $ouiSize;
-  transform: translateY(-1px) rotate(15deg);
-  background: $ouiColorLightShade;
+.ouiBreadcrumb__collapsedLink:hover {
+  color: $ouiBreadCrumbHoverColor !important; // sass-lint:disable-line no-important
 }
 
 .ouiBreadcrumbs__inPopover .ouiBreadcrumb--last {
@@ -61,19 +60,56 @@
   flex-wrap: nowrap;
 
   .ouiBreadcrumb:not(.ouiBreadcrumb--collapsed) {
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    vertical-align: top; // overflow hidden causes misalignment of links and slashes, this fixes that
+  }
+
+  .ouiBreadcrumbWrapper:not(.ouiBreadcrumbWrapper--collapsed) {
     max-width: $ouiBreadcrumbTruncateWidth;
     overflow: hidden;
     text-overflow: ellipsis;
 
-    &.ouiBreadcrumb--last {
+    &.ouiBreadcrumbWrapper--last {
       max-width: none;
     }
   }
 }
 
 .ouiBreadcrumb--truncate {
   @include ouiTextTruncate;
-  max-width: $ouiBreadcrumbTruncateWidth;
+  max-width: 100%;
   text-align: center;
   vertical-align: top; // overflow hidden causes misalignment of links and slashes, this fixes that
 }
+
+.ouiBreadcrumbWrapper--truncate {
+  max-width: $ouiBreadcrumbTruncateWidth;
+}
+
+.ouiBreadcrumbWrapper {
+  background-color: $ouiBreadcrumbGrayBackground;
+  transform: skewX(-20deg);
+  border-radius: $ouiSizeXS;
+  padding: $ouiSizeXS - 2.5 $ouiSizeL - $ouiSizeXS;
+
+  &:not(.ouiBreadcrumbWrapper--first) {
+    margin-bottom: $ouiSizeXS; /* 1 */
+  }
+
+  &:not(.ouiBreadcrumbWrapper--last) {
+    margin-right: $ouiBreadcrumbSpacing;
+  }
+}
+
+.ouiBreadcrumbWall {
+  background-image: linear-gradient(to right, $ouiBreadcrumbGrayBackground 0 $ouiSizeM, transparent $ouiSizeM);
+  border-radius: $ouiSizeXS;
+  overflow: hidden;
+  margin-bottom: $ouiSizeXS; /* 1 */
+}
+
+.ouiBreadcrumbWrapper--last {
+  background-color: $ouiBreadcrumbBlueBackground;
+}
diff --git a/src/components/breadcrumbs/_variables.scss b/src/components/breadcrumbs/_variables.scss
@@ -12,8 +12,17 @@
 $ouiBreadcrumbSpacing: $ouiSizeS !default;
 $ouiBreadcrumbTruncateWidth: $ouiSize * 10 !default;
 
+$ouiBreadcrumbBlueBackground: #B9D9EB !default;
+$ouiBreadcrumbGrayBackground: #D9E1E2 !default;
+$ouiBreadcrumbCollapsedLink: #002A3A !default;
+$ouiBreadCrumbHoverColor: #535861 !default;
 
 /* OUI -> EUI Aliases */
 $euiBreadcrumbSpacing: $ouiBreadcrumbSpacing;
 $euiBreadcrumbTruncateWidth: $ouiBreadcrumbTruncateWidth;
+
+$euiBreadcrumbBlueBackground: $ouiBreadcrumbBlueBackground;
+$euiBreadcrumbGrayBackground: $ouiBreadcrumbGrayBackground;
+$euiBreadcrumbCollapsedLink: $ouiBreadcrumbCollapsedLink;
+$euiBreadCrumbHoverColor: $ouiBreadCrumbHoverColor;
 /* End of Aliases */
diff --git a/src/components/breadcrumbs/breadcrumbs.tsx b/src/components/breadcrumbs/breadcrumbs.tsx
@@ -162,20 +162,21 @@ const limitBreadcrumbs = (
 
     return (
       <Fragment>
-        <OuiPopover
-          className="ouiBreadcrumb ouiBreadcrumb--collapsed"
-          button={ellipsisButton}
-          isOpen={isPopoverOpen}
-          closePopover={() => setIsPopoverOpen(false)}>
-          <OuiBreadcrumbs
-            className="ouiBreadcrumbs__inPopover"
-            breadcrumbs={overflowBreadcrumbs}
-            responsive={false}
-            truncate={false}
-            max={0}
-          />
-        </OuiPopover>
-        <OuiBreadcrumbSeparator />
+        <div className="ouiBreadcrumbWrapper ouiBreadcrumbWrapper--collapsed">
+          <OuiPopover
+            className="ouiBreadcrumb ouiBreadcrumb--collapsed"
+            button={ellipsisButton}
+            isOpen={isPopoverOpen}
+            closePopover={() => setIsPopoverOpen(false)}>
+            <OuiBreadcrumbs
+              className="ouiBreadcrumbs__inPopover"
+              breadcrumbs={overflowBreadcrumbs}
+              responsive={false}
+              truncate={false}
+              max={0}
+            />
+          </OuiPopover>
+        </div>
       </Fragment>
     );
   };
@@ -187,8 +188,6 @@ const limitBreadcrumbs = (
   return [...breadcrumbsAtStart, ...breadcrumbsAtEnd];
 };
 
-const OuiBreadcrumbSeparator = () => <div className="ouiBreadcrumbSeparator" />;
-
 export const OuiBreadcrumbs: FunctionComponent<OuiBreadcrumbsProps> = ({
   breadcrumbs,
   className,
@@ -228,8 +227,15 @@ export const OuiBreadcrumbs: FunctionComponent<OuiBreadcrumbsProps> = ({
       ...breadcrumbRest
     } = breadcrumb;
 
+    const isFirstBreadcrumb = index === 0;
     const isLastBreadcrumb = index === breadcrumbs.length - 1;
 
+    const breadcrumbWrapperClasses = classNames('ouiBreadcrumbWrapper', {
+      'ouiBreadcrumbWrapper--first': isFirstBreadcrumb,
+      'ouiBreadcrumbWrapper--last': isLastBreadcrumb,
+      'ouiBreadcrumbWrapper--truncate': truncate,
+    });
+
     const breadcrumbClasses = classNames('ouiBreadcrumb', breadcrumbClassName, {
       'ouiBreadcrumb--last': isLastBreadcrumb,
       'ouiBreadcrumb--truncate': truncate,
@@ -271,18 +277,15 @@ export const OuiBreadcrumbs: FunctionComponent<OuiBreadcrumbsProps> = ({
       );
     }
 
-    let separator;
+    let wrapper = <div className={breadcrumbWrapperClasses}>{link}</div>;
+
+    if (isFirstBreadcrumb) {
+      const breadcrumbWallClasses = classNames('ouiBreadcrumbWall');
 
-    if (!isLastBreadcrumb) {
-      separator = <OuiBreadcrumbSeparator />;
+      wrapper = <div className={breadcrumbWallClasses}>{wrapper}</div>;
     }
 
-    return (
-      <Fragment key={index}>
-        {link}
-        {separator}
-      </Fragment>
-    );
+    return <Fragment key={index}>{wrapper}</Fragment>;
   });
 
   // Use the default object if they simply passed `true` for responsive