Cannot Control Width of Modal Overlay

adityaagashe1 commented 1 year ago

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

We're using "@shopify/checkout-ui-extensions-react": "^0.24.0",

Describe the bug

We're trying to use Modal Overlay for to present some information about our app. Unfortunately, we're not able to control the width of the Modal dialog. It can be reproduced with very simple code. Look at the following image.

Steps to reproduce the behavior:

<Link
                            id='sp-learn-more-link'
                            overlay={
                              <View maxInlineSize={180}>
                                <Modal accessibilityLabel='Learn More Modal'>
                                  <TextBlock>We have a 30-day return policy,</TextBlock>
                                  <TextBlock>To be eligible for a return,</TextBlock>
                                </Modal>
                              </View>
                            }

    />

Expected behavior

Be able to control the width of the Modal container maybe by providing property or in some other way.

Screenshots

Our component gets rendered like following. It doesn't look very good

Additional context

ncardeli commented 1 year ago

hey @adityaagashe1 👋 Thanks for bringing this up. We are working on adding a property to allow devs to set the dimensions of the modal. We expect it to be available soon. Stay tuned!

chienit3bk commented 1 year ago

and how about position of modal?

cdarland commented 1 year ago

and how about position of modal?

Hey @chienit3bk, we don't currently offer any Modal positioning props. To maintain a clean separation between these two do you mind submitting your request for modal position as a new issue along with some context for the team to review? This way we can provide the best guidance possible. Based on your needs the Popover component might be the best UX option.

cdarland commented 1 year ago

Adding to current Show & Tell project scope as a stretch goal

dani-sanomads commented 1 year ago

@ncardeli I want to share something about modal component. The cross icon requires some padding to be clickable. Suppose we have an image on the top of the modal. The image will be overlapped completely on the cross icon if padding is not given for mobile and partially for desktops. Here is the image with modal padding attribute on mobile.

cdarland commented 1 year ago

Thanks for noting that and providing an example @dani-sanomads!

We have an issue related to this in our backlog at the moment: https://github.com/Shopify/checkout-web/issues/17998

rv15hwakarthik commented 1 year ago

hi @ncardeli, do we have any update on this? We have a similar use-case but I don't see any props available yet. But I see few websites being able to do it. Can someone help here please?

chienit3bk commented 10 months ago

Hi @cdarland, are there any update on this, I still not see width props at Modal component https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/components/overlays/modal

jun-shop commented 5 months ago

Thanks for your patience! We're still considering it and it's in our backlog

Shopify / ui-extensions