Skip to content

Pending Review

Pending Review from User Experience (UX)

Confirm Dialog Component

Overview

The PWC Confirm Dialog component provides a modal confirmation interface for critical user actions that require explicit approval before proceeding. It features customizable messaging, action buttons with different variants, error handling with toast notifications, and async operation support with loading states to ensure users make informed decisions about potentially destructive or important operations.

Core Capabilities

  • Modal Confirmation Interface - Blocking dialog that requires explicit user action before proceeding with critical operations or destructive actions
  • Customizable Action Buttons - Configurable action labels and button variants (primary, secondary, danger) to match the severity and context of the confirmation
  • Async Operation Support - Built-in handling for asynchronous operations with loading states, success callbacks, and error management
  • Error Display Integration - Integrated toast notification system for displaying operation errors without closing the confirmation dialog
  • Flexible Content Structure - Customizable heading, hint, and prompt content to provide clear context about the action being confirmed
  • Event-Driven Architecture - Comprehensive event system for handling confirmation, cancellation, and operation result callbacks

When to use Confirm Dialog:

  • Request user confirmation before destructive actions like deleting data, removing users, or clearing important information
  • Confirm critical operations that cannot be easily undone such as publishing content, processing payments, or system changes
  • Validate user intent for operations with significant consequences or that affect multiple users or system states
  • Provide clear warning and context for actions that might have unexpected or far-reaching effects

When not to use Confirm Dialog:

  • Simple form submissions or routine operations that don't require explicit confirmation (use standard buttons instead)
  • Frequent actions that would create confirmation fatigue and reduce user experience quality
  • Operations that can be easily undone or reversed without significant consequences or data loss

Basic Implementation

import React, { useState } from 'react';
import { PwcConfirmDialog, PwcButton } from "@progress-i360/pwc-react";

function DeleteConfirmation() {
  const [showDialog, setShowDialog] = useState(false);

  const handleConfirm = (event: CustomEvent) => {
    setTimeout(() => {
      console.log('Item deleted');
      event.detail.success();
    }, 1000);
  };

  return (
      <>
        <PwcButton 
          label="Delete Item" 
          variant="primary"
          onClick={() => setShowDialog(true)} 
        />

        <PwcConfirmDialog
          open={showDialog}
          heading="Delete Item"
          prompt="Are you sure you want to delete this item?"
          actionLabel="Delete"
          actionVariant="primary"
          onPwcConfirm={handleConfirm}
          onPwcClose={() => setShowDialog(false)}
        />
      </>
  );
}

import { useState } from 'react';
import '@progress-i360/progress-web-components/confirm-dialog';
import '@progress-i360/progress-web-components/button';

function AccountActions() {
  const [showDialog, setShowDialog] = useState(false);
  const [action, setAction] = useState('');

  const handleAction = (actionType) => {
    setAction(actionType);
    setShowDialog(true);
  };

  const handleConfirm = (event: CustomEvent) => {
    setTimeout(() => {
      console.log(`Account ${action} completed`);
      event.detail.success();
    }, 1000);
  };

  return (
      <>
        <div style={{ display: 'flex', gap: '8px' }}>
          <pwc-button 
            label="Deactivate Account" 
            variant="outline"
            onPwcClick={() => handleAction('deactivate')} 
          ></pwc-button>
          <pwc-button 
            label="Delete Account" 
            variant="primary"
            onPwcClick={() => handleAction('delete')} 
          ></pwc-button>
        </div>

        <pwc-confirm-dialog
          open={showDialog}
          heading={`${action} Account`}
          prompt={`Are you sure you want to ${action} this account?`}
          actionLabel={action}
          actionVariant="primary"
          onPwcConfirm={handleConfirm}
          onPwcClose={() => setShowDialog(false)}
        ></pwc-confirm-dialog>
      </>
  );
}

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import "@progress-i360/progress-web-components/confirm-dialog";
import "@progress-i360/progress-web-components/button";

@Component({
  selector: 'confirm-dialog-demo',
  template: `
    <div style="max-width: 500px; margin: 0 auto; padding: 20px;">
      <h3>Confirm Dialog Demo</h3>
      <p>Click actions to trigger confirmation dialogs</p>

      <div style="display: flex; gap: 12px; margin: 20px 0;">
        <pwc-button 
          label="Delete Item" 
          variant="danger"
          (pwc-click)="showDeleteDialog()">
        </pwc-button>
        <pwc-button 
          label="Clear Data" 
          variant="secondary"
          (pwc-click)="showClearDialog()">
        </pwc-button>
      </div>

      <pwc-confirm-dialog
        [open]="showDialog"
        [heading]="dialogConfig.heading"
        [prompt]="dialogConfig.prompt"
        [actionLabel]="dialogConfig.actionLabel"
        [actionVariant]="dialogConfig.actionVariant"
        (pwc-confirm)="handleConfirm($event)"
        (pwc-close)="closeDialog()">
      </pwc-confirm-dialog>

      <div *ngIf="lastResult" 
           style="margin-top: 16px; padding: 12px; background: #f0f0f0; border-radius: 4px;">
        <strong>Last Result:</strong> {{ lastResult }}
      </div>
    </div>
  `,
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class ConfirmDialogDemo {
  showDialog = false;
  lastResult = '';

  dialogConfig = {
    heading: '',
    prompt: '',
    actionLabel: '',
    actionVariant: 'primary'
  };

  showDeleteDialog(): void {
    this.dialogConfig = {
      heading: 'Confirm Delete',
      prompt: 'Are you sure you want to delete this item? This action cannot be undone.',
      actionLabel: 'Delete',
      actionVariant: 'danger'
    };
    this.showDialog = true;
  }

  showClearDialog(): void {
    this.dialogConfig = {
      heading: 'Clear All Data',
      prompt: 'This will remove all data from the system. Are you sure?',
      actionLabel: 'Clear Data',
      actionVariant: 'primary'
    };
    this.showDialog = true;
  }

  handleConfirm(event: CustomEvent): void {
    // Simulate async operation
    setTimeout(() => {
      this.lastResult = `${this.dialogConfig.actionLabel} completed successfully`;
      event.detail.success();
    }, 1500);
  }

  closeDialog(): void {
    this.showDialog = false;
  }
}

// Create confirmation dialog with async handling
const confirmDialog = document.createElement('pwc-confirm-dialog');
confirmDialog.setAttribute('heading', 'Delete Item');
confirmDialog.setAttribute('prompt', 'Are you sure you want to delete this item?');
confirmDialog.setAttribute('actionLabel', 'Delete');
confirmDialog.setAttribute('actionVariant', 'primary');

// Create trigger button
const deleteButton = document.createElement('button');
deleteButton.textContent = 'Delete Item';
deleteButton.addEventListener('click', () => {
  confirmDialog.open = true; // Show dialog
});

// Handle confirmation with success/failure callbacks
confirmDialog.addEventListener('pwc-confirm', (event) => {
  setTimeout(() => {
    // Simulate async operation
    const success = Math.random() > 0.2;
    if (success) {
      event.detail.success(); // Close dialog on success
      console.log('Item deleted successfully');
    } else {
      event.detail.failure({
        heading: 'Delete Failed',
        message: 'Unable to delete item. Please try again.'
      });
    }
  }, 1000);
});

// Handle dialog close
confirmDialog.addEventListener('pwc-close', () => {
  confirmDialog.open = false;
});

document.body.appendChild(deleteButton);
document.body.appendChild(confirmDialog);

Usage Patterns

  • Destructive Action Confirmation - Use for delete operations, data clearing, or irreversible changes that require explicit user acknowledgment before proceeding
  • Critical Operation Validation - Implement for high-impact actions like publishing content, processing payments, or system configuration changes
  • Batch Operation Confirmation - Confirm bulk operations that affect multiple items or users with clear indication of scope and consequences
  • State Change Verification - Validate transitions between important system states such as activating/deactivating accounts or changing permissions

Best Practices

Content Strategy Guidelines

  • Clear Action Description - Use specific, descriptive language that clearly explains what will happen when the user confirms the action
  • Consequence Communication - Explicitly state whether the action is reversible and what data or functionality will be affected
  • Context-Appropriate Tone - Match the dialog tone to the severity of the action, using more formal language for critical operations
  • Actionable Button Labels - Use verb-based labels that describe the specific action rather than generic terms like "OK" or "Submit"

Performance Optimization

  • Async Operation Handling - Implement proper loading states and timeout handling for network operations to prevent user confusion
  • Error Recovery Patterns - Design error states that allow users to retry operations or understand what went wrong without losing context
  • State Management - Efficiently manage dialog state to prevent memory leaks and ensure proper cleanup after operations complete
  • Event Delegation - Use efficient event handling patterns to minimize performance impact when multiple confirmation dialogs are present

Integration Architecture

  • Consistent Error Handling - Implement standardized error response patterns that work across different types of operations and API endpoints
  • Accessibility Compliance - Ensure proper focus management, keyboard navigation, and screen reader support for critical confirmation flows
  • Localization Support - Design confirmation messages and button labels to work with internationalization systems and different languages
  • Audit Trail Integration - Consider logging confirmation actions for security, compliance, and debugging purposes in production systems

Common Use Cases

Data Management Operations

  • Confirm deletion of records, files, or user accounts with clear warnings about data loss and recovery options
  • Validate bulk operations like mass updates, exports, or imports that affect large datasets or system performance
  • Request confirmation for data archiving or purging operations that move information to different storage systems

User Account Management

  • Confirm account deactivation, role changes, or permission modifications that affect user access and capabilities
  • Validate password resets, security setting changes, or two-factor authentication modifications for security compliance
  • Request approval for account merging, migration, or transfer operations that affect user data ownership

System Administration Tasks

  • Confirm system maintenance operations like database resets, cache clearing, or configuration changes that affect all users
  • Validate deployment operations, rollbacks, or environment changes that impact application availability
  • Request confirmation for integration updates, API key changes, or third-party service modifications

Troubleshooting

Common Issues

Dialog Not Opening

Problem: Confirm dialog doesn't appear when triggered or remains invisible despite open property being set to true.

Solution:

  • Verify that the open property is properly bound and updated. Check that the dialog component is correctly imported and initialized. Ensure that CSS z-index values don't interfere with modal display.

Confirmation Events Not Firing

Problem: Confirm or cancel events don't trigger or event handlers don't receive expected callback functions.

Solution:

  • Check that event listeners are properly attached using the correct event names (pwc-confirm, pwc-close). Verify that event detail contains success and failure callback functions. Ensure that event propagation isn't being stopped by parent components.

Async Operation Errors

Problem: Loading states don't display correctly or operations fail without proper error handling.

Solution:

  • Confirm that success and failure callbacks are called appropriately in async operations. Check that error objects match the expected FormError interface structure. Verify that loading states are properly managed during async operations.

Button Styling Issues

Problem: Action buttons don't display with correct variants or styling appears inconsistent.

Solution:

  • Verify that actionVariant property uses valid button variant values (primary, secondary, danger, etc.). Check that button styling CSS is properly loaded and applied. Ensure that custom button variants are supported by the underlying button component.

Implementation Support

  • Comprehensive Event System - Complete callback architecture with success and failure handlers for robust async operation management
  • Flexible Content Configuration - Customizable heading, prompt, and button content with support for different action contexts and severity levels
  • Integrated Error Handling - Built-in toast notification system for displaying operation errors while maintaining dialog context and user flow

Resources

Storybook Documentation

For comprehensive API documentation, interactive examples, and testing tools: 📖 View Complete API Documentation in Storybook →

This guide provides high-level implementation guidance. For detailed API specifications and interactive examples, visit our Storybook documentation.