Dear Team,
In the Classic-2 theme the appearance path “radiobutton”->”components”->”icon” is inherited from “icon-dark”.
"radiobutton": {
"components": {
"icon": {
"inherit": "icon-dark"
}, ...
The dimensions of the icon-dark are set to 20×20 pixels.
I my mixin I have switched the images for radiobutton and radiobutton-checked with dimensions 14×14 pixels.
Is there a way to reset the inheritance from icon-dark without changing anything else?
I tried sofar:
1) Setting inheritance to blank, but this is not working. The image dimensions are still 20×20.
"radiobutton": {
"inherit": "radiobutton",
"components": {
"icon": {
"inherit": ""
}
}
}
2) Force-sized to 14 pixels. This is working, but i do not want to hard-code the sizes.
"radiobutton": {
"inherit": "radiobutton",
"components": {
"icon": {
"states": {
"default": {
"properties": {
"width": 14,
"height": 14
}
}
}
}
}
}
3) In order to prove that icon-dark is causing the image sizes, I have re-defined the full appearance, ignoring the inheritances.
This worked also, but again, this is not a wanted solution.
"radiobutton": {
"components": {
"icon": {
"inherit": ""
},
"label": {
"states": {
"default": {
"properties": {
"marginLeft": 4
}
},
"rightAligned": {
"properties": {
"marginLeft": 0
}
}
}
}
},
"states": {
"default": {
"styles": {
"width": [ 1, 1, 1, 1 ],
"color": "transparent"
},
"properties": {
"icon": "radiobutton",
"opacity": 1
}
},
"focused": {
"styles": {
"color": "focusFrame",
"style": [ "dotted", "dotted", "dotted", "dotted" ]
}
},
"checked": {
"properties": {
"icon": "radiobutton-checked"
}
},
"disabled": {
"properties": {
"opacity": 0.5
}
},
"invalid": {
"styles": {
"color": "invalid",
"width": [ 1, 1, 1, 1 ],
"style": [ "dotted", "dotted", "dotted", "dotted" ]
}
}
}
}
Kindest Regards,
Kizaemon
Currently the mixin cannot remove the inheritance of child components (will add an enhancement request). But you can create a new appearance “my-radiobutton”, for example, and copy the states from a theme then override. This gives you total control. You can then change the AppearanceKey of your RadioButton class. If you override the AppearanceKey property, add [DefaultValue(“my-button”)] to prevent the new from being serialized.
If your image is using the SVG format you will need to specify a size since most SVGs are designed in a scalable much larger canvas, usually larger than 254×254, and Wisej changes their canvas size to match the size of the target element (cannot be the other way around other it would be a circular reference).
Please login first to submit.