fix(ld-table): make selection wrapper take full row height

emdgroup-liquid · Feb 24, 2023 · c6e231b · c6e231b · vercel · Feb 24, 2023
1 parent b6b95e4
commit c6e231b
Show file tree

Hide file tree

Showing 10 changed files with 57 additions and 14 deletions.
diff --git a/screenshot/builds/master.json b/screenshot/builds/master.json
@@ -28138,7 +28138,7 @@
     },
     {
       "id": "5db997ab",
-      "image": "3672013460fddbff3bb616d7f4726b45.png",
+      "image": "7a8f74af5e133410fbf1c771b82048f7.png",
       "userAgent": "default",
       "desc": "ld-table renders as Web Component with selection and pagination, scroll left",
       "testPath": "./src/liquid/components/ld-table/test/ld-table.e2e.ts",
@@ -28151,7 +28151,7 @@
     },
     {
       "id": "c3b52da3",
-      "image": "9ad5cdf629db222dab8fa8207a12fee5.png",
+      "image": "5ec5ab573acb7e1795f6723a358222eb.png",
       "userAgent": "default",
       "desc": "ld-table renders as Web Component with selection and pagination, scroll right",
       "testPath": "./src/liquid/components/ld-table/test/ld-table.e2e.ts",

diff --git a/screenshot/images/3672013460fddbff3bb616d7f4726b45.png b/screenshot/images/3672013460fddbff3bb616d7f4726b45.png
diff --git a/screenshot/images/5ec5ab573acb7e1795f6723a358222eb.png b/screenshot/images/5ec5ab573acb7e1795f6723a358222eb.png
diff --git a/screenshot/images/7a8f74af5e133410fbf1c771b82048f7.png b/screenshot/images/7a8f74af5e133410fbf1c771b82048f7.png
diff --git a/screenshot/images/9ad5cdf629db222dab8fa8207a12fee5.png b/screenshot/images/9ad5cdf629db222dab8fa8207a12fee5.png
diff --git a/src/liquid/components/ld-table/ld-table-head/ld-table-head.shadow.css b/src/liquid/components/ld-table/ld-table-head/ld-table-head.shadow.css
@@ -1,5 +1,10 @@
 :host {
   display: contents;
+
+  ::slotted(ld-table-row) {
+    --ld-table-selection-wrapper-border-width-top: calc(var(--ld-sp-1) * 0.5);
+    --ld-table-selection-wrapper-border-width-bottom: var(--ld-sp-1);
+  }
 }
 
 thead {

diff --git a/src/liquid/components/ld-table/ld-table-row/ld-table-row.shadow.css b/src/liquid/components/ld-table/ld-table-row/ld-table-row.shadow.css
@@ -1,5 +1,28 @@
 :host {
   display: contents;
+
+  /* Note that the px unit is required in Safari for the calc to work */
+  &(:first-of-type) {
+    --ld-table-selection-wrapper-border-width-top: 0px;
+  }
+  &(:last-of-type) {
+    --ld-table-selection-wrapper-border-width-bottom: 0px;
+  }
+
+  --ld-table-selection-wrapper-gradient: linear-gradient(
+    to top,
+    var(--ld-table-border-col),
+    var(--ld-table-border-col)
+      var(--ld-table-selection-wrapper-border-width-bottom),
+    var(--ld-table-bg-col) var(--ld-table-selection-wrapper-border-width-bottom),
+    var(--ld-table-bg-col),
+    var(--ld-table-bg-col),
+    var(--ld-table-bg-col)
+      calc(100% - var(--ld-table-selection-wrapper-border-width-top)),
+    var(--ld-table-border-col)
+      calc(100% - var(--ld-table-selection-wrapper-border-width-top)),
+    var(--ld-table-border-col) 100%
+  );
 }
 
 tr {
@@ -10,15 +33,24 @@ tr {
 .ld-table__selection-wrapper {
   vertical-align: middle;
   align-items: center;
-  background-color: var(--ld-table-bg-col);
+  background: var(--ld-table-selection-wrapper-gradient);
   display: flex;
   justify-content: center;
   padding-inline: var(--ld-table-cell-padding-x);
   position: absolute;
-  top: var(--ld-sp-6);
-  bottom: var(--ld-sp-6);
+  top: 0;
+  bottom: 0;
   left: 0;
-  border-right: 1px solid var(--ld-table-border-col);
+
+  &::after {
+    content: '';
+    background-color: var(--ld-table-border-col);
+    position: absolute;
+    right: 0;
+    top: var(--ld-sp-6);
+    bottom: var(--ld-sp-6);
+    width: var(--ld-table-row-outline-width);
+  }
 }
 
 .ld-table-row__selection-cell {

diff --git a/src/liquid/components/ld-table/ld-table.css b/src/liquid/components/ld-table/ld-table.css
@@ -28,6 +28,9 @@
     var(--ld-table-bg-col)
   );
 
+  --ld-table-selection-wrapper-border-width-top: calc(var(--ld-sp-1) * 0.5);
+  --ld-table-selection-wrapper-border-width-bottom: calc(var(--ld-sp-1) * 0.5);
+
   /* Fix for Safari overflow hidden with border radius quirk. */
   -webkit-mask-image: -webkit-radial-gradient(white, black);
 

diff --git a/src/liquid/components/ld-table/test/ld-table.e2e.ts b/src/liquid/components/ld-table/test/ld-table.e2e.ts
@@ -460,7 +460,7 @@ describe('ld-table', () => {
           </ld-pagination>
         </ld-table-toolbar>
         <ld-table-head>
-          <ld-table-row>
+          <ld-table-row selectable>
             <ld-table-header sortable>#</ld-table-header>
             <ld-table-header sortable>Name</ld-table-header>
             <ld-table-header sortable>Symbol</ld-table-header>
@@ -470,47 +470,47 @@ describe('ld-table', () => {
           </ld-table-row>
         </ld-table-head>
         <ld-table-body>
-          <ld-table-row class="hydrated">
+          <ld-table-row class="hydrated" selectable>
             <ld-table-cell class="hydrated">1</ld-table-cell>
             <ld-table-cell class="hydrated">Hydrogen</ld-table-cell>
             <ld-table-cell class="hydrated">H</ld-table-cell>
             <ld-table-cell class="hydrated">1.0080000000</ld-table-cell>
             <ld-table-cell class="hydrated">2.20</ld-table-cell>
             <ld-table-cell class="hydrated">0.09</ld-table-cell>
           </ld-table-row>
-          <ld-table-row class="hydrated">
+          <ld-table-row class="hydrated" selectable>
             <ld-table-cell class="hydrated">2</ld-table-cell>
             <ld-table-cell class="hydrated">Helium</ld-table-cell>
             <ld-table-cell class="hydrated">He</ld-table-cell>
             <ld-table-cell class="hydrated">4.0026022000</ld-table-cell>
             <ld-table-cell class="hydrated">-</ld-table-cell>
             <ld-table-cell class="hydrated">0.18</ld-table-cell>
           </ld-table-row>
-          <ld-table-row class="hydrated">
+          <ld-table-row class="hydrated" selectable>
             <ld-table-cell class="hydrated">3</ld-table-cell>
             <ld-table-cell class="hydrated">Lithium</ld-table-cell>
             <ld-table-cell class="hydrated">Li</ld-table-cell>
             <ld-table-cell class="hydrated">6.9400000000</ld-table-cell>
             <ld-table-cell class="hydrated">0.98</ld-table-cell>
             <ld-table-cell class="hydrated">0.53</ld-table-cell>
           </ld-table-row>
-          <ld-table-row class="hydrated">
+          <ld-table-row class="hydrated" selectable>
             <ld-table-cell class="hydrated">4</ld-table-cell>
             <ld-table-cell class="hydrated">Beryllium</ld-table-cell>
             <ld-table-cell class="hydrated">Be</ld-table-cell>
             <ld-table-cell class="hydrated">9.0121831500</ld-table-cell>
             <ld-table-cell class="hydrated">1.57</ld-table-cell>
             <ld-table-cell class="hydrated">1.85</ld-table-cell>
           </ld-table-row>
-          <ld-table-row class="hydrated">
+          <ld-table-row class="hydrated" selectable>
             <ld-table-cell class="hydrated">5</ld-table-cell>
             <ld-table-cell class="hydrated">Boron</ld-table-cell>
             <ld-table-cell class="hydrated">B</ld-table-cell>
             <ld-table-cell class="hydrated">10.8100000000</ld-table-cell>
             <ld-table-cell class="hydrated">2.04</ld-table-cell>
             <ld-table-cell class="hydrated">2.08</ld-table-cell>
           </ld-table-row>
-          <ld-table-row class="hydrated">
+          <ld-table-row class="hydrated" selectable>
             <ld-table-cell class="hydrated">6</ld-table-cell>
             <ld-table-cell class="hydrated">Carbon</ld-table-cell>
             <ld-table-cell class="hydrated">C</ld-table-cell>

diff --git a/src/liquid/utils/e2e-tests.ts b/src/liquid/utils/e2e-tests.ts
@@ -99,6 +99,9 @@ export const getPageWithContent = async (
     ])
   }
 
+  // TODO: Update all e2e tests screenshots with a device scale factor of 2
+  // await page.setViewport({ width: 600, height: 600, deviceScaleFactor: 2 })
+
   return page
 }
 
@@ -130,7 +133,7 @@ export const analyzeAccessibility = async (
   await page.addScriptTag({ path: resolvePath(PATH_TO_AXE) })
   // Make sure that axe is executed in the next tick after
   // the page emits the load event, giving priority to other scripts.
-  return page.evaluate(
+  return await page.evaluate(
     async (axeOptions: axe.RunOptions, spec: axe.Spec) => {
       await new Promise((resolve) => {
         setTimeout(resolve, 0)