Style helper not working with TextBlock

ndt_ts
Shopify Partner
24 2 6

Hi, 

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'}
</TextBlock>

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'}
</TextBlock>

 


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..

Replies 0 (0)