"maxWidth" not working with defaultStyles - registerComponent

Issues
1

what are you trying to do?

Set a non-100% default maxWidth on a code component via registerComponent({ ..., defaultStyles: { maxWidth: '...' } }), so newly-instantiated instances don’t come in stretched to full container width.

Every value I’ve tried (0, null, undefined, '', 'none', '500px') is silently ignored. The Size panel always shows Max Width = 100% on instantiation. Same behavior on defaultStyles.objectFit for code components — always forced to cover.

Per the doc contract on defaultStyles in @plasmicapp/host:

Default styles to start with when instantiating the component in Plasmic.

So I’d expect the value I pass in to actually be the starting value.

what are the reproduction steps?

  1. Register any code component:

    registerComponent(MyComponent, {
  name: 'MyComponent',
  importPath: './MyComponent',
  defaultStyles: { maxWidth: 'none' }, // or any other value
  props: { /* ... */ },
});

  2. Open Plasmic Studio, drop the component onto the canvas.

  3. Open the Size section — Max Width shows 100%, not the value passed.

root cause (from source)

platform/wab/src/wab/shared/VariantTplMgr.ts ~L734:

const exp = RSH(this.ensureBaseVariantSetting(tpl).rs, tpl);
exp.set("max-width", "100%");                  // clobbers defaultStyles
if (isCodeComponent(props.component)) {
  exp.set("object-fit", "cover");              // same
}
2

Thanks for the report! We’re looking into it, and I’ll let you know when a fix has been deployed.

3

@jorge_pizzati The fix was implemented a few days ago, let me know if you’re still having any issues!

1 Like
4

It’s working as expected! Thanks for the quick resolution.

On a side-note, is there any particular reason why if a default is not set, maxWidth is initialized to “100%”?

5

I’m not sure the exact reason it was introduced, but I think it’s to avoid common overflow issues that would cause the Studio to look odd. It’s also used as a sentinel for detecting whether we’ve modified the default, though that isn’t really important.

1 Like