-
Notifications
You must be signed in to change notification settings - Fork 1.1k
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
Add pluggable global notification area to App component #4353
Conversation
A plugin can register a "globalNotifications" UI extension that will be rendered into the global notification area on each page.
.filter(component => !!component); | ||
|
||
return ( | ||
<div className={`container-fluid ${styles.globalNotifications}`} id="global-notifications"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Could we wrap the component's children in a react-bootstrap's Row
and Col
, avoiding to add styles in here? In the end the styling is just mimicking what those components do.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Oh, I see, that's why you are adding :not(:empty)
to the CSS selector.
There is afaik no way for a parent to know if its children are rendering something or not. This is mostly due to how React works: you try to put all the logic you can upper in the tree and pass things down, not the other way around, which is what this situation would need.
Then I would suggest: why don't we leave the styling to the children? In the end we are not adding much styling in here, so we can also let plugin authors decide how the notification should look like. In the end they could also override anything we set in here.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@edmundoa Good point. I will remove the styling and leave it to the children. 👍
Child elements are responsible for their own styling.
@edmundoa I removed the styling. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM 👍
* Add pluggable global notification area to App component A plugin can register a "globalNotifications" UI extension that will be rendered into the global notification area on each page. * Fix eslint warnings * Fix more eslint warnings * Remove styling of global notification area Child elements are responsible for their own styling. (cherry picked from commit fdc3d26)
A plugin can register a "globalNotifications" UI extension that will be rendered into the global notification area on each page.
Note: This needs to be cherry-picked into 2.4
Example notification
Component
Register