Modals - function mismatch

[marceltrautmann]

https://www.carbondesignsystem.com/components/modal/code

The example given is a transactional modal (evident by the two buttons), yet – per the guidance on the usage page – transaction modals should not be dismissable by clicking outside the modal. In the example given it is dismissable just like a passive modal.

Given this is a reference used by many I suggest making the example follow the same guidance to help avoid the same confusion my team just did.

[jnm2377]

Hi @marceltrautmann thanks for opening this issue. You bring up a good point. The functionality you see in our docs is coming directly from our Carbon package since ModalWrapper handles all of that already, so I'm going to transfer this issue to the /carbon monorepo since the changes need to be made there.

[jnm2377]

Note for devs: the component demo is using ModalWrapper, which handles the open/close. It seems like there should be a check to see if the modal is passive or not, and only be dismissible when you click outside if it's passive.

[asudoh]

As of today, our click-outside logic works regardless of passive/transactional mode. CC @carbon-design-system/design to see if it should be changed.

Another note is that <ModalWrapper> is a demonstration-only code (the team of very early Carbon days somehow shipped it for an unknown reason and we haven't had a chance to remove it). https://carbon-website-git-fork-asudoh-modal-code.carbon-design-system.now.sh/components/modal/code#openingclosing-modal explains the alternate approach.

[aagonzales]

I'm not sure how a <ModalWrapper> is different from the normal modal but the behaviors should be the same. A transactional modal should NOT be dismissible by clicking outside of the modal area.

[aagonzales]

It looks like the <ComposedModal> also has the same problem.

[asudoh]

Thank you for clarifying @aagonzales!

Wrt where <ModalWrapper> stands, the short answer is <ModalWrapper> is <Modal> and its launcher button combined. Why <ModalWrapper> exists is a technical topic; <Modal> and <ComposedModal> requires the launcher button implemented in application code, because not all modals come with a launcher button and providing it out-of-the-box may cause some leaky abstractions. I don't know the glory detail of <ModalWrapper> story, but it appears that the Carbon website needed a modal component with a launcher button for demonstrating modal, and they somehow decided to ship it from Carbon instead of making it website-only code.

[janchild]

@alisonjoseph Can we pls cue this up for the next sprint planning? This is a priority issue for the Watson Assistant team. Thanks!