PatternFly 6 Frontend Development Guide¶

Important: This guide is the authoritative source for PatternFly 6 frontend development practices. It focuses exclusively on React component development with PatternFly 6.

Essential rules and guidelines for developing React applications with PatternFly 6 components and design system.

🚀 Frontend Setup¶

Setup Guide - Frontend development prerequisites
Quick Start - Start developing with PatternFly 6 and Vite
Development Environment - Frontend tools and configuration

📚 Development Guidelines¶

PatternFly Guidelines - Core development principles with quality checklist
Component Architecture - Component structure and patterns
Styling Standards - Design tokens and CSS requirements
Migration Codemods - Automated migration tools for v6

🧩 Component Rules¶

Layout Rules - Page structure requirements
Table Component Rules - Table usage and best practices
Data View Component Rules - Data view usage and best practices

📊 Specialized Rules¶

Charts Rules - PatternFly Charts requirements
Chatbot Rules - PatternFly Chatbot requirements

🧪 Testing Patterns¶

Modal Testing - Complete guide for testing PatternFly 6 Modal components in JSDOM
Dropdown & Pagination Testing - Comprehensive guide for testing PatternFly 6 dropdowns and pagination in JSDOM
Context-Dependent Components - Testing components that require parent context (Alert, Modal, etc.)

🔧 Troubleshooting¶

Common Issues - Frontend, PatternFly 6, and Vite issues

📖 Resources¶

External Links - Official documentation links

Core Development Principles¶

PatternFly 6 Only - Use pf-v6- prefixed classes exclusively
Design Token System - Use semantic tokens, never hardcode values
Component-First - Always use PatternFly components before custom solutions
Accessibility Required - WCAG 2.1 AA compliance is mandatory
Consult documentation - Reference PatternFly.org for examples
Follow accessibility - Implement proper ARIA labels and keyboard navigation
Use utility classes - Prefer PatternFly utilities over custom CSS
Handle states - Always implement loading, error, and empty states
Theme Support - Test in both light and dark themes
Responsive Design - Use rem units for breakpoints (px ÷ 16)
TypeScript - Maintain type safety in all components
Performance - Implement code splitting and optimize bundle size

What's Covered¶

This guide provides comprehensive PatternFly 6 frontend development guidance:

✅ Component Development - PatternFly 6 React component patterns
✅ Design Token System - Complete token documentation and usage
✅ Styling Standards - CSS guidelines and utility classes
✅ Migration Support - Codemods and breaking changes from v5 to v6
✅ Quality Checklists - Development and code review checklists
✅ Troubleshooting - Common frontend issues and solutions

Scope and Authority¶

What This Guide Covers¶

✅ PatternFly 6 React components and patterns
✅ Frontend styling and design tokens
✅ Accessibility requirements
✅ Component architecture
✅ Frontend build and development with Vite

What This Guide Does NOT Cover¶

❌ Backend development
❌ Deployment and CI/CD
❌ Database or API design
❌ Container orchestration
❌ Full-stack architecture

Authority¶

This guide is the authoritative source for PatternFly 6 frontend patterns. When current implementation conflicts with this guide, follow the guide.

External Resources¶

PatternFly.org - Official PatternFly documentation
PatternFly React GitHub - Source code and examples
Vite Documentation - Build tool documentation

For non-frontend concerns, see the main project documentation:

Backend Development: docs/development/
API Documentation: docs/api/
Deployment: docs/deployment/
Architecture: docs/architecture/