Problem/Motivation

We don't currently have any styling for messages, and they look a bit rough!

We don't have designs for this, but if we can implement a foundation for the styling, we could go from there with design input.

We can try to copy as much as possible from Olivero, although we should use Tailwind classes in the template as much as possible to avoid writing custom CSS. The JS to make it dismiss-able would be great too!

CommentFileSizeAuthor
#8 2026-01-07T091736.gif5.26 MBsimon_who
#4 2026-01-06T151400.gif3.49 MBsimon_who
Screenshot 2026-01-06 at 10.19.49 am.png83.29 KBpameeela

Issue fork mercury-3565775

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

pameeela created an issue. See original summary.

simon_who’s picture

simon_who
Location Canberra
commented
Assigned: Unassigned » simon_who

Hello @pameeela, I'd be happy to work this one.

simon_who opened merge request !170

simon_who’s picture

simon_who
Location Canberra
commented
StatusFileSize
new 2026-01-06T151400.gif3.49 MB

Hello @pameela, I've made a preliminary version of the requested change: "Dismissable Drupal Message".
(Please see the attached "2026-01-06T151400.gif" file for a preview of it)

Could you help by reviewing the changes and let me know if there're anything I should improve on :)

pameeela’s picture

pameeela commented
Status: Active » Needs work

@simon_who thanks, this is a great start! I don't think we want a component for this though, at least not yet. It's a good idea, but with it being dismissable, this could be a bit confusing since it just returns when you reload the page.

For the sake of simplicity/MVP, let's just go with styling the messages directly.

Just a couple other minor things:

  1. Let's not show the message heading, Olivero does this using the visually-hidden class.
  2. The warning and error styling look to be mixed up? Warning should be yellow, error red.
  3. Status should use the circle-check icon
simon_who’s picture

simon_who
Location Canberra
commented

Hello @pameela, thanks for the helpful feedback I'll amend it and come back to you.

pameeela’s picture

pameeela commented
Issue tags: +Drupal CMS stable release blocker
simon_who’s picture

simon_who
Location Canberra
commented
StatusFileSize
new 2026-01-07T091736.gif5.26 MB

Hello @pameela, I've made the following changes to address your last feedback:
1. hide message heading via "visually-hidden" class (alike Olivero theme's message)
2. swap bg/fg color for warning and error message, i.e. yellow for warning, red for error (my mistake 🤦)
3. use phosphor "check-circle" icon as icon for status/message type of Drupal message
4. removed the "message" SDC and write the message component inline of the "status-messages.html.twig"

You can preview the outcome in the new gif attached: 2026-01-07T091736.gif

simon_who’s picture

simon_who
Location Canberra
commented
Status: Needs work » Needs review
pameeela’s picture

pameeela commented

Made some minor tweaks (inverted the bg and text colours, and moved it into a misc folder since it's not an include) and also committed the updated CSS.

  • pameeela committed dd3572f9 on 1.x authored by simon_who 
    feat: #3565775 Add styling for Drupal messages

By: pameeela
By:...
pameeela’s picture

pameeela commented
Status: Needs review » Fixed

While tweaking the message styles I got a bit fixated on the breadcrumb and made some totally out of scope changes the sizing :)

Committed to 1.x!

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.