fix(my-joy-beta): fix small bugs

fixes #1259
fixes #1255

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,57 @@ exports[`renders <Item mutating /> without throwing 1`] = `
           <p
             className="c8"
           >
-            Loading...
+            Starting...
+          </p>
+        </div>
+      </td>
+    </tr>
+    <tr
+      className="c2"
+      disabled={undefined}
+      name="tr"
+      selected={undefined}
+    >
+      <td
+        className="c3"
+        colSpan="5"
+        disabled={undefined}
+        name="td"
+        selected={undefined}
+      >
+        <div
+          className="c4"
+        >
+          <svg
+            height="10"
+            width="28"
+          >
+            <rect
+              className="c5"
+              height="6"
+              width="6"
+              x="2"
+              y="2"
+            />
+            <rect
+              className="c6"
+              height="6"
+              width="6"
+              x="11"
+              y="2"
+            />
+            <rect
+              className="c7"
+              height="6"
+              width="6"
+              x="20"
+              y="2"
+            />
+          </svg>
+          <p
+            className="c8"
+          >
+            Removing...
           </p>
         </div>
       </td>
@@ -2258,17 +2281,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 +3103,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 +3925,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 +4747,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 +5569,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/__tests__/snapshots.spec.js

@@ -25,7 +25,8 @@ it('renders <Item mutating /> without throwing', () => {
         <Theme>
           <Table>
             <TableTbody>
-              <Item mutating />
+              <Item mutating='start' />
+              <Item mutating='remove' />
             </TableTbody>
           </Table>
         </Theme>

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

@@ -26,7 +26,8 @@ it('<Item mutating />', async () => {
       <Theme ss>
         <Table>
           <TableTbody>
-            <Item mutating />
+            <Item mutating='start' />
+            <Item mutating='remove' />
           </TableTbody>
         </Table>
       </Theme>

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

@@ -30,6 +30,11 @@ const stateColor = {
   CREATED: 'green'
 };
 
+const loadingState = {
+  start: 'Starting...',
+  remove: 'Removing...'
+};
+
 export const Item = ({
   name,
   state,
@@ -73,8 +78,8 @@ export const Item = ({
         </PopoverContainer>
       </Fragment>
     ) : (
-      <TableTd colSpan="6">
-        <StatusLoader />
+      <TableTd colSpan="5">
+        <StatusLoader msg={loadingState[mutating]} />
       </TableTd>
     )}
   </TableTr>

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';

yarn.lock

@@ -3937,15 +3937,15 @@ escape-string-regexp@1.0.5, escape-string-regexp@^1.0.0, escape-string-regexp@^1
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
 
 escodegen@^1.6.1, escodegen@^1.9.0:
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-1.9.0.tgz#9811a2f265dc1cd3894420ee3717064b632b8852"
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-1.9.1.tgz#dbae17ef96c8e4bedb1356f4504fa4cc2f7cb7e2"
   dependencies:
     esprima "^3.1.3"
     estraverse "^4.2.0"
     esutils "^2.0.2"
     optionator "^0.8.1"
   optionalDependencies:
-    source-map "~0.5.6"
+    source-map "~0.6.1"
 
 escope@^3.6.0:
   version "3.6.0"
@@ -10519,7 +10519,7 @@ source-map-url@~0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.3.0.tgz#7ecaf13b57bcd09da8a40c5d269db33799d4aaf9"
 
-source-map@0.5.x, source-map@^0.5.0, source-map@^0.5.3, source-map@^0.5.6, source-map@^0.5.7, source-map@~0.5.0, source-map@~0.5.1, source-map@~0.5.6:
+source-map@0.5.x, source-map@^0.5.0, source-map@^0.5.3, source-map@^0.5.6, source-map@^0.5.7, source-map@~0.5.0, source-map@~0.5.1:
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"