I have tested this item ✅ successfully on 1084d20

I have tested this item ✅ successfully on 1084d20

Ready to Commit after two successful tests.

I've removed the RTC label as I realised that I was pushing the wrong code here. This PR now restores the alert element to the state of pre Grunt kill PR. As a bonus the alerts on save are green instead of blue.

@Anu1601CS @astridx can you please test again?

@dgt41 yeah

Joomla statistics message still transparent.

And Popular Articles and Recently Added Articles have no background color.

@Anu1601CS for popular and Recently there is a bug in the html, we pass type attribute but the alerts expect level: so this <joomla-alert type="warning"> will not work but this will <joomla-alert level="warning">.
Same for the plugin system/stats

So , you change level to type .

Yes, it seems that most entries were with attribute type not level so I reverted all the level to type

So, all changes are done?. If yes then I can test this patch.

@Anu1601CS go ahead

I have tested this item ✅ successfully on 4c9325e

I have tested this item ✅ successfully on 4c9325e

After apply the path: When saving an article or saving the global configuration I see an message with a background that is is not transparent.

RTC

@dgt41 am I ever going to be able to pursuade you about that line of code? Lol

not for the current codebase, this is already dead code! @ciar4n and me already working on the new design and the updated specs and I guess we can remove that there. Although alerts should strictly be info, warning, success and error, at least in my book...

Yes, I agree they should, but what I'm saying is, we should only check if a value doesn't exist exists:

if (!newValue) {

not check if it matches one of our predefined styles:

if (!newValue || newValue && ['info', 'warning', 'danger', 'success'].indexOf(newValue) === -1) {

@dgt41
Unsuccessful here for <joomla-alert type="info"> i.e. the text does not display.
we get a display:none;

I do get the text though if I use
<joomla-alert[type="info"]
but no colour, no background.

In the image below the blue colour comes from the highlighting

Looks like the JS isnt being loaded or there's a console log error then. Which view are you testing on?

On a non-multilingual site, I display –as the screenshot shows– the multilangstatus module in its popup.
The js file is loaded

Console shows

Custom Elements: `Element#attachShadow` was not patched.
webcomponents-ce.min.js:1:7969

@infograf768 can you check if the css is loaded? How did you applied the patch?

The warning is ok and it’s coming from the polyfill, so you are testing this with Firefox

Yes I use Firefox as usual

If it works with your alternate method then the custom element is defaulting to a span tag, which means the alert-es5.min.js file probably isnt being loaded at all. The console log notice you have comes frim the polyfill

Firefox is not loading es5. The error is either wrong html code (he mentioned that there is a correct tag) or the css. So in this case should be css. Please probably caching (using the old css which expected level=“info” instead of type

It does not work with the alternate method, it just barely displays the text.

alert-es5.min.js (whatever that is) is not loaded indeed
Here is what is loaded:

Same result with Safari and Chrome (both could not use a cache as there were used for the first time)

Can you give me steps to replicate this, makes 0 sense trying to guess here

Easy enough
Install a clean site (not multilingual.
In the Module Manager filter by administrator.
Publish the Multilingual Status module

Then click on its icon. It will trigger the popup

the code used is
https://github.com/joomla/joomla-cms/blob/4.0-dev/administrator/components/com_languages/tmpl/multilangstatus/default.php#L18-L23

FYI: these are the CSS loaded

@infograf768 there you go, apply latest commit:
before

after

PS the problem was that for the component.php we didn't load the alert element

Works fine now.

Nice work guys :)