Skip to content

Commit 6d2dd74

Browse files
committed
Merge branch 'staging/pfv6' into feat/tooltip/v6
2 parents df58829 + 02103f4 commit 6d2dd74

35 files changed

Lines changed: 1207 additions & 305 deletions

.changeset/calm-friends-carry.md

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
---
2+
"@patternfly/elements": major
3+
---
4+
5+
`<pf-v6-progress>`: replaces `<pf-v5-progress>` with PatternFly v6 design specs.
6+
7+
```html
8+
<pf-v6-progress value="33" description="Loading..."></pf-v6-progress>
9+
```
10+
11+
**Breaking Changes from v5**
12+
13+
- Renamed tag from `<pf-v5-progress>` to `<pf-v6-progress>`
14+
- CSS custom properties renamed from `--pf-v5-c-progress--*` to `--pf-v6-c-progress--*`
15+
16+
**New features**
17+
18+
- `accessible-label` attribute for screen reader text via ElementInternals
19+
- `value-text` attribute for custom `aria-valuetext` (finite step displays)
20+
- `truncated` attribute for ellipsis overflow on description
21+
- `hide-status-icon` attribute for tight layouts
22+
- `helper-text` slot for supplementary text below the bar, auto-wired to `aria-describedby`
23+
- v6 design tokens and `light-dark()` support

elements/pf-v5-progress/README.md

Lines changed: 0 additions & 33 deletions
This file was deleted.

elements/pf-v5-progress/demo/index.html

Lines changed: 0 additions & 5 deletions
This file was deleted.

elements/pf-v5-progress/demo/kitchen-sink.css

Lines changed: 0 additions & 4 deletions
This file was deleted.

elements/pf-v5-progress/demo/kitchen-sink.html

Lines changed: 0 additions & 141 deletions
This file was deleted.

elements/pf-v5-progress/demo/truncated-description.html

Lines changed: 0 additions & 20 deletions
This file was deleted.

elements/pf-v5-progress/docs/pf-v5-progress.md

Lines changed: 0 additions & 49 deletions
This file was deleted.

elements/pf-v5-progress/test/pf-progress.spec.ts

Lines changed: 0 additions & 52 deletions
This file was deleted.

elements/pf-v6-progress/README.md

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
# Progress
2+
3+
A progress bar gives the user a visual representation of their completion status of an ongoing process or task.
4+
5+
## Usage
6+
7+
```html
8+
<pf-v6-progress value="33" description="Title"></pf-v6-progress>
9+
10+
<script type="module">
11+
import '@patternfly/elements/pf-v6-progress/pf-v6-progress.js';
12+
</script>
13+
```
14+
15+
With variant and measure location:
16+
17+
```html
18+
<pf-v6-progress value="100"
19+
description="Upload complete"
20+
variant="success"
21+
measure-location="outside"></pf-v6-progress>
22+
```
23+
24+
With helper text:
25+
26+
```html
27+
<pf-v6-progress value="33" description="Uploading">
28+
<span slot="helper-text">Uploading 3 of 9 files</span>
29+
</pf-v6-progress>
30+
```
31+
32+
## Divergences from React `Progress`
33+
34+
### Not implemented
35+
36+
| React prop | Notes |
37+
|---|---|
38+
| `label` | Use `value-text` for custom measure text. Rich content (ReactNode) not supported. |
39+
| `tooltipPosition` | Not implemented. |
40+
41+
### Changed API
42+
43+
| React prop | Web component | Difference |
44+
|---|---|---|
45+
| `title` | `description` attribute | Visible title text above the bar. Renamed to avoid shadowing the native HTML `title` attribute. |
46+
| `isTitleTruncated` | `truncated` attribute | Boolean. Truncates `description` with CSS ellipsis. |
47+
| `measureLocation` `"top"` | Default (no attribute) | React's `"top"` is the default; omitting `measure-location` produces the same layout. |
48+
| `measureLocation` | `measure-location` attribute | Singleline layout derived automatically when no `description` is set. |
49+
| `size` `"md"` | Default (no attribute) | React's `"md"` is the default size; omitting `size` produces the same result. |
50+
| `helperText` | `helper-text` slot | Slot instead of prop. Slotted elements are automatically wired to `aria-describedby` via ElementInternals. |
51+
| `aria-label` | `accessible-label` attribute | Screen reader name set via ElementInternals. Falls back to `description`, then `"Progress status"`. |
52+
| `aria-labelledby` | Native `aria-labelledby` on host | Use the native attribute directly on the host element -- the host has `role="progressbar"` so standard ARIA attributes work. |
53+
| `aria-describedby` | `helper-text` slot | Slot content is automatically associated via `ariaDescribedByElements`. For external descriptions, use native `aria-describedby` on the host. |
54+
| `hideStatusIcon` | `hide-status-icon` attribute | Boolean. Hides the variant status icon while keeping variant coloring. |
55+
56+
### Added
57+
58+
| Web component API | Notes |
59+
|---|---|
60+
| `helper-text` slot | Rich content below the bar, auto-wired to `aria-describedby`. |

0 commit comments

Comments
 (0)