Carbon: Enable single visible button on Modal component

[cragun47]

Use this template if you want to request a new feature, or a change to an
existing feature.

If you are reporting a bug or problem, please use the bug template instead.

Summary

Add capability to the Modal component where a single clickable button is shown.

Asking for design and development.

Justification

There are many use cases where a modal needs to be shown and there is only one action: acknowledge the modal. This should be done with a single clickable button. Using the X to terminate the modal is not preferred. It's use is not obvious, may be overlooked by the user, does not clearly communicate the action to be taken, infers cancelation rather than acknowledgement, and in some cases is not a familiar path to the user.

For example:

---

Job completed

Your job has completed.

[OK]

---

Example:

In such a case, a button such as OK is superior for the user and preferred by UX designers.

Consider the uploaded video of a modal displaying a progress component. When the progress is complete, the interaction needs a button of some sort to acknowledge completion.

Progress.mov.zip

Desired UX and success metrics

The full user experience is a modal is displayed and has one major button in the button area which has text and click action.

"Must have" functionality

Must haves:
Property which somehow shows only one button. The button has text and a callback.
It might be done by totally hiding (not just graying) the secondary button.

Specific timeline issues / requests

This is an issue we are currently working around by adding our own button in the body and changing CSS. We will utilize at any availability.

Available extra resources

Skills are nascent on our team. For this work we would need more help than it's worth.

[dakahn]

I want to make a note that in smaller aspect ratio's our modal takes 100% width of screen fully covering the page behind.

An acknowledgment of some one-off process when viewed in a floating container above a blurred version of whatever thing they were doing before we stole their focus could be perceived differently by the user as a full page suddenly demanding confirmation with their previous screen (task, state etc) hidden -- effectively gone.

If I'm in the middle of configuring some applications settings and midway through I'm suddenly interrupted by a full screen modal with a single option opaquely asking me to "Continue" this could be frustrating or confusing.

Good guidance and documentation around properly labeling of modal buttons can help here. 👍

_"Return to your configuration" or "Great! Take me back to my options" might be cool._

[asudoh]

@cragun47 Does this the same one as carbon-design-system/carbon#2325...? Thanks!

[stale[bot]]

We've marked this issue as stale because there hasn't been any activity for a couple of weeks. If there's no further activity on this issue in the next three days then we'll close it. You can keep the conversation going with just a short comment. Thanks for your contributions.

[stale[bot]]

As there's been no activity since this issue was marked as stale, we are auto-closing it.

[rajeev-tripathi]

We have seen some description about Single Button Model window. Can anyone confirm whether this is available, and how to achieve this?

Note: We are using below versions
"carbon-components": "^10.6.4",
"carbon-components-angular": "^3.16.3"

Here is the doc url - https://www.carbondesignsystem.com/components/modal/usage/

[emyarod]

I don't believe this has been implemented yet

[asudoh]

@emyarod Does carbon-design-system/carbon#2900 address this problem...? Thanks!

[emyarod]

if the modal usage guidelines were updated after carbon-design-system/carbon#2900 was merged then this issue still remains, otherwise the guidelines need to be updated to reflect the discussion in carbon-design-system/carbon#2900/#2325

[asudoh]

Any particular discussion in carbon-design-system/carbon#2900 or carbon-design-system/carbon#2325 that we need to make sure we take in? (Do we have an excerpt...? Thanks @emyarod!

[emyarod]

it seems we currently support 1 button modal but the button width is the full modal width (ref https://github.com/carbon-design-system/carbon/issues/2325#issuecomment-484988200) but the guidance on the website (screenshot above) states that the button should be half of the modal width @asudoh

[rajeev-tripathi]

it seems we currently support 1 button modal but the button width is the full modal width (ref #2325 (comment)) but the guidance on the website (screenshot above) states that the button should be half of the modal width @asudoh

Yes, The modal supports single button implementation, but its width is 100%. And we are trying to avoid writing any css fix/hack for this. Any help/advise is appreciated!

[asudoh]

Thank you for clarifying @emyarod - The website content you referred to contradicts with our designer's thought, and thus I think our website should be updated.