FazBrowse GitHub Viewer | Trending |
URL:
| Home
Tools: [Download Repo ZIP]   [Original HTTPS Page]

fix: align button component with PatternFly and add comparison report · patternfly-java/patternfly-java@ee334b4 · GitHub

/ patternfly-java Public

Commit ee334b4

Browse files
hpehl
committed
fix: align button component with PatternFly and add comparison report
- Fix iconAndText() bug that dropped pf-m-start/pf-m-end modifiers by avoiding the removeIcon()/failSafeIconElement() cycle in icon() - Add ariaExpanded() method to Button for hamburger state management - Update hamburger() to set aria-expanded="false" by default - Add ariaLabel to all icon-only buttons across 8 showcase sections - Add type="button" to inline span button in showcase - Add pf-compare report for button component (PF 6.5.1) - Update skill docs to reflect pf-align no longer producing reports
1 parent 601fe7e commit ee334b4

6 files changed

Lines changed: 517 additions & 35 deletions

File tree

‎CLAUDE.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,7 @@ Project-scoped skills in `.claude/skills/`:
105105
| `/pf-align <component>` | Implement action items from a `/pf-compare` report to align the Java implementation with PatternFly |
106106
| `/pf-dev-env [start\|stop\|status]` | Start, stop, or check the local development environment (J2CL watch + Vite dev server) |
107107
| `/pf-lint <component>` | Verify that a component follows project conventions for documentation, code structure, naming, and formatting |
108-
| `/pf-status [component]` | Show unified status dashboard across lint, compare, align, and update dimensions for all or one component |
108+
| `/pf-status [component]` | Show unified status dashboard across lint, compare, and update dimensions for all or one component |
109109
| `/pf-update [version]` | Analyze a PatternFly release to find changes relevant to PFJ and generate a prioritized work plan |
110110

111111
## Key Dependencies

‎components/src/main/java/org/patternfly/component/button/Button.java‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -209,13 +209,13 @@ public Button iconAndText(Element icon, String text, IconPosition position) {
209209
switch (position) {
210210
case start:
211211
failSafeIconElement().classList.add(modifier(Classes.start));
212-
icon(icon);
212+
failSafeIconElement().appendChild(icon);
213213
text(text);
214214
break;
215215
case end:
216216
text(text);
217217
failSafeIconElement().classList.add(modifier(Classes.end));
218-
icon(icon);
218+
failSafeIconElement().appendChild(icon);
219219
break;
220220
}
221221
return this;
@@ -300,6 +300,7 @@ public Button hamburger() {
300300
.add(path().css("pf-v6-c-button--hamburger-icon--bottom")
301301
.attr("d", "M9,9 L1,9"))
302302
.element());
303+
ariaExpanded(false);
303304
return css(modifier(Classes.hamburger));
304305
}
305306

@@ -344,6 +345,10 @@ public Button ariaDisabled(boolean disabled) {
344345
return this;
345346
}
346347

348+
public Button ariaExpanded(boolean expanded) {
349+
return aria(Aria.expanded, expanded);
350+
}
351+
347352
public Button ariaLabel(String label) {
348353
return aria(Aria.label, label);
349354
}

‎reports/pf-compare/button.json‎

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

‎reports/pf-compare/button.md‎

Lines changed: 201 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,201 @@
1+
---
2+
component: button
3+
date: 2026-06-08
4+
pf_version: Release 6.5.1
5+
pf_url: https://www.patternfly.org/components/button
6+
pfj_url: http://localhost:1234/components/button
7+
sections:
8+
pf_count: 17
9+
pfj_count: 18
10+
matched: 16
11+
missing_in_pfj:
12+
- Custom component
13+
extra_in_pfj:
14+
- Clicked buttons
15+
- Types
16+
---
17+
18+
# PF Compare: Button
19+
20+
## Section Coverage
21+
22+
| # | PF Section | PFJ Section | Group | Status |
23+
|---|------------|-------------|-------|--------|
24+
| 1 | Variant examples | Variant examples | Examples | matched |
25+
| 2 | Disabled buttons | Disabled buttons | Examples | matched |
26+
| 3 | Small buttons | Small buttons | Examples | matched |
27+
| 4 | Call to action (CTA) buttons | Call to action (CTA) buttons | Examples | matched |
28+
| 5 | Block level buttons | Block level buttons | Examples | matched |
29+
| 6 | Progress indicators | Progress indicators | Examples | matched |
30+
| 7 | Links as buttons | Links as buttons | Examples | matched |
31+
| 8 | Inline link as span | Inline link as span | Examples | matched |
32+
| 9 | Custom component | --- | Examples | missing_in_pfj |
33+
| 10 | Aria-disabled examples | Aria-disabled | Examples | matched (semantic) |
34+
| 11 | Button with count | Button with count | Examples | matched |
35+
| 12 | Plain with no padding | Plain with no padding | Examples | matched |
36+
| 13 | Stateful | Stateful | Examples | matched |
37+
| 14 | Circle buttons | Circle buttons | Examples | matched |
38+
| 15 | Favorite | Favorite | Animated examples | matched |
39+
| 16 | Settings | Settings | Animated examples | matched |
40+
| 17 | Hamburger | Hamburger | Animated examples | matched |
41+
42+
## DOM Differences
43+
44+
### Variant examples
45+
46+
**Status:** differences_found
47+
48+
#### P2: Modifier Differences
49+
- PFJ icon spans in link buttons missing `pf-m-start` / `pf-m-end` position modifiers. PF uses `pf-m-start` on the icon span when icon is before text, and `pf-m-end` when icon is after text.
50+
- PFJ stateful button icon spans missing `pf-m-start` modifier. PF stateful buttons have `pf-m-start` on the icon span.
51+
52+
#### P3: Attribute Differences
53+
- PFJ plain button missing `aria-label="Action"`. PF has `aria-label="Action"` on the plain icon-only button.
54+
- PFJ control icon button missing `aria-label="Copy"`. PF has `aria-label="Copy"`.
55+
56+
#### P4: Icon Differences
57+
- PFJ stateful buttons use SVG viewBox `0 0 448 512` (FontAwesome), PF uses `0 0 32 32` (Red Hat icons).
58+
59+
### Disabled buttons
60+
61+
**Status:** differences_found
62+
63+
#### P2: Modifier Differences
64+
- PFJ disabled buttons add `pf-m-disabled` modifier class. PF disabled buttons do NOT use `pf-m-disabled` — they rely on the native `disabled` attribute only.
65+
66+
#### P3: Attribute Differences
67+
- PFJ disabled buttons add `aria-disabled="true"` alongside `disabled`. PF only uses the `disabled` attribute (no `aria-disabled`).
68+
- PFJ plain disabled button missing `aria-label="Action"`. PF has it.
69+
- PFJ control disabled icon button missing `aria-label="Copy"`. PF has it.
70+
71+
### Small buttons
72+
73+
**Status:** differences_found
74+
75+
#### P2: Modifier Differences
76+
- PFJ includes `pf-m-danger,pf-m-secondary,pf-m-small` variant (danger secondary small). PF small-buttons section does not include this variant — PFJ has extra showcase coverage here.
77+
78+
#### P5: Cosmetic Differences
79+
- PFJ shows additional small variants (link, inline link, plain, control, control icon) beyond what PF shows. This is extra PFJ coverage, not a gap.
80+
81+
### Call to action (CTA) buttons
82+
83+
**Status:** differences_found
84+
85+
#### P4: Icon Differences
86+
- PFJ CTA link button arrow icon: viewBox `0 0 512 512` (FontAwesome). PF uses viewBox `null` (inline SVG without explicit viewBox).
87+
88+
#### P5: Cosmetic Differences
89+
- PFJ includes disabled CTA variants. PF does not show disabled CTAs in this section.
90+
91+
### Block level buttons
92+
93+
**Status:** ok
94+
95+
### Progress indicators
96+
97+
**Status:** differences_found
98+
99+
#### P3: Attribute Differences
100+
- PFJ plain upload button missing `aria-label="Upload"`. PF has `aria-label="Upload"`.
101+
102+
### Links as buttons
103+
104+
**Status:** differences_found
105+
106+
#### P5: Cosmetic Differences
107+
- PFJ shows additional link variants (danger secondary, danger link, jump link). PF shows primary, secondary, disabled tertiary, and link. The extra PFJ variants are additional coverage.
108+
- PFJ text content differs slightly ("Link to docs" vs PF "Link to PatternFly home").
109+
110+
### Inline link as span
111+
112+
**Status:** differences_found
113+
114+
#### P1: Missing Component Elements
115+
- PF has TWO inline span buttons (one explaining keyboard event handling). PFJ has only ONE.
116+
117+
#### P3: Attribute Differences
118+
- PFJ inline span button missing `type="button"` attribute. PF has `type="button"` on the span element.
119+
120+
### Aria-disabled examples
121+
122+
**Status:** differences_found
123+
124+
#### P1: Missing Component Elements
125+
- PF has tooltip examples: a primary button with tooltip and a secondary link-as-button with `aria-disabled`. PFJ does not include these tooltip variations.
126+
127+
#### P2: Modifier Differences
128+
- PFJ includes additional aria-disabled variants (secondary, danger, warning, plain, control) beyond PF's examples. PFJ has broader coverage.
129+
130+
#### P3: Attribute Differences
131+
- PFJ aria-disabled plain button missing `aria-label`. PF plain buttons have aria-labels.
132+
133+
### Button with count
134+
135+
**Status:** differences_found
136+
137+
#### P2: Modifier Differences
138+
- PFJ disabled buttons with count add `pf-m-disabled` modifier. PF uses only the `disabled` attribute without `pf-m-disabled`.
139+
- PFJ disabled badges do NOT have `pf-m-disabled` modifier. PF badges inside disabled buttons DO have `pf-m-disabled`.
140+
141+
### Plain with no padding
142+
143+
**Status:** differences_found
144+
145+
#### P3: Attribute Differences
146+
- PFJ button missing `aria-label="More info"`. PF has `aria-label="More info"`.
147+
148+
### Stateful
149+
150+
**Status:** differences_found
151+
152+
#### P2: Modifier Differences
153+
- PFJ stateful button icon spans missing `pf-m-start` modifier. PF stateful buttons have `pf-m-start` on icon spans.
154+
155+
#### P4: Icon Differences
156+
- PFJ stateful icons: viewBox `0 0 448 512` (FontAwesome). PF: `0 0 32 32` (Red Hat icons).
157+
158+
### Circle buttons
159+
160+
**Status:** differences_found
161+
162+
#### P1: Missing Component Elements
163+
- PFJ shows 4 basic circle buttons + 4 loading circles. PF shows 12 circle variants (primary, secondary, tertiary, danger, warning, link, control, plain, 3 stateful, upload). PFJ is missing: warning, link, control, plain, all 3 stateful, and upload circle variants.
164+
165+
#### P3: Attribute Differences
166+
- PFJ circle buttons missing `aria-label` attributes. PF circle buttons all have descriptive aria-labels.
167+
168+
### Favorite
169+
170+
**Status:** ok
171+
172+
### Settings
173+
174+
**Status:** ok
175+
176+
### Hamburger
177+
178+
**Status:** differences_found
179+
180+
#### P2: Modifier Differences
181+
- PFJ hamburger buttons missing `pf-m-expand` and `pf-m-collapse` modifiers. PF has three hamburger states: default, expand, and collapse.
182+
183+
#### P3: Attribute Differences
184+
- PFJ hamburger button missing `aria-expanded` attribute. PF hamburger buttons have `aria-expanded="false"` (default/expand) and `aria-expanded="true"` (collapse).
185+
186+
## Action Items
187+
188+
1. **[P1] Add variation:** Inline span second example — PF shows a second inline span button with keyboard event handling text. Add this to the PFJ showcase.
189+
2. **[P1] Add variation:** Aria-disabled tooltip examples — PF shows aria-disabled buttons with tooltips (primary button + secondary link-as-button). Implement tooltip support for aria-disabled buttons.
190+
3. **[P1] Add variation:** Circle button variants — PFJ missing 8 circle button variants (warning, link, control, plain, 3 stateful, upload). Add these to the showcase.
191+
4. **[P2] Fix modifier:** Icon position modifiers — Add `pf-m-start` / `pf-m-end` to `pf-v6-c-button__icon` spans across all sections (variant examples, disabled, stateful, etc.).
192+
5. **[P2] Fix modifier:** Disabled button modifier — PFJ adds `pf-m-disabled` to disabled buttons but PF does not. Remove `pf-m-disabled` from natively disabled buttons (keep only `disabled` attribute). Note: `pf-m-disabled` is correct for `<a>` elements where native `disabled` doesn't work.
193+
6. **[P2] Fix modifier:** Badge disabled modifier — PFJ disabled button badges missing `pf-m-disabled` on the `pf-v6-c-badge` span. PF adds `pf-m-disabled` to badges inside disabled buttons.
194+
7. **[P2] Fix modifier:** Hamburger expand/collapse — Add `pf-m-expand` and `pf-m-collapse` modifiers to hamburger button states.
195+
8. **[P3] Fix attribute:** aria-label on icon-only buttons — Multiple sections (variant, disabled, progress, plain-no-padding, circle) have icon-only buttons missing `aria-label`. Add appropriate aria-labels.
196+
9. **[P3] Fix attribute:** Disabled button aria-disabled — PFJ adds `aria-disabled="true"` to natively disabled buttons. PF only uses `disabled`. Remove redundant `aria-disabled` from buttons that already have `disabled`.
197+
10. **[P3] Fix attribute:** Inline span type attribute — PFJ inline span button missing `type="button"`. Add it.
198+
11. **[P3] Fix attribute:** Hamburger aria-expanded — Add `aria-expanded` attribute to hamburger buttons.
199+
12. **[P4] Fix icon:** Stateful button icons — PFJ uses FontAwesome icons (viewBox `0 0 448 512`) for stateful buttons. PF uses Red Hat icons (viewBox `0 0 32 32`). Align icon sets.
200+
13. **[P4] Fix icon:** CTA link arrow icon — PFJ CTA link button uses FontAwesome arrow. PF uses a different icon. Align icon.
201+
14. **[P1] Add section:** Custom component — PF has a "Custom component" section. Implement this in PFJ if the feature is supported.

‎showcase/markdown/developer/skills.md‎

Lines changed: 18 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -28,10 +28,11 @@ Produces a markdown report and a JSON companion file:
2828

2929
### /pf-align
3030

31-
Implements action items from a `/pf-compare` report. Reads the JSON companion file for structured data and cached HTML. Falls back to browser extraction only when a specific variation's HTML is missing from the JSON. Translates reference HTML to the Java builder API and integrates it into the existing component.
31+
Implements action items from a `/pf-compare` report. Simple fixes (CSS modifiers, ARIA attributes) are auto-generated and applied. Complex items (new variations, structural changes, icons) are presented with context for the user to implement manually. Does not produce its own reports — progress is tracked through git history.
3232

3333
```bash
3434
/pf-align button
35+
/pf-align card --item 3
3536
```
3637

3738
Use this after running `/pf-compare` to bring a component up to date with PatternFly.
@@ -64,7 +65,7 @@ Verifies that a PFJ component follows the project's conventions for documentatio
6465
/pf-lint card
6566
```
6667

67-
Writes per-component JSON reports to `docs/pf-lint/<component>.json` and an aggregate `docs/pf-lint/summary.md`. Checks include:
68+
Writes per-component JSON reports to `reports/pf-lint/<component>.json` and an aggregate `reports/pf-lint/summary.md`. Checks include:
6869
- Section markers and order (`factory`, `instance`, `add`, `builder`, `aria`, `events`, `api`, `internal`)
6970
- Javadoc completeness and format
7071
- Factory method naming
@@ -73,14 +74,14 @@ Writes per-component JSON reports to `docs/pf-lint/<component>.json` and an aggr
7374

7475
### /pf-status
7576

76-
Shows a unified status dashboard across lint, compare, align, and update dimensions for all components (or a specific one).
77+
Shows a unified status dashboard across lint, compare, and update dimensions for all components (or a specific one).
7778

7879
```bash
7980
/pf-status
8081
/pf-status button
8182
```
8283

83-
Reads JSON report files from previous skill runs — does not analyze source code directly. Writes `docs/pf-status/summary.json` and `docs/pf-status/summary.md`.
84+
Reads JSON report files from previous skill runs — does not analyze source code directly. Writes `reports/pf-status/summary.json` and `reports/pf-status/summary.md`.
8485

8586
### /pf-update
8687

@@ -112,35 +113,35 @@ The skills form a pipeline where each skill's output feeds into the next:
112113
/pf-update ──→ /pf-compare ──→ /pf-align ──→ /pf-lint
113114
│ │ │ │
114115
│ │ │ │
115-
▼ ▼ ▼ ▼
116-
.json + .md .json + .md .json .json + summary.md
116+
▼ ▼ │ ▼
117+
.json + .md .json + .md (no report) .json + summary.md
117118
│
118119
┌────────────────────────────┘
119120
▼
120-
/pf-status (reads .json from all docs/pf-*/)
121+
/pf-status (reads .json from reports/pf-*/)
121122
│
122123
▼
123124
summary.json + summary.md
124125
```
125126

126127
### Data Flow
127128

128-
- **`/pf-update`** analyzes PatternFly release changelogs and writes a prioritized work plan to `docs/pf-update/` (`.md` + `.json`). This identifies *which* components need attention.
129-
- **`/pf-compare`** takes a component name, opens both the PatternFly docs and PFJ showcase in a browser, extracts DOM/CSS data, and writes a gap analysis to `docs/pf-compare/` (`.md` + `.json`). This identifies *what* is missing or different.
130-
- **`/pf-align`** reads the `/pf-compare` JSON report for a component and implements the action items — adding missing variations, fixing DOM structure, and correcting CSS classes. The JSON contains cached HTML, so browser extraction can often be skipped. Writes a completion report to `docs/pf-align/<component>.json`.
131-
- **`/pf-lint`** verifies the component follows project conventions (section order, Javadoc, naming, formatting) and writes per-component results to `docs/pf-lint/<component>.json` plus an aggregate `summary.md`.
132-
- **`/pf-status`** is read-only — it aggregates JSON reports from all four `docs/pf-*/` directories into a single dashboard (`summary.json` + `summary.md`). It never modifies source code.
129+
- **`/pf-update`** analyzes PatternFly release changelogs and writes a prioritized work plan to `reports/pf-update/` (`.md` + `.json`). This identifies *which* components need attention.
130+
- **`/pf-compare`** takes a component name, opens both the PatternFly docs and PFJ showcase in a browser, extracts DOM/CSS data, and writes a gap analysis to `reports/pf-compare/` (`.md` + `.json`). This identifies *what* is missing or different.
131+
- **`/pf-align`** reads the `/pf-compare` JSON report for a component and implements the action items — auto-generating simple fixes (CSS modifiers, ARIA attributes) and presenting context for complex items. Does not produce its own reports; progress is tracked through git history.
132+
- **`/pf-lint`** verifies the component follows project conventions (section order, Javadoc, naming, formatting) and writes per-component results to `reports/pf-lint/<component>.json` plus an aggregate `summary.md`.
133+
- **`/pf-status`** is read-only — it aggregates JSON reports from `reports/pf-lint/`, `reports/pf-compare/`, and `reports/pf-update/` into a single dashboard (`summary.json` + `summary.md`). It never modifies source code.
133134

134135
### Dependencies
135136

136137
| Skill | Requires | Produces |
137138
|-------|----------|----------|
138139
| `/pf-dev-env` | Nothing | Running dev servers (J2CL + Vite) |
139-
| `/pf-update` | Nothing (fetches from GitHub) | `docs/pf-update/<version>.md` + `.json` |
140-
| `/pf-compare` | Dev env running (for browser access) | `docs/pf-compare/<component>.md` + `.json` |
141-
| `/pf-align` | `docs/pf-compare/<component>.json` | `docs/pf-align/<component>.json` |
142-
| `/pf-lint` | Nothing (reads source code directly) | `docs/pf-lint/<component>.json` + `docs/pf-lint/summary.md` |
143-
| `/pf-status` | JSON reports from other skills | `docs/pf-status/summary.json` + `summary.md` |
140+
| `/pf-update` | Nothing (fetches from GitHub) | `reports/pf-update/<version>.md` + `.json` |
141+
| `/pf-compare` | Dev env running (for browser access) | `reports/pf-compare/<component>.md` + `.json` |
142+
| `/pf-align` | `reports/pf-compare/<component>.json` | Modified source files (no report) |
143+
| `/pf-lint` | Nothing (reads source code directly) | `reports/pf-lint/<component>.json` + `reports/pf-lint/summary.md` |
144+
| `/pf-status` | JSON reports from other skills | `reports/pf-status/summary.json` + `summary.md` |
144145

145146
### Independent vs. Sequential
146147

0 commit comments

Comments
 (0)
Back | FazBrowse Home | New Git URL