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

Adds icons for callouts and alerts #562

Open
wants to merge 3 commits into
base: 1.x
Choose a base branch
from

Conversation

markconroy
Copy link
Member

@markconroy markconroy commented Jun 12, 2024

Closes #531

Here's a PR to add an icon to alerts and callouts. Just to note a few things:

  1. This is a change that councils may not be expecting
  2. Are we sure callouts AND alerts should have an icons, not just alerts?
  3. Some councils may have already implemented a similar fix like this already, so this might affect what they have done.

Let's make sure we have these as notes in the release notes. Here's a screenshot.

Screenshot 2024-06-12 at 16 37 05

===
Thanks to Big Blue Door for sponsoring my time to work on this.

@msayoung
Copy link
Member

Are we sure callouts AND alerts should have an icons, not just alerts?

There's an argument to add them to the ones named callout danger, and callout success - however the others could be used in all sorts of ways, so I guess maybe not.

Other thoughts:

In the gov.uk pattern https://design-system.service.gov.uk/components/warning-text/
there is visually-hidden text "Warning" which will convey a similar message to non-visual users.

As we're just working with the css, we could potentially add "Warning" as content in the ::before

However, is "warning" always appropriate?
Perhaps I'm overthinking this.

Related: #563

@markconroy
Copy link
Member Author

Given that these are wysiwyg styles, it's tricky to add the visually hidden text. I guess we could do it with JS. This might be more a feature for the alerts than the callouts though, as they are "alerts" rather than "here's a bit of info we want to make look different".

@anthonylindsay
Copy link

Presumably, given the intent is to convey information here, the icon should be paired to the colour/state?
So an 'info' alert might have one icon, and a 'panic' alert might have another?
Otherwise we're back to using colour to convey meaning without a supplemental method.

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

Successfully merging this pull request may close these issues.

Add alert icon, like exclamation mark in black circle, to call out and alert styles
3 participants