Removing appearence's inheritance in the mixin.

0
0

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

  • You must to post comments
0
0

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

  • You must to post comments
Showing 1 result
Your Answer

Please first to submit.