Skip to content

Pending Review

Pending Review from User Experience (UX)

Notice Component

Overview

The PWC Notice component provides contextual status messages and validation feedback with semantic color coding and appropriate iconography. Built with Lit web components, it delivers consistent messaging patterns for errors, warnings, success states, and informational content across form and interface contexts.

Core Capabilities

  • Semantic Variants - Eight distinct message types (danger, info, success, warning, tip, maintenance, inactive, unknown) with appropriate color coding
  • Icon Integration - Automatic icon selection based on message variant for instant visual recognition and improved accessibility
  • Typography Consistency - Standardized text styling with semi-bold weight and appropriate color coordination for readability
  • Conditional Rendering - Smart display logic that only renders when message content is provided to prevent empty state clutter
  • Design System Integration - Full integration with design tokens for consistent spacing, colors, and iconography
  • Accessibility Support - Semantic color coding and iconography that work with screen readers and high contrast modes

When to use Notice:

  • Form validation errors and success confirmations that need immediate user attention
  • Status updates and system notifications that provide contextual information about operations
  • Warning messages and informational hints that guide user behavior and decision-making
  • Maintenance alerts and service disruption notifications that communicate system state changes

When not to use Notice:

  • Complex error messages requiring detailed explanations where Toast components provide better user experience
  • Persistent status indicators that should remain visible - use Status or Badge components instead
  • Navigation or action-oriented messages where Button or Link components are more semantically appropriate

Basic Implementation

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

function MyComponent() {
  const [notifications, setNotifications] = useState({
    success: false,
    info: true
  });

  const handleNotificationChange = (type: string, value: boolean) => {
    setNotifications(prev => ({ ...prev, [type]: value }));
  };

  return (
    <>
      {notifications.success && (
        <PwcNotice
          message="Profile updated successfully"
          variant="success"
        />
      )}

      {notifications.info && (
        <PwcNotice
          message="This feature is currently in beta"
          variant="tip"
        />
      )}
    </>
  );
}

import { useEffect, useRef, useState } from 'react';
import '@progress-i360/progress-web-components/button';
import '@progress-i360/progress-web-components/notice';

function NoticeExamples() {
  const [state, setState] = useState({
    showMaintenance: true,
    showSuccess: false
  });

  const checkButtonRef = useRef<HTMLElement | null>(null);
  const maintenanceButtonRef = useRef<HTMLElement | null>(null);

  useEffect(() => {
    const checkButton = checkButtonRef.current;
    const maintenanceButton = maintenanceButtonRef.current;

    if (!checkButton || !maintenanceButton) {
      return;
    }

    const handleCheck = () => {
      setState((prev) => ({ ...prev, showSuccess: true }));
    };

    const handleMaintenanceToggle = () => {
      setState((prev) => ({ ...prev, showMaintenance: !prev.showMaintenance }));
    };

    checkButton.addEventListener('pwc-click', handleCheck);
    maintenanceButton.addEventListener('pwc-click', handleMaintenanceToggle);

    return () => {
      checkButton.removeEventListener('pwc-click', handleCheck);
      maintenanceButton.removeEventListener('pwc-click', handleMaintenanceToggle);
    };
  }, []);

  return (
    <>
      {state.showMaintenance && (
        <pwc-notice
          message="Scheduled maintenance: 2:00 AM - 4:00 AM EST"
          variant="maintenance"
        ></pwc-notice>
      )}

      {state.showSuccess && (
        <pwc-notice
          message="All systems are running optimally"
          variant="success"
        ></pwc-notice>
      )}

      <div style={{ marginTop: '16px', display: 'flex', gap: '8px' }}>
        <pwc-button
          ref={checkButtonRef}
          label="Check System"
          variant="primary"
        ></pwc-button>
        <pwc-button
          ref={maintenanceButtonRef}
          label={state.showMaintenance ? 'Disable Maintenance' : 'Enable Maintenance'}
          variant="outline"
        ></pwc-button>
      </div>
    </>
  );
}

import { Component, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
import "@progress-i360/progress-web-components/button";
import "@progress-i360/progress-web-components/input";
import "@progress-i360/progress-web-components/notice";

@Component({
  selector: 'notice-demo',
  template: `
    <pwc-input 
      label="Email Address" 
      type="email"
      required
      (pwc-change)="validateEmail($event)"
      (pwc-input)="clearMessages()">
    </pwc-input>

    <pwc-notice 
      *ngIf="emailError" 
      [message]="emailError" 
      variant="danger">
    </pwc-notice>

    <pwc-notice 
      *ngIf="emailWarning" 
      [message]="emailWarning" 
      variant="warning">
    </pwc-notice>

    <pwc-notice 
      message="We'll send a confirmation to your email" 
      variant="info">
    </pwc-notice>

    <pwc-notice 
      *ngIf="showSuccess" 
      message="Email verified successfully!" 
      variant="success">
    </pwc-notice>

    <pwc-notice 
      *ngIf="isMaintenanceMode" 
      message="System maintenance in progress" 
      variant="maintenance">
    </pwc-notice>

    <pwc-button 
      label="Verify Email" 
      variant="primary"
      [disabled]="!isEmailValid"
      (pwc-click)="verifyEmail()">
    </pwc-button>
  `,
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class NoticeDemo {
  emailError = '';
  emailWarning = '';
  showSuccess = false;
  isMaintenanceMode = false;
  isEmailValid = false;
  email = '';

  validateEmail(event: any) {
    this.email = event.detail || '';
    this.clearMessages();

    if (!this.email) {
      this.emailError = 'Email is required';
      this.isEmailValid = false;
    } else if (!this.email.includes('@')) {
      this.emailError = 'Please enter a valid email address';
      this.isEmailValid = false;
    } else if (this.email.endsWith('@example.com')) {
      this.emailWarning = 'Example domains may not receive emails';
      this.isEmailValid = true;
    } else {
      this.isEmailValid = true;
    }
  }

  clearMessages() {
    this.emailError = '';
    this.emailWarning = '';
    this.showSuccess = false;
  }

  verifyEmail() {
    if (this.isEmailValid) {
      this.clearMessages();
      this.showSuccess = true;

      // Simulate maintenance mode toggle
      setTimeout(() => {
        this.isMaintenanceMode = !this.isMaintenanceMode;
      }, 2000);
    }
  }
}

import '@progress-i360/progress-web-components/notice';

const notice = document.createElement('pwc-notice');
notice.setAttribute('message', 'Please check your email for verification');
notice.setAttribute('variant', 'info');

document.body.appendChild(notice);

Usage Patterns

  • Form Validation Feedback - Display real-time validation errors, warnings, and success messages for individual form fields
  • System Status Communication - Communicate maintenance schedules, service disruptions, and operational status updates
  • User Guidance Messages - Provide helpful tips, informational content, and contextual guidance throughout user workflows
  • Feature State Indicators - Indicate when features are disabled, in beta, or require specific permissions or account types

Best Practices

Content Strategy Guidelines

  • Clear and Concise Messaging - Use brief, specific language that clearly explains what happened or what action is needed
  • Appropriate Semantic Variants - Choose message variants that match the semantic meaning and urgency of the content
  • Actionable Information - When possible, include guidance on how users can resolve issues or complete tasks
  • Consistent Terminology - Use consistent language patterns across similar message types and contexts

Performance Optimization

  • Conditional Rendering - Only render notices when messages are present to avoid empty DOM elements and layout shifts
  • Message Lifecycle Management - Implement appropriate display duration and cleanup for temporary status messages
  • State-Based Visibility - Coordinate notice visibility with form validation states and user interaction patterns
  • Memory Efficiency - Properly dispose of notice components when they're no longer needed to prevent memory leaks

Integration Architecture

  • Form Context Integration - Coordinate notice display with form validation states and submission workflows
  • Design System Consistency - Use appropriate variants and styling that align with overall design system patterns
  • Accessibility Standards - Ensure notice content is properly announced by screen readers and maintains contrast requirements
  • Responsive Behavior - Consider notice positioning and sizing across different screen sizes and device types

Common Use Cases

Form Validation Messages

  • Required field errors with specific guidance on what information is needed
  • Format validation errors for email addresses, phone numbers, and structured data inputs
  • Success confirmations for completed form submissions and profile updates

System Communication

  • Maintenance notifications with scheduled downtime information and expected resolution times
  • Service disruption alerts with impact descriptions and alternative workflow suggestions
  • Feature availability notices including beta program enrollment and account upgrade requirements

User Guidance Content

  • Onboarding tips and helpful information for new users learning system functionality
  • Security recommendations and best practice suggestions for account protection
  • Feature explanations and contextual help for complex or advanced functionality

Troubleshooting

Common Issues

Actions Not Triggering

Symptoms: Notices don't appear when validation errors occur or system state changes

Solutions:

  • Verify notice components are properly triggered by form validation events

  • Check that message content is being passed correctly to notice components

  • Ensure notice visibility is coordinated with parent component state management

Actions Not Visible

Symptoms: Notice components render but don't display or appear with incorrect styling

Solutions:

  • Confirm message property is populated with non-empty string content

  • Check that variant property matches supported TagVariant types

  • Verify design system tokens are loaded for proper color and icon rendering

Layout Issues

Symptoms: Notices appear with incorrect positioning, spacing, or alignment within forms

Solutions:

  • Use appropriate container styling and gap properties for notice positioning

  • Check parent form layout doesn't conflict with notice display requirements

  • Ensure consistent spacing patterns align with other form field components

Icon Problems

Symptoms: Notice icons don't display or appear with incorrect colors for the specified variant

Solutions:

  • Verify icon system is loaded and variant-specific icons are available

  • Check color token mapping for variant-specific icon and text colors

  • Ensure icon sizing and alignment work properly with notice text content

Implementation Support

  • Validation Integration - Pattern guidance for coordinating notices with form validation workflows and error handling
  • Message Management - Best practices for notice lifecycle, timing, and user experience optimization
  • Accessibility Compliance - WCAG implementation strategies for status messages and dynamic content updates

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.