Styling Manager auto-hide properties

[josejbracho]

I'm trying to show/hide certain properties on the styling manager depending on others, for example: only show flex related properties if flex is enabled in the component.

There is a default behaviour that works, whenever the properties are defined as lists I get the desired behaviour.

When flex is enabled, other properties are displayed:

When flex is disabled, other properties are hidden:

Inspecting the elements, I can see they get a style="display: none" that actually hides the properties.

If I switch the properties to be radios, they do not follow this behaviour anymore:

What is driving this and how can I make sure to apply it on properties that are now radio selected?

Thanks.

[artf]

Can you share a reproducible demo?

[josejbracho]

I'm not sure I am able to replicate this on a demo, it seems like the "style="display: none" is added only on those classes gjs-sm-property gjs-sm-select gjs-sm-property__align-items as an inline property but how can I make it so the radio classes also receive this? I've gone through my code but can't find any behaviour that would allow something like this.

[josejbracho]

I have found where this is triggered. Styling properties take a required prop that let's you send an object to hide/show them based on the property set here.

So setting a requires: {display: ['flex']}, on the property definition in the styleManager gets the desired behaviour.

Check this on the repo files:

grapesjs/src/style_manager/model/Property.ts

Line 56 in 3faf907

* Specifies dependency on other properties of the selected object.