vaadin-message theme variants

[pekam]

As of resolving issue vaadin/collaboration-kit#30, users of the <vaadin-message-list>/MessageList component can provide theme attributes for individual message items for customizing e.g. how the user's own messages look compared to others.

So far we don't provide any theme variants for Lumo or Material. The default theme of <vaadin-message-list> is similar to Slack and Discord. Another common design in chats can be seen in e.g. WhatsApp and FB Messenger: the text content is inside a bubble, own messages are highlighted and aligned to the right side.

The following picture shows designs for the mentioned theme features by @anezthes. It shows also alternative positions of user name and time, which are maybe not as important, but can be also considered as theme variants.

This is open for discussion, but as a starting point I'd propose the following steps to resolve the ticket:

• Implement the following theme variants for <vaadin-message> in Lumo:
  • filled: content has grey background
  • outbound: the user's own messages, like filled with primary background color
  • endaligned: aligned to the right side in LTR, or left in RTL
• Support theme attribute on <vaadin-message-list>/MessageList component, which would be propagated to all the child messages. This would enable the user to set e.g. filled only once to the message list, and then customizing only own messages with the outbound variant.
• Add type-safe Flow APIs for setting these variants to MessageList and MessageListItem:

messageList.addThemeVariants(MessageVariant.LUMO_FILLED);

messageListItem.addThemeVariants(MessageVariant.LUMO_OUTBOUND);