Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[notification] Add close/dismiss button #438

Open
jouni opened this issue Jan 4, 2021 · 3 comments
Open

[notification] Add close/dismiss button #438

jouni opened this issue Jan 4, 2021 · 3 comments
Labels

Comments

@jouni
Copy link
Member

jouni commented Jan 4, 2021

Add a default close/dismiss button to all notifications (a new themable part), to avoid the need for application develpers to do that manually. It is considered a best practice to have an explicit dismiss button for notifications.

Add a new theme variant that the developer can use to opt-out of (hide) the default close/dismiss button.

Open questions:

  • How do we handle the close/dismiss button label, how is it localized (do we need an i18n property)?
  • Should ESC close/dismiss the notification, when the notification itself is focused (see vaadin/vaadin-notification#121)?
@rolfsmeds
Copy link
Contributor

  • Having a dismiss button rendered by default would be a breaking change, and cause issues in existing applications, many of which implement their own dimiss buttons.

  • A dedicated boolean property for having a dismiss button might be a cleaner approach.

@jouni
Copy link
Member Author

jouni commented Jan 5, 2021

Right, this could be opt-in initially, and marked to be changed to opt-out in the next major version.

@vaadin-bot vaadin-bot transferred this issue from vaadin/vaadin-notification May 19, 2021
@web-padawan web-padawan changed the title Close/dismiss button [notification] Add close/dismiss button May 21, 2021
@mvysny
Copy link
Member

mvysny commented Sep 3, 2021

Passing in the '0' duration will cause the notification to stay displayed; since there's no way for the user to close the notification without the close button, the notification pretty much stays around indefinitely (unless a close button is added manually by the programmer).

Currently, the only way to make a persistent notification with a close button is this very very chatty code:

final Notification notification = new Notification(new Span("An application error happened"));
notification.setDuration(0);
notification.setPosition(Notification.Position.TOP_CENTER);
notification.addThemeVariants(NotificationVariant.LUMO_ERROR, NotificationVariant.LUMO_PRIMARY);
final Button closeButton = new Button(new Icon(VaadinIcon.CLOSE));
closeButton.addThemeVariants(ButtonVariant.LUMO_ICON, ButtonVariant.LUMO_TERTIARY);
closeButton.addClickListener(e -> notification.close());
notification.add(closeButton);
notification.show();

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

4 participants