feat(ui-toolkit): add popover button

.prettierignore

@@ -14,6 +14,7 @@ yarn.lock
 
 dist
 build
+packages/*/lib/app
 
 *.ico
 *.html

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

@@ -319,6 +319,7 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
       >
         <button
           className="c7 c8 c9"
+          data-ui-button="true"
           disabled={undefined}
           href=""
           type="submit"
@@ -654,6 +655,7 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
       >
         <button
           className="c7 c8 c9"
+          data-ui-button="true"
           disabled={undefined}
           href=""
           type="submit"

packages/my-joy-instances/src/components/__tests__/__snapshots__/key-value.spec.js.snap

@@ -1002,6 +1002,7 @@ exports[`renders <KeyValue /> without throwing 1`] = `
             >
               <button
                 className="c22 c23 c24"
+                data-ui-button="true"
                 disabled={false}
                 href=""
                 onClick={[Function]}
@@ -1013,6 +1014,7 @@ exports[`renders <KeyValue /> without throwing 1`] = `
               </button>
               <button
                 className="c25 c23 c24"
+                data-ui-button="true"
                 disabled={true}
                 href=""
                 type="submit"
@@ -1027,6 +1029,7 @@ exports[`renders <KeyValue /> without throwing 1`] = `
             >
               <button
                 className="c27 c23 c24"
+                data-ui-button="true"
                 disabled={false}
                 href=""
                 icon={true}
@@ -2305,6 +2308,7 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
             >
               <button
                 className="c22 c23 c24"
+                data-ui-button="true"
                 disabled={false}
                 href=""
                 onClick={[Function]}
@@ -2316,6 +2320,7 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
               </button>
               <button
                 className="c25 c23 c24"
+                data-ui-button="true"
                 disabled={true}
                 href=""
                 type="submit"
@@ -2330,6 +2335,7 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
             >
               <button
                 className="c27 c23 c24"
+                data-ui-button="true"
                 disabled={false}
                 href=""
                 icon={true}
@@ -3407,6 +3413,7 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
             >
               <button
                 className="c22 c23 c24"
+                data-ui-button="true"
                 disabled={false}
                 href=""
                 onClick={[Function]}
@@ -3418,6 +3425,7 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
               </button>
               <button
                 className="c25 c23 c24"
+                data-ui-button="true"
                 disabled={true}
                 href=""
                 type="submit"
@@ -3432,6 +3440,7 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
             >
               <button
                 className="c27 c23 c24"
+                data-ui-button="true"
                 disabled={false}
                 href=""
                 icon={true}
@@ -4471,6 +4480,7 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
             >
               <button
                 className="c22 c23 c24"
+                data-ui-button="true"
                 disabled={false}
                 href=""
                 onClick={[Function]}
@@ -4482,6 +4492,7 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
               </button>
               <button
                 className="c25 c23 c24"
+                data-ui-button="true"
                 disabled={true}
                 href=""
                 type="submit"
@@ -4496,6 +4507,7 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
             >
               <button
                 className="c27 c23 c24"
+                data-ui-button="true"
                 disabled={false}
                 href=""
                 icon={true}
@@ -5545,6 +5557,7 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
             >
               <button
                 className="c22 c23 c24"
+                data-ui-button="true"
                 disabled={false}
                 href=""
                 onClick={[Function]}
@@ -5556,6 +5569,7 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
               </button>
               <button
                 className="c25 c23 c24"
+                data-ui-button="true"
                 disabled={true}
                 href=""
                 type="submit"
@@ -5570,6 +5584,7 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
             >
               <button
                 className="c27 c23 c24"
+                data-ui-button="true"
                 disabled={false}
                 href=""
                 icon={true}
@@ -6684,6 +6699,7 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
             >
               <button
                 className="c22 c23 c24"
+                data-ui-button="true"
                 disabled={false}
                 href=""
                 onClick={[Function]}
@@ -6695,6 +6711,7 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
               </button>
               <button
                 className="c25 c23 c24"
+                data-ui-button="true"
                 disabled={true}
                 href=""
                 type="submit"
@@ -6709,6 +6726,7 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
             >
               <button
                 className="c27 c23 c24"
+                data-ui-button="true"
                 disabled={false}
                 href=""
                 icon={true}
@@ -7869,6 +7887,7 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
             >
               <button
                 className="c22 c23 c24"
+                data-ui-button="true"
                 disabled={true}
                 href=""
                 onClick={[Function]}
@@ -7880,6 +7899,7 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
               </button>
               <button
                 className="c25 c23 c24"
+                data-ui-button="true"
                 disabled={true}
                 href=""
                 type="submit"
@@ -7921,6 +7941,7 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
             >
               <button
                 className="c31 c23 c24"
+                data-ui-button="true"
                 disabled={true}
                 href=""
                 icon={true}
@@ -8960,6 +8981,7 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
             >
               <button
                 className="c22 c23 c24"
+                data-ui-button="true"
                 disabled={false}
                 href=""
                 onClick={[Function]}
@@ -8971,6 +8993,7 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
               </button>
               <button
                 className="c25 c23 c24"
+                data-ui-button="true"
                 disabled={true}
                 href=""
                 type="submit"
@@ -8985,6 +9008,7 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
             >
               <button
                 className="c27 c23 c24"
+                data-ui-button="true"
                 disabled={false}
                 href=""
                 icon={true}

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

@@ -1002,6 +1002,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
             >
               <button
                 className="c22 c23 c24"
+                data-ui-button="true"
                 disabled={false}
                 href=""
                 onClick={[Function]}
@@ -1013,6 +1014,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
               </button>
               <button
                 className="c25 c23 c24"
+                data-ui-button="true"
                 disabled={true}
                 href=""
                 type="submit"
@@ -1027,6 +1029,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
             >
               <button
                 className="c27 c23 c24"
+                data-ui-button="true"
                 disabled={false}
                 href=""
                 icon={true}
@@ -2076,6 +2079,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
             >
               <button
                 className="c22 c23 c24"
+                data-ui-button="true"
                 disabled={false}
                 href=""
                 onClick={[Function]}
@@ -2087,6 +2091,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
               </button>
               <button
                 className="c25 c23 c24"
+                data-ui-button="true"
                 disabled={true}
                 href=""
                 type="submit"
@@ -2101,6 +2106,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
             >
               <button
                 className="c27 c23 c24"
+                data-ui-button="true"
                 disabled={false}
                 href=""
                 icon={true}

packages/my-joy-instances/src/components/create-instance/__tests__/__snapshots__/name.spec.js.snap

@@ -381,6 +381,7 @@ exports[`renders <Name /> without throwing 1`] = `
       >
         <button
           className="c10 c11 c12"
+          data-ui-button="true"
           href=""
           icon={true}
           onClick={undefined}
@@ -797,6 +798,7 @@ exports[`renders <Name expanded /> without throwing 1`] = `
       >
         <button
           className="c10 c11 c12"
+          data-ui-button="true"
           href=""
           icon={true}
           onClick={undefined}
@@ -1213,6 +1215,7 @@ exports[`renders <Name name="test" /> without throwing 1`] = `
       >
         <button
           className="c10 c11 c12"
+          data-ui-button="true"
           href=""
           icon={true}
           onClick={undefined}
@@ -1629,6 +1632,7 @@ exports[`renders <Name pristine={false} /> without throwing 1`] = `
       >
         <button
           className="c10 c11 c12"
+          data-ui-button="true"
           href=""
           icon={true}
           onClick={undefined}

packages/my-joy-instances/src/components/create-instance/__tests__/__snapshots__/package.spec.js.snap

@@ -729,6 +729,7 @@ exports[`renders <Filters /> without throwing 1`] = `
   >
     <button
       className="c14 c15 c16"
+      data-ui-button="true"
       href=""
       onClick={undefined}
       type="button"
@@ -2912,9 +2913,7 @@ exports[`renders <Packages loading /> without throwing 1`] = `
 </form>
 `;
 
-exports[
+exports[`renders <Packages packages=[{name: stuff, imageName: stuff}] /> without throwing 1`] = `
-  `renders <Packages packages=[{name: stuff, imageName: stuff}] /> without throwing 1`
-] = `
 .c4 {
   margin-bottom: 0.125rem;
   margin-left: 0.5625rem;

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

@@ -4292,6 +4292,34 @@ exports[`renders <Item /> without throwing 1`] = `
   padding: 0rem;
 }
 
+.c14 {
+  width: 0.75rem;
+  height: 0.75rem;
+  border-radius: 50%;
+  background-color: rgb(0,152,88);
+  display: inline-block;
+  margin-right: 0rem;
+  margin-left: 0rem;
+}
+
+.c19 {
+  cursor: pointer;
+  height: 100%;
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
 .c21 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -4320,16 +4348,6 @@ exports[`renders <Item /> without throwing 1`] = `
   align-items: center;
 }
 
-.c14 {
-  width: 0.75rem;
-  height: 0.75rem;
-  border-radius: 50%;
-  background-color: rgb(0,152,88);
-  display: inline-block;
-  margin-right: 0rem;
-  margin-left: 0rem;
-}
-
 .c10 {
   color: rgb(100,100,100);
   position: absolute;
@@ -4525,24 +4543,6 @@ exports[`renders <Item /> without throwing 1`] = `
   border-bottom-width: 0.0625rem;
 }
 
-.c19 {
-  cursor: pointer;
-  height: 100%;
-  width: 100%;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
 .c11 {
   color: rgba(73,73,73,1);
   -webkit-text-decoration: none;
@@ -4681,6 +4681,11 @@ exports[`renders <Item /> without throwing 1`] = `
           onClick={[Function]}
           onMouseEnter={undefined}
           onMouseLeave={undefined}
+          style={
+            Object {
+              "display": "inline-block",
+            }
+          }
           tag="div"
         >
           <div
@@ -4806,6 +4811,34 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
   padding: 0rem;
 }
 
+.c14 {
+  width: 0.75rem;
+  height: 0.75rem;
+  border-radius: 50%;
+  background-color: rgb(59,70,204);
+  display: inline-block;
+  margin-right: 0rem;
+  margin-left: 0rem;
+}
+
+.c19 {
+  cursor: pointer;
+  height: 100%;
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
 .c21 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -4834,16 +4867,6 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
   align-items: center;
 }
 
-.c14 {
-  width: 0.75rem;
-  height: 0.75rem;
-  border-radius: 50%;
-  background-color: rgb(59,70,204);
-  display: inline-block;
-  margin-right: 0rem;
-  margin-left: 0rem;
-}
-
 .c10 {
   color: rgb(100,100,100);
   position: absolute;
@@ -5039,24 +5062,6 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
   border-bottom-width: 0.0625rem;
 }
 
-.c19 {
-  cursor: pointer;
-  height: 100%;
-  width: 100%;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
 .c11 {
   color: rgba(73,73,73,1);
   -webkit-text-decoration: none;
@@ -5197,6 +5202,11 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
           onClick={[Function]}
           onMouseEnter={undefined}
           onMouseLeave={undefined}
+          style={
+            Object {
+              "display": "inline-block",
+            }
+          }
           tag="div"
         >
           <div
@@ -5322,6 +5332,34 @@ exports[`renders <Item allowedActions /> without throwing 1`] = `
   padding: 0rem;
 }
 
+.c14 {
+  width: 0.75rem;
+  height: 0.75rem;
+  border-radius: 50%;
+  background-color: rgb(0,152,88);
+  display: inline-block;
+  margin-right: 0rem;
+  margin-left: 0rem;
+}
+
+.c19 {
+  cursor: pointer;
+  height: 100%;
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
 .c21 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -5350,16 +5388,6 @@ exports[`renders <Item allowedActions /> without throwing 1`] = `
   align-items: center;
 }
 
-.c14 {
-  width: 0.75rem;
-  height: 0.75rem;
-  border-radius: 50%;
-  background-color: rgb(0,152,88);
-  display: inline-block;
-  margin-right: 0rem;
-  margin-left: 0rem;
-}
-
 .c10 {
   color: rgb(100,100,100);
   position: absolute;
@@ -5555,24 +5583,6 @@ exports[`renders <Item allowedActions /> without throwing 1`] = `
   border-bottom-width: 0.0625rem;
 }
 
-.c19 {
-  cursor: pointer;
-  height: 100%;
-  width: 100%;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
 .c11 {
   color: rgba(73,73,73,1);
   -webkit-text-decoration: none;
@@ -5711,6 +5721,11 @@ exports[`renders <Item allowedActions /> without throwing 1`] = `
           onClick={[Function]}
           onMouseEnter={undefined}
           onMouseLeave={undefined}
+          style={
+            Object {
+              "display": "inline-block",
+            }
+          }
           tag="div"
         >
           <div

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

@@ -1040,6 +1040,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
             >
               <button
                 className="c22 c23 c24"
+                data-ui-button="true"
                 disabled={false}
                 href=""
                 onClick={[Function]}
@@ -1051,6 +1052,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
               </button>
               <button
                 className="c25 c23 c24"
+                data-ui-button="true"
                 disabled={true}
                 href=""
                 type="submit"
@@ -1065,6 +1067,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
             >
               <button
                 className="c27 c23 c24"
+                data-ui-button="true"
                 disabled={false}
                 href=""
                 icon={true}
@@ -2171,6 +2174,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
             >
               <button
                 className="c23 c24 c25"
+                data-ui-button="true"
                 disabled={false}
                 href=""
                 onClick={[Function]}
@@ -2182,6 +2186,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
               </button>
               <button
                 className="c26 c24 c25"
+                data-ui-button="true"
                 disabled={true}
                 href=""
                 type="submit"
@@ -2196,6 +2201,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
             >
               <button
                 className="c28 c24 c25"
+                data-ui-button="true"
                 disabled={false}
                 href=""
                 icon={true}

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

@@ -908,6 +908,24 @@ exports[`renders <Item /> without throwing 1`] = `
   margin-left: 0rem;
 }
 
+.c13 {
+  cursor: pointer;
+  height: 100%;
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
 .c8 {
   color: rgb(100,100,100);
   position: absolute;
@@ -1066,24 +1084,6 @@ exports[`renders <Item /> without throwing 1`] = `
   border-bottom-width: 0.0625rem;
 }
 
-.c13 {
-  cursor: pointer;
-  height: 100%;
-  width: 100%;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
 @media only screen and (min-width:47.9375rem) {
   .c10 {
     width: 10rem;
@@ -1176,6 +1176,11 @@ exports[`renders <Item /> without throwing 1`] = `
       onClick={[Function]}
       onMouseEnter={undefined}
       onMouseLeave={undefined}
+      style={
+        Object {
+          "display": "inline-block",
+        }
+      }
       tag="div"
     >
       <svg
@@ -1287,6 +1292,24 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
   margin-left: 0rem;
 }
 
+.c13 {
+  cursor: pointer;
+  height: 100%;
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
 .c8 {
   color: rgb(100,100,100);
   position: absolute;
@@ -1445,24 +1468,6 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
   border-bottom-width: 0.0625rem;
 }
 
-.c13 {
-  cursor: pointer;
-  height: 100%;
-  width: 100%;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
 @media only screen and (min-width:47.9375rem) {
   .c10 {
     width: 10rem;
@@ -1557,6 +1562,11 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
       onClick={[Function]}
       onMouseEnter={undefined}
       onMouseLeave={undefined}
+      style={
+        Object {
+          "display": "inline-block",
+        }
+      }
       tag="div"
     >
       <svg

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

@@ -327,6 +327,7 @@ exports[`renders <Toolbar /> without throwing 1`] = `
     />
     <button
       className="c8 c9 c10"
+      data-ui-button="true"
       disabled={false}
       href=""
       icon={true}
@@ -667,6 +668,7 @@ exports[`renders <Toolbar actionLabel /> without throwing 1`] = `
     />
     <button
       className="c8 c9 c10"
+      data-ui-button="true"
       disabled={false}
       href=""
       icon={true}
@@ -1029,6 +1031,7 @@ exports[`renders <Toolbar actionable /> without throwing 1`] = `
     />
     <button
       className="c8 c9 c10"
+      data-ui-button="true"
       disabled={true}
       href=""
       icon={true}
@@ -1369,6 +1372,7 @@ exports[`renders <Toolbar onActionClick /> without throwing 1`] = `
     />
     <button
       className="c8 c9 c10"
+      data-ui-button="true"
       disabled={false}
       href=""
       icon={true}
@@ -1709,6 +1713,7 @@ exports[`renders <Toolbar searchLabel /> without throwing 1`] = `
     />
     <button
       className="c8 c9 c10"
+      data-ui-button="true"
       disabled={false}
       href=""
       icon={true}
@@ -2049,6 +2054,7 @@ exports[`renders <Toolbar searchPlaceholder /> without throwing 1`] = `
     />
     <button
       className="c8 c9 c10"
+      data-ui-button="true"
       disabled={false}
       href=""
       icon={true}
@@ -2404,6 +2410,7 @@ exports[`renders <Toolbar searchable /> without throwing 1`] = `
     />
     <button
       className="c8 c9 c10"
+      data-ui-button="true"
       disabled={false}
       href=""
       icon={true}

packages/my-joy-instances/src/containers/create-instance/__tests__/__snapshots__/metadata.spec.js.snap

@@ -1457,6 +1457,7 @@ Array [
                         >
                             <button
                                 className="c22 c23 c24"
+                                data-ui-button="true"
                                 disabled={false}
                                 href=""
                                 onClick={[Function]}
@@ -1468,6 +1469,7 @@ Array [
                             </button>
                             <button
                                 className="c25 c23 c24"
+                                data-ui-button="true"
                                 disabled={true}
                                 href=""
                                 type="submit"
@@ -1482,6 +1484,7 @@ Array [
                         >
                             <button
                                 className="c27 c23 c24"
+                                data-ui-button="true"
                                 disabled={false}
                                 href=""
                                 icon={true}
@@ -1754,6 +1757,7 @@ Array [
 >
     <button
         className="c1 c2 c3"
+        data-ui-button="true"
         href=""
         onClick={[Function]}
         type="button"
@@ -1762,6 +1766,7 @@ Array [
     </button>
     <button
         className="c4 c2 c3"
+        data-ui-button="true"
         href=""
         onClick={undefined}
         type="button"
@@ -2247,6 +2252,7 @@ Array [
 >
     <button
         className="c1 c2 c3"
+        data-ui-button="true"
         href=""
         onClick={[Function]}
         type="button"
@@ -2255,6 +2261,7 @@ Array [
     </button>
     <button
         className="c4 c2 c3"
+        data-ui-button="true"
         href=""
         onClick={undefined}
         type="button"
@@ -3470,6 +3477,7 @@ Array [
                         >
                             <button
                                 className="c23 c24 c25"
+                                data-ui-button="true"
                                 disabled={false}
                                 href=""
                                 onClick={[Function]}
@@ -3481,6 +3489,7 @@ Array [
                             </button>
                             <button
                                 className="c26 c24 c25"
+                                data-ui-button="true"
                                 disabled={true}
                                 href=""
                                 type="submit"
@@ -3495,6 +3504,7 @@ Array [
                         >
                             <button
                                 className="c28 c24 c25"
+                                data-ui-button="true"
                                 disabled={false}
                                 href=""
                                 icon={true}
@@ -4616,6 +4626,7 @@ Array [
                         >
                             <button
                                 className="c23 c24 c25"
+                                data-ui-button="true"
                                 disabled={false}
                                 href=""
                                 onClick={[Function]}
@@ -4627,6 +4638,7 @@ Array [
                             </button>
                             <button
                                 className="c26 c24 c25"
+                                data-ui-button="true"
                                 disabled={true}
                                 href=""
                                 type="submit"
@@ -4641,6 +4653,7 @@ Array [
                         >
                             <button
                                 className="c28 c24 c25"
+                                data-ui-button="true"
                                 disabled={false}
                                 href=""
                                 icon={true}
@@ -6052,6 +6065,7 @@ Array [
                         >
                             <button
                                 className="c23 c24 c25"
+                                data-ui-button="true"
                                 disabled={false}
                                 href=""
                                 onClick={[Function]}
@@ -6063,6 +6077,7 @@ Array [
                             </button>
                             <button
                                 className="c26 c24 c25"
+                                data-ui-button="true"
                                 disabled={true}
                                 href=""
                                 type="submit"
@@ -6077,6 +6092,7 @@ Array [
                         >
                             <button
                                 className="c28 c24 c25"
+                                data-ui-button="true"
                                 disabled={false}
                                 href=""
                                 icon={true}
@@ -7217,6 +7233,7 @@ Array [
                         >
                             <button
                                 className="c23 c24 c25"
+                                data-ui-button="true"
                                 disabled={false}
                                 href=""
                                 onClick={[Function]}
@@ -7228,6 +7245,7 @@ Array [
                             </button>
                             <button
                                 className="c26 c24 c25"
+                                data-ui-button="true"
                                 disabled={true}
                                 href=""
                                 type="submit"
@@ -7242,6 +7260,7 @@ Array [
                         >
                             <button
                                 className="c28 c24 c25"
+                                data-ui-button="true"
                                 disabled={false}
                                 href=""
                                 icon={true}
@@ -7514,6 +7533,7 @@ Array [
 >
     <button
         className="c1 c2 c3"
+        data-ui-button="true"
         href=""
         onClick={[Function]}
         type="button"
@@ -7522,6 +7542,7 @@ Array [
     </button>
     <button
         className="c4 c2 c3"
+        data-ui-button="true"
         href=""
         onClick={undefined}
         type="button"

packages/my-joy-instances/src/containers/create-instance/__tests__/__snapshots__/networks.spec.js.snap

@@ -2513,6 +2513,7 @@ Array [
 >
     <button
         className="c1 c2 c3"
+        data-ui-button="true"
         href=""
         onClick={undefined}
         type="button"
@@ -3149,6 +3150,7 @@ Array [
 >
     <button
         className="c1 c2 c3"
+        data-ui-button="true"
         href=""
         onClick={undefined}
         type="button"

packages/my-joy-instances/src/containers/create-instance/__tests__/__snapshots__/tag.spec.js.snap

@@ -1421,6 +1421,7 @@ Array [
                         >
                             <button
                                 className="c22 c23 c24"
+                                data-ui-button="true"
                                 disabled={false}
                                 href=""
                                 onClick={[Function]}
@@ -1432,6 +1433,7 @@ Array [
                             </button>
                             <button
                                 className="c25 c23 c24"
+                                data-ui-button="true"
                                 disabled={true}
                                 href=""
                                 type="submit"
@@ -1446,6 +1448,7 @@ Array [
                         >
                             <button
                                 className="c27 c23 c24"
+                                data-ui-button="true"
                                 disabled={false}
                                 href=""
                                 icon={true}
@@ -1718,6 +1721,7 @@ Array [
 >
     <button
         className="c1 c2 c3"
+        data-ui-button="true"
         href=""
         onClick={[Function]}
         type="button"
@@ -1726,6 +1730,7 @@ Array [
     </button>
     <button
         className="c4 c2 c3"
+        data-ui-button="true"
         href=""
         onClick={undefined}
         type="button"
@@ -2220,6 +2225,7 @@ Array [
 >
     <button
         className="c1 c2 c3"
+        data-ui-button="true"
         href=""
         onClick={[Function]}
         type="button"
@@ -2228,6 +2234,7 @@ Array [
     </button>
     <button
         className="c4 c2 c3"
+        data-ui-button="true"
         href=""
         onClick={undefined}
         type="button"
@@ -2865,6 +2872,7 @@ Array [
 >
     <button
         className="c1 c2 c3"
+        data-ui-button="true"
         href=""
         onClick={[Function]}
         type="button"
@@ -2873,6 +2881,7 @@ Array [
     </button>
     <button
         className="c4 c2 c3"
+        data-ui-button="true"
         href=""
         onClick={undefined}
         type="button"

packages/my-joy-instances/src/containers/create-instance/__tests__/__snapshots__/user-script.spec.js.snap

@@ -602,6 +602,7 @@ Array [
     >
         <button
             className="c2 c3 c4"
+            data-ui-button="true"
             href=""
             onClick={[Function]}
             type="button"
@@ -610,6 +611,7 @@ Array [
         </button>
         <button
             className="c5 c3 c4"
+            data-ui-button="true"
             href=""
             onClick={undefined}
             type="submit"
@@ -1080,6 +1082,7 @@ Array [
     >
         <button
             className="c2 c3 c4"
+            data-ui-button="true"
             href=""
             onClick={[Function]}
             type="button"
@@ -1088,6 +1091,7 @@ Array [
         </button>
         <button
             className="c5 c3 c4"
+            data-ui-button="true"
             href=""
             onClick={undefined}
             type="submit"
@@ -1099,9 +1103,7 @@ Array [
 ]
 `;
 
-exports[
+exports[`renders <UserScript expanded create formOpen /> without throwing 1`] = `
-  `renders <UserScript expanded create formOpen /> without throwing 1`
-] = `
 Array [
   .c3 {
   font-size: 80%;
@@ -1473,6 +1475,7 @@ Array [
         >
             <button
                 className="c2 c3 c4"
+                data-ui-button="true"
                 href=""
                 type="submit"
             >
@@ -1864,6 +1867,7 @@ Array [
         >
             <button
                 className="c2 c3 c4"
+                data-ui-button="true"
                 href=""
                 type="submit"
             >
@@ -1883,9 +1887,7 @@ Array [
 ]
 `;
 
-exports[
+exports[`renders <UserScript expanded edit formOpen script /> without throwing 1`] = `
-  `renders <UserScript expanded edit formOpen script /> without throwing 1`
-] = `
 Array [
   .c3 {
   font-size: 80%;
@@ -2257,6 +2259,7 @@ Array [
         >
             <button
                 className="c2 c3 c4"
+                data-ui-button="true"
                 href=""
                 type="submit"
             >
@@ -2601,6 +2604,7 @@ Array [
 >
     <button
         className="c1 c2 c3"
+        data-ui-button="true"
         href=""
         onClick={undefined}
         type="button"

packages/my-joy-instances/src/containers/instances/__tests__/__snapshots__/cns.spec.js.snap

@@ -696,6 +696,7 @@ exports[`renders <Cns /> without throwing 1`] = `
                 >
                   <button
                     className="c22 c23 c24"
+                    data-ui-button="true"
                     disabled={undefined}
                     href=""
                     type="submit"
@@ -2032,7 +2033,11 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
                       onClick={undefined}
                       onMouseEnter={[Function]}
                       onMouseLeave={[Function]}
-                      tag={false}
+                      style={
+                        Object {
+                          "display": "inline-block",
+                        }
+                      }
                     >
                       <svg
                         className="c22"
@@ -2133,7 +2138,11 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
                       onClick={undefined}
                       onMouseEnter={[Function]}
                       onMouseLeave={[Function]}
-                      tag={false}
+                      style={
+                        Object {
+                          "display": "inline-block",
+                        }
+                      }
                     >
                       <svg
                         className="c22"
@@ -2229,6 +2238,7 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
                 >
                   <button
                     className="c31 c32 c33"
+                    data-ui-button="true"
                     disabled={undefined}
                     href=""
                     type="submit"
@@ -2322,7 +2332,11 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
                           onClick={undefined}
                           onMouseEnter={[Function]}
                           onMouseLeave={[Function]}
-                          tag={false}
+                          style={
+                            Object {
+                              "display": "inline-block",
+                            }
+                          }
                         >
                           <svg
                             className="c22"
@@ -2372,7 +2386,11 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
                           onClick={undefined}
                           onMouseEnter={[Function]}
                           onMouseLeave={[Function]}
-                          tag={false}
+                          style={
+                            Object {
+                              "display": "inline-block",
+                            }
+                          }
                         >
                           <svg
                             className="c22"
@@ -2422,7 +2440,11 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
                           onClick={undefined}
                           onMouseEnter={[Function]}
                           onMouseLeave={[Function]}
-                          tag={false}
+                          style={
+                            Object {
+                              "display": "inline-block",
+                            }
+                          }
                         >
                           <svg
                             className="c22"
@@ -2523,7 +2545,11 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
                           onClick={undefined}
                           onMouseEnter={[Function]}
                           onMouseLeave={[Function]}
-                          tag={false}
+                          style={
+                            Object {
+                              "display": "inline-block",
+                            }
+                          }
                         >
                           <svg
                             className="c22"
@@ -2573,7 +2599,11 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
                           onClick={undefined}
                           onMouseEnter={[Function]}
                           onMouseLeave={[Function]}
-                          tag={false}
+                          style={
+                            Object {
+                              "display": "inline-block",
+                            }
+                          }
                         >
                           <svg
                             className="c22"
@@ -2623,7 +2653,11 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
                           onClick={undefined}
                           onMouseEnter={[Function]}
                           onMouseLeave={[Function]}
-                          tag={false}
+                          style={
+                            Object {
+                              "display": "inline-block",
+                            }
+                          }
                         >
                           <svg
                             className="c22"
@@ -3602,6 +3636,7 @@ exports[`renders <Cns loadingError /> without throwing 1`] = `
                 >
                   <button
                     className="c27 c28 c29"
+                    data-ui-button="true"
                     disabled={undefined}
                     href=""
                     type="submit"
@@ -4655,7 +4690,11 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
                       onClick={undefined}
                       onMouseEnter={[Function]}
                       onMouseLeave={[Function]}
-                      tag={false}
+                      style={
+                        Object {
+                          "display": "inline-block",
+                        }
+                      }
                     >
                       <svg
                         className="c22"
@@ -4756,7 +4795,11 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
                       onClick={undefined}
                       onMouseEnter={[Function]}
                       onMouseLeave={[Function]}
-                      tag={false}
+                      style={
+                        Object {
+                          "display": "inline-block",
+                        }
+                      }
                     >
                       <svg
                         className="c22"
@@ -4912,6 +4955,7 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
                 >
                   <button
                     className="c36 c37 c38"
+                    data-ui-button="true"
                     disabled={undefined}
                     href=""
                     type="submit"
@@ -5005,7 +5049,11 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
                           onClick={undefined}
                           onMouseEnter={[Function]}
                           onMouseLeave={[Function]}
-                          tag={false}
+                          style={
+                            Object {
+                              "display": "inline-block",
+                            }
+                          }
                         >
                           <svg
                             className="c22"
@@ -5055,7 +5103,11 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
                           onClick={undefined}
                           onMouseEnter={[Function]}
                           onMouseLeave={[Function]}
-                          tag={false}
+                          style={
+                            Object {
+                              "display": "inline-block",
+                            }
+                          }
                         >
                           <svg
                             className="c22"
@@ -5105,7 +5157,11 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
                           onClick={undefined}
                           onMouseEnter={[Function]}
                           onMouseLeave={[Function]}
-                          tag={false}
+                          style={
+                            Object {
+                              "display": "inline-block",
+                            }
+                          }
                         >
                           <svg
                             className="c22"
@@ -5206,7 +5262,11 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
                           onClick={undefined}
                           onMouseEnter={[Function]}
                           onMouseLeave={[Function]}
-                          tag={false}
+                          style={
+                            Object {
+                              "display": "inline-block",
+                            }
+                          }
                         >
                           <svg
                             className="c22"
@@ -5256,7 +5316,11 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
                           onClick={undefined}
                           onMouseEnter={[Function]}
                           onMouseLeave={[Function]}
-                          tag={false}
+                          style={
+                            Object {
+                              "display": "inline-block",
+                            }
+                          }
                         >
                           <svg
                             className="c22"
@@ -5306,7 +5370,11 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
                           onClick={undefined}
                           onMouseEnter={[Function]}
                           onMouseLeave={[Function]}
-                          tag={false}
+                          style={
+                            Object {
+                              "display": "inline-block",
+                            }
+                          }
                         >
                           <svg
                             className="c22"
@@ -6171,6 +6239,7 @@ exports[`renders <Cns mutationError /> without throwing 1`] = `
                 >
                   <button
                     className="c27 c28 c29"
+                    data-ui-button="true"
                     disabled={undefined}
                     href=""
                     type="submit"
@@ -7142,6 +7211,7 @@ exports[`renders <Cns services /> without throwing 1`] = `
                 >
                   <button
                     className="c28 c29 c30"
+                    data-ui-button="true"
                     disabled={undefined}
                     href=""
                     type="submit"

packages/my-joy-instances/src/containers/instances/__tests__/__snapshots__/list.spec.js.snap

@@ -858,6 +858,7 @@ exports[`renders <List /> without throwing 1`] = `
         />
         <button
           className="c10 c11 c12"
+          data-ui-button="true"
           disabled={false}
           href=""
           icon={true}
@@ -2165,6 +2166,7 @@ exports[`renders <List error /> without throwing 1`] = `
         />
         <button
           className="c10 c11 c12"
+          data-ui-button="true"
           disabled={false}
           href=""
           icon={true}
@@ -2847,6 +2849,34 @@ exports[`renders <List instances /> without throwing 1`] = `
   max-height: 1.125rem;
 }
 
+.c37 {
+  width: 0.75rem;
+  height: 0.75rem;
+  border-radius: 50%;
+  background-color: rgb(0,152,88);
+  display: inline-block;
+  margin-right: 0rem;
+  margin-left: 0rem;
+}
+
+.c41 {
+  cursor: pointer;
+  height: 100%;
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
 .c5 {
   font-size: 0.9375rem;
   line-height: 1.125rem;
@@ -2963,16 +2993,6 @@ exports[`renders <List instances /> without throwing 1`] = `
   align-items: center;
 }
 
-.c37 {
-  width: 0.75rem;
-  height: 0.75rem;
-  border-radius: 50%;
-  background-color: rgb(0,152,88);
-  display: inline-block;
-  margin-right: 0rem;
-  margin-left: 0rem;
-}
-
 .c23 {
   color: rgb(100,100,100);
   position: absolute;
@@ -3501,24 +3521,6 @@ exports[`renders <List instances /> without throwing 1`] = `
   border-bottom-width: 0.0625rem;
 }
 
-.c41 {
-  cursor: pointer;
-  height: 100%;
-  width: 100%;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
 .c34 {
   color: rgba(73,73,73,1);
   -webkit-text-decoration: none;
@@ -3633,6 +3635,7 @@ exports[`renders <List instances /> without throwing 1`] = `
         />
         <button
           className="c10 c11 c12"
+          data-ui-button="true"
           disabled={false}
           href=""
           icon={true}
@@ -3887,6 +3890,11 @@ exports[`renders <List instances /> without throwing 1`] = `
               onClick={[Function]}
               onMouseEnter={undefined}
               onMouseLeave={undefined}
+              style={
+                Object {
+                  "display": "inline-block",
+                }
+              }
               tag="div"
             >
               <div
@@ -4018,6 +4026,11 @@ exports[`renders <List instances /> without throwing 1`] = `
               onClick={[Function]}
               onMouseEnter={undefined}
               onMouseLeave={undefined}
+              style={
+                Object {
+                  "display": "inline-block",
+                }
+              }
               tag="div"
             >
               <div
@@ -4947,6 +4960,34 @@ exports[`renders <List instances selected /> without throwing 1`] = `
   max-height: 1.125rem;
 }
 
+.c37 {
+  width: 0.75rem;
+  height: 0.75rem;
+  border-radius: 50%;
+  background-color: rgb(0,152,88);
+  display: inline-block;
+  margin-right: 0rem;
+  margin-left: 0rem;
+}
+
+.c41 {
+  cursor: pointer;
+  height: 100%;
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
 .c5 {
   font-size: 0.9375rem;
   line-height: 1.125rem;
@@ -5156,16 +5197,6 @@ exports[`renders <List instances selected /> without throwing 1`] = `
   align-items: center;
 }
 
-.c37 {
-  width: 0.75rem;
-  height: 0.75rem;
-  border-radius: 50%;
-  background-color: rgb(0,152,88);
-  display: inline-block;
-  margin-right: 0rem;
-  margin-left: 0rem;
-}
-
 .c23 {
   color: rgb(100,100,100);
   position: absolute;
@@ -5694,24 +5725,6 @@ exports[`renders <List instances selected /> without throwing 1`] = `
   border-bottom-width: 0.0625rem;
 }
 
-.c41 {
-  cursor: pointer;
-  height: 100%;
-  width: 100%;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
 .c34 {
   color: rgba(73,73,73,1);
   -webkit-text-decoration: none;
@@ -5887,6 +5900,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
         />
         <button
           className="c10 c11 c12"
+          data-ui-button="true"
           disabled={false}
           href=""
           icon={true}
@@ -6141,6 +6155,11 @@ exports[`renders <List instances selected /> without throwing 1`] = `
               onClick={[Function]}
               onMouseEnter={undefined}
               onMouseLeave={undefined}
+              style={
+                Object {
+                  "display": "inline-block",
+                }
+              }
               tag="div"
             >
               <div
@@ -6272,6 +6291,11 @@ exports[`renders <List instances selected /> without throwing 1`] = `
               onClick={[Function]}
               onMouseEnter={undefined}
               onMouseLeave={undefined}
+              style={
+                Object {
+                  "display": "inline-block",
+                }
+              }
               tag="div"
             >
               <div
@@ -6399,6 +6423,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
           >
             <button
               className="c53 c11 c12"
+              data-ui-button="true"
               disabled={true}
               href=""
               icon={true}
@@ -6431,6 +6456,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
           >
             <button
               className="c54 c11 c12"
+              data-ui-button="true"
               disabled={true}
               href=""
               icon={true}
@@ -6466,6 +6492,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
           >
             <button
               className="c53 c11 c12"
+              data-ui-button="true"
               disabled={true}
               href=""
               icon={true}
@@ -6498,6 +6525,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
           >
             <button
               className="c54 c11 c12"
+              data-ui-button="true"
               disabled={true}
               href=""
               icon={true}
@@ -6533,6 +6561,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
           >
             <button
               className="c53 c11 c12"
+              data-ui-button="true"
               disabled={true}
               href=""
               icon={true}
@@ -6581,6 +6610,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
           >
             <button
               className="c54 c11 c12"
+              data-ui-button="true"
               disabled={true}
               href=""
               icon={true}
@@ -6636,6 +6666,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
           >
             <button
               className="c56 c11 c12"
+              data-ui-button="true"
               disabled={true}
               href=""
               icon={true}
@@ -6668,6 +6699,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
           >
             <button
               className="c57 c11 c12"
+              data-ui-button="true"
               disabled={true}
               href=""
               icon={true}
@@ -7521,6 +7553,34 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
   max-height: 1.125rem;
 }
 
+.c37 {
+  width: 0.75rem;
+  height: 0.75rem;
+  border-radius: 50%;
+  background-color: rgb(0,152,88);
+  display: inline-block;
+  margin-right: 0rem;
+  margin-left: 0rem;
+}
+
+.c41 {
+  cursor: pointer;
+  height: 100%;
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
 .c5 {
   font-size: 0.9375rem;
   line-height: 1.125rem;
@@ -7730,16 +7790,6 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
   align-items: center;
 }
 
-.c37 {
-  width: 0.75rem;
-  height: 0.75rem;
-  border-radius: 50%;
-  background-color: rgb(0,152,88);
-  display: inline-block;
-  margin-right: 0rem;
-  margin-left: 0rem;
-}
-
 .c23 {
   color: rgb(100,100,100);
   position: absolute;
@@ -8268,24 +8318,6 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
   border-bottom-width: 0.0625rem;
 }
 
-.c41 {
-  cursor: pointer;
-  height: 100%;
-  width: 100%;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
 .c34 {
   color: rgba(73,73,73,1);
   -webkit-text-decoration: none;
@@ -8461,6 +8493,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
         />
         <button
           className="c10 c11 c12"
+          data-ui-button="true"
           disabled={false}
           href=""
           icon={true}
@@ -8715,6 +8748,11 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
               onClick={[Function]}
               onMouseEnter={undefined}
               onMouseLeave={undefined}
+              style={
+                Object {
+                  "display": "inline-block",
+                }
+              }
               tag="div"
             >
               <div
@@ -8846,6 +8884,11 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
               onClick={[Function]}
               onMouseEnter={undefined}
               onMouseLeave={undefined}
+              style={
+                Object {
+                  "display": "inline-block",
+                }
+              }
               tag="div"
             >
               <div
@@ -8973,6 +9016,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
           >
             <button
               className="c53 c11 c12"
+              data-ui-button="true"
               disabled={true}
               href=""
               icon={true}
@@ -9005,6 +9049,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
           >
             <button
               className="c54 c11 c12"
+              data-ui-button="true"
               disabled={true}
               href=""
               icon={true}
@@ -9040,6 +9085,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
           >
             <button
               className="c53 c11 c12"
+              data-ui-button="true"
               disabled={true}
               href=""
               icon={true}
@@ -9072,6 +9118,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
           >
             <button
               className="c54 c11 c12"
+              data-ui-button="true"
               disabled={true}
               href=""
               icon={true}
@@ -9107,6 +9154,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
           >
             <button
               className="c53 c11 c12"
+              data-ui-button="true"
               disabled={true}
               href=""
               icon={true}
@@ -9155,6 +9203,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
           >
             <button
               className="c54 c11 c12"
+              data-ui-button="true"
               disabled={true}
               href=""
               icon={true}
@@ -9210,6 +9259,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
           >
             <button
               className="c56 c11 c12"
+              data-ui-button="true"
               disabled={true}
               href=""
               icon={true}
@@ -9242,6 +9292,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
           >
             <button
               className="c57 c11 c12"
+              data-ui-button="true"
               disabled={true}
               href=""
               icon={true}
@@ -10308,6 +10359,34 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   max-height: 1.125rem;
 }
 
+.c37 {
+  width: 0.75rem;
+  height: 0.75rem;
+  border-radius: 50%;
+  background-color: rgb(0,152,88);
+  display: inline-block;
+  margin-right: 0rem;
+  margin-left: 0rem;
+}
+
+.c41 {
+  cursor: pointer;
+  height: 100%;
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
 .c5 {
   font-size: 0.9375rem;
   line-height: 1.125rem;
@@ -10517,16 +10596,6 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   align-items: center;
 }
 
-.c37 {
-  width: 0.75rem;
-  height: 0.75rem;
-  border-radius: 50%;
-  background-color: rgb(0,152,88);
-  display: inline-block;
-  margin-right: 0rem;
-  margin-left: 0rem;
-}
-
 .c23 {
   color: rgb(100,100,100);
   position: absolute;
@@ -11055,24 +11124,6 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   border-bottom-width: 0.0625rem;
 }
 
-.c41 {
-  cursor: pointer;
-  height: 100%;
-  width: 100%;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
 .c34 {
   color: rgba(73,73,73,1);
   -webkit-text-decoration: none;
@@ -11248,6 +11299,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
         />
         <button
           className="c10 c11 c12"
+          data-ui-button="true"
           disabled={false}
           href=""
           icon={true}
@@ -11502,6 +11554,11 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
               onClick={[Function]}
               onMouseEnter={undefined}
               onMouseLeave={undefined}
+              style={
+                Object {
+                  "display": "inline-block",
+                }
+              }
               tag="div"
             >
               <div
@@ -11633,6 +11690,11 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
               onClick={[Function]}
               onMouseEnter={undefined}
               onMouseLeave={undefined}
+              style={
+                Object {
+                  "display": "inline-block",
+                }
+              }
               tag="div"
             >
               <div
@@ -11760,6 +11822,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
           >
             <button
               className="c53 c11 c12"
+              data-ui-button="true"
               disabled={false}
               href=""
               icon={true}
@@ -11792,6 +11855,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
           >
             <button
               className="c54 c11 c12"
+              data-ui-button="true"
               disabled={false}
               href=""
               icon={true}
@@ -11827,6 +11891,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
           >
             <button
               className="c55 c11 c12"
+              data-ui-button="true"
               disabled={true}
               href=""
               icon={true}
@@ -11859,6 +11924,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
           >
             <button
               className="c56 c11 c12"
+              data-ui-button="true"
               disabled={true}
               href=""
               icon={true}
@@ -11894,6 +11960,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
           >
             <button
               className="c55 c11 c12"
+              data-ui-button="true"
               disabled={true}
               href=""
               icon={true}
@@ -11942,6 +12009,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
           >
             <button
               className="c56 c11 c12"
+              data-ui-button="true"
               disabled={true}
               href=""
               icon={true}
@@ -11997,6 +12065,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
           >
             <button
               className="c58 c11 c12"
+              data-ui-button="true"
               disabled={true}
               href=""
               icon={true}
@@ -12029,6 +12098,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
           >
             <button
               className="c59 c11 c12"
+              data-ui-button="true"
               disabled={true}
               href=""
               icon={true}
@@ -12541,6 +12611,7 @@ exports[`renders <List loading /> without throwing 1`] = `
         />
         <button
           className="c10 c11 c12"
+          data-ui-button="true"
           disabled={false}
           href=""
           icon={true}

packages/my-joy-instances/src/containers/instances/__tests__/__snapshots__/metadata.spec.js.snap

@@ -419,6 +419,7 @@ exports[`renders <Metadata /> without throwing 1`] = `
         />
         <button
           className="c9 c10 c11"
+          data-ui-button="true"
           disabled={false}
           href=""
           icon={true}
@@ -1640,6 +1641,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
         />
         <button
           className="c9 c10 c11"
+          data-ui-button="true"
           disabled={false}
           href=""
           icon={true}
@@ -1807,6 +1809,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
               >
                 <button
                   className="c34 c10 c11"
+                  data-ui-button="true"
                   disabled={false}
                   href=""
                   onClick={[Function]}
@@ -1818,6 +1821,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
                 </button>
                 <button
                   className="c35 c10 c11"
+                  data-ui-button="true"
                   disabled={true}
                   href=""
                   type="submit"
@@ -1832,6 +1836,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
               >
                 <button
                   className="c37 c10 c11"
+                  data-ui-button="true"
                   disabled={false}
                   href=""
                   icon={true}
@@ -2343,6 +2348,7 @@ exports[`renders <Metadata error /> without throwing 1`] = `
         />
         <button
           className="c9 c10 c11"
+          data-ui-button="true"
           disabled={false}
           href=""
           icon={true}
@@ -2897,6 +2903,7 @@ exports[`renders <Metadata loading /> without throwing 1`] = `
         />
         <button
           className="c9 c10 c11"
+          data-ui-button="true"
           disabled={true}
           href=""
           icon={true}
@@ -4353,6 +4360,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
         />
         <button
           className="c9 c10 c11"
+          data-ui-button="true"
           disabled={false}
           href=""
           icon={true}
@@ -4551,6 +4559,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
                 >
                   <button
                     className="c38 c10 c11"
+                    data-ui-button="true"
                     disabled={false}
                     href=""
                     onClick={[Function]}
@@ -4562,6 +4571,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
                   </button>
                   <button
                     className="c39 c10 c11"
+                    data-ui-button="true"
                     disabled={true}
                     href=""
                     type="submit"
@@ -4576,6 +4586,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
                 >
                   <button
                     className="c41 c10 c11"
+                    data-ui-button="true"
                     disabled={false}
                     href=""
                     icon={true}
@@ -4771,6 +4782,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
                 >
                   <button
                     className="c38 c10 c11"
+                    data-ui-button="true"
                     disabled={false}
                     href=""
                     onClick={[Function]}
@@ -4782,6 +4794,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
                   </button>
                   <button
                     className="c39 c10 c11"
+                    data-ui-button="true"
                     disabled={true}
                     href=""
                     type="submit"
@@ -4796,6 +4809,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
                 >
                   <button
                     className="c41 c10 c11"
+                    data-ui-button="true"
                     disabled={false}
                     href=""
                     icon={true}
@@ -4991,6 +5005,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
                 >
                   <button
                     className="c38 c10 c11"
+                    data-ui-button="true"
                     disabled={false}
                     href=""
                     onClick={[Function]}
@@ -5002,6 +5017,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
                   </button>
                   <button
                     className="c39 c10 c11"
+                    data-ui-button="true"
                     disabled={true}
                     href=""
                     type="submit"
@@ -5016,6 +5032,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
                 >
                   <button
                     className="c42 c10 c11"
+                    data-ui-button="true"
                     disabled={false}
                     href=""
                     icon={true}

packages/my-joy-instances/src/containers/instances/__tests__/__snapshots__/summary.spec.js.snap

@@ -728,9 +728,7 @@ exports[`renders <Summary mutationError /> without throwing 1`] = `
 </div>
 `;
 
-exports[
+exports[`renders <Summary starting stopping rebooting removing /> without throwing 1`] = `
-  `renders <Summary starting stopping rebooting removing /> without throwing 1`
-] = `
 .c2 {
   fill: rgb(59,70,204);
   stroke: rgb(59,70,204);
@@ -896,9 +894,7 @@ exports[
 </div>
 `;
 
-exports[
+exports[`renders <Summary starting stopping rebooting removing /> without throwing 2`] = `
-  `renders <Summary starting stopping rebooting removing /> without throwing 2`
-] = `
 .c9 {
   margin-top: 0.75rem;
   margin-bottom: 1.125rem;
@@ -1830,6 +1826,16 @@ exports[
   max-height: 1.125rem;
 }
 
+.c14 {
+  width: 0.9375rem;
+  height: 0.9375rem;
+  border-radius: 50%;
+  background-color: rgb(0,152,88);
+  display: inline-block;
+  margin-right: 0.375rem;
+  margin-left: 0rem;
+}
+
 .c12 {
   font-size: 0.9375rem;
   line-height: 1.125rem;
@@ -1999,16 +2005,6 @@ exports[
   height: 0.0625rem;
 }
 
-.c14 {
-  width: 0.9375rem;
-  height: 0.9375rem;
-  border-radius: 50%;
-  background-color: rgb(0,152,88);
-  display: inline-block;
-  margin-right: 0.375rem;
-  margin-left: 0rem;
-}
-
 .c3 {
   box-sizing: content-box;
   display: -webkit-box;
@@ -2488,6 +2484,7 @@ exports[
               >
                 <a
                   className="c19 c20 c21 c22"
+                  data-ui-button="true"
                   href="http://localhost/images/~create/undefined"
                   icon={true}
                   rel="noopener noreferrer"
@@ -2522,6 +2519,7 @@ exports[
                 >
                   <button
                     className="c24 c20 c25"
+                    data-ui-button="true"
                     disabled={true}
                     href=""
                     icon={true}
@@ -2554,6 +2552,7 @@ exports[
                 >
                   <button
                     className="c26 c20 c25"
+                    data-ui-button="true"
                     disabled={true}
                     href=""
                     icon={true}
@@ -2589,6 +2588,7 @@ exports[
                 >
                   <button
                     className="c27 c20 c25"
+                    data-ui-button="true"
                     disabled={false}
                     href=""
                     icon={true}
@@ -2621,6 +2621,7 @@ exports[
                 >
                   <button
                     className="c28 c20 c25"
+                    data-ui-button="true"
                     disabled={false}
                     href=""
                     icon={true}
@@ -2656,6 +2657,7 @@ exports[
                 >
                   <button
                     className="c27 c20 c25"
+                    data-ui-button="true"
                     disabled={false}
                     href=""
                     icon={true}
@@ -2704,6 +2706,7 @@ exports[
                 >
                   <button
                     className="c28 c20 c25"
+                    data-ui-button="true"
                     disabled={false}
                     href=""
                     icon={true}
@@ -2759,6 +2762,7 @@ exports[
                 >
                   <button
                     className="c30 c20 c25"
+                    data-ui-button="true"
                     disabled={false}
                     href=""
                     icon={true}
@@ -2791,6 +2795,7 @@ exports[
                 >
                   <button
                     className="c31 c20 c25"
+                    data-ui-button="true"
                     disabled={false}
                     href=""
                     icon={true}
@@ -2856,7 +2861,11 @@ exports[
                     onClick={undefined}
                     onMouseEnter={[Function]}
                     onMouseLeave={[Function]}
-                    tag={false}
+                    style={
+                      Object {
+                        "display": "inline-block",
+                      }
+                    }
                   >
                     <svg
                       className="c38"
@@ -2907,7 +2916,11 @@ exports[
                     onClick={undefined}
                     onMouseEnter={[Function]}
                     onMouseLeave={[Function]}
-                    tag={false}
+                    style={
+                      Object {
+                        "display": "inline-block",
+                      }
+                    }
                   >
                     <svg
                       className="c38"
@@ -2958,7 +2971,11 @@ exports[
                     onClick={undefined}
                     onMouseEnter={[Function]}
                     onMouseLeave={[Function]}
-                    tag={false}
+                    style={
+                      Object {
+                        "display": "inline-block",
+                      }
+                    }
                   >
                     <svg
                       className="c38"
@@ -3009,7 +3026,11 @@ exports[
                     onClick={undefined}
                     onMouseEnter={[Function]}
                     onMouseLeave={[Function]}
-                    tag={false}
+                    style={
+                      Object {
+                        "display": "inline-block",
+                      }
+                    }
                   >
                     <svg
                       className="c38"
@@ -3060,7 +3081,11 @@ exports[
                     onClick={undefined}
                     onMouseEnter={[Function]}
                     onMouseLeave={[Function]}
-                    tag={false}
+                    style={
+                      Object {
+                        "display": "inline-block",
+                      }
+                    }
                   >
                     <svg
                       className="c38"
@@ -3111,7 +3136,11 @@ exports[
                     onClick={undefined}
                     onMouseEnter={[Function]}
                     onMouseLeave={[Function]}
-                    tag={false}
+                    style={
+                      Object {
+                        "display": "inline-block",
+                      }
+                    }
                   >
                     <svg
                       className="c38"
@@ -3162,7 +3191,11 @@ exports[
                     onClick={undefined}
                     onMouseEnter={[Function]}
                     onMouseLeave={[Function]}
-                    tag={false}
+                    style={
+                      Object {
+                        "display": "inline-block",
+                      }
+                    }
                   >
                     <svg
                       className="c38"
@@ -3213,7 +3246,11 @@ exports[
                     onClick={undefined}
                     onMouseEnter={[Function]}
                     onMouseLeave={[Function]}
-                    tag={false}
+                    style={
+                      Object {
+                        "display": "inline-block",
+                      }
+                    }
                   >
                     <svg
                       className="c38"
@@ -3264,7 +3301,11 @@ exports[
                     onClick={undefined}
                     onMouseEnter={[Function]}
                     onMouseLeave={[Function]}
-                    tag={false}
+                    style={
+                      Object {
+                        "display": "inline-block",
+                      }
+                    }
                   >
                     <svg
                       className="c38"
@@ -3297,9 +3338,7 @@ exports[
 </div>
 `;
 
-exports[
+exports[`renders <Summary starting stopping rebooting removing /> without throwing 3`] = `
-  `renders <Summary starting stopping rebooting removing /> without throwing 3`
-] = `
 .c9 {
   margin-top: 0.75rem;
   margin-bottom: 1.125rem;
@@ -4231,6 +4270,16 @@ exports[
   max-height: 1.125rem;
 }
 
+.c14 {
+  width: 0.9375rem;
+  height: 0.9375rem;
+  border-radius: 50%;
+  background-color: rgb(0,152,88);
+  display: inline-block;
+  margin-right: 0.375rem;
+  margin-left: 0rem;
+}
+
 .c12 {
   font-size: 0.9375rem;
   line-height: 1.125rem;
@@ -4400,16 +4449,6 @@ exports[
   height: 0.0625rem;
 }
 
-.c14 {
-  width: 0.9375rem;
-  height: 0.9375rem;
-  border-radius: 50%;
-  background-color: rgb(0,152,88);
-  display: inline-block;
-  margin-right: 0.375rem;
-  margin-left: 0rem;
-}
-
 .c3 {
   box-sizing: content-box;
   display: -webkit-box;
@@ -4889,6 +4928,7 @@ exports[
               >
                 <a
                   className="c19 c20 c21 c22"
+                  data-ui-button="true"
                   href="http://localhost/images/~create/undefined"
                   icon={true}
                   rel="noopener noreferrer"
@@ -4923,6 +4963,7 @@ exports[
                 >
                   <button
                     className="c24 c20 c25"
+                    data-ui-button="true"
                     disabled={true}
                     href=""
                     icon={true}
@@ -4955,6 +4996,7 @@ exports[
                 >
                   <button
                     className="c26 c20 c25"
+                    data-ui-button="true"
                     disabled={true}
                     href=""
                     icon={true}
@@ -4990,6 +5032,7 @@ exports[
                 >
                   <button
                     className="c27 c20 c25"
+                    data-ui-button="true"
                     disabled={false}
                     href=""
                     icon={true}
@@ -5022,6 +5065,7 @@ exports[
                 >
                   <button
                     className="c28 c20 c25"
+                    data-ui-button="true"
                     disabled={false}
                     href=""
                     icon={true}
@@ -5057,6 +5101,7 @@ exports[
                 >
                   <button
                     className="c27 c20 c25"
+                    data-ui-button="true"
                     disabled={false}
                     href=""
                     icon={true}
@@ -5105,6 +5150,7 @@ exports[
                 >
                   <button
                     className="c28 c20 c25"
+                    data-ui-button="true"
                     disabled={false}
                     href=""
                     icon={true}
@@ -5160,6 +5206,7 @@ exports[
                 >
                   <button
                     className="c30 c20 c25"
+                    data-ui-button="true"
                     disabled={false}
                     href=""
                     icon={true}
@@ -5192,6 +5239,7 @@ exports[
                 >
                   <button
                     className="c31 c20 c25"
+                    data-ui-button="true"
                     disabled={false}
                     href=""
                     icon={true}
@@ -5257,7 +5305,11 @@ exports[
                     onClick={undefined}
                     onMouseEnter={[Function]}
                     onMouseLeave={[Function]}
-                    tag={false}
+                    style={
+                      Object {
+                        "display": "inline-block",
+                      }
+                    }
                   >
                     <svg
                       className="c38"
@@ -5308,7 +5360,11 @@ exports[
                     onClick={undefined}
                     onMouseEnter={[Function]}
                     onMouseLeave={[Function]}
-                    tag={false}
+                    style={
+                      Object {
+                        "display": "inline-block",
+                      }
+                    }
                   >
                     <svg
                       className="c38"
@@ -5359,7 +5415,11 @@ exports[
                     onClick={undefined}
                     onMouseEnter={[Function]}
                     onMouseLeave={[Function]}
-                    tag={false}
+                    style={
+                      Object {
+                        "display": "inline-block",
+                      }
+                    }
                   >
                     <svg
                       className="c38"
@@ -5410,7 +5470,11 @@ exports[
                     onClick={undefined}
                     onMouseEnter={[Function]}
                     onMouseLeave={[Function]}
-                    tag={false}
+                    style={
+                      Object {
+                        "display": "inline-block",
+                      }
+                    }
                   >
                     <svg
                       className="c38"
@@ -5461,7 +5525,11 @@ exports[
                     onClick={undefined}
                     onMouseEnter={[Function]}
                     onMouseLeave={[Function]}
-                    tag={false}
+                    style={
+                      Object {
+                        "display": "inline-block",
+                      }
+                    }
                   >
                     <svg
                       className="c38"
@@ -5512,7 +5580,11 @@ exports[
                     onClick={undefined}
                     onMouseEnter={[Function]}
                     onMouseLeave={[Function]}
-                    tag={false}
+                    style={
+                      Object {
+                        "display": "inline-block",
+                      }
+                    }
                   >
                     <svg
                       className="c38"
@@ -5563,7 +5635,11 @@ exports[
                     onClick={undefined}
                     onMouseEnter={[Function]}
                     onMouseLeave={[Function]}
-                    tag={false}
+                    style={
+                      Object {
+                        "display": "inline-block",
+                      }
+                    }
                   >
                     <svg
                       className="c38"
@@ -5614,7 +5690,11 @@ exports[
                     onClick={undefined}
                     onMouseEnter={[Function]}
                     onMouseLeave={[Function]}
-                    tag={false}
+                    style={
+                      Object {
+                        "display": "inline-block",
+                      }
+                    }
                   >
                     <svg
                       className="c38"
@@ -5665,7 +5745,11 @@ exports[
                     onClick={undefined}
                     onMouseEnter={[Function]}
                     onMouseLeave={[Function]}
-                    tag={false}
+                    style={
+                      Object {
+                        "display": "inline-block",
+                      }
+                    }
                   >
                     <svg
                       className="c38"

packages/my-joy-instances/src/containers/instances/__tests__/__snapshots__/tags.spec.js.snap

@@ -433,6 +433,7 @@ exports[`renders <Tags /> without throwing 1`] = `
         />
         <button
           className="c9 c10 c11"
+          data-ui-button="true"
           disabled={false}
           href=""
           icon={true}
@@ -1640,6 +1641,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
         />
         <button
           className="c9 c10 c11"
+          data-ui-button="true"
           disabled={false}
           href=""
           icon={true}
@@ -1799,6 +1801,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
               >
                 <button
                   className="c34 c10 c11"
+                  data-ui-button="true"
                   disabled={false}
                   href=""
                   onClick={[Function]}
@@ -1810,6 +1813,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
                 </button>
                 <button
                   className="c35 c10 c11"
+                  data-ui-button="true"
                   disabled={true}
                   href=""
                   type="submit"
@@ -1824,6 +1828,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
               >
                 <button
                   className="c37 c10 c11"
+                  data-ui-button="true"
                   disabled={false}
                   href=""
                   icon={true}
@@ -2309,6 +2314,7 @@ exports[`renders <Tags editable /> without throwing 1`] = `
         />
         <button
           className="c9 c10 c11"
+          data-ui-button="true"
           disabled={false}
           href=""
           icon={true}
@@ -3531,6 +3537,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
         />
         <button
           className="c9 c10 c11"
+          data-ui-button="true"
           disabled={true}
           href=""
           icon={true}
@@ -3714,6 +3721,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
               >
                 <button
                   className="c34 c10 c11"
+                  data-ui-button="true"
                   disabled={false}
                   href=""
                   onClick={[Function]}
@@ -3725,6 +3733,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
                 </button>
                 <button
                   className="c35 c10 c11"
+                  data-ui-button="true"
                   disabled={true}
                   href=""
                   type="submit"
@@ -3739,6 +3748,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
               >
                 <button
                   className="c37 c10 c11"
+                  data-ui-button="true"
                   disabled={false}
                   href=""
                   icon={true}
@@ -5043,6 +5053,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
         />
         <button
           className="c9 c10 c11"
+          data-ui-button="true"
           disabled={true}
           href=""
           icon={true}
@@ -5226,6 +5237,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
               >
                 <button
                   className="c34 c10 c11"
+                  data-ui-button="true"
                   disabled={false}
                   href=""
                   onClick={[Function]}
@@ -5237,6 +5249,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
                 </button>
                 <button
                   className="c35 c10 c11"
+                  data-ui-button="true"
                   disabled={true}
                   href=""
                   type="submit"
@@ -5251,6 +5264,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
               >
                 <button
                   className="c37 c10 c11"
+                  data-ui-button="true"
                   disabled={false}
                   href=""
                   icon={true}
@@ -5745,6 +5759,7 @@ exports[`renders <Tags error /> without throwing 1`] = `
         />
         <button
           className="c9 c10 c11"
+          data-ui-button="true"
           disabled={false}
           href=""
           icon={true}
@@ -6255,6 +6270,7 @@ exports[`renders <Tags loading /> without throwing 1`] = `
         />
         <button
           className="c9 c10 c11"
+          data-ui-button="true"
           disabled={false}
           href=""
           icon={true}
@@ -6787,6 +6803,7 @@ exports[`renders <Tags tags /> without throwing 1`] = `
         />
         <button
           className="c9 c10 c11"
+          data-ui-button="true"
           disabled={false}
           href=""
           icon={true}

packages/ui-toolkit/src/button/Readme.md

@@ -57,6 +57,29 @@ const { default: Button } = require('./');
 </span>;
 ```
 
+#### Dropdown Button
+
+```jsx
+// Name: Example
+const React = require('react');
+const { default: ButtonGroup } = require('./group');
+const { default: PopoverButton } = require('./popover');
+const { Item } = require('../popover');
+const { default: Button } = require('./');
+const { StartIcon } = require('../');
+
+<ButtonGroup>
+  <Button secondary>
+    <StartIcon />
+    <span>Start</span>
+  </Button>
+  <PopoverButton secondary>
+    <Item>Hello</Item>
+    <Item>World</Item>
+  </PopoverButton>
+</ButtonGroup>;
+```
+
 #### Quick Action
 
 Quick action buttons can be embedded in components to give additional functionality. They can be used in either primary or secondary color palettes, depending on importance.

packages/ui-toolkit/src/button/__tests___/__snapshots__/button.spec.js.snap

@@ -96,6 +96,7 @@ exports[`Button Default Button 1`] = `
 
 <a
   className="c0 c1 c2 c3"
+  data-ui-button="true"
   href="https://joyent.com"
 >
   Inspire the lazy
@@ -228,6 +229,7 @@ exports[`Button Disabled Button 1`] = `
 
 <a
   className="c0 c1 c2 c3"
+  data-ui-button="true"
   disabled={true}
   href="https://joyent.com"
 >
@@ -354,6 +356,7 @@ exports[`Button Error Button 1`] = `
 
 <a
   className="c0 c1 c2 c3"
+  data-ui-button="true"
   href="https://joyent.com"
 >
   Inspire the lazy
@@ -486,6 +489,7 @@ exports[`Button Loading Button 1`] = `
 
 <a
   className="c0 c1 c2 c3"
+  data-ui-button="true"
   disabled={true}
   href="https://joyent.com"
 >
@@ -612,6 +616,7 @@ exports[`Button Secondary Button 1`] = `
 
 <a
   className="c0 c1 c2 c3"
+  data-ui-button="true"
   href="https://joyent.com"
 >
   Inspire the lazy

packages/ui-toolkit/src/button/group.js

@@ -0,0 +1,20 @@
+import styled from 'styled-components';
+
+export default styled.span`
+  display: inline-block;
+
+  & [data-ui-button='true'] {
+    margin-left: 0 !important; /* remove when we remove margins */
+  }
+
+  & [data-ui-button='true']:not(:first-child) {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  & [data-ui-button='true']:not(:last-child) {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    margin-right: -1px;
+  }
+`;

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

@@ -72,7 +72,7 @@ const BaseButton = props => {
   );
 
   return (
-    <View {...props} href={href}>
+    <View {...props} data-ui-button="true" href={href}>
       {children}
     </View>
   );

packages/ui-toolkit/src/button/popover.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import styled from 'styled-components';
+import remcalc from 'remcalc';
+
+import { Arrow } from '../icons';
+import Popover, { Container, Target } from '../popover';
+import BaseButton from './';
+
+const DropdownButton = BaseButton.extend`
+  padding: 0;
+  min-width: ${remcalc(47)};
+  max-width: ${remcalc(47)};
+  width: ${remcalc(47)};
+`;
+
+const InnerContainer = styled.div`
+  padding: ${remcalc(15)} ${remcalc(18)};
+`;
+
+export default ({ children, ...rest }) => (
+  <DropdownButton {...rest}>
+    <Container clickable>
+      <Target>
+        <InnerContainer>
+          <Arrow />
+        </InnerContainer>
+      </Target>
+      <Popover placement="bottom">{children}</Popover>
+    </Container>
+  </DropdownButton>
+);

packages/ui-toolkit/src/index.js

@@ -2,6 +2,8 @@ export { default as Anchor } from './anchor';
 export { default as Base, global } from './base';
 export { default as Baseline } from './baseline';
 export { default as Button } from './button';
+export { default as PopoverButton } from './button/popover';
+export { default as ButtonGroup } from './button/group';
 export { default as Label } from './label';
 export { PageContainer, RootContainer, ViewContainer } from './layout';
 export { H1, H2, H3, H4, H5, H6 } from './text/headings';

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

@@ -20,6 +20,11 @@ Array [
     onClick={undefined}
     onMouseEnter={undefined}
     onMouseLeave={undefined}
+    style={
+        Object {
+            "display": "inline-block",
+          }
+    }
     tag={false}
 >
     Hello

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

@@ -6,7 +6,11 @@ Array [
     onClick={undefined}
     onMouseEnter={undefined}
     onMouseLeave={undefined}
-    tag={false}
+    style={
+        Object {
+            "display": "inline-block",
+          }
+    }
 >
     Hello
 </div>,

packages/ui-toolkit/src/tooltip/target.js

@@ -8,7 +8,7 @@ export default class Target extends Component {
   };
 
   render = () => {
-    const { children, tag = false, ...rest } = this.props;
+    const { children, ...rest } = this.props;
 
     const {
       setRef,
@@ -34,12 +34,12 @@ export default class Target extends Component {
 
     return (
       <BaseTarget
+        {...rest}
         innerRef={setRef('target')}
         onClick={onClick}
         onMouseEnter={onMouseEnter}
         onMouseLeave={onMouseLeave}
-        tag={tag}
+        style={{ display: 'inline-block' }}
-        {...rest}
       >
         {children}
       </BaseTarget>

yarn.lock

@@ -225,7 +225,7 @@
 
 "@types/node@^9.4.6":
   version "9.4.7"
-  resolved "http://registry.npmjs.org/@types/node/-/node-9.4.7.tgz#57d81cd98719df2c9de118f2d5f3b1120dcd7275"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-9.4.7.tgz#57d81cd98719df2c9de118f2d5f3b1120dcd7275"
 
 "@types/zen-observable@^0.5.3":
   version "0.5.3"
@@ -341,8 +341,8 @@ ajv@^5.0.0, ajv@^5.1.0, ajv@^5.1.5, ajv@^5.2.0, ajv@^5.2.3, ajv@^5.3.0:
     json-schema-traverse "^0.3.0"
 
 ajv@^6.0.1, ajv@^6.1.0:
-  version "6.2.1"
+  version "6.3.0"
-  resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.2.1.tgz#28a6abc493a2abe0fb4c8507acaedb43fa550671"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.3.0.tgz#1650a41114ef00574cac10b8032d8f4c14812da7"
   dependencies:
     fast-deep-equal "^1.0.0"
     fast-json-stable-stringify "^2.0.0"
@@ -864,7 +864,7 @@ babel-code-frame@6.26.0, babel-code-frame@^6.11.0, babel-code-frame@^6.22.0, bab
     esutils "^2.0.2"
     js-tokens "^3.0.2"
 
-babel-core@6.26.0, babel-core@^6.0.0, babel-core@^6.24.1, babel-core@^6.26.0:
+babel-core@6.26.0, babel-core@^6.0.0, babel-core@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-6.26.0.tgz#af32f78b31a6fcef119c87b0fd8d9753f03a0bb8"
   dependencies:
@@ -1094,10 +1094,10 @@ babel-messages@^6.23.0:
     babel-runtime "^6.22.0"
 
 babel-minify-webpack-plugin@^0.3.0:
-  version "0.3.0"
+  version "0.3.1"
-  resolved "https://registry.yarnpkg.com/babel-minify-webpack-plugin/-/babel-minify-webpack-plugin-0.3.0.tgz#98062b4b7fb96ec67cca97579151758a1ddde116"
+  resolved "https://registry.yarnpkg.com/babel-minify-webpack-plugin/-/babel-minify-webpack-plugin-0.3.1.tgz#292aa240af190e2dcadf4f684d6d84d179b6d5a4"
   dependencies:
-    babel-core "^6.24.1"
+    babel-core "^6.26.0"
     babel-preset-minify "^0.3.0"
     webpack-sources "^1.0.1"
 
@@ -2192,12 +2192,24 @@ call@5.x.x:
     boom "7.x.x"
     hoek "5.x.x"
 
+caller-callsite@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/caller-callsite/-/caller-callsite-2.0.0.tgz#847e0fce0a223750a9a027c54b33731ad3154134"
+  dependencies:
+    callsites "^2.0.0"
+
 caller-path@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/caller-path/-/caller-path-0.1.0.tgz#94085ef63581ecd3daa92444a8fe94e82577751f"
   dependencies:
     callsites "^0.2.0"
 
+caller-path@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/caller-path/-/caller-path-2.0.0.tgz#468f83044e369ab2010fac5f06ceee15bb2cb1f4"
+  dependencies:
+    caller-callsite "^2.0.0"
+
 callsites@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/callsites/-/callsites-0.2.0.tgz#afab96262910a7f33c19a5775825c69f34e350ca"
@@ -2323,7 +2335,7 @@ chalk@2.1.0:
     escape-string-regexp "^1.0.5"
     supports-color "^4.0.0"
 
-chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.3.0, chalk@^2.3.1:
+chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.3.0, chalk@^2.3.1, chalk@^2.3.2:
   version "2.3.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.3.2.tgz#250dc96b07491bfd601e648d66ddf5f60c7a5c65"
   dependencies:
@@ -2442,6 +2454,13 @@ clean-webpack-plugin@^0.1.17:
   dependencies:
     rimraf "^2.6.1"
 
+clear-module@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/clear-module/-/clear-module-2.1.0.tgz#3508a36e12a47cbd98001e99257d7b0012ebf208"
+  dependencies:
+    caller-path "^2.0.0"
+    resolve-from "^3.0.0"
+
 cli-boxes@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/cli-boxes/-/cli-boxes-1.0.0.tgz#4fa917c3e59c94a004cd61f8ee509da651687143"
@@ -2603,8 +2622,8 @@ command-join@^2.0.0:
   resolved "https://registry.yarnpkg.com/command-join/-/command-join-2.0.0.tgz#52e8b984f4872d952ff1bdc8b98397d27c7144cf"
 
 commander@2.15.x, commander@^2.11.0, commander@^2.9.0, commander@~2.15.0:
-  version "2.15.0"
+  version "2.15.1"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-2.15.0.tgz#ad2a23a1c3b036e392469b8012cec6b33b4c1322"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.15.1.tgz#df46e867d0fc2aec66a34662b406a9ccafff5b0f"
 
 commander@~2.1.0:
   version "2.1.0"
@@ -3630,8 +3649,8 @@ ee-first@1.1.1:
   resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
 
 electron-to-chromium@^1.2.7, electron-to-chromium@^1.3.30:
-  version "1.3.38"
+  version "1.3.39"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.38.tgz#49234b00c0592f62921f9426bccefee23de086bb"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.39.tgz#d7a4696409ca0995e2750156da612c221afad84d"
 
 elliptic@^6.0.0:
   version "6.4.0"
@@ -4048,8 +4067,8 @@ eslint@4.10.0:
     text-table "~0.2.0"
 
 eslint@^4.18.1:
-  version "4.18.2"
+  version "4.19.0"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-4.18.2.tgz#0f81267ad1012e7d2051e186a9004cc2267b8d45"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-4.19.0.tgz#9e900efb5506812ac374557034ef6f5c3642fc4c"
   dependencies:
     ajv "^5.3.0"
     babel-code-frame "^6.22.0"
@@ -4060,7 +4079,7 @@ eslint@^4.18.1:
     doctrine "^2.1.0"
     eslint-scope "^3.7.1"
     eslint-visitor-keys "^1.0.0"
-    espree "^3.5.2"
+    espree "^3.5.4"
     esquery "^1.0.0"
     esutils "^2.0.2"
     file-entry-cache "^2.0.0"
@@ -4082,6 +4101,7 @@ eslint@^4.18.1:
     path-is-inside "^1.0.2"
     pluralize "^7.0.0"
     progress "^2.0.0"
+    regexpp "^1.0.1"
     require-uncached "^1.0.3"
     semver "^5.3.0"
     strip-ansi "^4.0.0"
@@ -4089,7 +4109,7 @@ eslint@^4.18.1:
     table "4.0.2"
     text-table "~0.2.0"
 
-espree@^3.5.1, espree@^3.5.2:
+espree@^3.5.1, espree@^3.5.4:
   version "3.5.4"
   resolved "https://registry.yarnpkg.com/espree/-/espree-3.5.4.tgz#b0f447187c8a8bed944b815a660bddf5deb5d1a7"
   dependencies:
@@ -5022,10 +5042,10 @@ graphql-tag@^2.8.0:
   resolved "https://registry.yarnpkg.com/graphql-tag/-/graphql-tag-2.8.0.tgz#52cdea07a842154ec11a2e840c11b977f9b835ce"
 
 graphql@0.13.x, graphql@^0.13.1:
-  version "0.13.1"
+  version "0.13.2"
-  resolved "https://registry.yarnpkg.com/graphql/-/graphql-0.13.1.tgz#9b3db3d8e40d1827e4172404bfdd2e4e17a58b55"
+  resolved "https://registry.yarnpkg.com/graphql/-/graphql-0.13.2.tgz#4c740ae3c222823e7004096f832e7b93b2108270"
   dependencies:
-    iterall "^1.2.0"
+    iterall "^1.2.1"
 
 growly@^1.3.0:
   version "1.3.0"
@@ -5071,10 +5091,15 @@ hapi-render-react-joyent-document@^5.0.0:
     through2 "^2.0.3"
 
 hapi-render-react@^2.2.0:
-  version "2.2.0"
+  version "2.5.1"
-  resolved "https://registry.yarnpkg.com/hapi-render-react/-/hapi-render-react-2.2.0.tgz#4f95f5e24256ffa26fa618f5d41379a15970d0f6"
+  resolved "https://registry.yarnpkg.com/hapi-render-react/-/hapi-render-react-2.5.1.tgz#457bcf07629cd5889ae1691fb0d17c35875b00a5"
   dependencies:
+    clear-module "^2.1.0"
+    get-stream "^3.0.0"
+    is-stream "^1.1.0"
+    lodash.isstring "^4.0.1"
     mz "^2.7.0"
+    p-is-promise "^1.1.0"
 
 hapi-triton-auth@^2.0.0:
   version "2.0.1"
@@ -5320,8 +5345,8 @@ html-entities@^1.2.0:
   resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-1.2.1.tgz#0df29351f0721163515dfb9e5543e5f6eed5162f"
 
 html-minifier@^3.2.3:
-  version "3.5.11"
+  version "3.5.12"
-  resolved "https://registry.yarnpkg.com/html-minifier/-/html-minifier-3.5.11.tgz#f248927f2e076733f58c136de0376553beb101f8"
+  resolved "https://registry.yarnpkg.com/html-minifier/-/html-minifier-3.5.12.tgz#6bfad4d0327f5b8d2b62f5854654ac3703b9b031"
   dependencies:
     camel-case "3.0.x"
     clean-css "4.1.x"
@@ -5470,8 +5495,8 @@ icss-utils@^2.1.0:
     postcss "^6.0.1"
 
 ieee754@^1.1.4:
-  version "1.1.8"
+  version "1.1.10"
-  resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.8.tgz#be33d40ac10ef1926701f6f08a2d86fbfd1ad3e4"
+  resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.10.tgz#719a6f7b026831e64bdb838b0de1bb0029bbf716"
 
 iferr@^0.1.5:
   version "0.1.5"
@@ -6110,7 +6135,7 @@ istanbul-reports@^1.3.0:
   dependencies:
     handlebars "^4.0.3"
 
-iterall@^1.2.0:
+iterall@^1.2.1:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/iterall/-/iterall-1.2.2.tgz#92d70deb8028e0c39ff3164fdbf4d8b088130cd7"
 
@@ -6589,8 +6614,8 @@ jss-nested@^6.0.1:
     warning "^3.0.0"
 
 jss@^9.3.3:
-  version "9.8.0"
+  version "9.8.1"
-  resolved "https://registry.yarnpkg.com/jss/-/jss-9.8.0.tgz#77830def563870103f8671ed31ce3a3d2f32aa2b"
+  resolved "https://registry.yarnpkg.com/jss/-/jss-9.8.1.tgz#e2ff250777ad657430e6edc47a63516541b888fa"
   dependencies:
     is-in-browser "^1.1.3"
     symbol-observable "^1.1.0"
@@ -7637,8 +7662,8 @@ number-is-nan@^1.0.0:
   resolved "https://registry.yarnpkg.com/number-is-nan/-/number-is-nan-1.0.1.tgz#097b602b53422a522c1afb8790318336941a011d"
 
 "nwmatcher@>= 1.3.4 < 2.0.0", "nwmatcher@>= 1.3.9 < 2.0.0":
-  version "1.4.3"
+  version "1.4.4"
-  resolved "https://registry.yarnpkg.com/nwmatcher/-/nwmatcher-1.4.3.tgz#64348e3b3d80f035b40ac11563d278f8b72db89c"
+  resolved "https://registry.yarnpkg.com/nwmatcher/-/nwmatcher-1.4.4.tgz#2285631f34a95f0d0395cd900c96ed39b58f346e"
 
 oauth-sign@~0.8.1, oauth-sign@~0.8.2:
   version "0.8.2"
@@ -7831,6 +7856,10 @@ p-finally@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/p-finally/-/p-finally-1.0.0.tgz#3fbcfb15b899a44123b34b6dcc18b724336a2cae"
 
+p-is-promise@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/p-is-promise/-/p-is-promise-1.1.0.tgz#9c9456989e9f6588017b0434d56097675c3da05e"
+
 p-limit@^1.0.0, p-limit@^1.1.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-1.2.0.tgz#0e92b6bedcb59f022c13d0f1949dc82d15909f1c"
@@ -8398,12 +8427,12 @@ postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0
     supports-color "^3.2.3"
 
 postcss@^6.0.0, postcss@^6.0.1, postcss@^6.0.13:
-  version "6.0.19"
+  version "6.0.20"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.19.tgz#76a78386f670b9d9494a655bf23ac012effd1555"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.20.tgz#686107e743a12d5530cb68438c590d5b2bf72c3c"
   dependencies:
-    chalk "^2.3.1"
+    chalk "^2.3.2"
     source-map "^0.6.1"
-    supports-color "^5.2.0"
+    supports-color "^5.3.0"
 
 preact-compat@^3.18.0:
   version "3.18.0"
@@ -8888,8 +8917,8 @@ react-icons@^2.2.7:
     react-icon-base "2.1.0"
 
 react-popper@^0.8.2:
-  version "0.8.2"
+  version "0.8.3"
-  resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-0.8.2.tgz#092095ff13933211d3856d9f325511ec3a42f12c"
+  resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-0.8.3.tgz#0f73333137c9fb0af6ec4074d2d0585a0a0461e1"
   dependencies:
     popper.js "^1.12.9"
     prop-types "^15.6.0"
@@ -9303,6 +9332,10 @@ regex-not@^1.0.0, regex-not@^1.0.2:
     extend-shallow "^3.0.2"
     safe-regex "^1.1.0"
 
+regexpp@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-1.0.1.tgz#d857c3a741dce075c2848dcb019a0a975b190d43"
+
 regexpu-core@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-1.0.0.tgz#86a763f58ee4d7c2f6b102e4764050de7ed90c6b"
@@ -9851,8 +9884,8 @@ setprototypeof@1.1.0:
   resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.1.0.tgz#d0bd85536887b6fe7c0d818cb962d9d91c54e656"
 
 sha.js@^2.4.0, sha.js@^2.4.8:
-  version "2.4.10"
+  version "2.4.11"
-  resolved "https://registry.yarnpkg.com/sha.js/-/sha.js-2.4.10.tgz#b1fde5cd7d11a5626638a07c604ab909cfa31f9b"
+  resolved "https://registry.yarnpkg.com/sha.js/-/sha.js-2.4.11.tgz#37a5cf0b81ecbc6943de109ba2960d1b26584ae7"
   dependencies:
     inherits "^2.0.1"
     safe-buffer "^5.0.1"
@@ -10410,7 +10443,7 @@ supports-color@^4.0.0, supports-color@^4.2.1:
   dependencies:
     has-flag "^2.0.0"
 
-supports-color@^5.1.0, supports-color@^5.2.0, supports-color@^5.3.0:
+supports-color@^5.1.0, supports-color@^5.3.0:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.3.0.tgz#5b24ac15db80fa927cf5227a4a33fd3c4c7676c0"
   dependencies:
@@ -10843,8 +10876,8 @@ uglify-es@^3.3.4, uglify-es@^3.3.9:
     source-map "~0.6.1"
 
 uglify-js@3.3.x, uglify-js@^3.0.13:
-  version "3.3.15"
+  version "3.3.16"
-  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.3.15.tgz#5b8783b6856110d3a03a9b81e07324a3b925f2dd"
+  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.3.16.tgz#23ba13efa27aa00885be7417819e8a9787f94028"
   dependencies:
     commander "~2.15.0"
     source-map "~0.6.1"