Skip to content

[EuiConfirmModal] Add loading state to confirm button and ownFocus for overlay mask #4411

@thomheymann

Description

@thomheymann

In order to support a recent use case I had to create my own wrapper around EuiModal. The wrapper is the same as EuiConfirmModal except that it allows passing in isLoading and ownFocus props.

  • isLoading is used to disable the confirm button and show loading spinner for async operations. An example of this are the countless confirm to delete modals in stack management.
  • ownFocus renders the modal inside an overlay mask similar to how EuiFlyout supports this.
  • When the overlay is clicked the onCancel callback is triggered to be able to easily dismiss the modal (This does not happen when isLoading prop is true to stop accidental dismissal)

Discussion:
elastic/kibana#87133 (comment)

Implementation:
https://github.com/elastic/kibana/pull/87133/files/54a5c8d206216a27fd3810e65e1a86497f1e5b6f#diff-388eb73ce6bfcf47937b361a54234a3b4bbbfd1c168310906d6196661ae50767

Metadata

Metadata

Assignees

No one assigned

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions