Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enable single visible button on Modal component #5345

Closed
cragun47 opened this issue Jun 4, 2019 · 12 comments · Fixed by #5502
Closed

Enable single visible button on Modal component #5345

cragun47 opened this issue Jun 4, 2019 · 12 comments · Fixed by #5502
Assignees

Comments

@cragun47
Copy link

cragun47 commented Jun 4, 2019

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:
Single Modal Button

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
Copy link
Contributor

dakahn commented Jun 4, 2019

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.

2019-06-04 13_34_16-Carbon Design System - Firefox Developer Edition

@asudoh
Copy link
Contributor

asudoh commented Jun 4, 2019

@cragun47 Does this the same one as #2325...? Thanks!

@stale
Copy link

stale bot commented Jul 6, 2019

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
Copy link

stale bot commented Jul 9, 2019

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

@stale stale bot closed this as completed Jul 9, 2019
@rajeev-tripathi
Copy link

rajeev-tripathi commented Jan 20, 2020

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

image

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
Copy link
Member

emyarod commented Jan 20, 2020

I don't believe this has been implemented yet

@emyarod emyarod reopened this Jan 20, 2020
@asudoh
Copy link
Contributor

asudoh commented Jan 21, 2020

@emyarod Does #2900 address this problem...? Thanks!

@emyarod
Copy link
Member

emyarod commented Jan 21, 2020

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

@asudoh
Copy link
Contributor

asudoh commented Jan 21, 2020

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

@emyarod
Copy link
Member

emyarod commented Jan 21, 2020

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

@rajeev-tripathi
Copy link

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
Copy link
Contributor

asudoh commented Jan 21, 2020

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.

@asudoh asudoh transferred this issue from carbon-design-system/carbon Jan 21, 2020
@emyarod emyarod transferred this issue from carbon-design-system/carbon-website Feb 13, 2020
@emyarod emyarod self-assigned this Feb 13, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants