Alert background

[stsrki]

Hi, I started to update my project with your material implementation instead of daemonite. I noticed that alerts are looking different than those in daemonite or in other frameworks for that matter.

Your alert:

Daemonite:

Bootstrap:

Material UI:

As you can see all other frameworks have basically the same alert, for the most part. Your implementation has the left border slightly colored. Is that made on purpose?

[djibe]

For now.

I don't find any Material study for such component.

[tbuyle]

I think there are no "alert" as such in Material Guidelines.

Instead, there are 3 components to be used for feedback / notification, depending on the priority and how interuptive the message should be :

Here is how I understand it :

• Errors alert would be replaced by dialog (if action required) or Banners.
• Danger alert would probably be replaced by Banners
• Info would be replaced by Banners or Snackbars (depneding how important the info is)
• Success would be replaced by Snackbars

[tbuyle]

(Obviously, it's not up to this Material implementation to display Dialog / Banner / Snackbar instead of the bootstrap alerts)

[djibe]

But I never saw an Alert in any of Google's sites. What do you find closer in concept on their sites ?

[tbuyle]

"Banner" is probably the closest component to how Alerts are used. They display a message with or without action, appear on top of the screen and stay there until dismissed.

https://material.io/components/banners

[tbuyle]

Guidelines for Banners do not to use colors to distinguish the different alert type.

One solution that would follow the Material Guideline would be to display alert as Banner with an icon as supportive illustration :

• Danger : ~red error icon
• Warning : ~orange warning icon
• Info : ~primary info icon
• Success : ~success _checkcircle icon

What do you think ?

[djibe]

I share the same conclusion. I'll do it.

[tbuyle]

Great !

I may be able to help on that one if needed.

[stsrki]

I think Banner can be a different and separate component. For Alert on other hand it is better to be done the same as in other frameworks. While it is true that Alert doesn't exist in material guidelines, current implementations are already standard, in my opinion.

[tbuyle]

In my opinion, "Alerts" are a poorly-considered solution for application feedback when creating UX.

Google's Material choose not to include them to favor a more complete approach of confirmations and acknowledgement in an application : https://material.io/design/communication/confirmation-acknowledgement.html#usage

I then wouldn't mind if this implementation displays alert as banners as they are the component that is closer to what alert are usually used for.

Banner-like alert with white background, colored icon, grey border and some padding would be fine for me. And then the Banner Component would enhance them with actions, placement,...

Alternatively, alert could be simply "bg-*" aliases and a the Banner Component would then be something completely different than alerts...

[djibe]

Glad to see the debate I had with myself :D

[djibe]

First try. What do you think ?

[stsrki]

I like the ones with icon and the background (dark,light). But I'm not sure if it's the best idea to have different layout for each color variant.

[tbuyle]

I like the one with the icons.

Could they be combined with the dark- and light- ones ?

[stsrki]

I like the idea of combining icons with the background. Maybe have the background color based on the variant, and then adjust the icon and text color to be black or white. The text color example can be seen on dark and light alerts.

[djibe]

Hi. Thx for your feedback. Can you both make a drawing of expected result for every alert-variant ? In order to debate carefuly now and then close this issue.

[tbuyle]

Sorry for the delay. Here is a my latest implementation...

Primary and secondary use the theme's color. Orange my be a but confusing as primary here...

[stsrki]

@tbuyle I like the look of colored icons.

@djibe I stumbled upon a template that have Alerts and Callouts components similar to what you created. You can see it here https://adminlte.io/themes/v3/pages/UI/general.html

[tbuyle]

@tbuyle I like the look of colored icons.

Thnaks.

I opted for colored icons so both color and shape are different between the alert types. For the same reason I did not use the circle-i for info et and circle-! for danger because their shape are too similar.

I don't really like the bell for "info" but I wanted to stick with standard material icons and could not find a better one (suggestions are thus welcome).

[djibe]

Thx for your suggestions. I'll try to do it soon but my PC is completly unstable. Thought SSD was crashed but HDD is failing. It seems my PSU is KO. I'm on Select2 plugin now.

[tbuyle]

Here is a Gist with some SCSS that should corresponds. https://gist.github.com/tbuyle/f0be059dc65eb10d75d594a9fb4a0df3

Not sure the '@extend .navbar-toggler-icon;' is the best solution for the icon, but it's working :-D

[stsrki]

One thing I don't like about version with icons is that it's too specific. What if user want's to switch to some other icon package instead of material? Then it would not work at all.

[tbuyle]

One thing I don't like about version with icons is that it's too specific. What if user want's to switch to some other icon package instead of material? Then it would not work at all.

As far as I understand it, Material is using Google Material Icons only for now (see https://djibe.github.io/material/docs/4.5/material/icons/ ).

Using other package would therefore means adding some custom CSS - Alerts would then be one of the elements changed by this custom CSS.

However, a possible improvement to the code I posted on gist would be to use an 'icon' mixin to display the icons (in alert or elsewhere) and variables for the icon name / content. Using another package would then only require to rewrite the mixin and change the icon variables.

[djibe]

Hi. You can check material.css from Master. I used Material UI style.

I make the release when documentation for plugins is done.

I close issue, you can continue the thread if you want to comment new Alerts.

[stsrki]

I like the new alerts style :) thank you!