search

Shopify / shopify-app-bridge

https://shopify.dev/docs/api/app-bridge
86 stars 9 forks source link

Added props to support confirmation before closing the Modal #347

Open haicaodac opened 4 months ago

haicaodac commented 4 months ago

Modal component: https://shopify.dev/docs/api/app-bridge-library/react-components/modal

Describe the feature you'd like

User story: When a user utilizes the editor to make modifications but for some reason fails to save the changes, and clicks on the close button (X), all their alterations are not saved, and they also do not receive any notification about it.

Issue: The close button (X) in the current modal of the app bridge always closes when clicked, preventing me from implementing user confirmation before closing.

Expect : Our desire is for the close button (X) to have the ability to be customized according to our needs

Describe alternatives you've considered

Suggest : The modal component can add a prop (isCustom) as a flag to indicate whether the current modal state is default or custom. The Open prop of the component is used to control the open/close state of the modal when it's in the custom state.

1, Add state: open/close 2, Add Function: onConfirmClose(state)=>boolean continue when return true image (62)

Additional context

This customizability will be very useful in the future, as the modal becomes more flexible and can be used in various scenarios.

nhocleopro commented 4 months ago

When the overlay is clicked, the modal also closes automatically. We need an event to prevent this default behavior.

image
Zetxus commented 3 months ago

This customizability will be very useful in the future, as the modal becomes more flexible and can be used in various scenarios.

I think it's a blocker to complying with the Shopify standards today as well. If you want a Built for Shopify badge, you need to comply with their standards, including this one: https://shopify.dev/docs/apps/design/app-structure#behavior :

Must Do If there are unsaved changes, prompt merchants to save before exiting full-screen mode.

However, we currently do not have a way to prompt them when exiting from variant=max modals. Am I missing something?

haicaodac commented 3 months ago

@charlesdobson Are there any updates yet? We can't get "Built for Shopify" because of this problem, we submitted 2 times and both were rejected image

liber899 commented 2 months ago

Do we have any updates on this?

charlesdobson commented 2 months ago

Hi all,

The recommendation is to use the save bar within the max modal to show Save and Discard buttons when the form is dirty: https://shopify.dev/docs/api/app-bridge-library/web-components/ui-save-bar

The App Design Guidelines will be updated to make this more clear.