StyleHelper not working for visibility property on any component.

[nrthbound]

The StyleHelper does not work on any component when trying to use it with the visibility property.

<Text size="extraLarge" emphasis="bold" visibility={Style.default('hidden').when({viewportInlineSize: {min: 'small'}}, '')}>
    Hello, World!
</Text>

I left the last quotes blank because for some reason, the visibility property apparently only has one option, which is hidden? Not sure why that's a thing, but I've stopped questioning the decisions when related to anything in Checkout. In any event, the above doesn't work on Text, Views, or anything else when trying to hide/show something on Desktop/Mobile.

[jun-shop]

👋 StyleHelper is only available for some props e.g., position, padding, etc. on View. Not all props will be able to use this StyleHelper, visibility being one of them. You can see what props accept the StyleHelper by looking for the ~ConditionalStyle~ MaybeResponsiveConditionalStyle and MaybeConditionalStyle types (the former is restricted to viewport size conditions while the latter also takes interactive conditions like focus/hover). We'll be working on creating a way to allow you to conditionally show/hide components based on viewport size

[nrthbound]

This should be in the StyleHelper docs.

[jun-shop]

Yes, thank you for the feedback. I've added it as an item in our backlog.

[ncardeli]

hey @nrthbound 👋 We recently added a new display property that you might find useful for conditionally hiding components (available on the unstable channel)

More information here.

[nrthbound]

hey @nrthbound 👋

We recently added a new display property that you might find useful for conditionally hiding components (available on the unstable channel)

More information here.

Sounds great. I'll check it out. Thanks.

[yuvrajharod]

Thanks @ncardeli , I looked into all the resources available but couldn't find one which hepled me until I looked into this issue. I am glad it was raised earlier and you've already resolved this. I tried a lot with visibility prop on View component but for some reason, it just didn't work. I'd have tried Display property as well but for some reason, I saw the display property only had "none" and "auto"as an option previously. Today, after checking the issue, it had two more. Maybe the documentation was updated recently but yeah. Huge thanks to you guys!