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

ComposedModal is hard coded for two buttons and does not support hiding [x] #528

Closed
insasho opened this issue Feb 19, 2021 · 2 comments
Closed

Comments

@insasho
Copy link

insasho commented Feb 19, 2021

This is a feature request.

I am attempting to use a ComposedModal for the following use case:

  • When a user clicks on a tab which requires authentication, present the user a modal.
  • The modal is a barrier: the modal should not be closeable (no [X], and clicking outside should not close the dialog).
  • The user must click one of the buttons corresponding to authentication providers to proceed (e.g. "Sign in with Google", "Sign in with Twitter", ...).
  • There are three buttons.
  • I must be able to discriminate the handlers for the buttons.

This use case mirrors the Carbon Login pattern.

ComposedModal doesn't support this use case well because:

  1. While you can preventCloseOnClickOutside, the [X] cannot be disabled.
  2. The ModalFooter is hard coded for two buttons. Carbon specs for Modal suggest that more than two should be allowed.

As a workaround, I've implemented a modified version of ModalFooter which renders a ButtonSet, but this feels like something that the core components should support.

Thanks!

@metonym
Copy link
Collaborator

metonym commented Feb 21, 2021

Related #472

It looks like Carbon now supports three button modals as of version 10.29, but it's yet to be implemented in this library.

metonym added a commit that referenced this issue Jul 5, 2021
* feat(modal): support 3-button modal #528, #472

* fix(modal): "supercede" --> "supersede"

* test(modal): test secondaryButtons prop, updated click:button--secondary custom event

* docs(modal): add multiple secondary button example for ComposedModal

* docs(modal): rename example

* fix(modal): do not render secondary button if secondaryButtonText is falsy

* docs(composed-modal): add button to re-open modal
@metonym
Copy link
Collaborator

metonym commented Jul 5, 2021

Support for three button modals via the secondaryButtons prop released in v0.39

@metonym metonym closed this as completed Jul 14, 2021
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

No branches or pull requests

2 participants