Covalent: [Feature]: Messaging component

[mrjasonweaver]

Do you want to request a feature or report a bug?

Feature

Feature Request

Messaging component for info, alerts, warnings, errors, and successes.

Screenshots or link to CodePen/Plunker/JSfiddle

Examples:

What is the expected behavior?

Component should have the ability to implement color and icon style in the template.

What is the motivation / use case for changing the behavior?

Create and standardize patterns for surfacing relevant and timely information to the user.

Other information

Material design patterns for errors: https://material.io/guidelines/patterns/errors.html
Material design patterns for notifications: https://material.io/guidelines/patterns/notifications.html

[emoralesb05]

Referencing this https://github.com/Teradata/covalent/issues/256 since its related

[kyleledbetter]

Example from Covalent docs:

And Teradata products:

[kyleledbetter]

Let's iterate on the API requirements:

API Summary

| Name | Type | Description |
| --- | --- | --- |
| messageTitle | string | Title set in toolbar (or card title).
| messageSubtitle | string | Subtitle if using card title & card subtitle.
| icon | string | icon name to be displayed before the title
| color | string | optional toolbar color.
| message | string | string content of the message body
| actionPrimary | string | url or route for primary action button in card footer
| actionSecondary | string | url or route for secondary (accent) action button in card footer

[emoralesb05]

To allow more flexibly, lets make the actions something the user can add as needed (possibly):

<td-message messageTitle="" messageSubtitle="" icon="" color="" message="">
  <div layout="row">
    <button md-button href (click)="" [routerLink]=""> <-- different ways of using it -->
      Primary
    </button>
  </div>
</td-message>

Unless we wanna stick with 1 behavior and just replace the text

[richavyas]

An attribute showing type of message would be helpful too. Icons/colors may change over the time in the process of theming changes/enhancement/revamp but message types are usually restricted to `info/alerts/warnings/errors/successes. e.g.

<td-message messageTitle="" messageSubtitle="" type="" icon="" color="" message="">

[mrjasonweaver]

We want the ability to have both card headers without the toolbar? What about that close/x button up there in the top right. Does it make sense to have the ability to hide the message?

[mrjasonweaver]

Referencing prime ng messages: http://www.primefaces.org/primeng/#/messages

[mrjasonweaver]

Firebase messaging

[mrjasonweaver]

We should always render a card with toolbar (icon/title/close). No card title/subtitle

API

| Name | Type | Description |
| --- | --- | --- |
| messageTitle | string | Title set in toolbar.
| messageSubtitle | string | optional second line subhead set in toolbar.
| icon | string | icon name to be displayed before the title
| color | string | optional toolbar color.
| close | string | clear icon for hiding message
| message | string | string content of the message body
| actionPrimary | string | url or route for primary action button in card footer
| actionSecondary | string | url or route for secondary (accent) action button in card footer

[kyleledbetter]

Super happy with the progress and UX now. Gonna dig into code review

[mrjasonweaver]

Component property bindings

  /**
   * messageTitle: string
   *
   * The title set in toolbar.
   */
  @Input() messageTitle: string;

  /**
   * messageSubtitle?: string
   *
   * Optional second line subhead set in toolbar.
   */
  @Input() messageSubtitle: string;

  /**
   * icon: string
   *
   * The icon name to be displayed before the title.
   * Defaults to info_outline icon
   */
  @Input() icon: string = 'info_outline';

  /**
   * color?: string
   *
   * The optional toolbar color.
   */
  @Input() color: string = 'none';

  /**
   * close: string
   *
   * The clear icon for hiding message.
   * Defaults to clear icon "x"
   */
  @Input() close: string = 'clear';

  /**
   * message?: string
   *
   * The optional string content of the message body.
   */
  @Input() message: string;

  /**
   * actionPrimary?: string
   *
   * The optional url or route for primary action button in card footer.
   */
  @Input() actionPrimary: string;

  /**
   * actionSecondary?: string
   *
   * The optional url or route for secondary (accent) action button in card footer.
   */
  @Input() actionSecondary: string;

[emoralesb05]

Im good with that as a starting base.

We still need to revisit the buttons though.. since people might want to set their own buttons for other stuff rather than routing, and an n number of buttons with different text (i18n).

[emoralesb05]

Also, it might make more sense to be able to set the message this way too.

<td-message>
  {{message}}
  //Additional content also accepted.
</td-message>

OR

<td-message [message]="message"></td-message>

As an alternative, and have a quick API (easy) to set it too.

[jotatoledo]

Funny fact is that I was about to suggest this as a feature for covalent. Currently Im using angular2-notifications in my project. If something similar could be integrated into covalent it would be awesome.

[kyleledbetter]

@jotatoledo notifications is more like material snackbar/toast (they'll be adding more features like the one you're using) https://material.angular.io/components/component/snack-bar

This messages component was being designed for in-page alerts, more like https://v4-alpha.getbootstrap.com/components/alerts/

[asaph26]

Would love to see this soon.

[emoralesb05]

We are polishing this in one of our products and planning on adding it soon 😄

[asaph26]

@emoralesb05 Will this be part of beta.4 or will this be delayed to the next beta/rc?

[emoralesb05]

Plans are to include it in beta.4 and release either today or tomorrow. 😄

[emoralesb05]

This will be included with https://github.com/Teradata/covalent/pull/596 😄