Implemented sidebar styling for breadcrumbs

frontend/src/metabase/components/Breadcrumbs.css

@@ -3,9 +3,12 @@
     --breadcrumbs-padding: 2.075em;
     --breadcrumb-page-color: #636060;
     --breadcrumb-divider-spacing: 0.75em;
+    /* taken from Sidebar.css, should probably factor them out into variables */
+    --sidebar-breadcrumbs-color: #9CAEBE;
+    --sidebar-breadcrumb-page-color: #2D86D4;
 }
 
-.Breadcrumbs {
+:local(.breadcrumbs) {
     display: flex;
     align-items: center;
     padding-top: var(--breadcrumbs-padding);
@@ -13,29 +16,58 @@
     color: var(--breadcrumbs-color);
 }
 
-.Breadcrumb {
+:local(.breadcrumb) {
     font-size: 0.75rem;
     font-weight: bold;
     text-transform: uppercase;
 }
 
-.Breadcrumb-divider {
+
+:local(.breadcrumbDivider) {
     margin-left: var(--breadcrumb-divider-spacing);
     margin-right: var(--breadcrumb-divider-spacing);
 }
 
 /* the breadcrumb path will always inherit the color of the breadcrumbs object */
-.Breadcrumb.Breadcrumb--path {
+:local(.breadcrumb.breadcrumbPath) {
     color: currentColor;
     transition: color .3s linear;
 }
 
-.Breadcrumb.Breadcrumb--path:hover {
+:local(.breadcrumb.breadcrumbPath):hover {
     color: var(--breadcrumb-page-color);
     transition: color .3s linear;
 }
 
 /* the breadcrumb page (current page) should be a different contrasting color  */
-.Breadcrumb.Breadcrumb--page {
+:local(.breadcrumb.breadcrumbPage) {
     color: var(--breadcrumb-page-color);
 }
+
+:local(.sidebarBreadcrumbs) {
+    composes: breadcrumbs;
+    color: var(--sidebar-breadcrumbs-color);
+}
+
+:local(.sidebarBreadcrumb) {
+    composes: breadcrumb;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+/* the breadcrumb path will always inherit the color of the breadcrumbs object */
+:local(.sidebarBreadcrumb.breadcrumbPath) {
+    color: currentColor;
+    transition: color .3s linear;
+}
+
+:local(.sidebarBreadcrumb.breadcrumbPath):hover {
+    color: var(--sidebar-breadcrumb-page-color);
+    transition: color .3s linear;
+}
+
+/* the breadcrumb page (current page) should be a different contrasting color  */
+:local(.sidebarBreadcrumb.breadcrumbPage) {
+    color: var(--sidebar-breadcrumb-page-color);
+}

frontend/src/metabase/components/Breadcrumbs.jsx

 import React, { Component, PropTypes } from "react";
 
-import "./Breadcrumbs.css";
+import S from "./Breadcrumbs.css";
 
-import Icon from "metabase/components/Icon.jsx"
+import Icon from "metabase/components/Icon.jsx";
+
+import cx from 'classnames';
 
 export default class Breadcrumbs extends Component {
     static propTypes = {
-        crumbs: PropTypes.array
+        crumbs: PropTypes.array,
+        inSidebar: PropTypes.bool
     };
     static defaultProps = {
-        crumbs: []
+        crumbs: [],
+        inSidebar: false
     };
 
     render() {
+        const {
+            crumbs,
+            inSidebar
+        } = this.props;
+
+        const breadcrumbClass = inSidebar ? S.sidebarBreadcrumb : S.breadcrumb;
+        const breadcrumbsClass = inSidebar ? S.sidebarBreadcrumbs : S.breadcrumbs;
+        const maxBreadcrumbWidth = inSidebar ? 90 / (crumbs.length || 1) : 100;
+
         const children = [];
         // TODO: maybe refactor this a bit to make it clearer how to use?
-        for (let [index, crumb] of this.props.crumbs.entries()) {
+        for (let [index, crumb] of crumbs.entries()) {
             crumb = Array.isArray(crumb) ? crumb : [crumb];
             if (crumb.length > 1) {
-                children.push(<a className="Breadcrumb Breadcrumb--path" href={crumb[1]}>{crumb[0]}</a>);
+                children.push(
+                    <a
+                        className={cx(breadcrumbClass, S.breadcrumbPath)}
+                        href={crumb[1]}
+                        style={{ maxWidth: `${maxBreadcrumbWidth}%` }}
+                    >
+                        {crumb[0]}
+                    </a>
+                );
             } else {
-                children.push(<h2 className="Breadcrumb Breadcrumb--page">{crumb}</h2>);
+                children.push(
+                    <h2
+                        className={cx(breadcrumbClass, S.breadcrumbPage)}
+                        style={{ maxWidth: `${maxBreadcrumbWidth}%` }}
+                    >
+                        {crumb}
+                    </h2>);
             }
-            if (index < this.props.crumbs.length - 1) {
-                children.push(<Icon name="chevronright" className="Breadcrumb-divider" width={12} height={12} />);
+            if (index < crumbs.length - 1) {
+                children.push(<Icon name="chevronright" className={S.breadcrumbDivider} width={12} height={12} />);
             }
         }
         return (
-            <section className="Breadcrumbs">
+            <section className={breadcrumbsClass}>
                 {children}
             </section>
         );

frontend/src/metabase/components/Sidebar.css

@@ -24,6 +24,10 @@
     text-decoration: none;
 }
 
+:local(.breadcrumbs) {
+    composes: sidebar-padding;
+}
+
 :local(.item),
 :local(.sectionTitle) {
     composes: flex align-center from "style";

frontend/src/metabase/components/Sidebar.jsx

@@ -24,13 +24,10 @@ const Sidebar = ({
 }) =>
     <div className={cx(S.sidebar, className)} style={style}>
         <ul>
-            { breadcrumbs && breadcrumbs.length > 1 ?
-                <li>
-                    <div className={S.item}>
-                        <Breadcrumbs crumbs={breadcrumbs} />
-                    </div>
-                </li> :
-                null
+            { breadcrumbs && breadcrumbs.length > 1 &&
+                <div className={S.breadcrumbs}>
+                    <Breadcrumbs crumbs={breadcrumbs} inSidebar={true} />
+                </div>
             }
             {Object.values(sections).map(section =>
                 <SidebarItem key={section.id} href={section.id} {...section} />

frontend/src/metabase/reference/containers/ReferenceApp.jsx

@@ -78,13 +78,15 @@ export default class ReferenceApp extends Component {
     render() {
         const {
             children,
+            sections,
+            breadcrumbs,
             isEditing
         } = this.props;
         return (
             <div>
                 <SidebarLayout
                     style={ isEditing && { paddingTop: '40px' }}
-                    sidebar={<Sidebar {...this.props} />}
+                    sidebar={<Sidebar sections={sections} breadcrumbs={breadcrumbs} />}
                 >
                     {children}
                 </SidebarLayout>

frontend/src/metabase/reference/selectors.js

@@ -8,6 +8,8 @@ import Query, { AggregationClause } from 'metabase/lib/query';
 
 // there might be a better way to organize sections
 // it feels like I'm duplicating a lot of routing logic here
+//TODO: refactor to use different container components for each section
+// initialize section metadata in there
 const referenceSections = {
     // [`/reference/guide`]: {
     //     id: `/reference/guide`,