Warning Notification theme variant

vaadin / platform

Vaadin platform 10+ is a Java web development platform based on Vaadin web components. If you don't know to which repository your bug report should be filed, use this and we'll move it to the right one.

https://vaadin.com

515 stars 76 forks source link

Warning Notification theme variant #4073

Closed rolfsmeds closed 11 months ago

rolfsmeds commented 1 year ago

Description

Lumo style variant for warning notifications (that is distinct from the error variant)

Use cases

As a user I want to be able to visually distinguish warning notifications from other notifications So that I can take the appropriate action

Acceptance criteria

[x] Warning-colored variant for Notifications (see #4072)
[x] Java API: NotificationVariant.LUMO_WARNING
[x] WC API: theme="warning"
[x] Conforms to WCAG 2.1 level AA contrast criteria

General criteria

[x] APIs reviewed
[x] Design (see attached image)
[x] Documentation: https://vaadin.com/docs/latest/components/notification/#warning

Security

[x] Security implications have been taken into account (elaborate or link to product security requirement specification if there are implications)

jouni commented 1 year ago

Do we really need the border? How would it look like without it?

rolfsmeds commented 1 year ago

Would look nicer without it, but then it fails WCAG 2.1 AA non-text contrast requirements, and although technically, like buttons, the notification card doesn't have to pass contrast requirements as long as the content inside it does, I feel that it probably should, so that it stands out sufficiently against the background.

(The light gray default variant would need to be correspondingly adjusted)

jouni commented 1 year ago

To me, it seems like a similar thing as borders for text inputs and buttons, and could be opt-in if you really want to increase the contrast more, not necessarily the default.

rolfsmeds commented 1 year ago

Well, the default notification style already has a border, albeit one of insufficient contrast

We could omit the border, but it actually looks a bit "naked" to me without one

Or we could apply a lighter border

but that would require either a custom color for this notification variant, or another color in the new warning colors

jouni commented 1 year ago

Just comparing to the other colored variants, and keeping it aligned with them. The yellow is lighter, so yeah, perhaps it could have a light border. But the one in the OP is too stark IMO.