ic-ui-kit icon indicating copy to clipboard operation
ic-ui-kit copied to clipboard

Update toast styling so that it is discernible when overlaid on any background colour

Open DBD324 opened this issue 2 years ago โ€ข 2 comments

Summary

Toasts use dark background currently which means when they appear over a section with a dark background, their contrast is lacking and it can be hard to notice them.

Add a border to help improve visibility in same way as tooltips.

๐Ÿ’ฌ Description

Add a border to improve visibility.

image

๐Ÿ’ฐ Use value

Makes component more accessible and usable.

๐Ÿ“ Acceptance Criteria

If relevant, describe in full detail the different interactions and edge cases that the component or patterns needs to fulfil.

Given that a toast notification is triggered When it appears Then it should have a contrasting border so that it is visible on any backgrond.

โœ Designs

If there's a Figma design file (or other mock-up), include it here.

##โ€ฏ๐Ÿงพ Guidance If there's written guidance or documentation, include a link to it here.

Additional info

Tell us anything else useful to help us understand your suggestion.

DBD324 avatar Oct 25 '23 16:10 DBD324

Image

Toast now has a border around it in dark mode. Assign ticket to dev for confirmation this has been done

mi6-577 avatar Mar 20 '25 08:03 mi6-577

Designers to update so it appears in light mode too

MI6-255 avatar May 15 '25 08:05 MI6-255

Current v3 design has border around Toast in both LM & DM variants

mi6-577 avatar May 22 '25 06:05 mi6-577

moved back to be re-triaged, as this can now be done in dev

ad9242 avatar Oct 08 '25 10:10 ad9242