Skip to content

Pending Review

Pending Review from User Experience (UX)

Task List Component

Overview

The PWC Task List component provides a structured interface for displaying sequential workflows, process steps, or hierarchical task information with expandable content sections. It features visual progress indicators, status tracking, elapsed time display, and collapsible content areas that help users understand complex processes and track completion states effectively.

Core Capabilities

  • Sequential Task Display - Organized vertical layout with visual connectors that clearly show task relationships and workflow progression
  • Status Indicators - Comprehensive status system with working, success, warning, and error states using color-coded icons and visual feedback
  • Expandable Content Areas - Collapsible sections using named slots that allow detailed information display while maintaining interface cleanliness
  • Time Tracking Integration - Built-in elapsed time display with automatic formatting for minutes and seconds to track task duration
  • Interactive Expansion Control - Click-to-expand functionality with chevron indicators and disabled state management for controlled access
  • Visual Progress Connection - Dynamic divider positioning that connects task icons to create clear visual workflow representation

When to use Task List:

  • Display multi-step workflows, processes, or sequential operations that users need to understand or monitor
  • Show task completion status in project management interfaces, deployment pipelines, or approval workflows
  • Create expandable sections for detailed information while maintaining overview clarity and navigation simplicity
  • Implement guided processes where users need to see progress and access detailed steps or results

When not to use Task List:

  • Simple lists that don't require status tracking or expandable content (use standard list components instead)
  • Non-sequential information that doesn't follow a workflow pattern or logical progression
  • Content that should always be visible without expansion controls or interactive disclosure patterns

Basic Implementation

import React from 'react';
import { PwcTaskList } from "@progress-i360/pwc-react";

function WorkflowTasks() {
  const tasks = [
    {
      heading: "Setup Environment",
      hint: "Configure development environment",
      name: "setup",
      icon: "settings",
      elapsedSeconds: 120,
      status: "success"
    },
    {
      heading: "Run Tests",
      hint: "Execute test suite", 
      name: "tests",
      icon: "checkmark",
      elapsedSeconds: 45,
      status: "working"
    },
    {
      heading: "Deploy",
      hint: "Deploy to production",
      name: "deploy",
      icon: "rocket",
      disabled: true
    }
  ];

  return (
      <PwcTaskList tasks={tasks}>
        <div slot="setup">Environment configured successfully</div>
        <div slot="tests">Running automated tests...</div>
        <div slot="deploy">Deployment pending test completion</div>
      </PwcTaskList>
  );
}

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

function ProjectPipeline() {
  const [tasks, setTasks] = useState([
    {
      heading: "Code Review",
      hint: "Review submitted changes",
      name: "review",
      icon: "view",
      elapsedSeconds: 300,
      status: "success"
    },
    {
      heading: "Build Process",
      hint: "Compile and package application",
      name: "build",
      icon: "cube",
      elapsedSeconds: 180,
      status: "working"
    },
    {
      heading: "Quality Checks",
      hint: "Run security scans",
      name: "quality",
      icon: "security",
      elapsedSeconds: 90,
      status: "error"
    }
  ]);

  const updateStatus = (taskName: string, newStatus: string) => {
    setTasks((prev) =>
      prev.map((task) =>
        task.name === taskName ? { ...task, status: newStatus } : task
      )
    );
  };

  return (
    <pwc-task-list tasks={tasks}>
      <div slot="review" style={{ padding: '16px' }}>
        <p>✅ Code review completed successfully</p>
      </div>

      <div slot="build" style={{ padding: '16px' }}>
        <p>⚠️ Build in progress...</p>
        <pwc-button
          label="View Logs"
          variant="outline"
          onPwcClick={() => updateStatus('build', 'success')}
        ></pwc-button>
      </div>

      <div slot="quality" style={{ padding: '16px' }}>
        <p>❌ Quality checks failed</p>
        <pwc-button
          label="Retry"
          variant="primary"
          onPwcClick={() => updateStatus('quality', 'working')}
        ></pwc-button>
      </div>
    </pwc-task-list>
  );
}

import { Component, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
import "@progress-i360/progress-web-components/task-list";
import "@progress-i360/progress-web-components/flex";
import "@progress-i360/progress-web-components/body";
import "@progress-i360/progress-web-components/button";

@Component({
  selector: 'task-list-demo',
  template: `
    <pwc-task-list [tasks]="tasks">
      <pwc-flex slot="planning" direction="column" gap="s" padding="s">
        <pwc-body content="Project planning phase with detailed requirements analysis."></pwc-body>
        <pwc-button label="View Details" variant="outline" (pwc-click)="viewPlanDetails()"></pwc-button>
      </pwc-flex>
      <pwc-flex slot="development" direction="column" gap="s" padding="s">
        <pwc-body content="Active development phase with coding and testing."></pwc-body>
        <pwc-body [content]="'Progress: ' + devProgress + '%'"></pwc-body>
      </pwc-flex>
      <pwc-flex slot="testing" direction="column" gap="s" padding="s">
        <pwc-body content="Quality assurance and user acceptance testing."></pwc-body>
      </pwc-flex>
      <pwc-flex slot="deployment" direction="column" gap="s" padding="s">
        <pwc-body content="Production deployment and monitoring setup."></pwc-body>
      </pwc-flex>
    </pwc-task-list>
  `,
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class TaskListDemo {
  devProgress = 75;

  tasks = [
    {
      heading: 'Project Planning',
      name: 'planning',
      icon: 'list',
      status: 'success',
      elapsedSeconds: 180,
      hint: 'Requirements gathering and project scope definition'
    },
    {
      heading: 'Development',
      name: 'development',
      icon: 'code',
      status: 'working',
      elapsedSeconds: 3600,
      hint: 'Active development and implementation phase'
    },
    {
      heading: 'Testing',
      name: 'testing',
      icon: 'check-circle',
      status: 'warning',
      elapsedSeconds: 900,
      hint: 'Quality assurance and bug fixes'
    },
    {
      heading: 'Deployment',
      name: 'deployment',
      icon: 'rocket',
      disabled: true,
      hint: 'Production deployment pending testing completion'
    }
  ];

  viewPlanDetails() {
    this.devProgress += 5;
  }
}

// Create task list with workflow steps
const taskList = document.createElement('pwc-task-list');

// Define tasks with status and timing
const tasks = [
  { 
    heading: 'Setup', 
    name: 'setup', 
    icon: 'settings',
    status: 'success',
    elapsedSeconds: 45,
    hint: 'Environment configuration complete'
  },
  { 
    heading: 'Testing', 
    name: 'testing', 
    icon: 'checkmark',
    status: 'working',
    elapsedSeconds: 120,
    hint: 'Running automated tests'
  }
];
taskList.tasks = tasks;

// Create slotted content for each task
const setupContent = document.createElement('div');
setupContent.setAttribute('slot', 'setup');
setupContent.textContent = 'Configuration completed successfully ✓';

const testContent = document.createElement('div');
testContent.setAttribute('slot', 'testing');
testContent.textContent = 'Tests in progress... 3/5 passed';

taskList.appendChild(setupContent);
taskList.appendChild(testContent);
document.body.appendChild(taskList);

Usage Patterns

  • Workflow Visualization - Display sequential processes like deployment pipelines, approval workflows, or multi-step configurations with clear status indicators
  • Progress Tracking - Show completion status for complex operations with expandable details for troubleshooting and monitoring capabilities
  • Process Documentation - Create interactive guides for procedures where users need step-by-step information with collapsible detailed instructions
  • Status Dashboards - Build monitoring interfaces for system processes, batch jobs, or automated tasks with real-time status updates

Best Practices

Content Strategy Guidelines

  • Logical Sequencing - Organize tasks in chronological or dependency order to help users understand workflow progression and relationships
  • Clear Status Communication - Use descriptive headings and hints that clearly indicate task purpose and current state without ambiguity
  • Meaningful Time Display - Show elapsed time only when relevant to user understanding of process duration and performance expectations
  • Contextual Content Expansion - Place detailed information, logs, or actions in expandable sections to maintain interface cleanliness while providing access to necessary details

Performance Optimization

  • Lazy Content Loading - Load expandable content only when sections are expanded to reduce initial render time and memory usage
  • Efficient Status Updates - Implement optimized state management to update only changed tasks rather than re-rendering entire lists
  • Debounced Interactions - Use debounced expansion controls to prevent rapid state changes and maintain smooth user interactions
  • Dynamic Divider Positioning - Optimize visual connector calculations to minimize layout recalculations during task updates

Integration Architecture

  • Event-Driven Updates - Design task status changes to work with external data sources and real-time updates through proper event handling
  • Accessible Interactions - Implement proper ARIA attributes and keyboard navigation for screen reader compatibility and inclusive design
  • Flexible Content Architecture - Use slot-based content system to accommodate different types of task details and custom content requirements
  • State Persistence - Consider implementing state persistence for expanded sections and task progress across user sessions

Common Use Cases

DevOps Pipelines

  • Create deployment pipeline visualizations with build, test, and deployment stages showing real-time status and detailed logs
  • Implement CI/CD workflow tracking with expandable sections for build output, test results, and deployment verification
  • Build release management interfaces with approval steps, environment deployments, and rollback procedures with clear status indicators

Project Management Workflows

  • Design task completion tracking for project milestones with expandable sections for deliverables and team member assignments
  • Create approval workflows with sequential review steps, comments, and decision tracking for document or design approvals
  • Implement onboarding checklists with expandable guidance sections and completion tracking for new employee orientation

System Administration Tasks

  • Build maintenance procedure interfaces with sequential steps for system updates, backups, and configuration changes
  • Create monitoring dashboards for automated processes with expandable error details and resolution guidance
  • Implement troubleshooting workflows with diagnostic steps, test results, and resolution tracking for systematic problem solving

Troubleshooting

Common Issues

Tasks Not Expanding

Problem: Task content doesn't show when clicking the expand button or expansion state is not maintained correctly.

Solution:

  • Verify that slot names in content elements match the name property in task objects exactly. Check that the expanded property is properly managed in the tasks array. Ensure that disabled tasks are not interfering with expansion logic.

Status Icons Not Displaying

Problem: Status indicators don't appear or show incorrect colors and icons for task states.

Solution:

  • Confirm that status values match the expected enum values (working, success, warning, error). Check that icon assets are properly loaded and available. Verify that CSS custom properties for status colors are correctly applied.

Visual Divider Issues

Problem: The connecting line between task icons doesn't display correctly or appears in wrong positions.

Solution:

  • Ensure that tasks container has proper positioning context and dimensions. Check that icon elements have consistent sizing and positioning. Verify that divider positioning calculations account for scrolling and dynamic content changes.

Time Display Problems

Problem: Elapsed time doesn't format correctly or doesn't update when task duration changes.

Solution:

  • Verify that elapsedSeconds values are numeric and properly passed to tasks. Check that time formatting logic handles edge cases like zero seconds or very large durations. Ensure that time updates trigger proper component re-rendering.

Implementation Support

  • Flexible Task Configuration - Comprehensive task object system with status tracking, time display, and expandable content management capabilities
  • Dynamic Visual Connections - Automatic divider positioning system that creates visual workflow connections between sequential task elements
  • Accessible Interaction Design - Built-in support for keyboard navigation, screen readers, and focus management with proper ARIA attributes and semantic structure

Resources

Storybook Documentation

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

For additional implementation guidance or framework-specific questions, consult the PWC Design System documentation or reach out to the component library team.