Skip to content

Commit 71d59b8

Browse files
anezthesjouni
anezthes
and
jouni
authored
experiment: add CRUD base styles and visual tests (#9740)
Co-authored-by: Jouni Koivuviita <jouni@vaadin.com>
1 parent c173d67 commit 71d59b8

36 files changed

+435
-9
lines changed

‎packages/component-base/src/style-props.js‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/crud/package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,8 @@
2121
"type": "module",
2222
"files": [
2323
"src",
24+
"!src/styles/*-base-styles.d.ts",
25+
"!src/styles/*-base-styles.js",
2426
"theme",
2527
"vaadin-*.d.ts",
2628
"vaadin-*.js",

‎packages/crud/src/styles/vaadin-crud-base-styles.d.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
/**
2+
* @license
3+
* Copyright (c) 2000 - 2025 Vaadin Ltd.
4+
*
5+
* This program is available under Vaadin Commercial License and Service Terms.
6+
*
7+
*
8+
* See https://vaadin.com/commercial-license-and-service-terms for the full
9+
* license.
10+
*/
11+
import type { CSSResult } from 'lit';
12+
13+
export const crudStyles: CSSResult;

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

Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
/**
2+
* @license
3+
* Copyright (c) 2000 - 2025 Vaadin Ltd.
4+
*
5+
* This program is available under Vaadin Commercial License and Service Terms.
6+
*
7+
*
8+
* See https://vaadin.com/commercial-license-and-service-terms for the full
9+
* license.
10+
*/
11+
import '@vaadin/component-base/src/style-props.js';
12+
import { css } from 'lit';
13+
14+
export const crudStyles = css`
15+
:host {
16+
--vaadin-grid-border-width: 0px;
17+
--vaadin-grid-border-radius: var(--vaadin-crud-border-radius, var(--vaadin-radius-l));
18+
--vaadin-crud-editor-max-height: 40%;
19+
--vaadin-crud-editor-max-width: 40%;
20+
border: var(--vaadin-crud-border-width, 1px) solid var(--vaadin-crud-border-color, var(--vaadin-border-color));
21+
border-radius: var(--vaadin-crud-border-radius, var(--vaadin-radius-l));
22+
height: 400px;
23+
width: 100%;
24+
background: var(--vaadin-crud-background, var(--vaadin-background-color));
25+
}
26+
27+
:host,
28+
#main {
29+
align-self: stretch;
30+
display: flex;
31+
flex-direction: column;
32+
position: relative;
33+
}
34+
35+
#main {
36+
flex: 1 1 100%;
37+
height: 100%;
38+
min-width: 0;
39+
min-height: 0;
40+
}
41+
42+
::slotted(vaadin-crud-grid) {
43+
border-end-start-radius: 0;
44+
border-end-end-radius: 0;
45+
}
46+
47+
:host([hidden]),
48+
[hidden] {
49+
display: none !important;
50+
}
51+
52+
#container {
53+
display: flex;
54+
height: 100%;
55+
}
56+
57+
:host([editor-position='bottom']) #container {
58+
flex-direction: column;
59+
}
60+
61+
:host([editor-position='aside'][editor-opened]) #main {
62+
border-inline-end: var(--vaadin-crud-border-width, 1px) solid
63+
var(--vaadin-crud-border-color, var(--vaadin-border-color));
64+
}
65+
66+
:host([editor-position='aside'][editor-opened]) ::slotted(vaadin-crud-grid) {
67+
border-start-end-radius: 0;
68+
border-end-end-radius: 0;
69+
}
70+
71+
:host([editor-position='bottom'][editor-opened]) #main {
72+
border-bottom: var(--vaadin-crud-border-width, 1px) solid
73+
var(--vaadin-crud-border-color, var(--vaadin-border-color));
74+
}
75+
76+
[part='toolbar'] {
77+
align-items: baseline;
78+
background: var(--vaadin-crud-toolbar-background, transparent);
79+
border-top: var(--vaadin-crud-border-width, 1px) solid var(--vaadin-crud-border-color, var(--vaadin-border-color));
80+
display: flex;
81+
flex-shrink: 0;
82+
justify-content: flex-end;
83+
padding: var(--vaadin-crud-toolbar-padding, var(--vaadin-padding));
84+
}
85+
86+
:host([no-toolbar]) [part='toolbar'] {
87+
display: none;
88+
}
89+
90+
[part='editor'] {
91+
display: flex;
92+
flex-direction: column;
93+
height: 100%;
94+
outline: none;
95+
z-index: 1;
96+
}
97+
98+
:host(:not([editor-position=''])[editor-opened]:not([fullscreen])) [part='editor'] {
99+
flex: 1 0 100%;
100+
}
101+
102+
:host([editor-position='bottom'][editor-opened]:not([fullscreen])) [part='editor'] {
103+
max-height: var(--vaadin-crud-editor-max-height);
104+
}
105+
106+
:host([editor-position='aside'][editor-opened]:not([fullscreen])) [part='editor'] {
107+
max-width: var(--vaadin-crud-editor-max-width);
108+
min-width: 300px;
109+
}
110+
111+
[part='scroller'] {
112+
display: flex;
113+
flex: auto;
114+
flex-direction: column;
115+
overflow: auto;
116+
}
117+
118+
[part='header'] {
119+
color: var(--vaadin-crud-header-color, var(--vaadin-color));
120+
font-size: var(--vaadin-crud-header-font-size, 1em);
121+
font-weight: var(--vaadin-crud-header-font-weight, 600);
122+
line-height: var(--vaadin-crud-header-line-height, inherit);
123+
padding: var(--vaadin-crud-header-padding, var(--vaadin-padding));
124+
}
125+
126+
::slotted([slot='header']) {
127+
color: inherit !important;
128+
display: contents;
129+
font: inherit !important;
130+
overflow-wrap: anywhere;
131+
}
132+
133+
::slotted([slot='form']) {
134+
padding: var(--vaadin-crud-form-padding, var(--vaadin-padding));
135+
}
136+
137+
[part='footer'] {
138+
background: var(--vaadin-crud-footer-background, transparent);
139+
border-top: var(--vaadin-crud-border-width, 1px) solid var(--vaadin-crud-border-color, var(--vaadin-border-color));
140+
display: flex;
141+
flex: none;
142+
gap: var(--vaadin-crud-footer-gap, var(--vaadin-gap-container-inline));
143+
padding: var(--vaadin-crud-footer-padding, var(--vaadin-padding));
144+
}
145+
146+
::slotted([slot='delete-button']) {
147+
margin-inline-start: auto;
148+
}
149+
`;

‎packages/crud/src/styles/vaadin-crud-dialog-overlay-base-styles.d.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
/**
2+
* @license
3+
* Copyright (c) 2000 - 2025 Vaadin Ltd.
4+
*
5+
* This program is available under Vaadin Commercial License and Service Terms.
6+
*
7+
*
8+
* See https://vaadin.com/commercial-license-and-service-terms for the full
9+
* license.
10+
*/
11+
import type { CSSResult } from 'lit';
12+
13+
export declare const crudDialogOverlayStyles: CSSResult;

‎packages/crud/src/styles/vaadin-crud-dialog-overlay-base-styles.js‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
/**
2+
* @license
3+
* Copyright (c) 2000 - 2025 Vaadin Ltd.
4+
*
5+
* This program is available under Vaadin Commercial License and Service Terms.
6+
*
7+
*
8+
* See https://vaadin.com/commercial-license-and-service-terms for the full
9+
* license.
10+
*/
11+
import '@vaadin/component-base/src/style-props.js';
12+
import { css } from 'lit';
13+
import { dialogOverlayStyles } from '@vaadin/dialog/src/styles/vaadin-dialog-overlay-base-styles.js';
14+
15+
const crudDialogOverlay = css`
16+
[part='header'] {
17+
color: var(--vaadin-crud-dialog-header-color, var(--vaadin-color));
18+
font-size: var(--vaadin-crud-dialog-header-font-size, 1em);
19+
font-weight: var(--vaadin-crud-dialog-header-font-weight, 600);
20+
line-height: var(--vaadin-crud-dialog-header-line-height, inherit);
21+
padding: var(--vaadin-crud-header-padding, var(--vaadin-padding));
22+
}
23+
24+
::slotted([slot='header']) {
25+
color: inherit !important;
26+
display: contents;
27+
font: inherit !important;
28+
overflow-wrap: anywhere;
29+
}
30+
31+
:host(:is(*, #id)) [part='content'] {
32+
overflow: auto;
33+
overscroll-behavior: contain;
34+
padding: var(--vaadin-crud-form-padding, var(--vaadin-padding));
35+
}
36+
37+
::slotted([slot='form']) {
38+
--vaadin-crud-form-padding: 0;
39+
}
40+
41+
[part='footer'] {
42+
justify-content: normal;
43+
background: var(--vaadin-crud-footer-background, transparent);
44+
border-top: var(--vaadin-crud-border-width, 1px) solid var(--vaadin-crud-border-color, var(--vaadin-border-color));
45+
}
46+
`;
47+
48+
export const crudDialogOverlayStyles = [...dialogOverlayStyles, crudDialogOverlay];

‎packages/crud/src/styles/vaadin-crud-edit-base-styles.js‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
/**
2+
* @license
3+
* Copyright (c) 2000 - 2025 Vaadin Ltd.
4+
*
5+
* This program is available under Vaadin Commercial License and Service Terms.
6+
*
7+
*
8+
* See https://vaadin.com/commercial-license-and-service-terms for the full
9+
* license.
10+
*/
11+
import '@vaadin/component-base/src/style-props.js';
12+
import { css } from 'lit';
13+
14+
export const crudEditStyles = css`
15+
[part='icon'] {
16+
background: currentColor;
17+
display: block;
18+
height: var(--vaadin-icon-size, 1lh);
19+
mask-image: var(--_vaadin-icon-edit);
20+
width: var(--vaadin-icon-size, 1lh);
21+
}
22+
23+
@media (forced-colors: active) {
24+
[part='icon'] {
25+
background: CanvasText;
26+
}
27+
}
28+
`;

‎packages/crud/src/styles/vaadin-crud-edit-core-styles.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
/**
2+
* @license
3+
* Copyright (c) 2000 - 2025 Vaadin Ltd.
4+
*
5+
* This program is available under Vaadin Commercial License and Service Terms.
6+
*
7+
*
8+
* See https://vaadin.com/commercial-license-and-service-terms for the full
9+
* license.
10+
*/
11+
import { css } from 'lit';
12+
13+
export const crudEditStyles = css`
14+
:host {
15+
display: block;
16+
}
17+
`;

‎packages/crud/src/styles/vaadin-crud-grid-base-styles.d.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
/**
2+
* @license
3+
* Copyright (c) 2000 - 2025 Vaadin Ltd.
4+
*
5+
* This program is available under Vaadin Commercial License and Service Terms.
6+
*
7+
*
8+
* See https://vaadin.com/commercial-license-and-service-terms for the full
9+
* license.
10+
*/
11+
import type { CSSResult } from 'lit';
12+
13+
export const crudGridStyles: CSSResult;

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

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
/**
2+
* @license
3+
* Copyright (c) 2000 - 2025 Vaadin Ltd.
4+
*
5+
* This program is available under Vaadin Commercial License and Service Terms.
6+
*
7+
*
8+
* See https://vaadin.com/commercial-license-and-service-terms for the full
9+
* license.
10+
*/
11+
import '@vaadin/component-base/src/style-props.js';
12+
import { css } from 'lit';
13+
import { gridStyles } from '@vaadin/grid/src/styles/vaadin-grid-base-styles.js';
14+
15+
const crudGrid = css`
16+
#scroller {
17+
border-radius: inherit;
18+
}
19+
`;
20+
21+
export const crudGridStyles = [gridStyles, crudGrid];

0 commit comments

Comments
 (0)