-
Notifications
You must be signed in to change notification settings - Fork 2.2k
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 notification UI #449
Add notification UI #449
Conversation
It didn't make much sense in the theme as it feels very specific, this change also means the timing information is clearer within the html itself.
ea6c452
to
99da416
Compare
Applies role to the notification which will apply the appropriate aria-live status to ensure notifications are read out when they are rendered into the screen for screenreader users. Wraps the svg with a button tag that keyboard users can focus and engage with to close the notification.
@JoshAntBrown Overall like your solution. However, it's missing appropriate icons (check/x). |
@Shpigford Ah they should be there! Check and X icons appear later in the video, and are only rendered when notification helper is passed the type as success, or error. When given a different type, or none at all then the notification renders without a type. I can make the check a default if prefered? |
@JoshAntBrown default would be great. |
Done! You'll get a check by default regardless of type now unless you pass type as "alert" or "error". |
Amazing. Works beautifully. Thank you! |
Ah, perfect! Thanks 😄 |
Resolves #447
/claim #447
This approach uses a simple stimulus controller to remove the element after the animation has completed.
Notifications can be generated by simply rendering a notification helper anywhere within the application, this could be in a view, as a turbo stream response, or over a turbo stream subscription. By default Rails flash messages types are mapped to notification types, icons for additional types can easily be added in future.
It supports multiple notifications at once, by stacking them in a notification-tray element.
The video below demonstrates the default flash messages in action, and then I update the code to force some hardcoded notifications where the type is passed as error or success.
Screen.Recording.2024-02-12.at.20.13.04.mov
The circle is animated with CSS also using an SVG animation stroke fill animation technique (https://css-tricks.com/svg-line-animation-works/)