Cleanup examples in docs directory

[evwilkin]

Follow-up to #7 to address example & usage issues found in existing examples but not modified in that PR.

PatternFly Best Practices Review

This repository is an AI helper/documentation project — it contains no React application source code (.tsx/.ts/.jsx/.js). All code exists as examples within markdown documentation files. I've reviewed every code example against the PatternFly v6 standards defined in this repository and found the following issues:

---

Issue 1: Deprecated <Text> component used instead of <Content>

File: docs/guidelines/styling-standards.md:110

<Text className="pf-v6-u-text-align-center">
  Centered content
</Text>

The Text component was renamed to Content in PatternFly v6. The coding-standards agent (plugins/pf-react/agents/coding-standards.md:170-174) correctly documents using <Content component="p"> instead. This example should be updated to use Content.

---

Issue 2: CSS syntax error in "wrong" example

File: docs/guidelines/styling-standards.md:131

/* color: var`--pf-t--global--text--color--100); */

There is a backtick ` where an opening parenthesis ( should be. While this is in a "wrong" comment, the syntax error makes the example confusing. Should be var(--pf-t--global--text--color--100).

---

Issue 3: Inconsistent design token naming (single vs double dashes)

Multiple files use inconsistent token formats:

File	Line	Token	Issue
styling-standards.md	127	--pf-t-global--spacer--md	Single dash t-global
styling-standards.md	157	--pf-t--global--text--color--regular	Double dash t--global
styling-standards.md	337	--pf-t--global--spacer-lg	Single dash spacer-lg
troubleshooting/common-issues.md	158	--pf-t-chart-color-blue-300	Single dashes throughout
charts/README.md	113	--pf-t--chart--color--[family]--300	Double dashes throughout

The correct PatternFly v6 token format uses double dashes as separators (e.g., --pf-t--global--spacer--md). Several examples use single dashes inconsistently.

---

Issue 4: Contradictory styling guidance

File: docs/guidelines/styling-standards.md:330-358

Lines 336-338 present inline styles with design tokens as "Correct":

// Correct:
<div style={{ marginBottom: 'var(--pf-t--global--spacer-lg)' }} />

Lines 350-358 then present the exact same pattern as "Incorrect":

// Incorrect:
<div style={{ marginBottom: 'var(--pf-t--global--spacer-lg)' }} />

These two sections directly contradict each other. The intent seems to be: (1) if you must use inline styles, use tokens not hardcoded values, and (2) prefer utility classes over inline styles with tokens. But the presentation makes it appear that the same code is both correct and incorrect.

---

Issue 5: Inconsistent EmptyState API usage

Some files use the newer simplified API (correct for v6):

plugins/pf-react/agents/coding-standards.md:269:

if (error) return <EmptyState titleText="Error" />;

Other files use the deprecated EmptyStateHeader sub-component:

docs/charts/README.md:168:

if (error) return <EmptyState><EmptyStateHeader titleText="Chart error" /></EmptyState>;

docs/components/data-display/README.md:90:

if (error) return <EmptyState><EmptyStateHeader titleText="Error" /></EmptyState>;

docs/troubleshooting/common-issues.md:34:

<EmptyState>
  <EmptyStateHeader titleText="No data" />
  <EmptyStateBody>Description goes here</EmptyStateBody>
</EmptyState>

In PatternFly v6, titleText is a direct prop on EmptyState — EmptyStateHeader is deprecated. All examples should use the simplified pattern.

---

Issue 6: Wrong code example for "virtualization" solution

File: docs/troubleshooting/common-issues.md:661-669

Under "Use virtualization" for table performance, the code shows drag-and-drop imports instead of actual virtualization:

import { DndProvider, useDrag, useDrop } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';

This is react-dnd (drag and drop), not virtualization. A virtualization example should reference react-window or react-virtualized.

---

Issue 7: Hardcoded dimension in chatbot integration example

File: docs/chatbot/README.md:111

<div style={{ height: '600px' }}>

This contradicts the styling standards which require using design tokens instead of hardcoded values, and recommend responsive design over fixed dimensions.

---

Issue 8: Incorrect "Further Reading" link in chatbot docs

File: docs/chatbot/README.md:194

- **[Component API](...patternfly-react/.../ChipGroup)** - ChipGroup component API for tags

This links to the ChipGroup component which is unrelated to chatbot functionality. Appears to be a copy-paste error.

---

Issue 9: Inconsistent chart color token format

File: docs/charts/README.md:248

--pf-v6-chart-color-blue-100

This uses the --pf-v6- prefix, but the rest of the charts documentation uses the --pf-t--chart--color-- token format. The --pf-v6- prefix is for CSS class names, not design tokens.

---

Summary

Severity	Count	Category
High	3	Contradictory guidance, wrong code example, deprecated API inconsistency
Medium	4	Token naming inconsistencies, deprecated component usage
Low	2	Syntax error in comment, incorrect link

The primary areas needing attention are:

1. Standardize design token naming across all documentation files (double-dash format)
2. Update all EmptyState examples to use the v6 simplified API consistently
3. Fix the contradictory inline styles vs utility classes section in styling-standards.md
4. Replace the drag-and-drop code with actual virtualization in the troubleshooting guide
5. Replace Text with Content in the styling standards examples

---

Jira Issue: PF-3576

---

Jira Issue: PF-3589