Merge db3df64663 into 1a8a91e41e

packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/snapshots.spec.js.snap

@@ -467,17 +467,6 @@ Array [
                     Created 
                 </span>
             </th>
-            <th
-                className="c14"
-                disabled={undefined}
-                name="th"
-                onClick={[Function]}
-                selected={undefined}
-            >
-                <span>
-                    Updated 
-                </span>
-            </th>
             <th
                 className="c15 c16"
                 disabled={undefined}
@@ -1175,14 +1164,6 @@ exports[`renders <Item /> without throwing 1`] = `
   >
     almost NaN years
   </td>
-  <td
-    className="c10"
-    disabled={undefined}
-    name="td"
-    selected={undefined}
-  >
-    almost NaN years
-  </td>
   <td
     className="c11 c12"
     disabled={undefined}
@@ -1564,14 +1545,6 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
   >
     3 months
   </td>
-  <td
-    className="c10"
-    disabled={undefined}
-    name="td"
-    selected={undefined}
-  >
-    3 months
-  </td>
   <td
     className="c11 c12"
     disabled={undefined}
@@ -1745,7 +1718,7 @@ exports[`renders <Item mutating /> without throwing 1`] = `
     >
       <td
         className="c3"
-        colSpan="6"
+        colSpan="5"
         disabled={undefined}
         name="td"
         selected={undefined}
@@ -1782,7 +1755,7 @@ exports[`renders <Item mutating /> without throwing 1`] = `
           <p
             className="c8"
           >
-            Loading...
+            Deleting
           </p>
         </div>
       </td>
@@ -2258,17 +2231,6 @@ Array [
                     Created 
                 </span>
             </th>
-            <th
-                className="c14"
-                disabled={undefined}
-                name="th"
-                onClick={[Function]}
-                selected={undefined}
-            >
-                <span>
-                    Updated 
-                </span>
-            </th>
             <th
                 className="c15 c16"
                 disabled={undefined}
@@ -3091,17 +3053,6 @@ Array [
                     Created 
                 </span>
             </th>
-            <th
-                className="c14"
-                disabled={undefined}
-                name="th"
-                onClick={[Function]}
-                selected={undefined}
-            >
-                <span>
-                    Updated 
-                </span>
-            </th>
             <th
                 className="c15 c16"
                 disabled={undefined}
@@ -3924,17 +3875,6 @@ Array [
                     Created 
                 </span>
             </th>
-            <th
-                className="c14"
-                disabled={undefined}
-                name="th"
-                onClick={[Function]}
-                selected={undefined}
-            >
-                <span>
-                    Updated 
-                </span>
-            </th>
             <th
                 className="c15 c16"
                 disabled={undefined}
@@ -4757,17 +4697,6 @@ Array [
                     Created 
                 </span>
             </th>
-            <th
-                className="c14"
-                disabled={undefined}
-                name="th"
-                onClick={[Function]}
-                selected={undefined}
-            >
-                <span>
-                    Updated 
-                </span>
-            </th>
             <th
                 className="c15 c16"
                 disabled={undefined}
@@ -5590,17 +5519,6 @@ Array [
                     Created 
                 </span>
             </th>
-            <th
-                className="c14"
-                disabled={undefined}
-                name="th"
-                onClick={[Function]}
-                selected={undefined}
-            >
-                <span>
-                    Updated 
-                </span>
-            </th>
             <th
                 className="c15 c16"
                 disabled={undefined}

packages/my-joy-beta/src/components/instances/snapshots.js

@@ -57,9 +57,6 @@ export const Item = ({
         <TableTd xs="0" sm="160" middle left>
           {distanceInWordsToNow(created)}
         </TableTd>
-        <TableTd xs="0" sm="160" middle left>
-          {distanceInWordsToNow(updated)}
-        </TableTd>
         <PopoverContainer clickable>
           <TableTd padding="0" hasBorder="left">
             <PopoverTarget box>
@@ -73,8 +70,8 @@ export const Item = ({
         </PopoverContainer>
       </Fragment>
     ) : (
-      <TableTd colSpan="6">
-        <StatusLoader />
+      <TableTd colSpan="5">
+        <StatusLoader msg="Deleting" />
       </TableTd>
     )}
   </TableTr>
@@ -156,18 +153,6 @@ export default ({
           >
             <span>Created </span>
           </TableTh>
-          <TableTh
-            xs="0"
-            sm="160"
-            onClick={() => onSortBy('updated', sortOrder)}
-            sortOrder={sortOrder}
-            showSort={sortBy === 'updated'}
-            left
-            middle
-            actionable
-          >
-            <span>Updated </span>
-          </TableTh>
           <TableTh xs="60" padding="0" />
         </TableTr>
       </TableThead>

packages/my-joy-beta/src/containers/navigation/__tests__/__snapshots__/breadcrumb.spec.js.snap

@@ -1,7 +1,18 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders <Breadcrumb /> without throwing 1`] = `
-.c0 {
+.c1 {
+  margin-right: auto;
+  margin-left: auto;
+  padding-right: 1.875rem;
+  padding-left: 1.875rem;
+  box-sizing: border-box;
+  width: 100%;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.c3 {
   margin-right: auto;
   margin-left: auto;
   box-sizing: border-box;
@@ -9,7 +20,7 @@ exports[`renders <Breadcrumb /> without throwing 1`] = `
   max-width: 62.5rem;
 }
 
-.c2 {
+.c4 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -28,7 +39,7 @@ exports[`renders <Breadcrumb /> without throwing 1`] = `
   margin-left: -0.625rem;
 }
 
-.c3 {
+.c5 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -38,7 +49,7 @@ exports[`renders <Breadcrumb /> without throwing 1`] = `
   display: block;
 }
 
-.c5 {
+.c7 {
   color: rgba(73,73,73,1);
   font-weight: 600;
   line-height: 1.5rem;
@@ -48,28 +59,29 @@ exports[`renders <Breadcrumb /> without throwing 1`] = `
   margin: 0.75rem 0;
 }
 
-.c5 + p,
-.c5 + small,
-.c5 + h1,
-.c5 + h2,
-.c5 + label,
-.c5 + h3,
-.c5 + h4,
-.c5 + h5,
-.c5 + div,
-.c5 + span {
+.c7 + p,
+.c7 + small,
+.c7 + h1,
+.c7 + h2,
+.c7 + label,
+.c7 + h3,
+.c7 + h4,
+.c7 + h5,
+.c7 + div,
+.c7 + span {
   margin-top: 0.75rem;
 }
 
-.c1 {
-  margin-top: 1.5rem;
+.c2 {
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
 }
 
-.c6 {
+.c8 {
   margin: 0.1875rem 0.625rem;
 }
 
-.c4 {
+.c6 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -80,43 +92,47 @@ exports[`renders <Breadcrumb /> without throwing 1`] = `
   align-items: center;
 }
 
-.c4:first-child a {
+.c6:first-child a {
   color: inherit;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.c4:last-child svg {
+.c6:last-child svg {
   display: none;
 }
 
+.c0 {
+  border-bottom: 1px solid rgb(216,216,216);
+}
+
 @media only screen and (min-width:48em) {
-  .c0 {
+  .c3 {
     width: 46rem;
   }
 }
 
 @media only screen and (min-width:64em) {
-  .c0 {
+  .c3 {
     width: 56rem;
   }
 }
 
 @media only screen and (min-width:75em) {
-  .c0 {
+  .c3 {
     width: 59rem;
   }
 }
 
 @media only screen and (max-width:47.9375rem) {
-  .c0 {
+  .c3 {
     padding-left: 0.375rem;
     padding-right: 0.375rem;
   }
 }
 
 @media only screen and (min-width:0em) {
-  .c3 {
+  .c5 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -125,45 +141,49 @@ exports[`renders <Breadcrumb /> without throwing 1`] = `
 }
 
 <div
-  className="c0"
+  className="c0 c1"
 >
   <div
-    className="c1"
+    className="c2"
   >
     <div
-      className="c2"
-      name="breadcrum"
+      className="c3"
     >
       <div
-        className="c3"
+        className="c4"
+        name="breadcrum"
       >
         <div
-          className="c4"
+          className="c5"
         >
-          <h4
-            className="c5"
-            name="breadcrum-item"
+          <div
+            className="c6"
           >
-            Instances
-          </h4>
-          <svg
-            className="c6 "
-            height="6"
-            innerRef={undefined}
-            style={
-              Object {
-                "transform": "rotate(-90deg)",
+            <h4
+              className="c7"
+              name="breadcrum-item"
+            >
+              Instances
+            </h4>
+            <svg
+              className="c8 "
+              height="6"
+              innerRef={undefined}
+              style={
+                Object {
+                  "transform": "rotate(-90deg)",
+                }
               }
-            }
-            viewBox="0 0 9.6 6"
-            width="9.6"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
-              fill="rgb(151, 151, 151)"
-            />
-          </svg>
+              viewBox="0 0 9.6 6"
+              width="9.6"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
+                fill="rgb(151, 151, 151)"
+              />
+            </svg>
+          </div>
         </div>
       </div>
     </div>
@@ -172,7 +192,18 @@ exports[`renders <Breadcrumb /> without throwing 1`] = `
 `;
 
 exports[`renders <Breadcrumb match /> without throwing 1`] = `
-.c0 {
+.c1 {
+  margin-right: auto;
+  margin-left: auto;
+  padding-right: 1.875rem;
+  padding-left: 1.875rem;
+  box-sizing: border-box;
+  width: 100%;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.c3 {
   margin-right: auto;
   margin-left: auto;
   box-sizing: border-box;
@@ -180,7 +211,7 @@ exports[`renders <Breadcrumb match /> without throwing 1`] = `
   max-width: 62.5rem;
 }
 
-.c2 {
+.c4 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -199,7 +230,7 @@ exports[`renders <Breadcrumb match /> without throwing 1`] = `
   margin-left: -0.625rem;
 }
 
-.c3 {
+.c5 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -209,7 +240,7 @@ exports[`renders <Breadcrumb match /> without throwing 1`] = `
   display: block;
 }
 
-.c5 {
+.c7 {
   color: rgba(73,73,73,1);
   font-weight: 600;
   line-height: 1.5rem;
@@ -219,28 +250,29 @@ exports[`renders <Breadcrumb match /> without throwing 1`] = `
   margin: 0.75rem 0;
 }
 
-.c5 + p,
-.c5 + small,
-.c5 + h1,
-.c5 + h2,
-.c5 + label,
-.c5 + h3,
-.c5 + h4,
-.c5 + h5,
-.c5 + div,
-.c5 + span {
+.c7 + p,
+.c7 + small,
+.c7 + h1,
+.c7 + h2,
+.c7 + label,
+.c7 + h3,
+.c7 + h4,
+.c7 + h5,
+.c7 + div,
+.c7 + span {
   margin-top: 0.75rem;
 }
 
-.c1 {
-  margin-top: 1.5rem;
+.c2 {
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
 }
 
-.c6 {
+.c8 {
   margin: 0.1875rem 0.625rem;
 }
 
-.c4 {
+.c6 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -251,43 +283,47 @@ exports[`renders <Breadcrumb match /> without throwing 1`] = `
   align-items: center;
 }
 
-.c4:first-child a {
+.c6:first-child a {
   color: inherit;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.c4:last-child svg {
+.c6:last-child svg {
   display: none;
 }
 
+.c0 {
+  border-bottom: 1px solid rgb(216,216,216);
+}
+
 @media only screen and (min-width:48em) {
-  .c0 {
+  .c3 {
     width: 46rem;
   }
 }
 
 @media only screen and (min-width:64em) {
-  .c0 {
+  .c3 {
     width: 56rem;
   }
 }
 
 @media only screen and (min-width:75em) {
-  .c0 {
+  .c3 {
     width: 59rem;
   }
 }
 
 @media only screen and (max-width:47.9375rem) {
-  .c0 {
+  .c3 {
     padding-left: 0.375rem;
     padding-right: 0.375rem;
   }
 }
 
 @media only screen and (min-width:0em) {
-  .c3 {
+  .c5 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -296,73 +332,77 @@ exports[`renders <Breadcrumb match /> without throwing 1`] = `
 }
 
 <div
-  className="c0"
+  className="c0 c1"
 >
   <div
-    className="c1"
+    className="c2"
   >
     <div
-      className="c2"
-      name="breadcrum"
+      className="c3"
     >
       <div
-        className="c3"
+        className="c4"
+        name="breadcrum"
       >
         <div
-          className="c4"
+          className="c5"
         >
-          <h4
-            className="c5"
-            name="breadcrum-item"
+          <div
+            className="c6"
           >
-            Instances
-          </h4>
-          <svg
-            className="c6 "
-            height="6"
-            innerRef={undefined}
-            style={
-              Object {
-                "transform": "rotate(-90deg)",
+            <h4
+              className="c7"
+              name="breadcrum-item"
+            >
+              Instances
+            </h4>
+            <svg
+              className="c8 "
+              height="6"
+              innerRef={undefined}
+              style={
+                Object {
+                  "transform": "rotate(-90deg)",
+                }
               }
-            }
-            viewBox="0 0 9.6 6"
-            width="9.6"
-            xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 9.6 6"
+              width="9.6"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
+                fill="rgb(151, 151, 151)"
+              />
+            </svg>
+          </div>
+          <div
+            className="c6"
           >
-            <path
-              d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
-              fill="rgb(151, 151, 151)"
-            />
-          </svg>
-        </div>
-        <div
-          className="c4"
-        >
-          <h4
-            className="c5"
-            name="breadcrum-item"
-          >
-            name
-          </h4>
-          <svg
-            className="c6 "
-            height="6"
-            innerRef={undefined}
-            style={
-              Object {
-                "transform": "rotate(-90deg)",
+            <h4
+              className="c7"
+              name="breadcrum-item"
+            >
+              name
+            </h4>
+            <svg
+              className="c8 "
+              height="6"
+              innerRef={undefined}
+              style={
+                Object {
+                  "transform": "rotate(-90deg)",
+                }
               }
-            }
-            viewBox="0 0 9.6 6"
-            width="9.6"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
-              fill="rgb(151, 151, 151)"
-            />
-          </svg>
+              viewBox="0 0 9.6 6"
+              width="9.6"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
+                fill="rgb(151, 151, 151)"
+              />
+            </svg>
+          </div>
         </div>
       </div>
     </div>

packages/ui-toolkit/src/breadcrumb/__tests__/__snapshots__/index.spec.js.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Breadcrumb Default Breadcrumb 1`] = `
-.c5 {
+.c7 {
   color: rgba(73,73,73,1);
   font-weight: 600;
   line-height: 1.5rem;
@@ -11,24 +11,24 @@ exports[`Breadcrumb Default Breadcrumb 1`] = `
   margin: 0.75rem 0;
 }
 
-.c5 + p,
-.c5 + small,
-.c5 + h1,
-.c5 + h2,
-.c5 + label,
-.c5 + h3,
-.c5 + h4,
-.c5 + h5,
-.c5 + div,
-.c5 + span {
+.c7 + p,
+.c7 + small,
+.c7 + h1,
+.c7 + h2,
+.c7 + label,
+.c7 + h3,
+.c7 + h4,
+.c7 + h5,
+.c7 + div,
+.c7 + span {
   margin-top: 0.75rem;
 }
 
-.c6 {
+.c8 {
   margin: 0.1875rem 0.625rem;
 }
 
-.c4 {
+.c6 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -39,17 +39,28 @@ exports[`Breadcrumb Default Breadcrumb 1`] = `
   align-items: center;
 }
 
-.c4:first-child a {
+.c6:first-child a {
   color: inherit;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.c4:last-child svg {
+.c6:last-child svg {
   display: none;
 }
 
-.c0 {
+.c1 {
+  margin-right: auto;
+  margin-left: auto;
+  padding-right: 1.875rem;
+  padding-left: 1.875rem;
+  box-sizing: border-box;
+  width: 100%;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.c3 {
   margin-right: auto;
   margin-left: auto;
   box-sizing: border-box;
@@ -57,7 +68,7 @@ exports[`Breadcrumb Default Breadcrumb 1`] = `
   max-width: 62.5rem;
 }
 
-.c2 {
+.c4 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -76,7 +87,7 @@ exports[`Breadcrumb Default Breadcrumb 1`] = `
   margin-left: -0.625rem;
 }
 
-.c3 {
+.c5 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -86,37 +97,42 @@ exports[`Breadcrumb Default Breadcrumb 1`] = `
   display: block;
 }
 
-.c1 {
-  margin-top: 1.5rem;
+.c2 {
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+}
+
+.c0 {
+  border-bottom: 1px solid rgb(216,216,216);
 }
 
 @media only screen and (min-width:48em) {
-  .c0 {
+  .c3 {
     width: 46rem;
   }
 }
 
 @media only screen and (min-width:64em) {
-  .c0 {
+  .c3 {
     width: 56rem;
   }
 }
 
 @media only screen and (min-width:75em) {
-  .c0 {
+  .c3 {
     width: 59rem;
   }
 }
 
 @media only screen and (max-width:47.9375rem) {
-  .c0 {
+  .c3 {
     padding-left: 0.375rem;
     padding-right: 0.375rem;
   }
 }
 
 @media only screen and (min-width:0em) {
-  .c3 {
+  .c5 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -125,129 +141,133 @@ exports[`Breadcrumb Default Breadcrumb 1`] = `
 }
 
 <div
-  className="c0"
+  className="c0 c1"
 >
   <div
-    className="c1"
+    className="c2"
   >
     <div
-      className="c2"
-      name="breadcrum"
+      className="c3"
     >
       <div
-        className="c3"
+        className="c4"
+        name="breadcrum"
       >
         <div
-          className="c4"
+          className="c5"
         >
-          <h4
-            className="c5"
-            name="breadcrum-item"
+          <div
+            className="c6"
           >
-            Home
-          </h4>
-          <svg
-            className="c6 "
-            height="6"
-            innerRef={undefined}
-            style={
-              Object {
-                "transform": "rotate(-90deg)",
+            <h4
+              className="c7"
+              name="breadcrum-item"
+            >
+              Home
+            </h4>
+            <svg
+              className="c8 "
+              height="6"
+              innerRef={undefined}
+              style={
+                Object {
+                  "transform": "rotate(-90deg)",
+                }
               }
-            }
-            viewBox="0 0 9.6 6"
-            width="9.6"
-            xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 9.6 6"
+              width="9.6"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
+                fill="rgb(151, 151, 151)"
+              />
+            </svg>
+          </div>
+          <div
+            className="c6"
           >
-            <path
-              d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
-              fill="rgb(151, 151, 151)"
-            />
-          </svg>
-        </div>
-        <div
-          className="c4"
-        >
-          <h4
-            className="c5"
-            name="breadcrum-item"
-          >
-            Warp Records Blog
-          </h4>
-          <svg
-            className="c6 "
-            height="6"
-            innerRef={undefined}
-            style={
-              Object {
-                "transform": "rotate(-90deg)",
+            <h4
+              className="c7"
+              name="breadcrum-item"
+            >
+              Warp Records Blog
+            </h4>
+            <svg
+              className="c8 "
+              height="6"
+              innerRef={undefined}
+              style={
+                Object {
+                  "transform": "rotate(-90deg)",
+                }
               }
-            }
-            viewBox="0 0 9.6 6"
-            width="9.6"
-            xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 9.6 6"
+              width="9.6"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
+                fill="rgb(151, 151, 151)"
+              />
+            </svg>
+          </div>
+          <div
+            className="c6"
           >
-            <path
-              d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
-              fill="rgb(151, 151, 151)"
-            />
-          </svg>
-        </div>
-        <div
-          className="c4"
-        >
-          <h4
-            className="c5"
-            name="breadcrum-item"
-          >
-            Services
-          </h4>
-          <svg
-            className="c6 "
-            height="6"
-            innerRef={undefined}
-            style={
-              Object {
-                "transform": "rotate(-90deg)",
+            <h4
+              className="c7"
+              name="breadcrum-item"
+            >
+              Services
+            </h4>
+            <svg
+              className="c8 "
+              height="6"
+              innerRef={undefined}
+              style={
+                Object {
+                  "transform": "rotate(-90deg)",
+                }
               }
-            }
-            viewBox="0 0 9.6 6"
-            width="9.6"
-            xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 9.6 6"
+              width="9.6"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
+                fill="rgb(151, 151, 151)"
+              />
+            </svg>
+          </div>
+          <div
+            className="c6"
           >
-            <path
-              d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
-              fill="rgb(151, 151, 151)"
-            />
-          </svg>
-        </div>
-        <div
-          className="c4"
-        >
-          <h4
-            className="c5"
-            name="breadcrum-item"
-          >
-            Nginx
-          </h4>
-          <svg
-            className="c6 "
-            height="6"
-            innerRef={undefined}
-            style={
-              Object {
-                "transform": "rotate(-90deg)",
+            <h4
+              className="c7"
+              name="breadcrum-item"
+            >
+              Nginx
+            </h4>
+            <svg
+              className="c8 "
+              height="6"
+              innerRef={undefined}
+              style={
+                Object {
+                  "transform": "rotate(-90deg)",
+                }
               }
-            }
-            viewBox="0 0 9.6 6"
-            width="9.6"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
-              fill="rgb(151, 151, 151)"
-            />
-          </svg>
+              viewBox="0 0 9.6 6"
+              width="9.6"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
+                fill="rgb(151, 151, 151)"
+              />
+            </svg>
+          </div>
         </div>
       </div>
     </div>

packages/ui-toolkit/src/breadcrumb/index.js

@@ -1,20 +1,27 @@
 import React from 'react';
+import styled from 'styled-components';
 import { Row, Col } from 'joyent-react-styled-flexboxgrid';
-import { Margin } from 'styled-components-spacing';
+import { Margin, Padding } from 'styled-components-spacing';
 
 import Container from '../layout/view-container';
 
+const BreadcrumContianer = styled(Container)`
+  border-bottom: 1px solid ${props => props.theme.grey};
+`;
+
 /**
  * @example ./usage.md
  */
 export default ({ children, ...rest }) => (
-  <Container {...rest}>
-    <Margin top={4}>
-      <Row name="breadcrum">
-        <Col xs={12}>{children}</Col>
-      </Row>
-    </Margin>
-  </Container>
+  <BreadcrumContianer {...rest} fluid>
+    <Padding top={2} bottom={2}>
+      <Container>
+        <Row name="breadcrum">
+          <Col xs={12}>{children}</Col>
+        </Row>
+      </Container>
+    </Padding>
+  </BreadcrumContianer>
 );
 
 export { default as Item } from './item';