Skip to content

Commit 747f82c

Browse files
jounijouni
authored
feat: add background CSS properties to grid base styles (#10203)
1 parent 587c730 commit 747f82c

File tree

56 files changed

+101
-44
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

56 files changed

+101
-44
lines changed

‎dev/playground/grid-pro.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -112,7 +112,7 @@
112112
import '@vaadin/list-box';
113113
import '@vaadin/grid-pro';
114114
import '@vaadin/grid-pro/vaadin-grid-pro-edit-column.js';
115-
import { users } from '../packages/grid-pro/test/visual/users.js';
115+
import { users } from '../../packages/grid-pro/test/visual/users.js';
116116

117117
const grid = document.querySelector('vaadin-grid-pro');
118118
grid.items = users;

‎dev/playground/grid.html‎

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,10 @@
3838
vaadin-grid.max-height {
3939
max-height: 350px;
4040
}
41+
42+
vaadin-grid[theme~="row-hover"] {
43+
--vaadin-grid-row-hover-background-color: hsla(0deg, 0%, 0%, 0.03);
44+
}
4145
</style>
4246
</head>
4347
<body>
@@ -72,13 +76,16 @@
7276
</div>
7377

7478
<div class="control-group">
75-
<vaadin-checkbox-group label="Theme Variants">
79+
<vaadin-checkbox-group label="Built-In Variants">
7680
<vaadin-checkbox id="no-border" value="no-border" label="No Border"></vaadin-checkbox>
7781
<vaadin-checkbox id="no-row-borders" value="no-row-borders" label="No Row Border"></vaadin-checkbox>
7882
<vaadin-checkbox id="column-borders" value="column-borders" label="Column Borders"></vaadin-checkbox>
7983
<vaadin-checkbox id="row-stripes" value="row-stripes" label="Row Stripes"></vaadin-checkbox>
8084
<vaadin-checkbox id="wrap-cell-content" value="wrap-cell-content" label="Wrap Cell Content"></vaadin-checkbox>
8185
</vaadin-checkbox-group>
86+
<vaadin-checkbox-group label="Custom Variants">
87+
<vaadin-checkbox id="row-hover" value="row-hover" label="Row Hover"></vaadin-checkbox>
88+
</vaadin-checkbox-group>
8289
</div>
8390

8491
<div class="control-group">
@@ -307,7 +314,14 @@ <h4>Details for ${model.item.name}</h4>
307314
});
308315

309316
// Theme Controls
310-
const themeControls = ['no-border', 'no-row-borders', 'column-borders', 'row-stripes', 'wrap-cell-content'];
317+
const themeControls = [
318+
'no-border',
319+
'no-row-borders',
320+
'column-borders',
321+
'row-stripes',
322+
'wrap-cell-content',
323+
'row-hover',
324+
];
311325
themeControls.forEach((control) => {
312326
document.getElementById(control).addEventListener('checked-changed', (e) => {
313327
if (e.detail.value) {

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

Lines changed: 26 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@ const gridPro = css`
1616
[part~='body-cell'] {
1717
--_highlight-color: color-mix(in srgb, currentColor 5%, transparent);
1818
--_highlight-color2: color-mix(in srgb, currentColor 10%, transparent);
19-
--_highlight-bg: linear-gradient(var(--_highlight-color), var(--_highlight-color));
2019
}
2120
2221
[part~='editable-cell'] {
@@ -29,34 +28,40 @@ const gridPro = css`
2928
outline: 0;
3029
}
3130
32-
[part~='editable-cell']:hover,
33-
:host([navigating]) [part~='editable-cell']:focus {
34-
background: var(--vaadin-grid-pro-editable-cell-background-hover, var(--_highlight-bg));
35-
}
31+
/* On macOS the editable-cell part is a button inside the body cell. On other platforms the body cell is the editable-cell part. */
3632
37-
/* Indicate editable cells */
33+
@media (any-hover: hover) {
34+
[part~='body-cell']:is([part~='editable-cell'], :has([part~='editable-cell'])):hover {
35+
--vaadin-grid-row-hover-background-color: var(--_highlight-color);
36+
}
37+
}
3838
39-
:host([theme~='highlight-editable-cells']) [part~='editable-cell'] {
40-
background: var(--vaadin-grid-pro-editable-cell-background, var(--_highlight-bg));
39+
:host([navigating]) [part~='body-cell']:is([part~='editable-cell']:focus, :has([part~='editable-cell']:focus)) {
40+
--vaadin-grid-row-highlight-background-color: var(--_highlight-color);
4141
}
4242
43-
:host([theme~='highlight-editable-cells']) [part~='editable-cell']:is(:hover, :focus-visible) {
44-
background:
45-
var(--vaadin-grid-pro-editable-cell-background-hover, var(--_highlight-bg)),
46-
var(--vaadin-grid-pro-editable-cell-background, var(--_highlight-bg));
43+
/* Indicate editable cells */
44+
45+
:host([theme~='highlight-editable-cells'])
46+
[part~='body-cell']:is([part~='editable-cell'], :has([part~='editable-cell'])) {
47+
--vaadin-grid-row-highlight-background-color: var(
48+
--vaadin-grid-pro-editable-cell-background-color,
49+
var(--_highlight-color)
50+
);
4751
}
4852
4953
/* Indicate read-only cells */
5054
51-
:host([theme~='highlight-read-only-cells']) [part~='body-cell']:not(:has([part~='editable-cell'])) {
52-
--vaadin-grid-cell-background-hover: repeating-linear-gradient(
53-
-45deg,
54-
transparent,
55-
transparent 30%,
56-
var(--_highlight-color2) 30%,
57-
var(--_highlight-color2) 50%
58-
);
59-
background-size: 6px 6px;
55+
:host([theme~='highlight-read-only-cells'])
56+
[part~='body-cell']:not([part~='editable-cell'], :has([part~='editable-cell'])) {
57+
--_highlight-background-image: repeating-linear-gradient(
58+
-45deg,
59+
transparent,
60+
transparent 30%,
61+
var(--_highlight-color2) 30%,
62+
var(--_highlight-color2) 50%
63+
)
64+
padding-box 0 0 / 6px 6px;
6065
}
6166
6267
/* Loading editor cell styles are used by Flow GridPro */

‎packages/grid-pro/test/visual/base/screenshots/grid-pro/baseline/theme-highlight-editable-cells-focus.png‎

-65 Bytes

‎packages/grid-pro/test/visual/base/screenshots/grid-pro/baseline/theme-highlight-read-only-cells-focus.png‎

-152 Bytes

‎packages/grid-pro/test/visual/base/screenshots/grid-pro/baseline/theme-highlight-read-only-cells.png‎

-434 Bytes

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

Lines changed: 37 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -30,8 +30,6 @@ export const gridStyles = css`
3030
--_border-width: 0;
3131
--_row-border-width: var(--vaadin-grid-cell-border-width, 1px);
3232
--_column-border-width: var(--vaadin-grid-cell-border-width, 0);
33-
--_cell-padding: var(--vaadin-grid-cell-padding, var(--vaadin-padding-container));
34-
--_selection-background-image: none;
3533
border-radius: var(--_border-radius);
3634
--_border-radius: 0;
3735
}
@@ -153,27 +151,35 @@ export const gridStyles = css`
153151
[part~='cell'] {
154152
padding: 0;
155153
box-sizing: border-box;
154+
background: var(--vaadin-grid-cell-background, var(--vaadin-background-color));
156155
}
157156
158157
[part~='row'],
159158
[part~='cell'] {
160159
--_hover-background-image: var(--vaadin-grid-cell-background-hover, none);
161-
background:
162-
var(--_hover-background-image), var(--_selection-background-image),
163-
var(--vaadin-grid-cell-background, var(--vaadin-background-color));
164160
}
165161
166-
[part~='cell']:not([part~='details-cell']) {
162+
[part~='cell']:where(:not([part~='details-cell'])) {
167163
flex-shrink: 0;
168164
flex-grow: 1;
169-
box-sizing: border-box;
170165
display: flex;
171166
width: 100%;
172167
position: relative;
173168
align-items: center;
174169
white-space: nowrap;
175170
}
176171
172+
[part~='body-cell']:where(:not([part~='details-cell'])) {
173+
--_highlight-background-color: var(--vaadin-grid-row-highlight-background-color, transparent);
174+
--_highlight-background-image: linear-gradient(
175+
var(--_highlight-background-color),
176+
var(--_highlight-background-color)
177+
);
178+
background:
179+
var(--_hover-background-image, none), var(--_selected-background-image, none), var(--_highlight-background-image),
180+
var(--vaadin-grid-cell-background-color, var(--vaadin-background-color));
181+
}
182+
177183
:focus-visible,
178184
[part~='row']::after {
179185
outline: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color);
@@ -240,14 +246,25 @@ export const gridStyles = css`
240246
}
241247
242248
/* Variant: row stripes */
243-
:host([theme~='row-stripes']) [part~='odd-row'],
244-
:host([theme~='row-stripes']) [part~='odd-row'] [part~='cell'] {
245-
--vaadin-grid-cell-background: var(
246-
--vaadin-grid-odd-row-cell-background,
247-
linear-gradient(var(--vaadin-background-container), var(--vaadin-background-container))
249+
[part~='odd-row'] {
250+
--vaadin-grid-cell-background-color: var(--vaadin-grid-row-odd-background-color, var(--vaadin-background-color));
251+
}
252+
253+
:host([theme~='row-stripes']) [part~='odd-row'] {
254+
--vaadin-grid-cell-background-color: var(
255+
--vaadin-grid-row-odd-background-color,
256+
color-mix(in srgb, var(--vaadin-text-color) 4%, var(--vaadin-background-color))
248257
);
249258
}
250259
260+
/* Row hover */
261+
@media (any-hover: hover) {
262+
[part~='body-row']:hover [part~='cell']:where(:not([part~='details-cell'])) {
263+
--_hover-background-color: var(--vaadin-grid-row-hover-background-color, transparent);
264+
--_hover-background-image: linear-gradient(var(--_hover-background-color), var(--_hover-background-color));
265+
}
266+
}
267+
251268
[part~='details-cell'] {
252269
position: absolute;
253270
bottom: 0;
@@ -258,7 +275,7 @@ export const gridStyles = css`
258275
display: block;
259276
overflow: hidden;
260277
text-overflow: ellipsis;
261-
padding: var(--_cell-padding);
278+
padding: var(--vaadin-grid-cell-padding, var(--vaadin-padding-container));
262279
flex: 1;
263280
min-width: 0;
264281
}
@@ -270,12 +287,12 @@ export const gridStyles = css`
270287
}
271288
272289
/* Selected row */
273-
[part~='row'][selected] [part~='body-cell']:not([part~='details-cell']) {
274-
--_color: color-mix(in srgb, currentColor 8%, transparent);
275-
--_selection-background-image: var(
276-
--vaadin-grid-row-selected-background,
277-
linear-gradient(var(--_color), var(--_color))
290+
[part~='body-row'][selected] {
291+
--_selected-background-color: var(
292+
--vaadin-grid-row-selected-background-color,
293+
color-mix(in srgb, currentColor 8%, transparent)
278294
);
295+
--_selected-background-image: linear-gradient(var(--_selected-background-color), var(--_selected-background-color));
279296
}
280297
281298
/* Empty state */
@@ -301,7 +318,7 @@ export const gridStyles = css`
301318
display: block;
302319
flex: 1;
303320
overflow: auto;
304-
padding: var(--_cell-padding);
321+
padding: var(--vaadin-grid-cell-padding, var(--vaadin-padding-container));
305322
}
306323
307324
/* Reordering styles */
@@ -318,7 +335,7 @@ export const gridStyles = css`
318335
box-shadow:
319336
0 0 0 1px hsla(0deg, 0%, 0%, 0.2),
320337
0 8px 24px -2px hsla(0deg, 0%, 0%, 0.2);
321-
padding: var(--_cell-padding) !important;
338+
padding: var(--vaadin-grid-cell-padding, var(--vaadin-padding-container)) !important;
322339
border-radius: 3px;
323340
324341
/* Prevent overflowing the grid in Firefox */

‎packages/grid/test/visual/base/grid.test.js‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,11 @@ describe('theme', () => {
2020
<vaadin-grid-column path="name.last" header="Last name"></vaadin-grid-column>
2121
<vaadin-grid-column path="email"></vaadin-grid-column>
2222
</vaadin-grid>
23+
<style>
24+
vaadin-grid::part(highlight-row) {
25+
--vaadin-grid-row-highlight-background-color: #ede;
26+
}
27+
</style>
2328
`);
2429
element.items = users;
2530
flushGrid(element);
@@ -40,4 +45,20 @@ describe('theme', () => {
4045
element.setAttribute('theme', 'row-stripes');
4146
await visualDiff(element, 'theme-row-stripes');
4247
});
48+
49+
it('selected-row-color', async () => {
50+
element.selectedItems = [element.items[0]];
51+
element.style.setProperty('--vaadin-grid-row-selected-background-color', '#dee');
52+
await visualDiff(element, 'selected-row-color');
53+
});
54+
55+
it('highlight-row-color', async () => {
56+
element.cellPartNameGenerator = (_, model) => {
57+
if (model.item === users[1]) {
58+
return 'highlight-row';
59+
}
60+
};
61+
await nextRender();
62+
await visualDiff(element, 'highlight-row-color');
63+
});
4364
});

‎packages/grid/test/visual/base/screenshots/grid/baseline/disabled.png‎

9.59 KB

‎packages/grid/test/visual/base/screenshots/grid/baseline/dragover-below-last-row-all-rows-visible.png‎

29 Bytes

0 commit comments

Comments
 (0)