Fixes: Echo icon not visible after click

Due to T343838, we need to adjust the Echo icon after clicking
so it renders consistently with Codex. This is a longstanding bug
and a slight adjustment to how we approach the icon now that Codex
and Vector 2022 use mask-image for their icons.

Bug: T373936
Change-Id: Icdb9cc49c157cb5cbf13fe1f7d5e91b7e986e92e
This commit is contained in:
Jon Robson 2024-09-04 10:41:48 -07:00 committed by Jdlrobson
parent ae6f0d5486
commit a6e4370bbd
2 changed files with 11 additions and 3 deletions

View file

@ -23,12 +23,13 @@ function init() {
// which directly sets the contents of the anchor element every update
// which would clear out any icon children that we define
if ( element.id === 'pt-notifications-alert' ) {
anchor.classList.add( 'vector-icon', 'mw-ui-icon-wikimedia-bell' );
anchor.classList.add( 'vector-icon' );
}
if ( element.id === 'pt-notifications-notice' ) {
anchor.classList.add( 'vector-icon', 'mw-ui-icon-wikimedia-tray' );
anchor.classList.add( 'vector-icon' );
}
anchor.classList.remove( 'oo-ui-icon-bell', 'oo-ui-icon-tray' );
// Workaround T343838
anchor.classList.add( 'skin-invert' );
} );
}

View file

@ -49,6 +49,13 @@
display: inline-flex;
margin: 0;
opacity: 1;
// Workaround T343838.
// The OOUI icon uses the ::after pseudo element so will not work with mask image.
// Because of this we disable the mask image rule.
/* stylelint-disable declaration-no-important */
-webkit-mask-image: none !important;
mask-image: none !important;
/* stylelint-enable declaration-no-important */
// T341490 We are incorrectly applying Codex icon and button styles on the
// same element because ULS frequently overwrites the contents of the element
// so it is too difficult to maintain the correct markup. Because we are mixing