maxBlockSize on View component does nothing

Extensions
1

maxBlockSize doesn’t do anything on <View/> components rendered on the order status page if they have an <Image/> as a child. It never get’s translated to a max-height css property.

The fix for now is to change from <View/> to <BlockLayout/>

2

Hi @aaron_barbieri ! Thanks for reaching out. I can reproduce your issue and have let the team know. They are working on a fix.

3

Thanks @Lianne, please keep us updated :slight_smile:

4

The fix has been deployed. Happy coding! :smiley:

5

Thanks @Lianne! Confirmed it now works. Would you mind looking into something else for me as well?

It seems like background="base" on <View/> components doesn’t reflect the color set in the “Fields and Cards” checkout setting.

For example, if you go to the default Order Status page, “Fields and Cards” is set to white and “Background 2” is set to #F2F2F2. And indeed each of the default sections has a white background. But if I put a <View background="base"/> it renders with #F2F2F2 as the background color instead of white.

Looking into it a bit, it seems like the background-color css property is correctly being set to --x-default-color-background, but in custom UI extensions it resolves to the first value (see below), which is the grayish background color.
image

Whereas in the default sections, it correctly renders as white, since the first value is undefined.
image

Long story short, this means that my UI extension can’t have a white background, and therefore doesn’t match the rest of the theme. Would love some help!

6

Forget to mention, I realize I can use the <Card/> component for the order status page, but:

  1. It doesn’t take a background prop, so it’s not individually configurable (even though it does correctly inherit “white”)
  2. "@shopify/ui-extensions-react/checkout" Doesn’t exporta Card component. So it still won’t work on thank you page.
7

Hi @aaron_barbieri ! Glad the maxBlockSize is working for you now!

If you’re trying to match the native sections on the order status page, then the <Card/> component is indeed the one you want to go with. And you’re right, it’s only available for customer account UI extensions. So you’ll need to use <View/> for any extensions on the thank you page.

If you have anymore questions, please open a new thread for them. Thanks!

8

Hi @Lianne, appreciate the response. I’ll open up a new thread then, because like I mentioned above, the <View/> component does not correctly apply the base color.