@vaadin/grid 24.2.3 → 24.3.0-alpha10

package/src/vaadin-grid.js

@@ -4,13 +4,15 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import './vaadin-grid-column.js';
-import './vaadin-grid-styles.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { GridMixin } from './vaadin-grid-mixin.js';
+import { gridStyles } from './vaadin-grid-styles.js';
+
+registerStyles('vaadin-grid', gridStyles, { moduleId: 'vaadin-grid-styles' });
 
 /**
  * `<vaadin-grid>` is a free, high quality data grid / data table Web Component. The content of the
@@ -154,6 +156,8 @@ import { GridMixin } from './vaadin-grid-mixin.js';
  * Part name                  | Description
  * ---------------------------|----------------
  * `row`                      | Row in the internal table
+ * `body-row`                 | Body row in the internal table
+ * `collapsed-row`            | Collapsed row
  * `expanded-row`             | Expanded row
  * `selected-row`             | Selected row
  * `details-opened-row`       | Row with details open
@@ -183,6 +187,7 @@ import { GridMixin } from './vaadin-grid-mixin.js';
  * `last-footer-row-cell`     | Cell in the last footer row
  * `loading-row-cell`         | Cell in a row that is waiting for data from data provider
  * `selected-row-cell`        | Cell in a selected row
+ * `collapsed-row-cell`       | Cell in a collapsed row
  * `expanded-row-cell`        | Cell in an expanded row
  * `details-opened-row-cell`  | Cell in an row with details open
  * `dragstart-row-cell`       | Cell in a row that user started to drag (set for one frame)

package/theme/lumo/vaadin-grid-sorter-styles.js

@@ -34,7 +34,7 @@ registerStyles(
     }
 
     :host([direction]) {
-      color: var(--lumo-primary-text-color);
+      color: var(--vaadin-selection-color-text, var(--lumo-primary-text-color));
     }
 
     [part='order'] {

package/theme/lumo/vaadin-grid-styles.js

@@ -4,7 +4,7 @@ import '@vaadin/vaadin-lumo-styles/sizing.js';
 import '@vaadin/vaadin-lumo-styles/spacing.js';
 import '@vaadin/vaadin-lumo-styles/style.js';
 import '@vaadin/vaadin-lumo-styles/typography.js';
-import '@vaadin/checkbox/theme/lumo/vaadin-checkbox.js';
+import '@vaadin/checkbox/theme/lumo/vaadin-checkbox-styles.js';
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 registerStyles(
@@ -21,7 +21,8 @@ registerStyles(
       -webkit-tap-highlight-color: transparent;
       -webkit-font-smoothing: antialiased;
       -moz-osx-font-smoothing: grayscale;
-
+      --_focus-ring-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct));
+      --_focus-ring-width: var(--vaadin-focus-ring-width, 2px);
       /* For internal use only */
       --_lumo-grid-border-color: var(--lumo-contrast-20pct);
       --_lumo-grid-secondary-border-color: var(--lumo-contrast-10pct);
@@ -43,12 +44,15 @@ registerStyles(
 
     [part~='cell'] {
       min-height: var(--lumo-size-m);
-      background-color: var(--lumo-base-color);
+      background-color: var(--vaadin-grid-cell-background, var(--lumo-base-color));
+      cursor: default;
+      --_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);
+      cursor: inherit;
+      padding: var(--_cell-padding);
     }
 
     /* Apply row borders by default and introduce the "no-row-borders" variant */
@@ -79,7 +83,7 @@ registerStyles(
       position: absolute;
       inset: 0;
       pointer-events: none;
-      box-shadow: inset 0 0 0 2px var(--lumo-primary-color-50pct);
+      box-shadow: inset 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color);
     }
 
     :host([navigating]) [part~='row']:focus::before {
@@ -94,7 +98,7 @@ registerStyles(
       z-index: 100;
       inset: 0;
       pointer-events: none;
-      box-shadow: inset 0 0 0 2px var(--lumo-primary-color-50pct);
+      box-shadow: inset 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color);
     }
 
     [part~='row'][dragover] {
@@ -187,14 +191,14 @@ registerStyles(
 
     /* Headers and footers */
 
-    [part~='header-cell'] ::slotted(vaadin-grid-cell-content),
-    [part~='footer-cell'] ::slotted(vaadin-grid-cell-content),
+    [part~='header-cell'],
+    [part~='footer-cell'],
     [part~='reorder-ghost'] {
       font-size: var(--lumo-font-size-s);
       font-weight: 500;
     }
 
-    [part~='footer-cell'] ::slotted(vaadin-grid-cell-content) {
+    [part~='footer-cell'] {
       font-weight: 400;
     }
 
@@ -331,16 +335,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) {

package/theme/material/vaadin-grid-styles.js

@@ -20,19 +20,21 @@ 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'],
     [part~='footer-cell'] {
-      background-color: var(--material-background-color);
+      background-color: var(--vaadin-grid-cell-background, var(--material-background-color));
       color: var(--material-secondary-text-color);
       font-size: var(--material-caption-font-size);
       font-weight: 500;
@@ -53,15 +55,18 @@ registerStyles(
     /* Body rows/cells */
 
     [part~='body-cell'] {
-      background-color: var(--material-background-color);
+      background-color: var(--vaadin-grid-cell-background, var(--material-background-color));
     }
 
     [part~='row']:hover > [part~='body-cell'] {
-      background: linear-gradient(
-          var(--_material-grid-row-hover-background-color, rgba(0, 0, 0, 0.04)),
-          var(--_material-grid-row-hover-background-color, rgba(0, 0, 0, 0.04))
-        )
-        var(--material-background-color);
+      background: var(
+        --vaadin-grid-cell-background,
+        linear-gradient(
+            var(--_material-grid-row-hover-background-color, rgba(0, 0, 0, 0.04)),
+            var(--_material-grid-row-hover-background-color, rgba(0, 0, 0, 0.04))
+          )
+          var(--material-background-color)
+      );
     }
 
     @media (hover: none) {