[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 #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 #596 😄