fix: avoid doubled footer border when all rows visible (#10475)

Author: vursen

packages/grid/src/styles/vaadin-grid-base-styles.js

@@ -7,6 +7,7 @@ import '@vaadin/component-base/src/styles/style-props.js';
 import { css } from 'lit';
 
 export const gridStyles = css`
+  /* stylelint-disable no-duplicate-selectors */
   :host {
     display: flex;
     max-width: 100%;
@@ -163,50 +164,113 @@ export const gridStyles = css`
 
   /* Row and cell borders */
 
-  [part~='last-header-row']::before,
-  [part~='first-footer-row']::before {
-    position: absolute;
-    inset-inline: 0;
+  [part~='row'] {
+    &::after {
+      top: 0;
+      bottom: calc(var(--_row-border-width) * -1);
+    }
+  }
+
+  [part~='cell'] {
     border-block: var(--_row-border-width) var(--_border-color);
-    transform: translateX(var(--_grid-horizontal-scroll-position));
+    border-inline: var(--_column-border-width) var(--_border-color);
+    border-top-style: solid;
+
+    &::after {
+      top: calc(var(--_row-border-width) * -1);
+      bottom: calc(var(--_row-border-width) * -1);
+    }
   }
 
-  :host([overflow~='top']) [part~='last-header-row']::before {
-    content: '';
-    bottom: calc(var(--_row-border-width) * -1);
-    border-bottom-style: solid;
+  [part~='last-header-row'],
+  [part~='first-footer-row'] {
+    &::before {
+      position: absolute;
+      inset-inline: 0;
+      border-block: var(--_row-border-width) var(--_border-color);
+      transform: translateX(var(--_grid-horizontal-scroll-position));
+    }
   }
 
-  :host([overflow~='bottom']) [part~='first-footer-row']::before,
-  :host(:not([overflow~='top'])) #scroller:not([empty-state]) [part~='first-footer-row']::before {
-    content: '';
-    top: calc(var(--_row-border-width) * -1);
-    border-top-style: solid;
+  [part~='first-header-row'] {
+    [part~='cell'] {
+      border-top-style: none;
+    }
+
+    [part~='cell']::after {
+      top: 0;
+    }
+  }
+
+  [part~='last-header-row'] {
+    :host([overflow~='top']) &::before {
+      content: '';
+      bottom: calc(var(--_row-border-width) * -1);
+      border-bottom-style: solid;
+    }
+  }
+
+  #table:not([has-header]) [part~='first-row'] {
+    [part~='body-cell'] {
+      border-top-style: none;
+    }
+
+    [part~='body-cell']::after {
+      top: 0;
+    }
   }
 
   [part~='body-row'] {
     scroll-margin-bottom: var(--_row-border-width);
   }
 
-  /* stylelint-disable-next-line no-duplicate-selectors */
-  [part~='cell'] {
-    border-block: var(--_row-border-width) var(--_border-color);
-    border-inline: var(--_column-border-width) var(--_border-color);
+  [part~='last-row'] {
+    &::after {
+      bottom: 0;
+    }
+
+    [part~='cell']:not([part~='details-opened-row-cell']) {
+      border-bottom-style: solid;
+    }
   }
 
-  [part~='header-cell']:not([part~='first-header-row-cell']),
-  [part~='footer-cell']:not([part~='first-footer-row-cell']),
-  [part~='body-cell']:not([part~='first-row-cell']),
-  #table[has-header] [part~='first-row-cell'] {
-    border-top-style: solid;
+  #table:not([has-footer]) [part~='last-row'] {
+    :host([all-rows-visible]) &,
+    :host([overflow~='top']) &,
+    :host([overflow~='bottom']) & {
+      &::after,
+      [part~='cell']:not([part~='details-opened-row-cell'])::after {
+        bottom: 0;
+      }
+
+      [part~='cell']:not([part~='details-opened-row-cell']) {
+        border-bottom-style: none;
+      }
+    }
   }
 
-  [part~='details-opened-row-cell'],
-  #table[has-footer] [part~='last-row-cell'],
-  #table[has-footer] [part~='last-row'] [part~='details-cell'],
-  :host(:not([overflow~='bottom']):not([overflow~='top'])) [part~='last-row-cell'],
-  :host(:not([overflow~='bottom']):not([overflow~='top'])) [part~='last-row'] [part~='details-cell'] {
-    border-bottom-style: solid;
+  [part~='first-footer-row'] {
+    &::after {
+      top: calc(var(--_row-border-width) * -1);
+    }
+
+    [part~='cell'] {
+      border-top-style: none;
+    }
+
+    :host([overflow~='bottom']) &::before,
+    :host(:not([overflow~='top']):not([all-rows-visible])) #scroller:not([empty-state]) &::before {
+      content: '';
+      top: calc(var(--_row-border-width) * -1);
+      border-top-style: solid;
+    }
+  }
+
+  [part~='last-footer-row'] {
+    &::after,
+    [part~='cell']::after {
+      bottom: 0;
+    }
   }
 
   [part~='header-cell']:not([part~='first-column-cell']),
@@ -225,12 +289,10 @@ export const gridStyles = css`
 
   /* Row and cell background */
 
-  /* stylelint-disable-next-line no-duplicate-selectors */
   [part~='row'] {
     background-color: var(--vaadin-grid-row-background-color, var(--vaadin-background-color));
   }
 
-  /* stylelint-disable-next-line no-duplicate-selectors */
   [part~='cell'] {
     background-color: inherit;
     background-repeat: no-repeat;
@@ -477,14 +539,14 @@ export const gridStyles = css`
   :is([part~='row'], [part~='cell'])::after {
     position: absolute;
     z-index: 3;
-    inset: 0;
+    inset-inline: 0;
     pointer-events: none;
     outline: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color);
     outline-offset: calc(var(--vaadin-focus-ring-width) * -1);
   }
 
-  [part~='cell']::after {
-    inset-block: calc(var(--_row-border-width) * -1);
+  [part~='row']::after {
+    transform: translateX(var(--_grid-horizontal-scroll-position));
   }
 
   [part~='cell']:where(:not([part~='details-cell']))::after {
@@ -499,33 +561,6 @@ export const gridStyles = css`
     inset-inline-end: 0;
   }
 
-  [part~='row']::after {
-    inset: 0 0 calc(var(--_row-border-width) * -1);
-    transform: translateX(var(--_grid-horizontal-scroll-position));
-  }
-
-  [part~='first-header-row-cell']::after,
-  #table:not([has-header]) [part~='first-row-cell']::after {
-    top: 0;
-  }
-
-  [part~='first-footer-row']::after {
-    top: calc(var(--_row-border-width) * -1);
-  }
-
-  [part~='last-row']::after,
-  [part~='last-footer-row']::after,
-  [part~='last-footer-row-cell']::after {
-    bottom: 0;
-  }
-
-  [part~='last-row'] [part~='details-cell']::after,
-  [part~='last-row']:not([part~='details-opened-row']) [part~='last-row-cell']::after {
-    :host([overflow~='top']) #table:not([has-footer]) & {
-      bottom: 0;
-    }
-  }
-
   :host([navigating]) [part~='row']:focus,
   :host([navigating]) [part~='cell']:focus {
     outline: 0;

packages/grid/test/column-rendering.test.js

@@ -196,6 +196,9 @@ import { flushGrid, getCellContent, getHeaderCellContent } from './helpers.js';
       // Disable cell padding for this test
       fixtureSync(`
         <style>
+          vaadin-grid {
+            --vaadin-grid-row-border-width: 0px;
+          }
           vaadin-grid-cell-content {
             padding: 0;
           }

packages/grid/test/visual/base/grid-focus.test.js

@@ -21,6 +21,10 @@ describe('grid focus', () => {
           <vaadin-grid-column data-name="Last" width="200px"></vaadin-grid-column>
         </vaadin-grid-column-group>
         <vaadin-grid-column data-name="City" width="200px"></vaadin-grid-column>
+
+        <div slot="empty-state">
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio laborum optio quo perferendis unde, fuga reprehenderit molestias cum laboriosam ipsa enim voluptatem iusto fugit. Sed, veniam repudiandae consectetur recusandae laudantium.
+        </div>
       </vaadin-grid>
       <style>
         vaadin-grid {
@@ -102,6 +106,57 @@ describe('grid focus', () => {
     });
   });
 
+  describe('first footer row', () => {
+    beforeEach(async () => {
+      // Focus first footer row
+      await sendKeys({ press: 'Tab' });
+      await sendKeys({ press: 'Tab' });
+      await sendKeys({ press: 'Tab' });
+      await sendKeys({ press: 'ArrowLeft' });
+    });
+
+    it('default', async () => {
+      await visualDiff(element, 'first-footer-row');
+    });
+
+    it('first cell', async () => {
+      await sendKeys({ press: 'ArrowRight' });
+      await visualDiff(element, 'first-footer-row-first-cell');
+    });
+
+    it('last cell', async () => {
+      await sendKeys({ press: 'ArrowRight' });
+      await sendKeys({ press: 'End' });
+      await visualDiff(element, 'first-footer-row-last-cell');
+    });
+  });
+
+  describe('last footer row', () => {
+    beforeEach(async () => {
+      // Focus last footer row
+      await sendKeys({ press: 'Tab' });
+      await sendKeys({ press: 'Tab' });
+      await sendKeys({ press: 'Tab' });
+      await sendKeys({ press: 'ArrowLeft' });
+      await sendKeys({ press: 'ArrowDown' });
+    });
+
+    it('default', async () => {
+      await visualDiff(element, 'last-footer-row');
+    });
+
+    it('first cell', async () => {
+      await sendKeys({ press: 'ArrowRight' });
+      await visualDiff(element, 'last-footer-row-first-cell');
+    });
+
+    it('last cell', async () => {
+      await sendKeys({ press: 'ArrowRight' });
+      await sendKeys({ press: 'End' });
+      await visualDiff(element, 'last-footer-row-last-cell');
+    });
+  });
+
   describe('first body row', () => {
     beforeEach(async () => {
       // Focus first body row
@@ -168,7 +223,10 @@ describe('grid focus', () => {
     it('details opened', async () => {
       element.openItemDetails(element.items.at(-1));
       await nextRender();
-      await sendKeys({ press: 'ArrowDown' }); // ensure details row is visible
+
+      // Ensure the details row is fully visible
+      await sendKeys({ press: 'ArrowDown' });
+      await sendKeys({ press: 'ArrowDown' });
       await visualDiff(element, 'last-body-row-details-opened');
     });
 
@@ -207,24 +265,59 @@ describe('grid focus', () => {
         column.footerRenderer = null;
       });
       await nextRender();
-    });
-
-    it('last body row', async () => {
       await sendKeys({ press: 'Tab' });
       await sendKeys({ press: 'Tab' });
       await sendKeys({ press: 'ArrowLeft' });
       await sendKeys({ press: 'End' });
+    });
+
+    it('last body row', async () => {
       await visualDiff(element, 'without-footer-last-body-row');
     });
 
     it('last body row cell', async () => {
-      await sendKeys({ press: 'Tab' });
-      await sendKeys({ press: 'Tab' });
-      await sendKeys({ press: 'ArrowLeft' });
-      await sendKeys({ press: 'End' });
       await sendKeys({ press: 'ArrowRight' });
       await visualDiff(element, 'without-footer-last-body-row-cell');
     });
+
+    it('last body row details opened', async () => {
+      element.openItemDetails(element.items.at(-1));
+      await nextRender();
+
+      // Ensure the details row is fully visible
+      await sendKeys({ press: 'ArrowDown' });
+      await sendKeys({ press: 'ArrowDown' });
+      await visualDiff(element, 'without-footer-last-body-row-details-opened');
+    });
+
+    it('last body row details opened cell', async () => {
+      element.openItemDetails(element.items.at(-1));
+      await nextRender();
+      await sendKeys({ press: 'ArrowRight' });
+      await sendKeys({ press: 'ArrowDown' });
+      await visualDiff(element, 'without-footer-last-body-row-details-opened-cell');
+    });
+  });
+
+  describe('empty state', () => {
+    beforeEach(async () => {
+      element.items = [];
+      await nextRender();
+      await sendKeys({ press: 'Tab' });
+      await sendKeys({ press: 'Tab' });
+    });
+
+    it('default', async () => {
+      await visualDiff(element, 'empty-state');
+    });
+
+    it('without header and footer', async () => {
+      [...element.querySelectorAll('vaadin-grid-column, vaadin-grid-column-group')].forEach((column) => {
+        column.headerRenderer = null;
+        column.footerRenderer = null;
+      });
+      await visualDiff(element, 'empty-state-without-header-and-footer');
+    });
   });
 
   describe('scrolling', () => {