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

Dismissable alerts #158

Merged
merged 2 commits into from Apr 5, 2019
Merged

Dismissable alerts #158

merged 2 commits into from Apr 5, 2019

Conversation

@tcbegley
Copy link
Member

tcbegley commented Mar 21, 2019

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:

image

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

@pbugnion

This comment has been minimized.

Copy link
Member

pbugnion commented Apr 5, 2019

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

screenshot

@pbugnion

This comment has been minimized.

Copy link
Member

pbugnion commented Apr 5, 2019

Looks great!

@tcbegley tcbegley force-pushed the dismissable-alerts branch from 5e7e62f to fe85703 Apr 5, 2019
@tcbegley tcbegley merged commit 4dafd97 into master Apr 5, 2019
2 checks passed
2 checks passed
continuous-integration/travis-ci/pr The Travis CI build passed
Details
continuous-integration/travis-ci/push The Travis CI build passed
Details
@tcbegley tcbegley deleted the dismissable-alerts branch Apr 5, 2019
@jchang10

This comment has been minimized.

Copy link

jchang10 commented Apr 12, 2019

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

This comment has been minimized.

Copy link
Member Author

tcbegley commented Apr 13, 2019

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

This comment has been minimized.

Copy link

jchang10 commented Apr 14, 2019

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

This comment has been minimized.

Copy link
Member Author

tcbegley commented Apr 14, 2019

@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.

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

Successfully merging this pull request may close these issues.

None yet

3 participants
You can’t perform that action at this time.