fix(ld-table): add specificity to account for border resets

Fixes #491
emdgroup-liquid · Jan 27, 2023 · 5260c33 · 5260c33 · vercel · Jan 27, 2023
1 parent 009be8e
commit 5260c33
Show file tree

Hide file tree

Showing 5 changed files with 135 additions and 5 deletions.
diff --git a/screenshot/builds/master.json b/screenshot/builds/master.json
@@ -28006,6 +28006,32 @@
       "isLandscape": false,
       "isMobile": false
     },
+    {
+      "id": "b4d9e45b",
+      "image": "aa58fdb7980253dda4dbba2c32153641.png",
+      "userAgent": "default",
+      "desc": "ld-table handles CSS reset as a CSS Component",
+      "testPath": "./src/liquid/components/ld-table/test/ld-table.e2e.ts",
+      "width": 600,
+      "height": 600,
+      "deviceScaleFactor": 1,
+      "hasTouch": false,
+      "isLandscape": false,
+      "isMobile": false
+    },
+    {
+      "id": "03144801",
+      "image": "57f094ec225c0ef333f9816638e27dbb.png",
+      "userAgent": "default",
+      "desc": "ld-table handles CSS reset as a Web Component",
+      "testPath": "./src/liquid/components/ld-table/test/ld-table.e2e.ts",
+      "width": 600,
+      "height": 600,
+      "deviceScaleFactor": 1,
+      "hasTouch": false,
+      "isLandscape": false,
+      "isMobile": false
+    },
     {
       "id": "42cb6148",
       "image": "aa58fdb7980253dda4dbba2c32153641.png",
@@ -32037,4 +32063,4 @@
       "isMobile": false
     }
   ]
-}
+}
diff --git a/src/liquid/components/ld-table/ld-table.css b/src/liquid/components/ld-table/ld-table.css
@@ -33,7 +33,6 @@
 
   background-color: var(--ld-table-border-col);
   border-radius: var(--ld-br-l);
-  border: solid var(--ld-sp-1) var(--ld-table-border-col);
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
@@ -116,6 +115,11 @@
   }
 }
 
+/* Increase specificity to overwrite Tailwind's preflight reset. */
+.ld-table.ld-table {
+  border: solid var(--ld-sp-1) var(--ld-table-border-col);
+}
+
 .ld-table__scroll-container {
   height: inherit;
   max-height: inherit;

diff --git a/src/liquid/components/ld-table/ld-table.tsx b/src/liquid/components/ld-table/ld-table.tsx
@@ -149,7 +149,14 @@ export class LdTable {
     const cl = getClassNames(['ld-table'])
 
     return (
-      <Host class={cl} role="figure">
+      <Host
+        class={cl}
+        role="figure"
+        style={{
+          // Increase specificity to overwrite Tailwind's preflight reset.
+          border: 'solid var(--ld-sp-1) var(--ld-table-border-col)',
+        }}
+      >
         <slot name="toolbar" />
         <div part="scroll-container" class="ld-table__scroll-container">
           <table part="table" ref={(el) => (this.tableRef = el)}>

diff --git a/src/liquid/components/ld-table/test/__snapshots__/ld-table.spec.tsx.snap b/src/liquid/components/ld-table/test/__snapshots__/ld-table.spec.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ld-table renders 1`] = `
-<ld-table class="ld-table" role="figure">
+<ld-table class="ld-table" role="figure" style="border: solid var(--ld-sp-1) var(--ld-table-border-col);">
   <mock:shadow-root>
     <slot name="toolbar"></slot>
     <div class="ld-table__scroll-container" part="scroll-container">

diff --git a/src/liquid/components/ld-table/test/ld-table.e2e.ts b/src/liquid/components/ld-table/test/ld-table.e2e.ts
@@ -87,6 +87,99 @@ describe('ld-table', () => {
     expect(results).toMatchScreenshot()
   })
 
+  it('handles CSS reset as a Web Component', async () => {
+    const page = await getPageWithContent(
+      `<style>
+        .*, ::before, ::after {
+          border-width: 0;
+          border-style: dashed;
+          border-color: red;
+        }
+      </style>
+      <ld-table>
+        <ld-table-toolbar slot="toolbar">
+          <ld-table-caption>
+            Superheros and sidekicks
+          </ld-table-caption>
+        </ld-table-toolbar>
+        <ld-table-colgroup>
+          <ld-table-col></ld-table-col>
+          <ld-table-col span="2" class="batman"></ld-table-col>
+          <ld-table-col span="2" class="flash"></ld-table-col>
+        </ld-table-colgroup>
+        <ld-table-body>
+          <ld-table-row>
+            <ld-table-cell></ld-table-cell>
+            <ld-table-header scope="col">Batman</ld-table-header>
+            <ld-table-header scope="col">Robin</ld-table-header>
+            <ld-table-header scope="col">The Flash</ld-table-header>
+            <ld-table-header scope="col">Kid Flash</ld-table-header>
+          </ld-table-row>
+          <ld-table-row>
+            <ld-table-header scope="row">Skill</ld-table-header>
+            <ld-table-cell>Smarts</ld-table-cell>
+            <ld-table-cell>Dex, acrobat</ld-table-cell>
+            <ld-table-cell>Super speed</ld-table-cell>
+            <ld-table-cell>Super speed</ld-table-cell>
+          </ld-table-row>
+        </ld-table-body>
+      </ld-table>`
+    )
+
+    const results = await page.compareScreenshot()
+    expect(results).toMatchScreenshot()
+  })
+
+  it('handles CSS reset as a CSS Component', async () => {
+    const page = await getPageWithContent(
+      `<style>
+        .*, ::before, ::after {
+          border-width: 0;
+          border-style: dashed;
+          border-color: red;
+        }
+      </style>
+      <figure class="ld-table">
+        <div class="ld-table__toolbar">
+          <figcaption>
+            Superheros and sidekicks
+          </figcaption>
+        </div>
+        <div class="ld-table__scroll-container">
+          <table>
+            <colgroup>
+              <col></col>
+              <col span="2" class="batman"></col>
+              <col span="2" class="flash"></col>
+            </colgroup>
+            <tbody>
+              <tr>
+                <td></td>
+                <th scope="col">Batman</th>
+                <th scope="col">Robin</th>
+                <th scope="col">The Flash</th>
+                <th scope="col">Kid Flash</th>
+              </tr>
+              <tr>
+                <th scope="row">Skill</th>
+                <td>Smarts</td>
+                <td>Dex, acrobat</td>
+                <td>Super speed</td>
+                <td>Super speed</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </figure>`,
+      {
+        components,
+      }
+    )
+
+    const results = await page.compareScreenshot()
+    expect(results).toMatchScreenshot()
+  })
+
   it('renders as Web Component with sort buttons', async () => {
     const page = await getPageWithContent(
       `<style>
@@ -336,7 +429,7 @@ describe('ld-table', () => {
     expect(resultsScrollBottom).toMatchScreenshot()
   })
 
-  fit('renders as Web Component with selection and pagination', async () => {
+  it('renders as Web Component with selection and pagination', async () => {
     const page = await getPageWithContent(
       `<style>
         .periodic-table {