cssClass not reflected as class on icon until hover

[claudiobosticco]

SmartClient Version: v13.1p_2025-08-03/Enterprise Deployment (built 2025-08-03)

Fix confirmed, thanks!

[Isomorphic]

hi Claudio - thanks for the follow-up - this one's been fixed for today's builds, dated August 3, and later ones.

[claudiobosticco]

Hello, actually I think there's still a problem with the Disabled state:

isc.StyleSheetHandler.create({
    autoLoad: true,
    cssText: ".myIcon {color: red;} .myIconOver {color: green;} .myIconDisabled {color: yellow;} "
});

var form = isc.DynamicForm.create({
    autoDraw: false,
    items: [{
        name: "search",
        title: "Search Term",
        width: 200,
        canEdit:false,
        icons: [
            {
                name: "edit",
                src: "Edit:cssClass:myIcon;",
                showOver: true,
                showFocused: false,
                prompt: 'edit'
            }
        ]
    }]
});

isc.VStack.create({
    width: "100%",
    members: [form]
});

if you try this test case, you'll see the Disabled suffix applied to the cssclass attribute, but not to the class attribute.

[claudiobosticco]

SmartClient Version: v13.1p_2025-07-30/AllModules Development Only (built 2025-07-30)

In see it's fixed, thank you very much

[Isomorphic]

Well spotted, sir - this has been fixed for tomorrow's builds, dated July 30, and later ones.

[claudiobosticco]

SmartClient Version: v13.1p_2025-07-29/AllModules Development Only (built 2025-07-29)

Chrome, FF on MacOS

Hi, I think I’ve found a reproducible issue with this test case:

isc.StyleSheetHandler.create({
    autoLoad: true,
    cssText: ".myIcon {color: red;} .myIconOver {color: green;} "
});

var form = isc.DynamicForm.create({
    autoDraw: false,
    items: [{
        name: "search",
        title: "Search Term",
        width: 200,
        icons: [
            {
                name: "edit",
                src: "Edit:cssClass:myIcon;",
                showOver: true,
                showFocused: false,
                prompt: 'edit'
            }
        ]
    }]
});

isc.VStack.create({
    width: "100%",
    members: [form]
});

Basically, the SVG "Edit" icon doesn't apply the style until I hover over the icon itself.
From the Chrome console, I can see that initially it has cssclass="myIcon", but class="icon".
After hovering, it finally changes to class="myIcon" as expected.