refactor: update grid-pro CSS to not use registerStyles (#9953)

web-padawan · web-flow · commit bc541cce3c2c · 2025-08-08T16:30:03.000+03:00
diff --git a/packages/grid-pro/src/styles/vaadin-grid-pro-base-styles.js b/packages/grid-pro/src/styles/vaadin-grid-pro-base-styles.js
@@ -48,7 +48,6 @@ const gridPro = css`
 
   /* Indicate read-only cells */
 
-  /* prettier-ignore */
   :host([theme~='highlight-read-only-cells']) [part~='body-cell']:not(:has([part~='editable-cell'])) {
     --vaadin-grid-cell-background-hover: repeating-linear-gradient(
       -45deg,
@@ -96,6 +95,12 @@ const gridPro = css`
       background-position: max(300%, 8em) 0;
     }
   }
+
+  :host([loading-editor]) [part~='focused-cell'] ::slotted(vaadin-grid-cell-content),
+  [part~='updating-cell'] ::slotted(vaadin-grid-cell-content) {
+    opacity: 0;
+    pointer-events: none;
+  }
 `;
 
 export const gridProStyles = [gridPro, gridStyles];
diff --git a/packages/grid-pro/src/vaadin-grid-pro-inline-editing-mixin.js b/packages/grid-pro/src/vaadin-grid-pro-inline-editing-mixin.js
@@ -12,21 +12,6 @@ import { animationFrame } from '@vaadin/component-base/src/async.js';
 import { Debouncer } from '@vaadin/component-base/src/debounce.js';
 import { get, set } from '@vaadin/component-base/src/path-utils.js';
 import { iterateRowCells, updatePart } from '@vaadin/grid/src/vaadin-grid-helpers.js';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-registerStyles(
-  'vaadin-grid-pro',
-  css`
-    :host([loading-editor]) [part~='focused-cell'] ::slotted(vaadin-grid-cell-content),
-    [part~='updating-cell'] ::slotted(vaadin-grid-cell-content) {
-      opacity: 0;
-      pointer-events: none;
-    }
-  `,
-  {
-    moduleId: 'vaadin-grid-pro-styles',
-  },
-);
 
 /**
  * @polymerMixin
diff --git a/packages/vaadin-lumo-styles/src/components/grid-pro.css b/packages/vaadin-lumo-styles/src/components/grid-pro.css
@@ -37,14 +37,14 @@
 
   /* prettier-ignore */
   :host([theme~='highlight-read-only-cells']) [tabindex]:not([part~='editable-cell']):not([part~='header-cell']):not([part~='footer-cell']) {
-      background-image: repeating-linear-gradient(
-        135deg,
-        transparent,
-        transparent 6px,
-        var(--lumo-contrast-5pct) 6px,
-        var(--lumo-contrast-5pct) 14px
-      );
-    }
+    background-image: repeating-linear-gradient(
+      135deg,
+      transparent,
+      transparent 6px,
+      var(--lumo-contrast-5pct) 6px,
+      var(--lumo-contrast-5pct) 14px
+    );
+  }
 
   /* Loading editor cell styles are used by Flow GridPro */
   :host([loading-editor]) [part~='focused-cell']::before {
@@ -81,4 +81,10 @@
       background-position: max(300%, 8em) 0;
     }
   }
+
+  :host([loading-editor]) [part~='focused-cell'] ::slotted(vaadin-grid-cell-content),
+  [part~='updating-cell'] ::slotted(vaadin-grid-cell-content) {
+    opacity: 0;
+    pointer-events: none;
+  }
 }
