I don't see much benefit from this except if you want to style your system messages different you have to override multiple files

Do you? You can still just override the first and dont load the seccond one in that override right?

The benefit is having <div id="system-message"></div> in your html instead of <div id="system-message"> </div>
The difference is the appearance of obsolete spacing.
And due to this obsolete spacing a simply hide using #system-message:empty {display: none;} cannot be done. The obsolete spacing makes the element not empty.

Just fix fix the markup in the first file. But creating an additional file for only copy the content to the new file doesn't make much sense to me.

@HLeithner sorry... I had no intention to add the extra tabs at the beginning of the file. They have been removed with commit 1ce10bb

But the onliner <div id="system-message"><?php echo $output; ?></div> is needed to get <div id="system-message"></div> while respecting Joomla Code Style

Thank you @HLeithner for the suggestion of this easy solution. ?

Could you update the title please

JS needs updating.

Though I don't think is a good idea at all. Relying on markup to contain/not contain whitespaces is too volatile. Wouldn't use :empty until it supports whitespaces.

:empty that matches whitespace is not in any browser at the moment.
https://caniuse.com/mdn-css_selectors_empty_matches_whitespace

Though this simple else statement can help frontenders to get rid of obsolete margins.

.container-component {
  > * {
    margin-bottom: 0;
  }
  
  > * + * {
    margin-top: 1.5rem;
  }
}

#system-message:empty {
  display: none;
}

please consider merging this PR. It will benefit styling

:empty that matches whitespace is not in any browser at the moment.
https://caniuse.com/mdn-css_selectors_empty_matches_whitespace

Yes, I know.

The implementation of :empty allowing whitespace is not even close. In the meanwhile we can make Joomla for everyone and merge this PR. A lot of frontend developers would benefit.

JS needs updating.

@SharkyKZ can you explain this? Where and why does JS need to be updated?

Btw, we have code in mod_menu (maybe not anymore) with a comment that the markup shouldn't have any whit-spaces.

If needed ok but if not really necessary I'm not sure we should rely on such restriction.

maybe it would better to set a class if empty and a class if content is added with js?

@HLeithner fine by me... If I just can remove spacing when there are no alerts to be shown.
But changing js depends on js, while this PR only relies on PHP

please make a PR on mine with your suggested change

The implementation of :empty allowing whitespace is not even close. In the meanwhile we can make Joomla for everyone and merge this PR. A lot of frontend developers would benefit.

JS needs updating.

@SharkyKZ can you explain this? Where and why does JS need to be updated?

When you close the messages, the div contains whitespaces.

@SharkyKZ So the suggestion of @HLeithner to toggle a className when messages are shown or not is an option?
I don't have enough JS skills to do so, if you and / or @HLeithner can help me with it. Would be helpful.

I have tested this item ✅ successfully on e440e42

If the system message container is empty why is it rendered at all?

  <div id="system-message-container" aria-live="polite">
  	<div id="system-message"></div>
  </div>

I don't see any visible differences in front or back-end (in Firefox/Mac).

I can't find the page to inspect HTML on. Can you point it out to me?

From the path code is better, having good HTML creates a good DOM tree for JS.

@SharkyKZ So the suggestion of @HLeithner to toggle a className when messages are shown or not is an option?
I don't have enough JS skills to do so, if you and / or @HLeithner can help me with it. Would be helpful.

It's one of the options. But have you considered not using wildcard selector everywhere? Or changing Cassiopeia markup to match your CSS code?

system-message selector isn't used in JS or in our new templates (only in system ) so could probably be removed.

I have considered not using the wildcard selector. But it seems better to have proper HTML instead of fixing things with more css or javascript. The current HTML adds an obsolete space. It would be nice if we can solve the obsolete space

I have tested this PR and it still shows a margin-top of 15px, as per my issue mentioned by @richard67 ? joomla/cassiopeia#159

Sorry. Deleted that comment about mod positions

I have tested this item ✅ successfully on e440e42

RTC

This PR is a bit useless because of the reason sharky stated...

This PR is a bit useless because of the reason sharky stated...

@HLeithner So what to do? Remove RTC?

decision would be better, hans are you able to modify the alert javascript code to add/remove the class I mentioned and also add it to the php output in this PR?

@HLeithner @richard67 I would like to try to prevent adding javascript.
I have adjusted the PR so all echo HTML will be placed directly after each other. When code is added or removed using javascript all code still stick to each other without obsolete spacing.

@hans2103 Maybe you should change the title and description of this PR because there isn't any "else" statement anymore.

@HLeithner @richard67 I would like to try to prevent adding javascript.
I have adjusted the PR so all echo HTML will be placed directly after each other. When code is added or removed using javascript all code still stick to each other without obsolete spacing.

What I (and sharky) wanted to say is that the system-messages are also handled in Javascript https://github.com/joomla-projects/custom-elements/blob/master/src/js/alert/alert.js

@SharkyKZ
When you close the messages, the div contains whitespaces.

so if you clean the PHP code you will still have a whitespace explained by skarky (didn't tested it my self)

so if you clean the PHP code you will still have a whitespace explained by skarky (didn't tested it my self)

I don't think so.
The error output generated by my PR is as follows

<div id="system-message-container" aria-live="polite"><div id="system-message"><joomla-alert type="error" dismiss="true"><div class="alert-heading"><span class="error"></span><span class="sr-only">error</span></div><div class="alert-wrapper"><div class="alert-message">**some kind of error message**</div></div></joomla-alert></div></div>

When the message is removed by clicking the x the entire block will collapse to:

<div id="system-message-container" aria-live="polite"></div>

(I have tested this)

As you can see there is no obsolete space within this element. And that is what I want to achieve. No obsolete space.
And this can be achieved without adding javascript

To reproduce, edit/save an article.

@Quy
solved the issue with commit 88f1568 by changing

$msgOutput[] = '<joomla-alert type="' . $alert[$type] ?? $type . '" dismiss="true">';

into

$msgOutput[] = '<joomla-alert type="' . ($alert[$type] ?? $type) . '" dismiss="true">';

@hans2103 Drone javascript-cs: https://ci.joomla.org/joomla/joomla-cms/36799/1/23

I see the message... but there are no JS changes in this PR.

@hans2103 Maybe it helps if you update the branch to latest 4.0-dev?

merged with latest changes from 4.0-dev

merged with latest changes from 4.0-dev

Seems it helped ?

I have tested this item ✅ successfully on c498183

I have tested this item ✅ successfully on c498183

RTC

Thanks!

?‍♂️

@SharkyKZ It's bad? Have I missed some open discussion? If so, could you make a new issue for it?

Hmm, I see, it was hidden by default because too long comment history.

@HLeithner Shall we roll back?

@SharkyKZ wrote: #30760 (comment)

system-message selector isn't used in JS or in our new templates (only in system ) so could probably be removed.

In Joomla 3 the file media/plg_installer_webinstaller/js/client.js line 81 makes a reference to #system-message.
And there are some css references to this id.

In Joomla 4 there is no Javascript reference to #system-message anymore.
Might this div element with id = system-message be obsolete?
I'll create a new PR to perform some house cleaning.

PR #31195 created to remove obsolete div element with id = system-message and remove obsolete css referring to this element.