feat: add custom CSS property to configure cell padding (#6646)

vaadin · Oct 13, 2023 · b6dbb7b · b6dbb7b
1 parent 873d5c5
commit b6dbb7b
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 8 deletions.
diff --git a/packages/grid/theme/lumo/vaadin-grid-styles.js b/packages/grid/theme/lumo/vaadin-grid-styles.js
@@ -44,11 +44,13 @@ registerStyles(
     [part~='cell'] {
       min-height: var(--lumo-size-m);
       background-color: var(--lumo-base-color);
+      --_cell-padding: var(--vaadin-grid-cell-padding, var(--_cell-default-padding));
+      --_cell-default-padding: var(--lumo-space-xs) var(--lumo-space-m);
     }
 
     [part~='cell'] ::slotted(vaadin-grid-cell-content) {
       cursor: default;
-      padding: var(--lumo-space-xs) var(--lumo-space-m);
+      padding: var(--_cell-padding);
     }
 
     /* Apply row borders by default and introduce the "no-row-borders" variant */
@@ -331,16 +333,13 @@ registerStyles(
 
     :host([theme~='compact']) [part~='cell'] {
       min-height: var(--lumo-size-s);
+      --_cell-default-padding: var(--lumo-space-xs) var(--lumo-space-s);
     }
 
     :host([theme~='compact']) [part~='first-row'] [part~='cell']:not([part~='details-cell']) {
       min-height: calc(var(--lumo-size-s) - var(--_lumo-grid-border-width));
     }
 
-    :host([theme~='compact']) [part~='cell'] ::slotted(vaadin-grid-cell-content) {
-      padding: var(--lumo-space-xs) var(--lumo-space-s);
-    }
-
     /* Wrap cell contents */
 
     :host([theme~='wrap-cell-content']) [part~='cell'] ::slotted(vaadin-grid-cell-content) {

diff --git a/packages/grid/theme/material/vaadin-grid-styles.js b/packages/grid/theme/material/vaadin-grid-styles.js
@@ -20,14 +20,16 @@ registerStyles(
     [part~='cell'] {
       min-height: 48px;
       -webkit-tap-highlight-color: transparent;
+      --_cell-padding: var(--vaadin-grid-cell-padding, var(--_cell-default-padding));
+      --_cell-default-padding: 8px 16px;
     }
 
     [part~='cell'] ::slotted(vaadin-grid-cell-content) {
-      padding: 8px 16px;
+      padding: var(--_cell-padding);
     }
 
-    [part~='details-cell'] ::slotted(vaadin-grid-cell-content) {
-      padding: 14px 16px;
+    [part~='details-cell'] {
+      --_cell-default-padding: 14px 16px;
     }
 
     [part~='header-cell'],