Style helper not working with TextBlock

Shopify Partner
24 2 6


I'm trying to make response UI in checkout extensions.

I wanted to set my text size based upon the viewport size.

Without using the style helper i used this

<TextBlock size="extraSmall" emphasis='bold' inlineAlignment='center'>
{'My Text'}

This is setting extraSmall size to all screen resolutions

And using style helper, i used the below code


<TextBlock size={Style.default("medium")
        .when({viewportInlineSize: {min: 'small'}}, "extraSmall")
        .when({viewportInlineSize: {min: 'medium'}}, "small")
        .when({viewportInlineSize: {min: 'large'}}, "medium")} emphasis='bold' inlineAlignment='center'>
{'My Text'}


This is not working as per what i have given and the text size has been constant (i think its taking base) in all screen resolutions..

Kindly someone share some insights pls..

Reply 1 (1)

Shopify Partner
3 0 0

This isn't working for me either when trying to hide a View or Text, using the visibility property. So far, I've only seen it work with Grid layouts and layout width. It definitely doesn't do what it claims it's supposed to do.