cssClass not reflected as class on icon until hover

[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.

[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-30/AllModules Development Only (built 2025-07-30)

In see it's fixed, thank you very much

[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.

[Isomorphic]

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

[claudiobosticco]

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

Fix confirmed, thanks!

[claudiobosticco]

SmartClient Version: v13.1p_2025-09-21/Enterprise Deployment (built 2025-09-21)

Hi, I noticed that the Disabled style is still not being applied to the SVG icon when using setDisabled(true) on the form or on the formItem.

Please try the following test case:

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

var form = isc.DynamicForm.create({
    ID: "testForm",
    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]
});

when running testForm.setDisabled(true) or testForm.getItem("search").setDisabled(true), the Disabled suffix is not added to the myIcon style.

[claudiobosticco]

By the way, I realized this because I would like to add a style with a transparent color to make the icon "disappear" when disabled. Currently there’s no way to do this, right?

[Isomorphic]

hi Claudio,

We've fixed this issue for tomorrow's builds, dated September 23 and later.

The cssClass will now have "Disabled" appended as necessary - note that you'll need to set showDisabled: true on your icon.