Dismissable alerts

[tcbegley]

This PR adds a dismissable prop to Alert which, when set to True, adds a dismiss button to the alert. It can be used alongside the existing is_open prop to display or dismiss alerts. See the following screenshot:

I have also taken the opportunity to improve the alert documentation, and add some more detailed examples.

[pbugnion]

For reference, this is what the updated documentation looks like:

[pbugnion]

Looks great!

[jchang10]

I just noticed that 'dismissable' only works if you give the alert an id. Seems like an unnecessary burden to have to give an id to an Alert that will never get used on the server. Only needed to hide it on the client, right?

Just for future reference and those who are really lazy (not me of course!), I wonder, is this a quirk about Dash not being able to propagate events to id-less components?

Anyway, maybe just a mention in the docs will help the next person, too. Anyway, awesome update! :)

[tcbegley]

Hey @jchang10,

Thanks a lot for raising this. I haven't been able to reproduce it though. This is the test app I ran:

import dash
import dash_bootstrap_components as dbc

app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = dbc.Alert("This is an alert", dismissable=True)

if __name__ == "__main__":
    app.run_server(debug=True, port=8888)

The Alert dismissed as I would have expected when clicking on the dismiss button. These are the versions of Dash libraries I was using:

dash==0.41.0
dash-bootstrap-components==0.4.0
dash-core-components==0.46.0
dash-html-components==0.15.0
dash-renderer==0.22.0
dash-table==3.6.0

Could you share an example where you see the behaviour you describe?

[jchang10]

Yes, exact same versions, but I am still seeing the same problem.

The only difference with my test is this line. Change:
app.layout = dbc.Alert("This is an alert", dismissable=True)
to:
import dash_html_components as html
app.layout = html.Div( dbc.Alert("This is an alert", dismissable=True), id='testdiv')

IE, add a Div wrapper or even a dbc.Card, etc. If I add an id to Alert, it works, tho.

[tcbegley]

@jchang10 I managed to reproduce it, thanks. Also, that is very weird! I'll try to figure out what the problem is.

I'm going to make an issue for this for visibility.