Add support for other units in `width` addon

[maxblee]

Would you be open to adding support for units other than pixels (e.g. em) in the width addon? Adding this would help us test components with default font sizes other than 16px.

I'd think you'd keep the defaults the same and just change the type of the width options from options: { [key: string]: number } to options: { [key: string]: number | string }. That way, everything should be backwards compatible.

[tajo]

Sounds good to me

[tajo]

I misunderstood this a bit. You should be able to define your own set of breakpoints with custom labels, so I relaxed the type Meta.width so it accepts any string. However, it should always map to an absolute pixel value, since its used to set iframe's width. I don't see how em, a relative font-size to the rest of Ladle's UI, would be useful to you since you don't control it anyway.

Example of .ladle/config.mjs

export default {
  addons: {
    width: {
      options: {
        phone: 380,
        tablet: 720,
        large: 1200,
      },
      enabled: true, // the addon can be disabled
      defaultValue: 0, // 0 = no viewport is set
    },
  },
};

with my change, this will not throw a tsc error anymore, you can also redefine Meta interface to use stricter types

meta.width = "phone"