Feat: Add prop to disable close button

[Ke1sy]

I added a new prop for closable closable={{ disabled: true }} that allows to disable the close button.

Related issue: https://github.com/react-component/dialog/issues/417

This prop is useful when the content inside dialog includes long-running API call that is made upon clicking the “ok” button and need to prevent the user from closing the modal while the API call is still pending.
Currently there is no way to disable button while the API is still in flight.

Ref: UIEN-5893

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
dialog	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 28, 2024 9:56am

[Ke1sy]

@yoyo837 @zombieJ @MadCcc Please review. Thanks!

[codecov[bot]]

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Project coverage is 99.45%. Comparing base (a55e825) to head (fc6f5b6). Report is 7 commits behind head on master.

Additional details and impacted files

```diff @@ Coverage Diff @@ ## master #416 +/- ## ========================================== + Coverage 99.43% 99.45% +0.01% ========================================== Files 8 8 Lines 178 183 +5 Branches 54 61 +7 ========================================== + Hits 177 182 +5 Misses 1 1 ```

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

[mellis481]

@yoyo837 @zombieJ @MadCcc Bump

[Ke1sy]

@yoyo837 @zombieJ @MadCcc I resolved conflict, now it's ready for review

[zombieJ]

That's what closable do. Just:

<Dialog closable={!loading} />

which will hide the close button.

[afc163]

Is it any reasone to diable close button rather than hide it by closable={false} in your application?

[mellis481]

Is it any reasone to diable close button rather than hide it by closable={false} in your application?

@afc163 Indeed there are situations where you never want a modal to be closable (by a close button and/or mask click). There is another scenario, however, where you want a modal to closable, but also want to be able to disable close functionality. An example of this would be if you had a form in a modal or were otherwise making an async call on OK button click. In this case, a common UX would be to have a loading indicator display in the modal as the async call was processing. During this time, you wouldn't want the user to close the modal so you would want to disable the OK and CANCEL buttons. If you disable those buttons, you'd also want to disable the close button. Hiding the button in this case would not be a good UX for a number of reasons.

[afc163]

OK, making this API design closable={{ disabled: true }} would be better than disableCloseBtn.

[zombieJ]

OK, making this API design closable={{ disabled: true }} would be better than disableCloseBtn.

Is there just <Dialog disabled /> better? Since if developer patch other button in it, it will also be though not clickable. We can patch disabled prop to make Dialog pointerEvents to none for all the disable.

[yoyo837]

OK, making this API design closable={{ disabled: true }} would be better than disableCloseBtn.

Is there just <Dialog disabled /> better? Since if developer patch other button in it, it will also be though not clickable. We can patch disabled prop to make Dialog pointerEvents to none for all the disable.

I think this will lead to ambiguity.

[Ke1sy]

@zombieJ @afc163 @yoyo837 Opinions differ, so could you please clarify what is the preffered option to add this functionality?

[afc163]

closable={{ disabled: true }}

This one.

[Ke1sy]

@zombieJ @afc163 @yoyo837 Changes are added, please review.

[afc163]

bump https://github.com/react-component/dialog/releases/tag/v9.5.0