Skip to content

Commit d8d52ad

Browse files
Working updates (patternfly#1)
* Rename PF documentation directory * Update to latest from patternfly-ai-coding * Add more chart color info
1 parent c21c4fc commit d8d52ad

File tree

22 files changed

+59
-31
lines changed

22 files changed

+59
-31
lines changed

README.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -76,13 +76,13 @@ The MCP server communicates over stdio and provides access to PatternFly documen
7676
Lists available PatternFly documentation categories and files.
7777

7878
**Parameters:**
79-
- `path` (string, optional): Specific directory path to list (relative to .pf-ai-documentation)
79+
- `path` (string, optional): Specific directory path to list (relative to documentation)
8080

8181
#### `get_documentation`
8282
Retrieves the full content of a specific PatternFly documentation file.
8383

8484
**Parameters:**
85-
- `file_path` (string, required): Path to the documentation file (relative to .pf-ai-documentation)
85+
- `file_path` (string, required): Path to the documentation file (relative to documentation)
8686

8787
#### `search_documentation`
8888
Searches for specific text across all PatternFly documentation files.
@@ -139,7 +139,7 @@ For local development (without npx):
139139

140140
```
141141
patternfly-mcp/
142-
├── .pf-ai-documentation/ # PatternFly development rules and guidelines
142+
├── documentation/ # PatternFly development rules and guidelines
143143
├── src/
144144
│ └── index.ts # Main server implementation
145145
├── dist/ # Compiled JavaScript (after build)
@@ -152,7 +152,7 @@ patternfly-mcp/
152152

153153
## Documentation Structure
154154

155-
The server provides access to the PatternFly documentation located in `.pf-ai-documentation/`:
155+
The server provides access to the PatternFly documentation located in `documentation/`:
156156

157157
- **charts/** - PatternFly Charts implementation rules
158158
- **chatbot/** - PatternFly Chatbot component rules
File renamed without changes.
Lines changed: 36 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,6 @@
22

33
Essential rules for PatternFly Charts implementation using Victory.js and ECharts.
44

5-
## Related Files
6-
- [**Component Architecture**](../guidelines/component-architecture.md) - Chart component structure rules
7-
- [**Performance Optimization**](../troubleshooting/performance.md) - Chart performance considerations
8-
95
## Installation Rules
106

117
### Required Installation
@@ -79,16 +75,44 @@ Module not found: Can't resolve '@patternfly/react-charts'
7975
8076
## Chart Implementation Rules
8177
78+
### Best Practices
79+
80+
### Color families
81+
- Chart color families include
82+
- red-orange
83+
- orange
84+
- yellow
85+
- teal
86+
- green
87+
- blue
88+
- purple
89+
- black
90+
- Use the same brightness of colors first, then use other brightness
91+
- Base: 300
92+
- Lightest: 100
93+
- Darkest: 500
94+
- Second-lightest: 200
95+
- Second-darkest: 400
96+
- Use PatternFly tokens to define your color variables
97+
- --pf-t-chart-color-[color-family]-[brightness]
98+
- example: --pf-t-chart-color-blue-300
99+
- When selecting colors for your chart, adhere to these general rules:
100+
- Within a color family, use the base color first. Then use the other lighter and darker hues.
101+
- Some families have predetermined uses:
102+
- Blue: Use to show success.
103+
- Red-orange: Use to show failure. Do not use this family unless you're communicating failure.
104+
- Other colors: Use for neutral purposes or categories.
105+
82106
### Color Rules
83107
- ✅ **Use PatternFly chart color tokens** - For consistency with design system
84108
- ❌ **Don't use hardcoded colors** - Use design tokens instead
85109
86110
```jsx
87111
// ✅ Correct - Use PatternFly color tokens
88-
const chartColors = [
89-
'var(--pf-t--chart--color--blue--300)',
90-
'var(--pf-t--chart--color--green--300)',
91-
'var(--pf-t--chart--color--orange--300)'
112+
const chartBlueColor = [
113+
'var(--pf-t--chart--color--[color family 1]--300)',
114+
'var(--pf-t--chart--color--[color family 2]--300)',
115+
'var(--pf-t--chart--color--[color family 3]--300)'
92116
];
93117
94118
<ChartDonut data={data} colorScale={chartColors} />
@@ -239,7 +263,10 @@ const LazyChart = lazy(() => import('./HeavyChart'));
239263
## Quick Reference
240264
- **[PatternFly Charts README](https://github.com/patternfly/patternfly-react/tree/main/packages/react-charts#readme)** - Installation and usage
241265
- **[Victory.js Documentation](https://formidable.com/open-source/victory/)** - Chart library documentation
242-
- **[PatternFly Chart Guidelines](https://www.patternfly.org/charts/about)** - Design guidelines
266+
- **[PatternFly Chart Guidelines](https://www.patternfly.org/charts/about-charts)** - Design guidelines
267+
- **[PatternFly Chart Colors](https://www.patternfly.org/charts/colors-for-charts)** - Colors for charts
268+
269+
243270
244271
## Reference Documentation
245272
File renamed without changes.
File renamed without changes.

documentation/components/README.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# Patternfly Components
2+
3+
You can find documentation on PatternFly's components at [PatternFly All components documentation](https://www.patternfly.org/components/all-components)
4+
5+
## Specific info on Components
6+
7+
- [ApplicationLauncher](https://www.patternfly.org/components/menus/application-launcher)
File renamed without changes.
File renamed without changes.

.pf-ai-documentation/components/layout/README.md renamed to documentation/components/layout/README.md

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,13 @@ PatternFly layout components provide the foundation for structuring application
1010

1111
## Reference Documentation
1212

13-
- [PatternFly Layouts on PatternFly.org](https://www.patternfly.org/layouts)
13+
- [PatternFly Layouts on PatternFly.org](https://www.patternfly.org/layouts/about-layouts)
1414
- [PatternFly React GitHub Repository](https://github.com/patternfly/patternfly-react)
1515

1616
> For the most up-to-date documentation and code examples, consult both PatternFly.org and the official GitHub repository. When using AI tools, leverage context7 to fetch the latest docs from these sources.
1717
1818
## Related Files
1919

20-
- [**Page Sections**](./page-sections.md) - PageSection component usage and patterns
21-
- [**Grid System**](./grid-system.md) - Grid layout and responsive design
2220
- [**Component Architecture**](../../guidelines/component-architecture.md) - Component structure patterns
2321
- [**Styling Standards**](../../guidelines/styling-standards.md) - Layout styling guidelines
2422

@@ -40,7 +38,7 @@ This section describes common page layout patterns and links to their official d
4038
### Standard Page Layout
4139
A standard page layout typically consists of a page title, an optional toolbar for actions, and a main content area.
4240

43-
- [**Page Layout Documentation**](https://www.patternfly.org/layouts/page)
41+
- [**Page Layout Documentation**](https://www.patternfly.org/components/page/design-guidelines)
4442
- [**Page Component Examples on GitHub**](https://github.com/patternfly/patternfly-react/tree/main/packages/react-core/src/components/Page/examples)
4543

4644
### Dashboard Layout

0 commit comments

Comments
 (0)