Skip to content

Commit e5e4e81

Browse files
jounijouni
authored
experiment: add message-list and message-input base styles (#9678)
1 parent 09dd9e3 commit e5e4e81

Some content is hidden

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

45 files changed

+387
-0
lines changed

‎dev/messages.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,9 +46,12 @@
4646
</head>
4747

4848
<body>
49+
<h2 class="heading">Default</h2>
4950
<vaadin-message-list announce-messages></vaadin-message-list>
5051
<vaadin-message-input>
5152
<vaadin-tooltip slot="tooltip" text="Press Enter to send"></vaadin-tooltip>
5253
</vaadin-message-input>
54+
<h2 class="heading">Icon-Button Variant</h2>
55+
<vaadin-message-input theme="icon-button"></vaadin-message-input>
5356
</body>
5457
</html>

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,7 @@ addGlobalThemeStyles(
6666
--_vaadin-icon-fullscreen: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15" /></svg>');
6767
--_vaadin-icon-menu: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" /></svg>');
6868
--_vaadin-icon-minus: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14" /></svg>');
69+
--_vaadin-icon-paper-airplane: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 12 3.269 3.125A59.769 59.769 0 0 1 21.485 12 59.768 59.768 0 0 1 3.27 20.875L5.999 12Zm0 0h7.5" /></svg>');
6970
--_vaadin-icon-plus: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" /></svg>');
7071
--_vaadin-icon-sort: url('data:image/svg+xml;utf8,<svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.49854 6.99951C7.92795 6.99951 8.15791 7.50528 7.87549 7.82861L4.37646 11.8296C4.17728 12.0571 3.82272 12.0571 3.62354 11.8296L0.125488 7.82861C-0.157248 7.50531 0.0719873 6.99956 0.501465 6.99951H7.49854ZM3.62354 0.17041C3.82275 -0.0573875 4.17725 -0.0573848 4.37646 0.17041L7.87549 4.17041C8.15825 4.49373 7.92806 5.00049 7.49854 5.00049L0.501465 4.99951C0.0719873 4.99946 -0.157248 4.49371 0.125488 4.17041L3.62354 0.17041Z" fill="black"/></svg>');
7172
--_vaadin-icon-user: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M3 20C5.33579 17.5226 8.50702 16 12 16C15.493 16 18.6642 17.5226 21 20M16.5 7.5C16.5 9.98528 14.4853 12 12 12C9.51472 12 7.5 9.98528 7.5 7.5C7.5 5.01472 9.51472 3 12 3C14.4853 3 16.5 5.01472 16.5 7.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');

‎packages/message-input/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/message-input/src/styles/vaadin-message-input-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 messageInputStyles: CSSResult;

‎packages/message-input/src/styles/vaadin-message-input-base-styles.js‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
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+
9+
export const messageInputStyles = css`
10+
:host {
11+
box-sizing: border-box;
12+
display: flex;
13+
max-height: 50vh;
14+
flex-shrink: 0;
15+
border: var(--vaadin-input-field-border-width, 1px) solid
16+
var(--vaadin-input-field-border-color, var(--vaadin-border-color-strong));
17+
border-radius: var(--vaadin-input-field-border-radius, var(--vaadin-radius-m));
18+
background: var(--vaadin-input-field-background, var(--vaadin-background-color));
19+
}
20+
21+
:host([hidden]) {
22+
display: none !important;
23+
}
24+
25+
:host(:focus-within) {
26+
outline: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color);
27+
outline-offset: calc(var(--vaadin-input-field-border-width, 1px) * -1);
28+
}
29+
30+
:host([disabled]) {
31+
--vaadin-input-field-value-color: var(--vaadin-input-field-disabled-text-color, var(--vaadin-color-disabled));
32+
--vaadin-input-field-background: var(
33+
--vaadin-input-field-disabled-background,
34+
var(--vaadin-background-container-strong)
35+
);
36+
--vaadin-input-field-border-color: transparent;
37+
}
38+
39+
::slotted([slot='textarea']) {
40+
flex: 1;
41+
--vaadin-input-field-border-width: 0 !important;
42+
--vaadin-focus-ring-width: 0;
43+
--vaadin-input-field-background: transparent !important;
44+
}
45+
46+
::slotted([slot='button']) {
47+
flex: none;
48+
align-self: end;
49+
margin: var(--vaadin-input-field-padding, var(--vaadin-padding-container));
50+
--vaadin-button-border-width: 0;
51+
--vaadin-button-background: transparent;
52+
--vaadin-button-text-color: var(--vaadin-color);
53+
--vaadin-button-padding: 0;
54+
}
55+
56+
:host([theme~='icon-button']) ::slotted([slot='button']) {
57+
width: var(--vaadin-icon-size, 1lh);
58+
height: var(--vaadin-icon-size, 1lh);
59+
color: transparent;
60+
position: relative;
61+
contain: strict;
62+
}
63+
64+
:host([theme~='icon-button']) ::slotted([slot='button'])::before {
65+
content: '';
66+
position: absolute;
67+
inset: 0;
68+
mask-image: var(--_vaadin-icon-paper-airplane);
69+
background: var(--vaadin-button-text-color);
70+
}
71+
72+
:host([dir='rtl'][theme~='icon-button']) ::slotted([slot='button'])::before {
73+
scale: -1;
74+
}
75+
76+
@media (forced-colors: active) {
77+
:host([theme~='icon-button']) ::slotted([slot='button']) {
78+
forced-color-adjust: none;
79+
--vaadin-button-text-color: CanvasText;
80+
}
81+
}
82+
`;

‎packages/message-input/src/vaadin-message-input-mixin.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -116,6 +116,7 @@ export const MessageInputMixin = (superClass) =>
116116
});
117117

118118
textarea.minRows = 1;
119+
(textarea.inputElement || textarea).setAttribute('enterkeyhint', 'send');
119120

120121
this._textArea = textarea;
121122
},

‎packages/message-input/test/dom/__snapshots__/message-input.test.snap.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ snapshots["vaadin-message-input default"] =
2828
</div>
2929
<textarea
3030
aria-label="Message"
31+
enterkeyhint="send"
3132
id="textarea-vaadin-text-area-3"
3233
placeholder="Message"
3334
rows="1"
@@ -71,6 +72,7 @@ snapshots["vaadin-message-input disabled"] =
7172
<textarea
7273
aria-label="Message"
7374
disabled=""
75+
enterkeyhint="send"
7476
id="textarea-vaadin-text-area-3"
7577
placeholder="Message"
7678
rows="1"

‎packages/message-input/test/visual/base/message-input.test.js‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import { sendKeys } from '@vaadin/test-runner-commands';
2+
import { fixtureSync } from '@vaadin/testing-helpers';
3+
import { visualDiff } from '@web/test-runner-visual-regression';
4+
import '../../../src/vaadin-message-input.js';
5+
6+
describe('message-input', () => {
7+
let div, element;
8+
9+
['ltr', 'rtl'].forEach((dir) => {
10+
describe(dir, () => {
11+
before(() => {
12+
document.documentElement.setAttribute('dir', dir);
13+
});
14+
15+
after(() => {
16+
document.documentElement.removeAttribute('dir');
17+
});
18+
19+
describe('basic', () => {
20+
beforeEach(() => {
21+
div = document.createElement('div');
22+
div.style.padding = '10px';
23+
element = fixtureSync('<vaadin-message-input></vaadin-message-input>', div);
24+
});
25+
26+
it('basic', async () => {
27+
await visualDiff(div, `${dir}-basic`);
28+
});
29+
30+
it('value', async () => {
31+
element.value = 'Hello';
32+
await visualDiff(div, `${dir}-value`);
33+
});
34+
35+
it('disabled', async () => {
36+
element.disabled = true;
37+
await visualDiff(div, `${dir}-disabled`);
38+
});
39+
40+
it('focused', async () => {
41+
await sendKeys({ press: 'Tab' });
42+
await visualDiff(div, `${dir}-focused`);
43+
});
44+
45+
it('button focused', async () => {
46+
await sendKeys({ press: 'Tab' });
47+
await sendKeys({ press: 'Tab' });
48+
await visualDiff(div, `${dir}-button-focused`);
49+
});
50+
51+
it('icon-button variant', async () => {
52+
element.setAttribute('theme', 'icon-button');
53+
await visualDiff(div, `${dir}-icon-button`);
54+
});
55+
});
56+
});
57+
});
58+
});

‎packages/message-input/test/visual/base/screenshots/message-input/baseline/ltr-basic.png‎

1.84 KB
Loading

‎packages/message-input/test/visual/base/screenshots/message-input/baseline/ltr-button-focused.png‎

2.64 KB
Loading

0 commit comments

Comments
 (0)