Modal element does not support StyleHelper

[catalin-invisible]

Please list the package(s) involved in the issue, and include the version you are using

"@shopify/checkout-ui-extensions-react": "^0.27.3"

Describe the bug

I'm trying to make the size prop of the Modal element dynamic:

<Modal size={Style.default('large').when({ viewportInlineSize: { min: 'medium' } }, 'max')}>

but it doesn't actually work.

When I'm trying this approach with other elements like View, Grid, the StyleHelper works just fine.

Steps to reproduce the behavior:

In a basic Checkout UI Extension, add a Modal component:

<Modal size={Style.default('large').when({ viewportInlineSize: { min: 'medium' } }, 'max')}>
    <View padding="extraLoose">Modal content</View>
</Modal>

Expected behavior

When size is statically set with size="max":

<Modal size="max">
    <View padding="extraLoose">Modal content</View>
</Modal>

The modal shows up normally on a 1920px screen width:

However, when it is set with a dynamic value

<Modal size={Style.default('max')}>
    <View padding="extraLoose">Modal content</View>
</Modal>

it shows up differently:

[simontaisne]

Hello @catalin-invisible, thanks for your report. The Modal size prop doesn't support responsive conditional styles, but it should already adapt responsively to the screen size.