Fix documentation inconsistencies and PatternFly v6 compliance issues

.pf-ai-documentation/charts/README.md

@@ -165,8 +165,8 @@ useEffect(() => {
 ```jsx
 // ✅ Required state handling
 if (isLoading) return <Spinner />;
-if (error) return <EmptyState><EmptyStateHeader titleText="Chart error" /></EmptyState>;
-if (!data?.length) return <EmptyState><EmptyStateHeader titleText="No data" /></EmptyState>;
+if (error) return <EmptyState titleText="Chart error" />;
+if (!data?.length) return <EmptyState titleText="No data" />;
 
 const processedData = useMemo(() => {
   return rawData.map(item => ({ x: item.date, y: item.value }));
@@ -180,14 +180,18 @@ const processedData = useMemo(() => {
 
 ```jsx
 // ✅ Required integration pattern
-import { Card, CardTitle, CardBody } from '@patternfly/react-core';
-
-<Card>
-  <CardTitle>Chart Title</CardTitle>
-  <CardBody>
-    <ChartDonut data={data} />
-  </CardBody>
-</Card>
+import { Card, CardTitle, CardBody, PageSection } from '@patternfly/react-core';
+
+<PageSection>
+  <Card>
+    <CardTitle>Chart Title</CardTitle>
+    <CardBody>
+      <div style={{ height: 'var(--pf-t--global--spacer--4xl)' }}>
+        <ChartDonut data={data} />
+      </div>
+    </CardBody>
+  </Card>
+</PageSection>
 ```
 
 ## Performance Rules

.pf-ai-documentation/chatbot/README.md

@@ -108,7 +108,7 @@ const createMessage = (content, role) => ({
 ```jsx
 // ✅ Required integration pattern
 <PageSection hasBodyWrapper>
-  <div style={{ height: '600px' }}>
+  <div style={{ height: 'var(--pf-t--global--spacer--4xl)' }}>
     <Chatbot>
       {/* Chatbot content */}
     </Chatbot>
@@ -192,5 +192,5 @@ const createMessage = (content, role) => ({
 
 ### Further Reading
 - **[PatternFly Chatbot Docs](https://www.patternfly.org/chatbot/overview/)**
-- **[Component API](https://github.com/patternfly/patternfly-react/tree/main/packages/react-core/src/components/ChipGroup)** - ChipGroup component API for tags
+- **[Message Component API](https://www.patternfly.org/patternfly-ai/chatbot/messages/react)** - Message component API documentation
 - **[Accessibility Guide](https://www.patternfly.org/get-started/accessibility-guide)**

.pf-ai-documentation/guidelines/styling-standards.md

@@ -107,9 +107,9 @@ Use utility classes only when:
 // ✅ Acceptable utility usage - when component props aren't sufficient
 <Card className="pf-v6-u-h-100"> {/* Force card to full height */}
   <CardBody>
-    <Text className="pf-v6-u-text-align-center"> {/* Center text when component doesn't provide prop */}
+    <Content className="pf-v6-u-text-align-center"> {/* Center text when component doesn't provide prop */}
       Centered content
-    </Text>
+    </Content>
   </CardBody>
 </Card>
 ```
@@ -124,11 +124,11 @@ Use utility classes only when:
 .custom-component {
   /* ✅ Correct - Use semantic tokens */
   color: var(--pf-t--global--text--color--regular);
-  margin: var(--pf-t-global--spacer--md);
+  margin: var(--pf-t--global--spacer--md);
 
   /* ❌ Wrong - Hardcoded values or base tokens */
   /* color: #333333; */
-  /* color: var`--pf-t--global--text--color--100); */
+  /* color: var(--pf-t--global--text--color--100); */
   /* margin: 16px; */
 }
 ```
@@ -141,7 +141,7 @@ Use utility classes only when:
 --pf-t--global--background--color--primary--default
 
 /* Spacing */
---pf-t-global--spacer--{xs|sm|md|lg|xl}
+--pf-t--global--spacer--{xs|sm|md|lg|xl}
 
 /* Typography */
 --pf-t--global--font--family--body	
@@ -329,32 +329,36 @@ import { Title, Content } from '@patternfly/react-core';
 
 ## Spacing and Inline Styles
 
-- ✅ **Always use PatternFly spacing variables (design tokens) for all spacing, including in inline style props.**
-- ❌ **Do not use hardcoded numbers for margin, padding, or other spacing in inline styles.**
+### Priority Order for Spacing and Layout
+1. **Component composition first** - Use proper PatternFly component hierarchy
+2. **Component props second** - Use built-in props for spacing/layout
+3. **Utility classes third** - Use PatternFly utility classes when props aren't available
+4. **Inline styles with tokens last** - Only when no other option exists
 
-**Correct:**
+### When You Must Use Inline Styles
+If component composition, props, and utility classes don't provide what you need, use design tokens (not hardcoded values):
+
+**Correct (if no other option exists):**
 ```jsx
-<div style={{ marginBottom: 'var(--pf-t--global--spacer-lg)' }} />
+<div style={{ marginBottom: 'var(--pf-t--global--spacer--lg)' }} />
 ```
 
 **Incorrect:**
 ```jsx
 <div style={{ marginBottom: 24 }} />
 ```
 
-## Utility Classes vs Inline Styles
-
-- ✅ **Prefer using PatternFly utility classes for spacing, alignment, and layout instead of inline styles.**
-- ❌ **Only use inline styles if a PatternFly utility class does not exist for the required spacing or layout.**
+### Prefer Utility Classes Over Inline Styles
+When component composition and props aren't sufficient, use utility classes instead of inline styles:
 
 **Correct:**
 ```jsx
 <div className="pf-v6-u-mb-lg" />
 ```
 
-**Incorrect:**
+**Less preferred (but acceptable if utility class doesn't exist):**
 ```jsx
-<div style={{ marginBottom: 'var(--pf-t--global--spacer-lg)' }} />
+<div style={{ marginBottom: 'var(--pf-t--global--spacer--lg)' }} />
 ```
 
 ## External Link Buttons

.pf-ai-documentation/troubleshooting/common-issues.md

@@ -27,12 +27,11 @@ PatternFly development can present various challenges ranging from setup issues
 1. **Use correct v6 components**:
    ```jsx
    // ✅ Correct v6 components
-   import { Content, EmptyState, EmptyStateBody, EmptyStateHeader } from '@patternfly/react-core';
+   import { Content, EmptyState } from '@patternfly/react-core';
 
    <Content component="h1">Title</Content>
 
-   <EmptyState>
-     <EmptyStateHeader titleText="No data" />
+   <EmptyState titleText="No data">
      <EmptyStateBody>Description goes here</EmptyStateBody>
    </EmptyState>
    ```
@@ -156,9 +155,9 @@ Module not found: Can't resolve '@patternfly/react-charts'
    ```jsx
    // ✅ Correct - Use design tokens
    const chartColors = [
-     'var(--pf-t-chart-color-blue-300)',
-     'var(--pf-t-chart-color-green-300)',
-     'var(--pf-t-chart-color-orange-300)'
+     'var(--pf-t--chart--color--blue--300)',
+     'var(--pf-t--chart--color--green--300)',
+     'var(--pf-t--chart--color--orange--300)'
    ];
    <ChartDonut colorScale={chartColors} />
    ```
@@ -658,14 +657,43 @@ Module not found: Can't resolve '@patternfly/chatbot/dist/dynamic/Chatbot'
    const paginatedData = data.slice((page - 1) * perPage, page * perPage);
    ```
 
-2. **Use virtualization**:
+2. **Use virtualization for large datasets**:
    ```jsx
-   import { DndProvider, useDrag, useDrop } from 'react-dnd';
-   import { HTML5Backend } from 'react-dnd-html5-backend';
+   import { useVirtual } from 'react-virtual';
    import { Table, Thead, Tbody, Tr, Th, Td } from '@patternfly/react-table';
 
-   const DraggableRow = ({ id, text, index, moveRow }) => {
-   // ... existing code ...
+   const VirtualizedTable = ({ data }) => {
+     const parentRef = useRef();
+     const rowVirtualizer = useVirtual({
+       size: data.length,
+       parentRef,
+       estimateSize: useCallback(() => 50, []),
+     });
+
+     return (
+       <div ref={parentRef} style={{ height: '400px', overflow: 'auto' }}>
+         <Table>
+           <Thead>
+             <Tr>
+               <Th>Name</Th>
+               <Th>Email</Th>
+             </Tr>
+           </Thead>
+           <Tbody>
+             {rowVirtualizer.virtualItems.map(virtualRow => {
+               const item = data[virtualRow.index];
+               return (
+                 <Tr key={virtualRow.index}>
+                   <Td>{item.name}</Td>
+                   <Td>{item.email}</Td>
+                 </Tr>
+               );
+             })}
+           </Tbody>
+         </Table>
+       </div>
+     );
+   };
    ```
 
 3. **Optimize re-renders**: