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.

[claudiobosticco]

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

I can confirm that it's working now, thank you very much

[claudiobosticco]

Hi, I noticed that the notation where different states are specified in the src attribute does not work when used in FormItemIcons:

var form = isc.DynamicForm.create({
    ID: "testForm",
    autoDraw: false,
    items: [{
        name: "search",
        title: "Search Term",
        width: 200,
        icons: [
            {
                name: "edit",
                src: {
                    _base: "Edit",
                    Over: "Edit:color:yellow;",
                    Disabled: "Edit:color:red;"
                },
                inline: true,
                showOver: true,
                showDisabled: true,
                showFocused: false,
                prompt: 'edit'
            }
        ]
    }]
});

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

I see the "Edit" icon but with "icon" class applied.
On hover and when disabling the formItem, I see WARN messages in the console:

Edit:1 GET https://www-demos.smartclient.com/smartclient-13.1/isomorphic/system/reference/exampleImages/Edit 404 (Not Found)
Edit:color:yellow;:1 GET https://www-demos.smartclient.com/smartclient-13.1/isomorphic/system/reference/exampleImages/Edit:color:yellow; 404 (Not Found)
Edit:1 GET https://www-demos.smartclient.com/smartclient-13.1/isomorphic/system/reference/exampleImages/Edit 404 (Not Found)
testForm.getItem("search").setDisabled(true)
undefined
Edit:color:red;:1 GET https://www-demos.smartclient.com/smartclient-13.1/isomorphic/system/reference/exampleImages/Edit:color:red; 404 (Not Found)

[Isomorphic]

Thanks Claudio - we see the issue and will update here shortly when it's been fixed

[Isomorphic]

hi Claudio - you should find that using StockIcon/sprite-config src-strings (as opposed to real URLs) as the entries in an SCStatefulImgConfig object will now work when applied to FormItemIcon.src.

Please retest with today's build, or a later one.

[claudiobosticco]

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

Hi, it now works with the Disabled state, but it seems there are still some issues.

First, using this test case:

var form = isc.DynamicForm.create({
    ID: "testForm",
    autoDraw: false,
    items: [{
        name: "search",
        title: "Search Term",
        width: 200,
        icons: [
            {
                name: "edit",
                src: {
                    _base: "Edit",
                    //Over:"Edit:cssClass:icon;",
                    Disabled: "Edit:color:transparent;"
                },
                inline: true,
                showOver: true,
                showDisabled: true,
                showFocused: false,
                prompt: 'edit'
            }
        ]
    }]
});

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

I expected the icon in the Over state to have the iconOver class, but it doesn’t.

Second, assuming that the first point is actually by design, if I uncomment the line:

Over:"Edit:cssClass:icon;",

I see that when hovering the icon gets the iconOver class, but it doesn’t revert back to icon on mouseOut.

[Isomorphic]

hi Claudio,

Can you please explain to us what it is you're trying to do?

It seems like you're reporting every possible case of icons in use, one after another - perhaps show us your actual code.