From eec4821dee467bd40a39fae602419026477554a8 Mon Sep 17 00:00:00 2001
From: Sara Vieira <hey@iamsaravieira.com>
Date: Fri, 22 Dec 2017 15:16:40 +0000
Subject: [PATCH] feat(ui-toolkit): remove basealign

BREAKING CHANGE
---
 .../__tests__/__snapshots__/list.spec.js.snap | 155 ++++++++++++------
 .../__tests__/__snapshots__/list.spec.js.snap |  38 +++++
 packages/ui-toolkit/src/basealign/index.js    |  23 ---
 packages/ui-toolkit/src/card/header.js        |   2 +-
 packages/ui-toolkit/src/header/index.js       |   4 +-
 .../__snapshots__/popover.spec.js.snap        |  28 +++-
 .../__snapshots__/tooltip.spec.js.snap        |  26 ++-
 7 files changed, 187 insertions(+), 89 deletions(-)
 delete mode 100644 packages/ui-toolkit/src/basealign/index.js

diff --git a/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/list.spec.js.snap b/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/list.spec.js.snap
index eb8fc450..88ef0d06 100644
--- a/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/list.spec.js.snap
+++ b/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/list.spec.js.snap
@@ -4405,36 +4405,39 @@ exports[`renders <Actions submitting statuses /> without throwing 1`] = `
             onClick={[Function]}
             type="button"
           >
-            <div
-              className="c8"
+            <svg
+              className=""
+              height="21"
+              style={
+                Object {
+                  "transform": "rotate(0deg)",
+                }
+              }
+              version="1.1"
+              viewBox="0 0 20 21"
+              width="20"
+              xmlns="http://www.w3.org/2000/svg"
+              xmlnsXlink="http://www.w3.org/1999/xlink"
             >
-              <svg
-                height="10"
-                width="28"
+              <g
+                transform="translate(17997 -18577)"
               >
-                <rect
-                  className="c9"
-                  height="6"
-                  width="6"
-                  x="2"
-                  y="2"
+                <g>
+                  <use
+                    fill="rgb(216, 216, 216)"
+                    transform="matrix(0.866025 0.5 -0.5 0.866025 -17988.7 18577.9)"
+                    xlinkHref="#K"
+                  />
+                </g>
+              </g>
+              <defs>
+                <path
+                  d="M 5.39661 3.57718L 5.3977 5.34469L 10.0255 2.67281L 5.39715 0L 5.39832 2.00201C 2.33086 2.5484 0.00065755 5.23112 0 8.45654C 0.000380483 12.0783 2.93556 15.0137 6.55562 15.0143C 10.1774 15.014 13.1128 12.0788 13.1124 8.45702L 11.5697 8.45687C 11.5697 11.2264 9.32527 13.4717 6.55578 13.4716C 3.78629 13.4716 1.54268 11.2262 1.5427 8.45669C 1.54135 6.08718 3.18616 4.10012 5.39661 3.57718Z"
+                  fillRule="evenodd"
+                  id="K"
                 />
-                <rect
-                  className="c10"
-                  height="6"
-                  width="6"
-                  x="11"
-                  y="2"
-                />
-                <rect
-                  className="c11"
-                  height="6"
-                  width="6"
-                  x="20"
-                  y="2"
-                />
-              </svg>
-            </div>
+              </defs>
+            </svg>
           </button>
         </span>
         <span
@@ -4449,36 +4452,42 @@ exports[`renders <Actions submitting statuses /> without throwing 1`] = `
             onClick={[Function]}
             type="button"
           >
-            <div
-              className="c8"
+            <svg
+              className=""
+              height="21"
+              style={
+                Object {
+                  "transform": "rotate(0deg)",
+                }
+              }
+              version="1.1"
+              viewBox="0 0 20 21"
+              width="20"
+              xmlns="http://www.w3.org/2000/svg"
+              xmlnsXlink="http://www.w3.org/1999/xlink"
             >
-              <svg
-                height="10"
-                width="28"
+              <g
+                transform="translate(17997 -18577)"
               >
-                <rect
-                  className="c9"
-                  height="6"
-                  width="6"
-                  x="2"
-                  y="2"
+                <g>
+                  <use
+                    fill="rgb(216, 216, 216)"
+                    transform="matrix(0.866025 0.5 -0.5 0.866025 -17988.7 18577.9)"
+                    xlinkHref="#K"
+                  />
+                </g>
+              </g>
+              <defs>
+                <path
+                  d="M 5.39661 3.57718L 5.3977 5.34469L 10.0255 2.67281L 5.39715 0L 5.39832 2.00201C 2.33086 2.5484 0.00065755 5.23112 0 8.45654C 0.000380483 12.0783 2.93556 15.0137 6.55562 15.0143C 10.1774 15.014 13.1128 12.0788 13.1124 8.45702L 11.5697 8.45687C 11.5697 11.2264 9.32527 13.4717 6.55578 13.4716C 3.78629 13.4716 1.54268 11.2262 1.5427 8.45669C 1.54135 6.08718 3.18616 4.10012 5.39661 3.57718Z"
+                  fillRule="evenodd"
+                  id="K"
                 />
-                <rect
-                  className="c10"
-                  height="6"
-                  width="6"
-                  x="11"
-                  y="2"
-                />
-                <rect
-                  className="c11"
-                  height="6"
-                  width="6"
-                  x="20"
-                  y="2"
-                />
-              </svg>
-            </div>
+              </defs>
+            </svg>
+            <span>
+              Reboot
+            </span>
           </button>
         </span>
       </div>
@@ -4774,6 +4783,7 @@ exports[`renders <InstanceList /> without throwing 1`] = `
   padding: 0 1.5rem;
   height: 3.75rem;
   width: 2rem;
+  display: table-cell;
   vertical-align: middle;
   text-align: left;
   height: 2.625rem;
@@ -4828,6 +4838,7 @@ exports[`renders <InstanceList /> without throwing 1`] = `
   padding: 0 1.5rem;
   height: 3.75rem;
   width: 9.375rem;
+  display: table-cell;
   cursor: pointer;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -4920,6 +4931,7 @@ exports[`renders <InstanceList /> without throwing 1`] = `
   padding: 0 1.5rem;
   height: 3.75rem;
   width: 3.75rem;
+  display: table-cell;
   height: 2.625rem;
   color: rgb(189,189,189);
   font-weight: 500;
@@ -4965,12 +4977,14 @@ exports[`renders <InstanceList /> without throwing 1`] = `
 @media only screen and (min-width:47.9375rem) {
   .c16 {
     width: 10rem;
+    display: table-cell;
   }
 }
 
 @media only screen and (min-width:47.9375rem) {
   .c17 {
     width: 8.125rem;
+    display: table-cell;
   }
 }
 
@@ -5308,6 +5322,7 @@ exports[`renders <InstanceList allSelected /> without throwing 1`] = `
   padding: 0 1.5rem;
   height: 3.75rem;
   width: 2rem;
+  display: table-cell;
   vertical-align: middle;
   text-align: left;
   height: 2.625rem;
@@ -5362,6 +5377,7 @@ exports[`renders <InstanceList allSelected /> without throwing 1`] = `
   padding: 0 1.5rem;
   height: 3.75rem;
   width: 9.375rem;
+  display: table-cell;
   cursor: pointer;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -5454,6 +5470,7 @@ exports[`renders <InstanceList allSelected /> without throwing 1`] = `
   padding: 0 1.5rem;
   height: 3.75rem;
   width: 3.75rem;
+  display: table-cell;
   height: 2.625rem;
   color: rgb(189,189,189);
   font-weight: 500;
@@ -5499,12 +5516,14 @@ exports[`renders <InstanceList allSelected /> without throwing 1`] = `
 @media only screen and (min-width:47.9375rem) {
   .c16 {
     width: 10rem;
+    display: table-cell;
   }
 }
 
 @media only screen and (min-width:47.9375rem) {
   .c17 {
     width: 8.125rem;
+    display: table-cell;
   }
 }
 
@@ -5842,6 +5861,7 @@ exports[`renders <InstanceList sortBy /> without throwing 1`] = `
   padding: 0 1.5rem;
   height: 3.75rem;
   width: 2rem;
+  display: table-cell;
   vertical-align: middle;
   text-align: left;
   height: 2.625rem;
@@ -5896,6 +5916,7 @@ exports[`renders <InstanceList sortBy /> without throwing 1`] = `
   padding: 0 1.5rem;
   height: 3.75rem;
   width: 9.375rem;
+  display: table-cell;
   cursor: pointer;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -5988,6 +6009,7 @@ exports[`renders <InstanceList sortBy /> without throwing 1`] = `
   padding: 0 1.5rem;
   height: 3.75rem;
   width: 3.75rem;
+  display: table-cell;
   height: 2.625rem;
   color: rgb(189,189,189);
   font-weight: 500;
@@ -6033,12 +6055,14 @@ exports[`renders <InstanceList sortBy /> without throwing 1`] = `
 @media only screen and (min-width:47.9375rem) {
   .c16 {
     width: 10rem;
+    display: table-cell;
   }
 }
 
 @media only screen and (min-width:47.9375rem) {
   .c17 {
     width: 8.125rem;
+    display: table-cell;
   }
 }
 
@@ -6376,6 +6400,7 @@ exports[`renders <InstanceList sortBy sortOrder /> without throwing 1`] = `
   padding: 0 1.5rem;
   height: 3.75rem;
   width: 2rem;
+  display: table-cell;
   vertical-align: middle;
   text-align: left;
   height: 2.625rem;
@@ -6430,6 +6455,7 @@ exports[`renders <InstanceList sortBy sortOrder /> without throwing 1`] = `
   padding: 0 1.5rem;
   height: 3.75rem;
   width: 9.375rem;
+  display: table-cell;
   cursor: pointer;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -6522,6 +6548,7 @@ exports[`renders <InstanceList sortBy sortOrder /> without throwing 1`] = `
   padding: 0 1.5rem;
   height: 3.75rem;
   width: 3.75rem;
+  display: table-cell;
   height: 2.625rem;
   color: rgb(189,189,189);
   font-weight: 500;
@@ -6567,12 +6594,14 @@ exports[`renders <InstanceList sortBy sortOrder /> without throwing 1`] = `
 @media only screen and (min-width:47.9375rem) {
   .c16 {
     width: 10rem;
+    display: table-cell;
   }
 }
 
 @media only screen and (min-width:47.9375rem) {
   .c17 {
     width: 8.125rem;
+    display: table-cell;
   }
 }
 
@@ -6910,6 +6939,7 @@ exports[`renders <InstanceList submitting /> without throwing 1`] = `
   padding: 0 1.5rem;
   height: 3.75rem;
   width: 2rem;
+  display: table-cell;
   vertical-align: middle;
   text-align: left;
   height: 2.625rem;
@@ -6964,6 +6994,7 @@ exports[`renders <InstanceList submitting /> without throwing 1`] = `
   padding: 0 1.5rem;
   height: 3.75rem;
   width: 9.375rem;
+  display: table-cell;
   cursor: pointer;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -7056,6 +7087,7 @@ exports[`renders <InstanceList submitting /> without throwing 1`] = `
   padding: 0 1.5rem;
   height: 3.75rem;
   width: 3.75rem;
+  display: table-cell;
   height: 2.625rem;
   color: rgb(189,189,189);
   font-weight: 500;
@@ -7101,12 +7133,14 @@ exports[`renders <InstanceList submitting /> without throwing 1`] = `
 @media only screen and (min-width:47.9375rem) {
   .c16 {
     width: 10rem;
+    display: table-cell;
   }
 }
 
 @media only screen and (min-width:47.9375rem) {
   .c17 {
     width: 8.125rem;
+    display: table-cell;
   }
 }
 
@@ -7444,6 +7478,7 @@ exports[`renders <InstanceList>{children}</InstanceList> without throwing 1`] =
   padding: 0 1.5rem;
   height: 3.75rem;
   width: 2rem;
+  display: table-cell;
   vertical-align: middle;
   text-align: left;
   height: 2.625rem;
@@ -7498,6 +7533,7 @@ exports[`renders <InstanceList>{children}</InstanceList> without throwing 1`] =
   padding: 0 1.5rem;
   height: 3.75rem;
   width: 9.375rem;
+  display: table-cell;
   cursor: pointer;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -7590,6 +7626,7 @@ exports[`renders <InstanceList>{children}</InstanceList> without throwing 1`] =
   padding: 0 1.5rem;
   height: 3.75rem;
   width: 3.75rem;
+  display: table-cell;
   height: 2.625rem;
   color: rgb(189,189,189);
   font-weight: 500;
@@ -7635,12 +7672,14 @@ exports[`renders <InstanceList>{children}</InstanceList> without throwing 1`] =
 @media only screen and (min-width:47.9375rem) {
   .c16 {
     width: 10rem;
+    display: table-cell;
   }
 }
 
 @media only screen and (min-width:47.9375rem) {
   .c17 {
     width: 8.125rem;
+    display: table-cell;
   }
 }
 
@@ -8116,12 +8155,14 @@ exports[`renders <Item /> without throwing 1`] = `
 @media only screen and (min-width:47.9375rem) {
   .c16 {
     width: 10rem;
+    display: table-cell;
   }
 }
 
 @media only screen and (min-width:47.9375rem) {
   .c17 {
     width: 8.125rem;
+    display: table-cell;
   }
 }
 
@@ -8614,12 +8655,14 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
 @media only screen and (min-width:47.9375rem) {
   .c16 {
     width: 10rem;
+    display: table-cell;
   }
 }
 
 @media only screen and (min-width:47.9375rem) {
   .c17 {
     width: 8.125rem;
+    display: table-cell;
   }
 }
 
@@ -9114,12 +9157,14 @@ exports[`renders <Item allowedActions /> without throwing 1`] = `
 @media only screen and (min-width:47.9375rem) {
   .c16 {
     width: 10rem;
+    display: table-cell;
   }
 }
 
 @media only screen and (min-width:47.9375rem) {
   .c17 {
     width: 8.125rem;
+    display: table-cell;
   }
 }
 
@@ -9638,12 +9683,14 @@ exports[`renders <Item mutating /> without throwing 1`] = `
 @media only screen and (min-width:47.9375rem) {
   .c19 {
     width: 10rem;
+    display: table-cell;
   }
 }
 
 @media only screen and (min-width:47.9375rem) {
   .c20 {
     width: 8.125rem;
+    display: table-cell;
   }
 }
 
diff --git a/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/list.spec.js.snap b/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/list.spec.js.snap
index 44794a93..13946791 100644
--- a/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/list.spec.js.snap
+++ b/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/list.spec.js.snap
@@ -522,6 +522,7 @@ exports[`renders <List /> without throwing 1`] = `
   padding: 0 1.5rem;
   height: 3.75rem;
   width: 2rem;
+  display: table-cell;
   vertical-align: middle;
   text-align: left;
   height: 2.625rem;
@@ -576,6 +577,7 @@ exports[`renders <List /> without throwing 1`] = `
   padding: 0 1.5rem;
   height: 3.75rem;
   width: 9.375rem;
+  display: table-cell;
   cursor: pointer;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -668,6 +670,7 @@ exports[`renders <List /> without throwing 1`] = `
   padding: 0 1.5rem;
   height: 3.75rem;
   width: 3.75rem;
+  display: table-cell;
   height: 2.625rem;
   color: rgb(189,189,189);
   font-weight: 500;
@@ -778,12 +781,14 @@ exports[`renders <List /> without throwing 1`] = `
 @media only screen and (min-width:47.9375rem) {
   .c29 {
     width: 10rem;
+    display: table-cell;
   }
 }
 
 @media only screen and (min-width:47.9375rem) {
   .c30 {
     width: 8.125rem;
+    display: table-cell;
   }
 }
 
@@ -1585,6 +1590,7 @@ exports[`renders <List error /> without throwing 1`] = `
   padding: 0 1.5rem;
   height: 3.75rem;
   width: 2rem;
+  display: table-cell;
   vertical-align: middle;
   text-align: left;
   height: 2.625rem;
@@ -1639,6 +1645,7 @@ exports[`renders <List error /> without throwing 1`] = `
   padding: 0 1.5rem;
   height: 3.75rem;
   width: 9.375rem;
+  display: table-cell;
   cursor: pointer;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -1731,6 +1738,7 @@ exports[`renders <List error /> without throwing 1`] = `
   padding: 0 1.5rem;
   height: 3.75rem;
   width: 3.75rem;
+  display: table-cell;
   height: 2.625rem;
   color: rgb(189,189,189);
   font-weight: 500;
@@ -1841,12 +1849,14 @@ exports[`renders <List error /> without throwing 1`] = `
 @media only screen and (min-width:47.9375rem) {
   .c35 {
     width: 10rem;
+    display: table-cell;
   }
 }
 
 @media only screen and (min-width:47.9375rem) {
   .c36 {
     width: 8.125rem;
+    display: table-cell;
   }
 }
 
@@ -2659,6 +2669,7 @@ exports[`renders <List instances /> without throwing 1`] = `
   padding: 0 1.5rem;
   height: 3.75rem;
   width: 2rem;
+  display: table-cell;
   vertical-align: middle;
   text-align: left;
   height: 2.625rem;
@@ -2713,6 +2724,7 @@ exports[`renders <List instances /> without throwing 1`] = `
   padding: 0 1.5rem;
   height: 3.75rem;
   width: 9.375rem;
+  display: table-cell;
   cursor: pointer;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -2805,6 +2817,7 @@ exports[`renders <List instances /> without throwing 1`] = `
   padding: 0 1.5rem;
   height: 3.75rem;
   width: 3.75rem;
+  display: table-cell;
   height: 2.625rem;
   color: rgb(189,189,189);
   font-weight: 500;
@@ -3031,24 +3044,28 @@ exports[`renders <List instances /> without throwing 1`] = `
 @media only screen and (min-width:47.9375rem) {
   .c29 {
     width: 10rem;
+    display: table-cell;
   }
 }
 
 @media only screen and (min-width:47.9375rem) {
   .c30 {
     width: 8.125rem;
+    display: table-cell;
   }
 }
 
 @media only screen and (min-width:47.9375rem) {
   .c40 {
     width: 10rem;
+    display: table-cell;
   }
 }
 
 @media only screen and (min-width:47.9375rem) {
   .c41 {
     width: 8.125rem;
+    display: table-cell;
   }
 }
 
@@ -4681,6 +4698,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
   padding: 0 1.5rem;
   height: 3.75rem;
   width: 2rem;
+  display: table-cell;
   vertical-align: middle;
   text-align: left;
   height: 2.625rem;
@@ -4735,6 +4753,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
   padding: 0 1.5rem;
   height: 3.75rem;
   width: 9.375rem;
+  display: table-cell;
   cursor: pointer;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -4827,6 +4846,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
   padding: 0 1.5rem;
   height: 3.75rem;
   width: 3.75rem;
+  display: table-cell;
   height: 2.625rem;
   color: rgb(189,189,189);
   font-weight: 500;
@@ -5116,24 +5136,28 @@ exports[`renders <List instances selected /> without throwing 1`] = `
 @media only screen and (min-width:47.9375rem) {
   .c29 {
     width: 10rem;
+    display: table-cell;
   }
 }
 
 @media only screen and (min-width:47.9375rem) {
   .c30 {
     width: 8.125rem;
+    display: table-cell;
   }
 }
 
 @media only screen and (min-width:47.9375rem) {
   .c40 {
     width: 10rem;
+    display: table-cell;
   }
 }
 
 @media only screen and (min-width:47.9375rem) {
   .c41 {
     width: 8.125rem;
+    display: table-cell;
   }
 }
 
@@ -7252,6 +7276,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
   padding: 0 1.5rem;
   height: 3.75rem;
   width: 2rem;
+  display: table-cell;
   vertical-align: middle;
   text-align: left;
   height: 2.625rem;
@@ -7306,6 +7331,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
   padding: 0 1.5rem;
   height: 3.75rem;
   width: 9.375rem;
+  display: table-cell;
   cursor: pointer;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -7398,6 +7424,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
   padding: 0 1.5rem;
   height: 3.75rem;
   width: 3.75rem;
+  display: table-cell;
   height: 2.625rem;
   color: rgb(189,189,189);
   font-weight: 500;
@@ -7687,24 +7714,28 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
 @media only screen and (min-width:47.9375rem) {
   .c29 {
     width: 10rem;
+    display: table-cell;
   }
 }
 
 @media only screen and (min-width:47.9375rem) {
   .c30 {
     width: 8.125rem;
+    display: table-cell;
   }
 }
 
 @media only screen and (min-width:47.9375rem) {
   .c40 {
     width: 10rem;
+    display: table-cell;
   }
 }
 
 @media only screen and (min-width:47.9375rem) {
   .c41 {
     width: 8.125rem;
+    display: table-cell;
   }
 }
 
@@ -10032,6 +10063,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   padding: 0 1.5rem;
   height: 3.75rem;
   width: 2rem;
+  display: table-cell;
   vertical-align: middle;
   text-align: left;
   height: 2.625rem;
@@ -10086,6 +10118,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   padding: 0 1.5rem;
   height: 3.75rem;
   width: 9.375rem;
+  display: table-cell;
   cursor: pointer;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -10178,6 +10211,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   padding: 0 1.5rem;
   height: 3.75rem;
   width: 3.75rem;
+  display: table-cell;
   height: 2.625rem;
   color: rgb(189,189,189);
   font-weight: 500;
@@ -10467,24 +10501,28 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
 @media only screen and (min-width:47.9375rem) {
   .c29 {
     width: 10rem;
+    display: table-cell;
   }
 }
 
 @media only screen and (min-width:47.9375rem) {
   .c30 {
     width: 8.125rem;
+    display: table-cell;
   }
 }
 
 @media only screen and (min-width:47.9375rem) {
   .c40 {
     width: 10rem;
+    display: table-cell;
   }
 }
 
 @media only screen and (min-width:47.9375rem) {
   .c41 {
     width: 8.125rem;
+    display: table-cell;
   }
 }
 
diff --git a/packages/ui-toolkit/src/basealign/index.js b/packages/ui-toolkit/src/basealign/index.js
deleted file mode 100644
index 01c19cce..00000000
--- a/packages/ui-toolkit/src/basealign/index.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import styled from 'styled-components';
-import camelCase from 'camel-case';
-
-const aligns = ['vertical-align'];
-
-const alignsFromProps = props =>
-  aligns
-    .filter(align => props[camelCase(align)])
-    .map(
-      align => `
-    ${align}: ${props[camelCase(align)]};
-  `
-    )
-    .join(';\n');
-
-export default Component =>
-  Component.extend
-    ? Component.extend`
-        ${alignsFromProps};
-      `
-    : styled(Component)`
-        ${alignsFromProps};
-      `;
diff --git a/packages/ui-toolkit/src/card/header.js b/packages/ui-toolkit/src/card/header.js
index 71d8412e..b2e3b349 100644
--- a/packages/ui-toolkit/src/card/header.js
+++ b/packages/ui-toolkit/src/card/header.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Broadcast, Subscriber } from 'joy-react-broadcast';
 import PropTypes from 'prop-types';
-import is, { isNot, isOr } from 'styled-is';
+import is, { isNot } from 'styled-is';
 import isBoolean from 'lodash.isboolean';
 import remcalc from 'remcalc';
 
diff --git a/packages/ui-toolkit/src/header/index.js b/packages/ui-toolkit/src/header/index.js
index c090c2c0..5c9932b9 100644
--- a/packages/ui-toolkit/src/header/index.js
+++ b/packages/ui-toolkit/src/header/index.js
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import remcalc from 'remcalc';
 import is from 'styled-is';
 
-import Basealign from '../basealign';
+import Baseline from '../baseline';
 import { ViewContainer } from '../layout';
 
 const Container = ViewContainer.extend`
@@ -38,7 +38,7 @@ const Header = styled.div`
 /**
  * @example ./usage.md
  */
-export default Basealign(({ children, fluid, ...rest }) => (
+export default Baseline(({ children, fluid, ...rest }) => (
   <Header {...rest}>
     <Container fluid={fluid}>{children}</Container>
   </Header>
diff --git a/packages/ui-toolkit/src/popover/__tests__/__snapshots__/popover.spec.js.snap b/packages/ui-toolkit/src/popover/__tests__/__snapshots__/popover.spec.js.snap
index a31bfd73..63ca6e32 100644
--- a/packages/ui-toolkit/src/popover/__tests__/__snapshots__/popover.spec.js.snap
+++ b/packages/ui-toolkit/src/popover/__tests__/__snapshots__/popover.spec.js.snap
@@ -47,7 +47,7 @@ Array [
   min-width: 9.5rem;
   box-shadow: 0 0.125rem 0.375rem rgba(0,0,0,0.1);
   border: 0.0625rem solid rgb(216,216,216);
-  padding: 0.9375rem 1.125rem;
+  padding: 0.9375rem 1.125rem 0.1875rem 1.125rem;
   background: rgb(255,255,255);
   color: rgba(73,73,73,1);
   -webkit-text-fill-color: currentcolor;
@@ -72,11 +72,15 @@ Array [
 }
 
 .c0[data-placement^='top'] .b:after {
+  content: '';
+  display: block;
+  position: absolute;
   border-width: 0.4375rem 0.4375rem 0 0.4375rem;
-  border-color: rgb(255,255,255) transparent transparent transparent;
-  bottom: -0.375rem;
-  margin-top: 0;
-  margin-bottom: 0;
+  border-color: rgb(216,216,216) transparent transparent transparent;
+  border-style: solid;
+  left: -0.4375rem;
+  top: -0.375rem;
+  z-index: -1;
 }
 
 .c0[data-placement^='bottom'] .b {
@@ -87,6 +91,20 @@ Array [
   margin-bottom: 0;
 }
 
+.c0[data-placement^='bottom'] .b:after {
+  content: '';
+  display: block;
+  position: absolute;
+  border-width: 0 0.4375rem 0.4375rem 0.4375rem;
+  border-color: transparent transparent rgb(216,216,216) transparent;
+  border-style: solid;
+  top: -0.0625rem;
+  left: -0.4375rem;
+  margin-top: 0;
+  margin-bottom: 0;
+  z-index: -1;
+}
+
 .c0[data-placement^='top'],
 .c0[data-placement^='bottom'] {
   margin-bottom: 0.375rem;
diff --git a/packages/ui-toolkit/src/tooltip/__tests__/__snapshots__/tooltip.spec.js.snap b/packages/ui-toolkit/src/tooltip/__tests__/__snapshots__/tooltip.spec.js.snap
index 84f308f4..9c6de616 100644
--- a/packages/ui-toolkit/src/tooltip/__tests__/__snapshots__/tooltip.spec.js.snap
+++ b/packages/ui-toolkit/src/tooltip/__tests__/__snapshots__/tooltip.spec.js.snap
@@ -37,11 +37,15 @@ Array [
 }
 
 .c0[data-placement^='top'] .b:after {
+  content: '';
+  display: block;
+  position: absolute;
   border-width: 0.4375rem 0.4375rem 0 0.4375rem;
-  border-color: rgba(73,73,73,1) transparent transparent transparent;
-  bottom: -0.375rem;
-  margin-top: 0;
-  margin-bottom: 0;
+  border-color: transparent transparent transparent transparent;
+  border-style: solid;
+  left: -0.4375rem;
+  top: -0.375rem;
+  z-index: -1;
 }
 
 .c0[data-placement^='bottom'] .b {
@@ -52,6 +56,20 @@ Array [
   margin-bottom: 0;
 }
 
+.c0[data-placement^='bottom'] .b:after {
+  content: '';
+  display: block;
+  position: absolute;
+  border-width: 0 0.4375rem 0.4375rem 0.4375rem;
+  border-color: transparent transparent transparent transparent;
+  border-style: solid;
+  top: -0.0625rem;
+  left: -0.4375rem;
+  margin-top: 0;
+  margin-bottom: 0;
+  z-index: -1;
+}
+
 .c0[data-placement^='top'],
 .c0[data-placement^='bottom'] {
   margin-bottom: 0.375rem;