I have been making use of the image on the button component and my intention was to use an embedded svg with no fill information and have the colour set using a css filter. Rather than apply that style individually to each button I built a class in the advanced stylesheet as follows:
.psc-filter-icon-red-500 {
filter: invert(26%) sepia(71%) saturate(5171%) hue-rotate(345deg) brightness(91%) contrast(105%);
}
The problem I have is that when adding this to the image.style.classes property on the button nothing happens. I had a dig around with the dev console in chrome and I can't see a class attribute on the <img> tag at all. A further dig in the perspective code looks like it might not be properly transferring the classes over as it does with the textStyle property.
Directly applying the filter style works fine as expected but the documentation does say 'You can also specify a style class.'
In the end I have created a work around by adding > div > img to the class and putting that on the button itself but I would rather not have classes built specifically for component.
Is this a bug or am I missing something?