Skip to content

Commit 7aeeee0

Browse files
bennypowersbennypowers
authored
Merge f7432c9 into 029229c 
2 parents 029229c + f7432c9 commit 7aeeee0

10 files changed

Lines changed: 2643 additions & 0 deletions

File tree

‎.claude/ADVICE.md‎

Lines changed: 1237 additions & 0 deletions
Large diffs are not rendered by default.

‎.claude/V6-MIGRATION-PLAN.md‎

Lines changed: 198 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,198 @@
1+
# PatternFly Elements v6 Migration Plan
2+
3+
Ordered PR plan for issue #3110. UPDATE PRs first (rename existing v5 elements
4+
to v6 and port APIs), then CREATE PRs (new elements not in v5).
5+
6+
**CRITICAL**: All PRs MUST target `staging/pfv6` branch, NOT `main`
7+
8+
## Phase 0: Infrastructure (do first)
9+
10+
These PRs unblock everything else.
11+
12+
### PR 0.1: Remove/replace dev server with `cem serve`
13+
- [Issue #3110](https://github.com/patternfly/patternfly-elements/issues/3110) calls out hardcoded tag names in dev server
14+
- `cem serve` handles import maps, CSS transforms, chromeless testing
15+
- Remove `tools/pfe-tools/dev-server/` and wire up `cem serve`
16+
- Update `npm run dev` / `npm start` scripts
17+
18+
### PR 0.2: Rename tooling and config for v6 prefix
19+
- Update `eslint.config.js` ignore globs (icon demo path) to include pf-v6 as
20+
well as pf-v5 paths
21+
- Update `commitlint.config.js` to handle `pf-` prefix (no `v5`)
22+
- Audit `elements/package.json` exports for orphaned entries
23+
- Update `tsconfig` paths if needed
24+
- Update `web-test-runner.config.js` and `playwright.config.ts` globs
25+
26+
Keep v5 prefix until all elements are updated.
27+
28+
### PR 0.3: Update docs scaffolding
29+
- Update `docs/_snippets/` for v6 element names
30+
- Update `docs/framework-integration/` examples
31+
- Update `docs/components/` templates
32+
33+
---
34+
35+
## Phase 1: UPDATE PRs (rename v5 -> v6, port to v6 API)
36+
37+
Existing v5 elements renamed to `pf-v6-{name}` and updated to v6 PatternFly
38+
design tokens, CSS, and React API parity. Order by dependency graph:
39+
leaf components first, then composites.
40+
41+
### Tier 1: Zero-dependency leaf elements
42+
43+
These elements don't depend on other PF elements. Port first.
44+
45+
| # | Element | v5 name | Notes |
46+
| ---- | ------------------------ | ------------------------ | ------------------------------------------ |
47+
| 1.1 | `pf-v6-spinner` | `pf-v5-spinner` | Pure CSS animation, simplest possible port |
48+
| 1.2 | `pf-v6-badge` | `pf-v5-badge` | Simple text + count |
49+
| 1.3 | `pf-v6-avatar` | `pf-v5-avatar` | Image with fallback |
50+
| 1.4 | `pf-v6-banner` | `pf-v5-banner` | Simple status bar |
51+
| 1.5 | `pf-v6-icon` | `pf-v5-icon` | Icon loading, used by many others |
52+
| 1.6 | `pf-v6-tooltip` | `pf-v5-tooltip` | Floating UI, no PF deps |
53+
| 1.7 | `pf-v6-progress` | `pf-v5-progress` | Progress bar, ARIA managed internally |
54+
| 1.8 | `pf-v6-switch` | `pf-v5-switch` | FACE element, toggle |
55+
| 1.9 | `pf-v6-text-input` | `pf-v5-text-input` | FACE element |
56+
| 1.10 | `pf-v6-text-area` | `pf-v5-text-area` | FACE element |
57+
| 1.11 | `pf-v6-timestamp` | `pf-v5-timestamp` | Date formatting |
58+
| 1.12 | `pf-v6-back-to-top` | `pf-v5-back-to-top` | Scroll button |
59+
| 1.13 | `pf-v6-background-image` | `pf-v5-background-image` | Background container |
60+
| 1.14 | `pf-v6-helper-text` | `pf-v5-helper-text` | Form helper text |
61+
62+
### Tier 2: Single-dependency elements
63+
64+
Depend on one or more Tier 1 elements.
65+
66+
| # | Element | v5 name | Depends on |
67+
| --- | ------------------------ | ------------------------ | --------------- |
68+
| 2.1 | `pf-v6-button` | `pf-v5-button` | icon, spinner |
69+
| 2.2 | `pf-v6-label` | `pf-v5-label` | icon, button |
70+
| 2.3 | `pf-v6-chip` | `pf-v5-chip` | icon, button |
71+
| 2.4 | `pf-v6-hint` | `pf-v5-hint` | (light deps) |
72+
| 2.5 | `pf-v6-panel` | `pf-v5-panel` | (light deps) |
73+
| 2.6 | `pf-v6-code-block` | `pf-v5-code-block` | button (copy) |
74+
| 2.7 | `pf-v6-clipboard-copy` | `pf-v5-clipboard-copy` | button, tooltip |
75+
| 2.8 | `pf-v6-progress-stepper` | `pf-v5-progress-stepper` | icon |
76+
| 2.9 | `pf-v6-tile` | `pf-v5-tile` | icon |
77+
78+
### Tier 3: Composite elements
79+
80+
Depend on multiple Tier 1-2 elements.
81+
82+
| # | Element | v5 name | Depends on |
83+
| ---- | -------------------- | -------------------- | -------------------------- |
84+
| 3.1 | `pf-v6-alert` | `pf-v5-alert` | icon, button |
85+
| 3.2 | `pf-v6-card` | `pf-v5-card` | (slots-heavy) |
86+
| 3.3 | `pf-v6-accordion` | `pf-v5-accordion` | expandable pattern |
87+
| 3.4 | `pf-v6-tabs` | `pf-v5-tabs` | RTI controller |
88+
| 3.5 | `pf-v6-label-group` | `pf-v5-label-group` | label, chip |
89+
| 3.6 | `pf-v6-popover` | `pf-v5-popover` | floating UI, button |
90+
| 3.7 | `pf-v6-modal` | `pf-v5-modal` | native dialog, button |
91+
| 3.8 | `pf-v6-table` | `pf-v5-table` | complex, many sub-elements |
92+
| 3.9 | `pf-v6-jump-links` | `pf-v5-jump-links` | navigation pattern |
93+
| 3.10 | `pf-v6-search-input` | `pf-v5-search-input` | text-input, button |
94+
| 3.11 | `pf-v6-dropdown` | `pf-v5-dropdown` | floating UI, menu pattern |
95+
| 3.12 | `pf-v6-select` | `pf-v5-select` | floating UI, FACE, menu |
96+
97+
---
98+
99+
## Phase 2: CREATE PRs (new elements not in v5)
100+
101+
Components that exist in React v6 but have no v5 web component equivalent.
102+
Order by dependency and complexity.
103+
104+
### Tier 4: Simple new elements
105+
106+
| # | Element | React source | Notes |
107+
| ---- | ----------------------- | ------------- | --------------------------------- |
108+
| 4.1 | `pf-v6-divider` | Divider | `<hr>` with variants, very simple |
109+
| 4.2 | `pf-v6-skeleton` | Skeleton | Loading placeholder, CSS-only |
110+
| 4.3 | `pf-v6-truncate` | Truncate | Text truncation with tooltip |
111+
| 4.4 | `pf-v6-content` | Content | Typography wrapper |
112+
| 4.5 | `pf-v6-title` | Title | Heading with size variants |
113+
| 4.6 | `pf-v6-radio` | Radio | FACE element |
114+
| 4.7 | `pf-v6-checkbox` | Checkbox | FACE element |
115+
| 4.8 | `pf-v6-skip-to-content` | SkipToContent | A11y skip link |
116+
| 4.9 | `pf-v6-brand` | Brand | Logo/brand image |
117+
| 4.10 | `pf-v6-backdrop` | Backdrop | Modal overlay |
118+
119+
### Tier 5: Medium complexity new elements
120+
121+
| # | Element | React source | Notes |
122+
| ---- | -------------------------- | ----------------- | ------------------------------- |
123+
| 5.1 | `pf-v6-expandable-section` | ExpandableSection | `<details>` based |
124+
| 5.2 | `pf-v6-description-list` | DescriptionList | `<dl>` semantic |
125+
| 5.3 | `pf-v6-breadcrumb` | Breadcrumb | Navigation with `<nav>` |
126+
| 5.4 | `pf-v6-list` | List | Ordered/unordered with variants |
127+
| 5.5 | `pf-v6-notification-badge` | NotificationBadge | Badge with icon |
128+
| 5.6 | `pf-v6-number-input` | NumberInput | FACE, stepper |
129+
| 5.7 | `pf-v6-form-select` | FormSelect | Native `<select>` wrapper, FACE |
130+
| 5.8 | `pf-v6-slider` | Slider | Range input, FACE |
131+
| 5.9 | `pf-v6-simple-list` | SimpleList | Selection list |
132+
| 5.10 | `pf-v6-action-list` | ActionList | Button group layout |
133+
| 5.11 | `pf-v6-input-group` | InputGroup | Form input composition |
134+
| 5.12 | `pf-v6-toggle-group` | ToggleGroup | Segmented control |
135+
| 5.13 | `pf-v6-empty-state` | EmptyState | Empty content placeholder |
136+
| 5.14 | `pf-v6-hero` | Hero | Hero banner section |
137+
138+
### Tier 6: Complex new elements
139+
140+
| # | Element | React source | Notes |
141+
| ---- | --------------------------- | ------------------ | --------------------------------------- |
142+
| 6.1 | `pf-v6-menu` | Menu | Complex, foundation for dropdown/select |
143+
| 6.2 | `pf-v6-menu-toggle` | MenuToggle | Toggle for menu/dropdown |
144+
| 6.3 | `pf-v6-nav` | Nav | Navigation sidebar |
145+
| 6.4 | `pf-v6-pagination` | Pagination | Page navigation controls |
146+
| 6.5 | `pf-v6-toolbar` | Toolbar | Action bar with groups |
147+
| 6.6 | `pf-v6-drawer` | Drawer | Sliding panel |
148+
| 6.7 | `pf-v6-sidebar` | Sidebar | Layout sidebar |
149+
| 6.8 | `pf-v6-notification-drawer` | NotificationDrawer | Notifications panel |
150+
| 6.9 | `pf-v6-overflow-menu` | OverflowMenu | Responsive menu overflow |
151+
| 6.10 | `pf-v6-data-list` | DataList | Flexible data display |
152+
| 6.11 | `pf-v6-masthead` | Masthead | App header bar |
153+
| 6.12 | `pf-v6-page` | Page | App page layout |
154+
| 6.13 | `pf-v6-form` | Form | Form layout and validation |
155+
| 6.14 | `pf-v6-text-input-group` | TextInputGroup | Composite input |
156+
| 6.15 | `pf-v6-dual-list-selector` | DualListSelector | Two-list transfer |
157+
158+
### Tier 7: High-complexity
159+
160+
| # | Element | React source | Notes |
161+
| --- | ---------------------------- | ------------------ | ------------------------ |
162+
| 7.1 | `pf-v6-calendar-month` | CalendarMonth | Date picker calendar |
163+
| 7.2 | `pf-v6-date-picker` | DatePicker | Full date picker |
164+
| 7.3 | `pf-v6-time-picker` | TimePicker | Time selection |
165+
| 7.4 | `pf-v6-file-upload` | FileUpload | File upload with preview |
166+
| 7.5 | `pf-v6-multiple-file-upload` | MultipleFileUpload | Multi-file upload |
167+
| 7.6 | `pf-v6-wizard` | Wizard | Multi-step flow |
168+
| 7.7 | `pf-v6-tree-view` | TreeView | Hierarchical tree |
169+
| 7.8 | `pf-v6-login-page` | LoginPage | Full login pattern |
170+
| 7.9 | `pf-v6-about-modal` | AboutModal | Branded about dialog |
171+
172+
---
173+
174+
## Layout Components (NOT converted to custom elements)
175+
176+
These use PatternFly CSS layout classes directly. Document usage, don't wrap.
177+
178+
- Bullseye, Flex, Gallery, Grid, Level, Split, Stack, List, Simple List, Divider
179+
180+
---
181+
182+
## Per-PR Checklist
183+
184+
Use `/update-element` for Phase 1 PRs, `/create-element` for Phase 2 PRs.
185+
186+
For each PR:
187+
188+
1. [ ] API designed per `.claude/ADVICE.md` rules
189+
2. [ ] CSS custom properties match computed CSS and Stylesheets of react demos on patternfly.org via chrome MCP
190+
3. [ ] Element source with `@summary`, JSDoc
191+
4. [ ] CSS with tokens, logical properties, nesting
192+
5. [ ] Demos matching patternfly.org (name parity)
193+
6. [ ] Tests (public API, a11ySnapshot, form submission if FACE)
194+
7. [ ] `/review-api` audit
195+
8. [ ] `/review-demos` audit
196+
9. [ ] `/review-a11y` audit
197+
9. [ ] Lint passes (eslint, stylelint)
198+
10. [ ] Visual parity verified via Chrome MCP

‎.claude/settings.json‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"permissions": {
3+
"allow": [
4+
"Bash(npm run:*)",
5+
"Bash(npm test:*)",
6+
"Bash(ls:*)",
7+
"Bash(git log:*)",
8+
"Bash(git add:*)",
9+
"Bash(git commit:*)",
10+
"Bash(git branch:*)",
11+
"Bash(git checkout:*)",
12+
"Bash(git fetch:*)",
13+
"Read(../patternfly/**)",
14+
"WebFetch(domain:www.patternfly.org)"
15+
],
16+
"additionalDirectories": [
17+
"../patternfly-react",
18+
"../patternfly"
19+
]
20+
}
21+
}

0 commit comments

Comments
 (0)