Skip to content

Pending Review

Pending Review from User Experience (UX)

Action Bar Component

Overview

The PWC Action Bar is a contextual header component in the Progress Web Components design system. It provides consistent layout for section headings, result counts, and related actions across React and Angular applications.

Core Capabilities

  • Contextual Headers - Dynamic section headings with result counts and status information
  • Action Integration - Primary and secondary action buttons for section-specific operations
  • Responsive Layout - Adaptive design that works across desktop and mobile interfaces
  • Content Flexibility - Customizable slots for titles, descriptions, and action areas
  • Status Display - Visual indicators for data loading, counts, and operational states
  • Accessibility Support - Screen reader friendly with proper heading hierarchy

When to use Action Bar:

  • Display section headings with contextual information and actions
  • Show result counts for data tables, grids, or search results
  • Provide quick access to primary actions related to displayed content
  • Create consistent headers for data-driven interfaces and dashboards

When not to use Action Bar:

  • Simple page headers without dynamic content or actions
  • Navigation bars or main application headers
  • Content sections that don't require action buttons or result counts

Basic Implementation

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

function MyComponent() {
  const handleAddItem = () => {
    console.log('Add item clicked');
  };

  return (
      <PwcActionBar 
        heading="User Management" 
        rowCount={25}
      >
        <PwcButton 
          slot="actions" 
          variant="primary" 
          label="Add User" 
          onClick={handleAddItem}
        />
        <PwcButton 
          slot="actions" 
          variant="outline" 
          label="Export"
        />
      </PwcActionBar>
  );
}

import { useCallback } from 'react';
import '@progress-i360/progress-web-components/action-bar';
import '@progress-i360/progress-web-components/button';

function MyComponent() {
  const handleAddItem = useCallback(() => {
    console.log('Add item clicked');
  }, []);

  return (
      <pwc-action-bar 
        heading="User Management" 
        rowCount={25}
      >
        <pwc-button 
          slot="actions" 
          variant="primary" 
          label="Add User" 
          onPwcClick={handleAddItem}
        ></pwc-button>
        <pwc-button 
          slot="actions" 
          variant="outline" 
          label="Export"
        ></pwc-button>
      </pwc-action-bar>
  );
}

// component.ts
import { Component, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
import "@progress-i360/progress-web-components/action-bar";
import "@progress-i360/progress-web-components/button";

@Component({
  selector: 'action-bar-demo',
  template: `
    <pwc-action-bar heading="Users" [rowCount]="userCount">
      <pwc-button slot="actions" label="Add User" variant="primary" (pwc-click)="addUser()"></pwc-button>
    </pwc-action-bar>
  `,
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class ActionBarDemo {
  userCount = 25;

  addUser() {
    this.userCount++;
  }
}

// Create action bar element
const actionBar = document.createElement('pwc-action-bar');
actionBar.heading = 'User Management';
actionBar.rowCount = 25;

// Update count function
function updateRowCount(newCount) {
  actionBar.rowCount = newCount;
}

// Example usage and dynamic updates
updateRowCount(30);
document.body.appendChild(actionBar);

Usage Patterns

Action bars adapt to different content scenarios:

  • With Heading Only - Simple section headers without result counts
  • With Row Count - Display dynamic result counts for data tables and grids
  • Full Configuration - Heading, count, and multiple action buttons
  • Actions Only - Action buttons without heading or count information

Best Practices

Content Strategy Guidelines

  • Clear Headings - Use descriptive, action-oriented headings
  • Accurate Counts - Ensure result counts reflect actual displayed data
  • Action Relevance - Include only actions directly related to the content section
  • Consistent Terminology - Use standardized language across similar interfaces

Performance Optimization

  • Dynamic Updates - Update row counts efficiently without full component re-renders
  • Action Debouncing - Prevent rapid-fire action button clicks
  • Lazy Action Loading - Load complex actions only when needed
  • Memory Management - Clean up event listeners and references properly

Integration Architecture

  • Data Binding - Connect row counts to actual data source lengths
  • Event Coordination - Coordinate actions with parent component state management
  • Loading States - Handle loading states for both content and actions
  • Error Handling - Provide fallback displays when data loading fails

Common Use Cases

Data Table Headers

  • Display table name with current result count
  • Provide add, export, and filter actions
  • Show loading states during data fetching

Search Result Sections

  • Display search context and result counts
  • Offer refinement and sorting actions
  • Handle empty state messaging

Dashboard Widget Headers

  • Label widget sections with descriptive headings
  • Provide widget-specific actions like refresh or configure
  • Display data freshness or update timestamps

Troubleshooting

Common Issues

Actions Not Triggering

Problem: Action buttons don't respond to clicks
Solution:

  • Verify action event listeners are properly attached and button states aren't disabled

Actions Not Visible

Problem: Action buttons don't appear in the action bar
Solution:

  • Check if actions array is populated and visibility conditions are met

Layout Issues

Problem: Action bar doesn't display correctly on different screen sizes
Solution:

  • Test responsive behavior and implement overflow menu for mobile screens

Icon Problems

Problem: - Action icons don't load or display incorrectly
Solution:

  • Verify icon names are correct and icon library is properly imported

Implementation Support

For detailed implementation guidance:

  • API Documentation - Complete props and methods in Storybook
  • Interactive Examples - Live component demos and testing
  • Code Samples - Copy-paste ready examples for all scenarios

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.