Skip to content

README.md

Latest commit

 

History

History
86 lines (62 loc) · 3.51 KB

README.md

File metadata and controls

86 lines (62 loc) · 3.51 KB

PatternFly Guidelines

Core development rules for AI coders building PatternFly React applications.

Related Files

Essential Rules

Version Requirements

  • ✅ ALWAYS use PatternFly v6 - Use pf-v6- prefixed classes only
  • ❌ NEVER use legacy versions - No pf-v5-, pf-v4-, or pf-c- classes
  • ✅ Match component and CSS versions - Ensure compatibility

Component Usage Rules

  • ✅ Use PatternFly components first - Before creating custom solutions
  • ✅ Compose components - Build complex UIs by combining PatternFly components
  • ❌ Don't override component internals - Use provided props and APIs

Tokenss

  • ✅ ALWAYS use PatternFly tokens - Use pf-t- prefixed classes over pf-v6- classes (e.g., var(--pf-t--global--spacer--sm) not var(--pf-v6-global--spacer--sm))

Text Components (v6+)

// ✅ Correct
import { Content } from '@patternfly/react-core';
<Content component="h1">Title</Content>

// ❌ Wrong - Don't use old Text components
<Text component="h1">Title</Text>

Icon Usage

// ✅ Correct - Wrap with Icon component
import { Icon } from '@patternfly/react-core';
import { UserIcon } from '@patternfly/react-icons';
<Icon size="md"><UserIcon /></Icon>

Styling Rules

  • ✅ Use PatternFly utilities - Before writing custom CSS
  • ✅ Use semantic design tokens for custom CSS (e.g., var(--pf-t--global--text--color--regular)), not base tokens with numbers (e.g., --pf-t--global--text--color--100) or hardcoded values
  • ❌ Don't mix PatternFly versions - Stick to v6 throughout

Documentation Requirements

  1. Check PatternFly.org first - Primary source for APIs
  2. Check the PatternFly React GitHub repository for the latest source code, examples, and release notes
  3. Use "View Code" sections - Copy working examples
  4. Reference version-specific docs - Match your project's PatternFly version
  5. Provide context to AI - Share links and code snippets when asking for help

For the most up-to-date documentation, use both the official docs and the source repositories. When using AI tools, encourage them to leverage context7 to fetch the latest documentation from these sources.

Accessibility Requirements

  • ✅ WCAG 2.1 AA compliance - All components must meet standards
  • ✅ Proper ARIA labels - Use semantic markup and labels
  • ✅ Keyboard navigation - Ensure full keyboard accessibility
  • ✅ Focus management - Logical focus order and visible indicators

Quality Checklist

  • Uses PatternFly v6 classes only
  • Components render correctly across browsers
  • Responsive on mobile and desktop
  • Keyboard navigation works
  • Screen readers can access content
  • No console errors or warnings
  • Performance is acceptable

When Issues Occur

  1. Check PatternFly.org - Verify component API
  2. Inspect elements - Use browser dev tools for PatternFly classes
  3. Search GitHub issues - Look for similar problems
  4. Provide context - Share code snippets and error messages

See Common Issues for specific problems.