docs: simplify vaadin-message JSDoc, fix example formatting (#11395)

Author: web-padawan

packages/message-list/src/vaadin-message-mixin.d.ts

@@ -56,22 +56,7 @@ export declare class MessageMixinClass {
 
   /**
    * A color index to be used to render the color of the avatar.
-   * With no `userColorIndex` set, the basic avatar color will be used.
-   * By setting a userColorIndex, the component will check if there exists a CSS variable defining the color, and uses it if there is one.
-   * If now CSS variable is found for the color index, the property for the color will not be set.
    *
-   * Example:
-   * CSS:
-   * ```css
-   * html {
-   *   --vaadin-user-color-1: red;
-   * }
-   * ```
-   *
-   * JavaScript:
-   * ```js
-   * message.userColorIndex = 1;
-   * ```
    * @attr {number} user-color-index
    */
   userColorIndex: number | null | undefined;

packages/message-list/src/vaadin-message-mixin.js

@@ -58,22 +58,7 @@ export const MessageMixin = (superClass) =>
 
         /**
          * A color index to be used to render the color of the avatar.
-         * With no `userColorIndex` set, the basic avatar color will be used.
-         * By setting a userColorIndex, the component will check if there exists a CSS variable defining the color, and uses it if there is one.
-         * If now CSS variable is found for the color index, the property for the color will not be set.
          *
-         * Example:
-         * CSS:
-         * ```css
-         * html {
-         *   --vaadin-user-color-1: red;
-         * }
-         * ```
-         *
-         * JavaScript:
-         * ```js
-         * message.userColorIndex = 1;
-         * ```
          * @attr {number} user-color-index
          */
         userColorIndex: {

packages/message-list/src/vaadin-message.d.ts

@@ -17,10 +17,14 @@ export type MessageEventMap = HTMLElementEventMap & {
  * `<vaadin-message>` is a Web Component for showing a single message with an author, message and time.
  *
  * ```html
- * <vaadin-message time="2021-01-28 10:43"
- *     user-name = "Bob Ross"
- *     user-abbr = "BR"
- *     user-img = "/static/img/avatar.jpg">There is no real ending. It's just the place where you stop the story.</vaadin-message>
+ * <vaadin-message
+ *   time="2021-01-28 10:43"
+ *   user-name="Bob Ross"
+ *   user-abbr="BR"
+ *   user-img="/static/img/avatar.jpg"
+ * >
+ *  There is no real ending. It's just the place where you stop the story.
+ * </vaadin-message>
  * ```
  *
  * ### Styling

packages/message-list/src/vaadin-message.js

@@ -17,10 +17,14 @@ import { MessageMixin } from './vaadin-message-mixin.js';
  * `<vaadin-message>` is a Web Component for showing a single message with an author, message and time.
  *
  * ```html
- * <vaadin-message time="2021-01-28 10:43"
- *     user-name = "Bob Ross"
- *     user-abbr = "BR"
- *     user-img = "/static/img/avatar.jpg">There is no real ending. It's just the place where you stop the story.</vaadin-message>
+ * <vaadin-message
+ *   time="2021-01-28 10:43"
+ *   user-name="Bob Ross"
+ *   user-abbr="BR"
+ *   user-img="/static/img/avatar.jpg"
+ * >
+ *  There is no real ending. It's just the place where you stop the story.
+ * </vaadin-message>
  * ```
  *
  * ### Styling