status-im
/
consul
mirror of https://github.com/status-im/consul.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity
consul/ui/packages/consul-ui/app/modifiers/notification.mdx

28 lines
776 B
Plaintext
Raw Normal View History

ui: Notifications re-organization/re-style (#11577) - Moves where they appear up to the <App /> component. - Instead of a <Notification /> wrapping component to move whatever you use for a notification up to where they need to appear (via ember-cli-flash), we now use a {{notification}} modifier now we have modifiers. - Global notifications/flashes are no longer special styles of their own. You just use the {{notification}} modifier to hoist whatever component/element you want up to the top of the page. This means we can re-use our existing <Notice /> component for all our global UI notifications (this is the user visible change here)
2021-11-24 18:14:07 +00:00
# notification
Consul UIs notification modifier is used to 'hoist' DOM elements into the
global notification area for the UI. The most common usage will be something
like the below:
```hbs preview-template
<figure>
<figcaption>Attach a Warning notice to the top of the app ^^^</figcaption>
feat: update notification to use hds toast component (#16519)
2023-03-06 22:10:09 +00:00
<Hds::Toast
@color='warning'
{{notification
sticky=true
}}
as |T|>
<T.Title>Warning!</T.Title>
<T.Description>
ui: Notifications re-organization/re-style (#11577) - Moves where they appear up to the <App /> component. - Instead of a <Notification /> wrapping component to move whatever you use for a notification up to where they need to appear (via ember-cli-flash), we now use a {{notification}} modifier now we have modifiers. - Global notifications/flashes are no longer special styles of their own. You just use the {{notification}} modifier to hoist whatever component/element you want up to the top of the page. This means we can re-use our existing <Notice /> component for all our global UI notifications (this is the user visible change here)
2021-11-24 18:14:07 +00:00
This service has been deregistered and no longer exists in the catalog.
feat: update notification to use hds toast component (#16519)
2023-03-06 22:10:09 +00:00
</T.Description>
</Hds::Toast>
ui: Notifications re-organization/re-style (#11577) - Moves where they appear up to the <App /> component. - Instead of a <Notification /> wrapping component to move whatever you use for a notification up to where they need to appear (via ember-cli-flash), we now use a {{notification}} modifier now we have modifiers. - Global notifications/flashes are no longer special styles of their own. You just use the {{notification}} modifier to hoist whatever component/element you want up to the top of the page. This means we can re-use our existing <Notice /> component for all our global UI notifications (this is the user visible change here)
2021-11-24 18:14:07 +00:00
</figure>
```
Currently this is backed by `ember-cli-flash` and the named options are
currently options that can be accepted by `ember-cli-flash`. Be aware that this
is likely to change in the future.