feat(ui-toolkit): remove basealign

BREAKING CHANGE

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
+            <svg
-              className="c8"
+              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
+              <g
-                height="10"
+                transform="translate(17997 -18577)"
-                width="28"
               >
-                <rect
+                <g>
-                  className="c9"
+                  <use
-                  height="6"
+                    fill="rgb(216, 216, 216)"
-                  width="6"
+                    transform="matrix(0.866025 0.5 -0.5 0.866025 -17988.7 18577.9)"
-                  x="2"
+                    xlinkHref="#K"
-                  y="2"
+                  />
+                </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
+              </defs>
-                  className="c10"
+            </svg>
-                  height="6"
-                  width="6"
-                  x="11"
-                  y="2"
-                />
-                <rect
-                  className="c11"
-                  height="6"
-                  width="6"
-                  x="20"
-                  y="2"
-                />
-              </svg>
-            </div>
           </button>
         </span>
         <span
@@ -4449,36 +4452,42 @@ exports[`renders <Actions submitting statuses /> without throwing 1`] = `
             onClick={[Function]}
             type="button"
           >
-            <div
+            <svg
-              className="c8"
+              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
+              <g
-                height="10"
+                transform="translate(17997 -18577)"
-                width="28"
               >
-                <rect
+                <g>
-                  className="c9"
+                  <use
-                  height="6"
+                    fill="rgb(216, 216, 216)"
-                  width="6"
+                    transform="matrix(0.866025 0.5 -0.5 0.866025 -17988.7 18577.9)"
-                  x="2"
+                    xlinkHref="#K"
-                  y="2"
+                  />
+                </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
+              </defs>
-                  className="c10"
+            </svg>
-                  height="6"
+            <span>
-                  width="6"
+              Reboot
-                  x="11"
+            </span>
-                  y="2"
-                />
-                <rect
-                  className="c11"
-                  height="6"
-                  width="6"
-                  x="20"
-                  y="2"
-                />
-              </svg>
-            </div>
           </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;
   }
 }
 

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

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

@@ -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};
-      `;

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

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>

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;
+  border-color: rgb(216,216,216) transparent transparent transparent;
-  bottom: -0.375rem;
+  border-style: solid;
-  margin-top: 0;
+  left: -0.4375rem;
-  margin-bottom: 0;
+  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;

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;
+  border-color: transparent transparent transparent transparent;
-  bottom: -0.375rem;
+  border-style: solid;
-  margin-top: 0;
+  left: -0.4375rem;
-  margin-bottom: 0;
+  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;