Skip to content

Commit 01a7ad4

Browse files
web-padawanweb-padawan
authored
docs: message-list Aura styling docs and properties (#4875)
1 parent a401eda commit 01a7ad4

File tree

7 files changed

+90
-43
lines changed

7 files changed

+90
-43
lines changed

‎articles/components/message-list/index.adoc‎

Lines changed: 0 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -42,38 +42,6 @@ endif::[]
4242
The messages in the list can be populated with the `items` property. The `items` property is of type [classname]`Array`, with JSON objects in it. Each JSON object is a single message.
4343

4444

45-
== Styling
46-
47-
You can style individual messages by adding a theme property to some items and providing CSS for that theme. The following example shows how to highlight the current user's own messages:
48-
49-
[.example]
50-
--
51-
[source,css]
52-
----
53-
include::{root}/frontend/themes/docs/message-list-theming.css[]
54-
----
55-
ifdef::lit[]
56-
[source,html]
57-
----
58-
include::{root}/frontend/demo/component/messages/message-list-with-theme-component.ts[render,tags=snippet,indent=0,group=Lit]
59-
----
60-
endif::[]
61-
ifdef::flow[]
62-
[source,java]
63-
----
64-
include::{root}/src/main/java/com/vaadin/demo/component/messages/MessageListWithThemeComponent.java[render,tags=snippet,indent=0,group=Flow]
65-
----
66-
endif::[]
67-
68-
ifdef::react[]
69-
[source,tsx]
70-
----
71-
include::{root}/frontend/demo/component/messages/react/message-list-with-theme-component.tsx[render,tags=snippet,indent=0,group=React]
72-
----
73-
endif::[]
74-
--
75-
76-
7745
== Markdown
7846

7947
Use Markdown formatting in Message List to display rich text instead of plain text.

‎articles/components/message-list/styling.adoc‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,89 @@ order: 50
77
---
88
= Message List Styling
99

10+
11+
== Styling Individual Messages
12+
13+
You can style individual messages by adding a class name to some items and providing CSS for that class name. The following example shows how to highlight the current user's own messages:
14+
15+
[.example]
16+
--
17+
[source,css]
18+
----
19+
include::{root}/frontend/themes/docs/message-list-class-name.css[]
20+
----
21+
ifdef::lit[]
22+
[source,html]
23+
----
24+
include::{root}/frontend/demo/component/messages/message-list-class-name.ts[render,tags=snippet,indent=0,group=Lit]
25+
----
26+
endif::[]
27+
ifdef::flow[]
28+
[source,java]
29+
----
30+
include::{root}/src/main/java/com/vaadin/demo/component/messages/MessageListClassName.java[render,tags=snippet,indent=0,group=Flow]
31+
----
32+
endif::[]
33+
34+
ifdef::react[]
35+
[source,tsx]
36+
----
37+
include::{root}/frontend/demo/component/messages/react/message-list-class-name.tsx[render,tags=snippet,indent=0,group=React]
38+
----
39+
endif::[]
40+
41+
--
42+
43+
include::../_styling-section-theming-props.adoc[tag=style-properties]
44+
45+
[cols="2,1"]
46+
|===
47+
| Property | Supported by
48+
49+
|`--vaadin-message-font-size`
50+
|Aura, Lumo
51+
52+
|`--vaadin-message-font-weight`
53+
|Aura, Lumo
54+
55+
|`--vaadin-message-gap`
56+
|Aura, Lumo
57+
58+
|`--vaadin-message-header-line-height`
59+
|Aura, Lumo
60+
61+
|`--vaadin-message-line-height`
62+
|Aura, Lumo
63+
64+
|`--vaadin-message-list-padding`
65+
|Aura, Lumo
66+
67+
|`--vaadin-message-name-color`
68+
|Aura, Lumo
69+
70+
|`--vaadin-message-name-font-size`
71+
|Aura, Lumo
72+
73+
|`--vaadin-message-name-font-weight`
74+
|Aura, Lumo
75+
76+
|`--vaadin-message-padding`
77+
|Aura, Lumo
78+
79+
|`--vaadin-message-text-color`
80+
|Aura, Lumo
81+
82+
|`--vaadin-message-time-color`
83+
|Aura, Lumo
84+
85+
|`--vaadin-message-time-font-size`
86+
|Aura, Lumo
87+
88+
|`--vaadin-message-time-font-weight`
89+
|Aura, Lumo
90+
91+
|===
92+
1093
include::../_styling-section-intros.adoc[tag=selectors]
1194

1295
=== List

frontend/demo/component/messages/message-list-with-theme-component.ts renamed to frontend/demo/component/messages/message-list-class-name.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@ import { format, subDays, subMinutes } from 'date-fns';
44
import { html, LitElement } from 'lit';
55
import { customElement } from 'lit/decorators.js';
66
import { getPeople } from 'Frontend/demo/domain/DataService';
7-
import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
87
import { applyTheme } from 'Frontend/demo/theme';
8+
import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
99

10-
@customElement('message-list-component-with-theme')
10+
@customElement('message-list-class-name')
1111
export class Example extends LitElement {
1212
private person: Person | undefined;
1313
private isoMinutes = 'yyyy-MM-dd HH:mm';

frontend/demo/component/messages/react/message-list-with-theme-component.tsx renamed to frontend/demo/component/messages/react/message-list-class-name.tsx

File renamed without changes.

frontend/themes/docs/message-list-theming.css renamed to frontend/themes/docs/message-list-class-name.css

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,3 @@
1-
/* Add this to your global CSS, for example in: */
2-
/* frontend/theme/[my-theme]/styles.css */
3-
41
vaadin-message.current-user {
52
background-color: #000;
63
color: #fff;

‎frontend/themes/docs/styles.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,10 @@
77
@import './login-rich-content.css';
88
@import './notification-position-example.css';
99
@import './grid-cell-focus.css';
10-
@import './message-list-theming.css';
1110
@import './grid-styling.css';
1211
@import './grid-header-footer-styling.css';
1312
@import './menu-bar-class-name.css';
13+
@import './message-list-class-name.css';
1414
@import './multi-select-combo-box-chip-class-name.css';
1515
@import './multi-select-combo-box-item-class-name.css';
1616
@import './nav-item-styling.css';

src/main/java/com/vaadin/demo/component/messages/MessageListWithThemeComponent.java renamed to src/main/java/com/vaadin/demo/component/messages/MessageListClassName.java

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,10 @@
1313
import com.vaadin.flow.component.messages.MessageListItem;
1414
import com.vaadin.flow.router.Route;
1515

16-
@Route("message-list-with-theme")
17-
public class MessageListWithThemeComponent extends Div {
16+
@Route("message-list-class-name")
17+
public class MessageListClassName extends Div {
1818

19-
public MessageListWithThemeComponent() {
19+
public MessageListClassName() {
2020
// tag::snippet[]
2121
Person person = DataService.getPeople(1).get(0);
2222
MessageList list = new MessageList();
@@ -41,7 +41,6 @@ public MessageListWithThemeComponent() {
4141
// end::snippet[]
4242
}
4343

44-
public static class Exporter extends // hidden-source-line
45-
DemoExporter<MessageListWithThemeComponent> { // hidden-source-line
44+
public static class Exporter extends DemoExporter<MessageListClassName> { // hidden-source-line
4645
} // hidden-source-line
4746
}

0 commit comments

Comments
 (0)