Skip to content

Commit 1f98d2a

Browse files
web-padawanweb-padawan
authored
experiment: add password-field base styles and visual tests (#9181)
1 parent ddd102c commit 1f98d2a

26 files changed

+247
-12
lines changed

‎dev/password-field.html‎

Lines changed: 51 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,66 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
55
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>Password field</title>
7+
<title>Password Field</title>
88
<script type="module" src="./common.js"></script>
99

1010
<script type="module">
11+
import '@vaadin/icon';
12+
import '@vaadin/icons';
1113
import '@vaadin/password-field';
12-
import '@vaadin/tooltip';
13-
14-
// import '@vaadin/password-field/theme/lumo/vaadin-lit-password-field.js';
14+
import '@vaadin/vaadin-lumo-styles/vaadin-iconset.js';
1515
</script>
1616
</head>
1717

1818
<body>
19-
<vaadin-password-field label="Password" required>
20-
<vaadin-tooltip slot="tooltip" text="Must not be the same as the current password"></vaadin-tooltip>
21-
</vaadin-password-field>
19+
<section>
20+
<h2>Plain</h2>
21+
<vaadin-password-field value="Value"></vaadin-password-field>
22+
<vaadin-password-field placeholder="Placeholder"></vaadin-password-field>
23+
</section>
24+
25+
<section>
26+
<h2>Bells & Whistles</h2>
27+
<vaadin-password-field
28+
label="Label"
29+
helper-text="Description for this field."
30+
value="Value"
31+
clear-button-visible
32+
error-message="You need to write something in this field."
33+
required
34+
>
35+
<vaadin-icon icon="vaadin:search" slot="prefix"></vaadin-icon>
36+
</vaadin-password-field>
37+
</section>
38+
39+
<section>
40+
<h2>States</h2>
41+
<vaadin-password-field
42+
label="Read-only"
43+
helper-text="Description for this field."
44+
value="Value"
45+
clear-button-visible
46+
error-message="You need to write something in this field."
47+
required
48+
readonly
49+
>
50+
<vaadin-icon icon="vaadin:search" slot="prefix"></vaadin-icon>
51+
</vaadin-password-field>
52+
53+
<vaadin-password-field
54+
label="Disabled"
55+
helper-text="Description for this field."
56+
value="Value"
57+
clear-button-visible
58+
error-message="You need to write something in this field."
59+
required
60+
disabled
61+
>
62+
<vaadin-icon icon="vaadin:search" slot="prefix"></vaadin-icon>
63+
</vaadin-password-field>
64+
</section>
2265
</body>
2366
</html>

‎packages/password-field/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/*-base-styles.d.ts",
25+
"!src/*-base-styles.js",
2426
"theme",
2527
"vaadin-*.d.ts",
2628
"vaadin-*.js",

‎packages/password-field/src/vaadin-lit-password-field-button.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,12 @@
44
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
55
*/
66
import { html, LitElement } from 'lit';
7-
import { buttonStyles } from '@vaadin/button/src/vaadin-button-core-styles.js';
87
import { ButtonMixin } from '@vaadin/button/src/vaadin-button-mixin.js';
98
import { defineCustomElement } from '@vaadin/component-base/src/define.js';
109
import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
1110
import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
1211
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
12+
import { passwordFieldButton } from './vaadin-password-field-button-core-styles.js';
1313

1414
/**
1515
* An element used internally by `<vaadin-password-field>`. Not intended to be used separately.
@@ -27,7 +27,7 @@ class PasswordFieldButton extends ButtonMixin(DirMixin(ThemableMixin(PolylitMixi
2727
}
2828

2929
static get styles() {
30-
return buttonStyles;
30+
return passwordFieldButton;
3131
}
3232

3333
/** @protected */

‎packages/password-field/src/vaadin-lit-password-field.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import './vaadin-lit-password-field-button.js';
77
import { html } from 'lit';
88
import { defineCustomElement } from '@vaadin/component-base/src/define.js';
99
import { TextField } from '@vaadin/text-field/src/vaadin-lit-text-field.js';
10+
import { passwordFieldStyles } from './vaadin-password-field-core-styles.js';
1011
import { PasswordFieldMixin } from './vaadin-password-field-mixin.js';
1112

1213
/**
@@ -23,6 +24,10 @@ export class PasswordField extends PasswordFieldMixin(TextField) {
2324
return 'vaadin-password-field';
2425
}
2526

27+
static get styles() {
28+
return [...super.styles, passwordFieldStyles];
29+
}
30+
2631
/**
2732
* @protected
2833
* @override

‎packages/password-field/src/vaadin-password-field-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) 2021 - 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 passwordFieldStyles: CSSResult;

‎packages/password-field/src/vaadin-password-field-base-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) 2021 - 2025 Vaadin Ltd.
4+
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5+
*/
6+
import { css } from 'lit';
7+
8+
export const passwordFieldStyles = css`
9+
[part='reveal-button']::before {
10+
display: none;
11+
}
12+
13+
[part='input-field']:has([part='reveal-button']:focus-within) {
14+
outline: none;
15+
--vaadin-input-field-border-color: inherit;
16+
}
17+
`;

‎packages/password-field/src/vaadin-password-field-button-base-styles.js‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
/**
2+
* @license
3+
* Copyright (c) 2021 - 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 { buttonStyles } from '@vaadin/button/src/vaadin-button-base-styles.js';
9+
10+
const passwordFieldBase = css`
11+
:host {
12+
--vaadin-button-background: transparent;
13+
--vaadin-button-border: none;
14+
--vaadin-button-padding: 0;
15+
color: inherit;
16+
display: block;
17+
cursor: default;
18+
}
19+
20+
:host::before {
21+
background: currentColor;
22+
content: '';
23+
display: block;
24+
height: var(--vaadin-icon-size, 1lh);
25+
mask-image: var(--_vaadin-icon-eye);
26+
width: var(--vaadin-icon-size, 1lh);
27+
}
28+
29+
:host([aria-pressed='true'])::before {
30+
mask-image: var(--_vaadin-icon-eye-slash);
31+
}
32+
33+
@media (forced-colors: active) {
34+
:host::before {
35+
background: CanvasText;
36+
}
37+
38+
:host([disabled])::before {
39+
background: GrayText;
40+
}
41+
}
42+
`;
43+
44+
export const passwordFieldButton = [buttonStyles, passwordFieldBase];

‎packages/password-field/src/vaadin-password-field-button-core-styles.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
/**
2+
* @license
3+
* Copyright (c) 2021 - 2025 Vaadin Ltd.
4+
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5+
*/
6+
import { buttonStyles } from '@vaadin/button/src/vaadin-button-core-styles.js';
7+
8+
export const passwordFieldButton = [buttonStyles];

‎packages/password-field/src/vaadin-password-field-button.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,15 @@
44
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
55
*/
66
import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
7-
import { buttonStyles } from '@vaadin/button/src/vaadin-button-core-styles.js';
87
import { ButtonMixin } from '@vaadin/button/src/vaadin-button-mixin.js';
98
import { defineCustomElement } from '@vaadin/component-base/src/define.js';
109
import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
1110
import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
11+
import { passwordFieldButton } from './vaadin-password-field-button-core-styles.js';
1212

13-
registerStyles('vaadin-password-field-button', buttonStyles, { moduleId: 'vaadin-password-field-button-styles' });
13+
registerStyles('vaadin-password-field-button', passwordFieldButton, {
14+
moduleId: 'vaadin-password-field-button-styles',
15+
});
1416

1517
/**
1618
* An element used internally by `<vaadin-password-field>`. Not intended to be used separately.

‎packages/password-field/src/vaadin-password-field-core-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) 2021 - 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 passwordFieldStyles: CSSResult;

0 commit comments

Comments
 (0)