[Notification] shortcut methods for showing notifications with preset theme variants and closing time

[taefi]

Describe your motivation

Similar to what is described in vaadin/web-components#5769, I would like to have utility/shortcut methods that enables showing success, warn, error, and info notifications with some defaults without writing 10 lines of code.

Describe the solution you'd like

The Notification component already has enough API to make this happen, just by configuring a Notification instance with some defaults for the icon, location, duration, and theme variant.

My desired solution is to be able to show a notification with one-liner call to the Notification API.

Static shortcut methods

One way to achieve this is through introducing a set of overloads like these:

String message = "This is the message.";
Notification.info(message);
Notification.success(message);
Notification.warn(message);
Notification.error(message);

// and to show a component as the message:
UnorderedList ul = new UnorderedList();
ul.add("First thing to fix.");
ul.add("Second thing to fix.");
Notification.error(ul)

Apart from correspondent default theme variants and icon for each type, we can assume some defaults for the followings:

The default position could be Notification.Position.TOP_END.
The default duration could be 5 seconds.

Then, some limited set of overloads such as the followings, it would be awesome:

Notification.info(String message, int duration);
Notification.info(String message, Position position);
// other overloads

Builder Pattern

Instead of a lot of shortcut overloads we can employ a builder pattern to configure the preset defaults after calling the base method:

Notification.success("Transaction was successful") // this has all the defaults but doesn't show
        .position(Notification.Position.TOP_START) // optionally overriding the defaults
        .duration(10) // optional
        .icon(...) // optional
        .show();

Describe alternatives you've considered

No response

Additional context

No response

[web-padawan]

One thing that needs to be taken into account is that "success" or "warn" are currently not supported in Aura, and the recommended approach is to use CSS class names instead as described in vaadin/web-components#10605 (comment). So we'd have to detect whether app uses Lumo or Aura, which can be done on the client side.

[sissbruecker]

We could also add both the theme name and the class name. They would not conflict with each other, and one or the other would just do nothing in Aura or Lumo.

[jouni]

Using any other duration than zero could be considered bad UX, and I'd avoid that in any default configurations. A "success" notification is an exception, where a self-closing variant is okay.

[jouni]

We should consider custom themes, which are built on top of base styles. Adding API for named variants implies that those should somehow be supported by base styles as well.