Skip to content

Commit 2527322

Browse files
anezthesjouni
anezthes
and
jouni
authored
experiment: add login base styles and visual tests (#9686)
Co-authored-by: Jouni Koivuviita <[email protected]>
1 parent f889883 commit 2527322

14 files changed

+217
-1
lines changed

‎packages/login/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/login/src/styles/vaadin-login-form-wrapper-base-styles.d.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
/**
2+
* @license
3+
* Copyright (c) 2018 - 2025 Vaadin Ltd.
4+
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5+
*/
6+
import type { CSSResult } from 'lit';
7+
8+
export const loginFormWrapperStyles: CSSResult;

‎packages/login/src/styles/vaadin-login-form-wrapper-base-styles.js‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
/**
2+
* @license
3+
* Copyright (c) 2018 - 2025 Vaadin Ltd.
4+
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5+
*/
6+
import '@vaadin/component-base/src/style-props.js';
7+
import { css } from 'lit';
8+
9+
export const loginFormWrapperStyles = css`
10+
:host {
11+
background: var(--vaadin-login-form-background, transparent);
12+
border-radius: var(--vaadin-login-form-border-radius, 0);
13+
display: block;
14+
max-width: 100%;
15+
width: var(--vaadin-login-form-width, 360px);
16+
}
17+
18+
:host([hidden]) {
19+
display: none !important;
20+
}
21+
22+
[part='form'] {
23+
box-sizing: border-box;
24+
display: flex;
25+
flex: 1;
26+
flex-direction: column;
27+
gap: var(--vaadin-login-form-gap, var(--vaadin-gap-container-block));
28+
padding: var(--vaadin-login-form-padding, var(--vaadin-padding));
29+
}
30+
31+
[part='form'] ::slotted(form) {
32+
display: flex;
33+
flex-direction: column;
34+
gap: var(--vaadin-login-form-gap, var(--vaadin-gap-container-block));
35+
}
36+
37+
[part='form-title'] {
38+
color: var(--vaadin-login-form-title-color, var(--vaadin-color));
39+
font-size: var(--vaadin-login-form-title-font-size, 1.25rem);
40+
font-weight: var(--vaadin-login-form-title-font-weight, 600);
41+
line-height: var(--vaadin-login-form-title-line-height, inherit);
42+
}
43+
44+
:host([error]) [part='error-message'] {
45+
display: grid;
46+
}
47+
48+
[part='error-message'] {
49+
color: var(--vaadin-login-form-error-color, var(--vaadin-color));
50+
font-size: var(--vaadin-login-form-error-font-size, inherit);
51+
font-weight: var(--vaadin-login-form-error-font-weight, 400);
52+
gap: var(--vaadin-login-form-error-gap, 0 var(--vaadin-gap-container-inline));
53+
grid-template-columns: auto 1fr;
54+
line-height: var(--vaadin-login-form-error-line-height, inherit);
55+
}
56+
57+
[part='error-message']::before {
58+
background: currentColor;
59+
content: '';
60+
display: inline-block;
61+
flex: none;
62+
height: var(--vaadin-icon-size, 1lh);
63+
mask-image: var(--_vaadin-icon-warn);
64+
width: var(--vaadin-icon-size, 1lh);
65+
}
66+
67+
[part='error-message-description'] {
68+
grid-column: 2;
69+
}
70+
`;

‎packages/login/src/styles/vaadin-login-overlay-wrapper-base-styles.d.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
/**
2+
* @license
3+
* Copyright (c) 2018 - 2025 Vaadin Ltd.
4+
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5+
*/
6+
import type { CSSResult } from 'lit';
7+
8+
export const loginOverlayWrapperStyles: CSSResult;

‎packages/login/src/styles/vaadin-login-overlay-wrapper-base-styles.js‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
/**
2+
* @license
3+
* Copyright (c) 2018 - 2025 Vaadin Ltd.
4+
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5+
*/
6+
import '@vaadin/component-base/src/style-props.js';
7+
import { css } from 'lit';
8+
import { overlayStyles } from '@vaadin/overlay/src/styles/vaadin-overlay-base-styles.js';
9+
10+
const loginOverlayWrapper = css`
11+
[part='overlay'] {
12+
background: var(
13+
--vaadin-login-overlay-background,
14+
var(--vaadin-overlay-background, var(--vaadin-background-color))
15+
);
16+
border: var(--vaadin-login-overlay-border-width, var(--vaadin-overlay-border-width, 1px)) solid
17+
var(--vaadin-login-overlay-border-color, var(--vaadin-overlay-border-color, var(--vaadin-border-color)));
18+
border-radius: var(--vaadin-login-overlay-border-radius, var(--vaadin-radius-l));
19+
box-shadow: var(
20+
--vaadin-login-overlay-box-shadow,
21+
var(--vaadin-overlay-box-shadow, 0 8px 24px -4px rgba(0, 0, 0, 0.3))
22+
);
23+
}
24+
25+
[part='card'] {
26+
box-sizing: border-box;
27+
display: flex;
28+
flex-direction: column;
29+
max-width: 100%;
30+
overflow: hidden;
31+
}
32+
33+
[part='brand'] {
34+
background: var(--vaadin-login-overlay-brand-background, var(--vaadin-background-container));
35+
display: flex;
36+
flex-direction: column;
37+
padding: var(--vaadin-login-overlay-brand-padding, var(--vaadin-padding));
38+
}
39+
40+
[part='title'] {
41+
color: var(--vaadin-login-overlay-title-color, var(--vaadin-color));
42+
font-size: var(--vaadin-login-overlay-title-font-size, inherit);
43+
font-weight: var(--vaadin-login-overlay-title-font-weight, 600);
44+
line-height: var(--vaadin-login-overlay-title-line-height, inherit);
45+
}
46+
47+
[part='description'] {
48+
color: var(--vaadin-login-overlay-description-color, var(--vaadin-color-subtle));
49+
font-size: var(--vaadin-login-overlay-description-font-size, inherit);
50+
font-weight: var(--vaadin-login-overlay-description-font-weight, inherit);
51+
line-height: var(--vaadin-login-overlay-description-line-height, inherit);
52+
}
53+
54+
[part='form'] ::slotted(vaadin-login-form) {
55+
display: flex;
56+
}
57+
`;
58+
59+
export const loginOverlayWrapperStyles = [overlayStyles, loginOverlayWrapper];

‎packages/login/test/visual/base/login-form.test.js‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { fixtureSync } from '@vaadin/testing-helpers';
2+
import { visualDiff } from '@web/test-runner-visual-regression';
3+
import '../common.js';
4+
import '../../../src/vaadin-login-form.js';
5+
6+
describe('login-form', () => {
7+
let div, element;
8+
9+
beforeEach(() => {
10+
div = document.createElement('div');
11+
div.style.display = 'inline-block';
12+
div.style.padding = '10px';
13+
element = fixtureSync('<vaadin-login-form></vaadin-login-form>', div);
14+
});
15+
16+
it('basic', async () => {
17+
element.opened = true;
18+
await visualDiff(div, 'basic');
19+
});
20+
21+
it('error', async () => {
22+
element.error = true;
23+
await visualDiff(div, 'error');
24+
});
25+
});

‎packages/login/test/visual/base/login-overlay.test.js‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import { fixtureSync } from '@vaadin/testing-helpers';
2+
import { visualDiff } from '@web/test-runner-visual-regression';
3+
import '../common.js';
4+
import '../../../src/vaadin-login-overlay.js';
5+
6+
describe('login-overlay', () => {
7+
let div, element;
8+
9+
beforeEach(() => {
10+
div = document.createElement('div');
11+
div.style.height = '100%';
12+
element = fixtureSync('<vaadin-login-overlay></vaadin-login-overlay>', div);
13+
});
14+
15+
it('basic', async () => {
16+
element.opened = true;
17+
await visualDiff(div, 'basic');
18+
});
19+
20+
it('error', async () => {
21+
element.error = true;
22+
element.opened = true;
23+
await visualDiff(div, 'error');
24+
});
25+
26+
it('additional field', async () => {
27+
const field = document.createElement('vaadin-text-field');
28+
field.setAttribute('slot', 'custom-form-area');
29+
field.label = 'One-time code';
30+
element.appendChild(field);
31+
element.opened = true;
32+
await visualDiff(div, 'additional-field');
33+
});
34+
35+
it('footer', async () => {
36+
const footer = document.createElement('div');
37+
footer.setAttribute('slot', 'footer');
38+
footer.style.textAlign = 'center';
39+
footer.textContent = 'Never tell your password to anyone';
40+
element.appendChild(footer);
41+
element.opened = true;
42+
await visualDiff(div, 'footer');
43+
});
44+
});

‎packages/login/test/visual/base/screenshots/login-form/baseline/basic.png‎

6.57 KB
Loading

‎packages/login/test/visual/base/screenshots/login-form/baseline/error.png‎

10.4 KB
Loading

‎packages/login/test/visual/base/screenshots/login-overlay/baseline/additional-field.png‎

17.1 KB
Loading

0 commit comments

Comments
 (0)