Add an insets/padding property to image layers

lukasm

Right now when creating simple icon buttons, new mos developers often tend to write the following code:

// Layout
{
  "type": "image",
  "name": "closeButton",
  "dataKey": "closeButton",
  "borderRadius": "24pt",
  "value": "asset://close.svg",
  "classes": [
    "tint"
  ],
  "constraints": [
    {
      "type": "pos",
      "x": "0",
      "y": "0"
    },
    {
      "type": "size",
      "width": "48pt",
      "height": "48pt"
    }
  ]
}
// Template
{
  "closeButton": {
    "actions": [],
    "value": "asset://close.svg"
  }
}

But this causes the image to take up the full size of the layer (48x48pt) which either looks bad (image is way too big in comparison to the touch target) or causes the person to downsize the entire layer until the image looks right (touch target becomes way too small).

Instead, one should write the code as follows, which allows the image layer to be independently resized from the container's touch target:

// Layout
{
  "type": "container",
  "name": "closeButton",
  "dataKey": "closeButton",
  "borderRadius": "24pt",
  "constraints": [
    {
      "type": "pos",
      "x": "0",
      "y": "0"
    },
    {
      "type": "size",
      "width": "48pt",
      "height": "48pt"
    }
  ],
  "children": [
    {
      "type": "image",
      "dataKey": "closeButtonIcon",
      "classes": [
        "tint"
      ],
      "constraints": [
        {
          "type": "pos",
          "x": "12pt",
          "y": "12pt"
        },
        {
          "type": "size",
          "width": "24pt",
          "height": "24pt"
        }
      ]
    }
  ]
}
// Template
{
  "closeButton": {
    "actions": []
  },
  "closeButtonIcon": {
    "value": "asset://close.svg",
  }
}

But this is quite cumbersome for such a simple button.
So by introducing an insets (or padding) property for the image layer, the actual image could be padded within the layer itself similar to the grid layer, eliminating the need for an extra layer:

// Layout
{
  "type": "image",
  "name": "closeButton",
  "dataKey": "closeButton",
  "borderRadius": "24pt",
  "value": "asset://close.svg",
  "insets": {
    "horizontal": "12pt",
    "vertical": "12pt"
  },
  "classes": [
    "tint"
  ],
  "constraints": [
    {
      "type": "pos",
      "x": "0",
      "y": "0"
    },
    {
      "type": "size",
      "width": "48pt",
      "height": "48pt"
    }
  ]
}
// Template
{
  "closeButton": {
    "actions": [],
    "value": "asset://close.svg"
  }
}

Alternatively the property could be broken down into individual vertical & horizontal properties (similar to verticalItemSpacing & horizontalItemSpacing).