Styling Notification from Vaadin 10

Flow
1

Hi!

I am curious, how to style Notification from Vaadin 10. When I add class to Java Vaadin Notification object, it shows up as attribute of html element <vaadin-notification>. This element has also sibling <vaadin-notification-container> with child <vaadin-notification-card>, which can by styled, but I don’t know how. I need to set background color of <div part="overlay"> inside <vaadin-notification-card>, with class name, eg. error. Any help?

2

Hi,

there’s a ticket about the issue here: https://github.com/vaadin/vaadin-notification-flow/issues/49

You can go thumbs up it if you’d like.

-Olli

3

Hi!

I resolved it this way:

  1. set some attribute on <vaadin-notification>. There’s only one available: theme. You can set it by doing: notification.getElement().getThemeList().add(type); where type is ‘info’, ‘error’, ‘success’, ‘warning’ (or whatever you want),
  2. style notifications in <dom-module> like for example:
<dom-module id="notification-theme" theme-for="vaadin-notification-card">
  <template>
    <style>
      :host([theme~="info"]
) [part~="overlay"]
 {
        color: var(--lumo-primary-text-color);
      }
      
      :host([theme~="success"]
) [part~="overlay"]
 {
        color: var(--lumo-success-text-color);
      }
      
      :host([theme~="warning"]
) [part~="overlay"]
 {
        color: #ff6700;
      }
      
      :host([theme~="error"]
) [part~="overlay"]
 {
        background-color: var(--lumo-error-color);;
        color: var(--lumo-error-contrast-color);
      }
    </style>
  </template>
</dom-module>
4

I think, Users include myself expect from Vaadin framework something more simple. I think such simple thing like Notification.setBackgroud(Color.Red); should be a standard beside of CSS style. The same thing should be for other components.
I don’t know where is a problem to implement such simple thing for Vaadin Team.

5

what would be the best approach to add an icon (like VaadinIcon) before the text in the notification? possible via or only by adding components to the Notification object?

6

Pawel Prusinski:
I think, Users include myself expect from Vaadin framework something more simple. I think such simple thing like Notification.setBackgroud(Color.Red); should be a standard beside of CSS style. The same thing should be for other components.
I don’t know where is a problem to implement such simple thing for Vaadin Team.

I agree it should be possible via the Java API. I added similar functionality in the Business App Starter.

Moritz Christian:
what would be the best approach to add an icon (like VaadinIcon) before the text in the notification? possible via or only by adding components to the Notification object?

Both are possible. There’s no “best” approach, it just depends on how you wish to use it. :slight_smile:

7

Dar Mro:
Hi!

I resolved it this way:

  1. set some attribute on <vaadin-notification>. There’s only one available: theme. You can set it by doing: notification.getElement().getThemeList().add(type); where type is ‘info’, ‘error’, ‘success’, ‘warning’ (or whatever you want),
  2. style notifications in <dom-module> like for example:
<dom-module id="notification-theme" theme-for="vaadin-notification-card">
  <template>
    <style>
      :host([theme~="info"]

) [part~=“overlay”]
{

    color: var(--lumo-primary-text-color);
  }
  
  :host([theme~="success"]

) [part~=“overlay”]
{

    color: var(--lumo-success-text-color);
  }
  
  :host([theme~="warning"]

) [part~=“overlay”]
{

    color: #ff6700;
  }
  
  :host([theme~="error"]

) [part~=“overlay”]
{

    background-color: var(--lumo-error-color);;
    color: var(--lumo-error-contrast-color);
  }
</style>
```

Hi, I am trying to follow your solution in a vaadin 10 application but it didn’t work as expected… When I set “notification.getElement().getThemeList().add(“warning”);”, the theme=“warning” attribute is added to the vaadin-notification element… but vaadin-notification-card isn’t a child and it isn’t affected.

However, if I manually set theme=“warning” to the vaadin-notification-card, then the style is applied!

Am I missing something??

thanks in advance

8

In Vaadin 14 there will be easy way to style Notifications with Java API

notification.addThemeVariants(NotificationVariant.LUMO_PRIMARY);
notification.addThemeVariants(NotificationVariant.LUMO_CONTRAST);
notification.addThemeVariants(NotificationVariant.LUMO_SUCCESS);
notification.addThemeVariants(NotificationVariant.LUMO_ERROR);
9

Tatu Lund:
In Vaadin 14 there will be easy way to style Notifications with Java API

notification.addThemeVariants(NotificationVariant.LUMO_PRIMARY);
notification.addThemeVariants(NotificationVariant.LUMO_CONTRAST);
notification.addThemeVariants(NotificationVariant.LUMO_SUCCESS);
notification.addThemeVariants(NotificationVariant.LUMO_ERROR);

Thanks Tatu, but v10 is a customer requirement

10

Joacim Päivärinne:

Pawel Prusinski:
I think, Users include myself expect from Vaadin framework something more simple. I think such simple thing like Notification.setBackgroud(Color.Red); should be a standard beside of CSS style. The same thing should be for other components.
I don’t know where is a problem to implement such simple thing for Vaadin Team.

I agree it should be possible via the Java API. I added similar functionality in the Business App Starter.

Moritz Christian:
what would be the best approach to add an icon (like VaadinIcon) before the text in the notification? possible via or only by adding components to the Notification object?

Both are possible. There’s no “best” approach, it just depends on how you wish to use it. :slight_smile:

Can you add the snippet to where this is done or a link? Thanks.

11

David Sanborn:
Can you add the snippet to where this is done or a link? Thanks.

It’s basically just a shorthand for component.getStyle().set("background-color", "red");.