Document how to add code to dismiss notification bar

[nlhkabu]

We should add some help text at the top of static/sass/blocks/_notification-bar.scss to explain how to make a notification bar dismissible.

---

Good First Issue: This issue is good for first time contributors. If you've already contributed to Warehouse, please work on another issue without this label instead. If there is not a corresponding pull request for this issue, it is up for grabs. For directions for getting set up, see our Getting Started Guide. If you are working on this issue and have questions, please feel free to ask them here, #pypa-dev on Freenode, or the pypa-dev mailing list.

[pgadige]

I'd like to work on this, @nlhkabu. I'll appreciate some insight on what qualifies as help text.

What should we provide to the reader of static/sass/blocks/_notification-bar.scss file as help text?

Should we explain adding .notification-bar--dismissable and .notification-bar--visible to the div tag that's used to make notification bar together with a button with .notification-bar__dismiss to click on to dismiss/close the notification bar?

[nlhkabu]

@aalmazan would you be able to give @pgadige some direction on how best to document this? Thanks :)

[aalmazan]

Hi @pgadige,

I'm not sure how much detail you need, but since it's not particularly a big feature, I'll describe most of the workflow.

To make a notification dismissable one would need to add the following to the main notification-bar div:

• .notification-bar-dismissable to its classes
• data-controller="notification" and,
• data-target="notification.notification" as attributes

The data-controller and data-target attributes are used by warehouse/static/js/warehouse/controllers/notification_controller.js to handle visibility -- this includes adding .notification-bar--visible to the notification if it has not been dismissed (and persisted) yet.

Also, note that if Javascript is disabled the styles in warehouse/static/sass/noscript.scss will be used instead. This mainly defaults notifications to always be visible.

Let me know if you need anything else!