[claudiobosticco]

Hi, as mentioned in post #8, I want to hide the FormItemIcon when the formItem is disabled.
For now, I’ve only done some tests in the showcase.

At first, I thought about using a custom style.
Then, while reviewing the docs, I remembered that there’s also the option to use an SCStatefulImgConfig object, so I thought I’d give it a try.

But I’ve never used it before. Now that I’m reviewing the documentation, it turns out to be even more flexible than I remembered.
For example, I see there are prefixes like #state: and #modifier, which are really powerful and flexible.

However, it seems that I must explicitly declare the Over state. I just don’t understand how: I’d simply like the Over to behave normally, i.e., using iconOver.
But if I use Over:"Edit:cssClass:icon;", then it applies class="iconOver" when I hover, but it doesn’t switch back to class="icon" on mouseOut.

[Isomorphic]

Ah, great, thanks for the detail.

You're quite right - SCStatefulImgConfig was not working in FormItemIcons, and that was for two reasons - 1) FormItem wasn't extracting the proper state from the object, prior to considering its StockIcon mapping. And 2), an internal process, Canvas._updateIcon(), updates elements in-place, and it was replacing the StockIcon but not the other config in the string (that is, the bit after the first colon in "Edit:color:red;").

Yes, those prefix states in the config object are indeed useful - they were intended for file-URLs, but they ought to work here as well. We'll make sure that's true for tomorrow's builds.

In the meantime, if you want to hide icons in a disabled item, you can do that - we don't recommend it, because disappearing icons removes context for users, but if you really want to do that, this will do it:

// On the icon itself - it might seem like this should work, but we don't provide arbitrary settings like
// "disabled" on targets in the ruleScope - we will be adding a ruleContext accessor, something like
// isDisabled.<i>componentId</i>, but that won't be in the next day or two. So this will not work:
//visibleWhen: { fieldName: "form.disabled", value: false },

// however, this will work, on the icon
showIf : function (form, item) {
    if (item.disabled || (item.disabled == null && form.disabled)) return false;
    return true;
},

// but, right now, it requires the item to be refreshed on state-change
updateState : function () {
    this.Super("updateState", arguments);
    this.redraw();
},

[Isomorphic]

Out of interest, on this: "if I use Over:"Edit:cssClass:icon;", then it applies class="iconOver" when I hover, but it doesn’t switch back to class="icon" on mouseOut."...

Just set cssClass:icon on the _base image as well, and it will change back

Note that you can also set a specific state class, like iconOver, and also set statefulClass:false, and it'll just use the class you mentioned.