Skip to content

chore(Progress): updated placement and verbiage for status examples #7777

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
thatblindgeye merged 3 commits into from
Sep 4, 2025
Merged

chore(Progress): updated placement and verbiage for status examples #7777

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2e48559
chore(Progress): updated placement and verbiage for status examples
thatblindgeye Sep 2, 2025
4bdc2c1
chore(Progress): erin feedback
thatblindgeye Sep 3, 2025
aca6e6f
chore(Progress): missing quotation
thatblindgeye Sep 4, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
174 changes: 91 additions & 83 deletions src/patternfly/components/Progress/examples/Progress.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,77 +60,6 @@ cssPrefix: pf-v6-c-progress
{{/progress}}
```

### Success
```hbs
{{#> progress
progress__value="100"
progress__description="Title"
progress--success="true"
progress__id="progress-success-example"
}}
{{/progress}}
```

### Warning
```hbs
{{#> progress
progress__value="100"
progress__description="Title"
progress--warning="true"
progress__id="progress-warning-example"
}}
{{/progress}}
```

### Failure
```hbs
{{#> progress
progress__value="33"
progress__description="Title"
progress--danger="true"
progress__id="progress-failure-example"
}}
{{/progress}}
```

### Inside success
```hbs
{{#> progress
progress__value="100"
progress__description="Title"
progress--modifier="pf-m-lg"
progress--inside="inside"
progress--success="success"
progress__id="progress-inside-success-example"
}}
{{/progress}}
```

### Inside warning
```hbs
{{#> progress
progress__value="100"
progress__description="Title"
progress--modifier="pf-m-lg"
progress--inside="inside"
progress--warning="warning"
progress__id="progress-inside-warning-example"
}}
{{/progress}}
```

### Outside failure
```hbs
{{#> progress
progress__value="33"
progress__description="Title"
progress--modifier="pf-m-outside pf-m-lg"
progress--danger="danger"
progress__id="progress-outside-failure-example"
}}
{{/progress}}
```

### Outside static width measure
```hbs
{{#> progress
Expand Down Expand Up @@ -215,18 +144,6 @@ cssPrefix: pf-v6-c-progress
{{/progress}}
```

### Failure without measure
```hbs
{{#> progress
progress__value="33"
progress--no-measure="true"
progress__description="Title"
progress--danger="true"
progress__id="progress-no-measure-failure-example"
}}
{{/progress}}
```

### Finite step
```hbs
{{#> progress
Expand Down Expand Up @@ -259,6 +176,7 @@ cssPrefix: pf-v6-c-progress
progress__description="Title"
progress__id="progress-helper-text-example"
helper-text--value="Progress helper text"
progress__HasAriaDescribedby=true
}}
{{/progress}}
```
Expand All @@ -280,6 +198,96 @@ If the status that displays with the bar is not a percentage, then the ARIA tag
{{/progress}}
```

## Status examples

When conveying status, you should ensure:
- There is visible helper text that explains the status.
- The helper text includes the status icon, as seen in our [basic helper text example](/components/helper-text/html#basic).

@mcoker mcoker Sep 3, 2025

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Impressive! Anticipating the change from #static to #basic. But generally if I link to another component in the docs, I link to the default/react tab. That link won't work if you're just looking at core docs (like in this PR), but it works on org. Curious what you and @edonehoo think.

Suggested change
- The helper text includes the status icon, as seen in our [basic helper text example](/components/helper-text/html#basic).
- The helper text includes the status icon, as seen in our [basic helper text example](/components/helper-text#basic).

@thatblindgeye thatblindgeye Sep 4, 2025

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In this case this should be fine - I think my one caveat would be do we want to link to a React example if someone is browsing the HTML docs? The link not working correctly on staging/local builds is a fair point, but I guess that depends if we should worry as much about that or the final experience on org?

@edonehoo edonehoo Sep 4, 2025

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

agree! didn't catch that, but I also link to the react tab unless we're referencing a core-specific example

@edonehoo edonehoo Sep 4, 2025

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

oops my page didn't refresh with Eric's comment before my reply. I didn't realize that the progress doc is an html page since I'm usually in react land, but hm that's a fair point. If it's safe to assume that consumers generally stick with html/css implementation consistently (rather than mingling html & react implementations for something like this) then maybe it is better to link to the html helper text here?

- The helper text is linked to the `.pf-v6-c-progress__bar[role="progressbar"]` element via an `aria-describedby` attribute, as seen in the [progress helper text example](#helper-text).

### Success
```hbs
{{#> progress
progress__value="100"
progress__description="Title"
progress--success="true"
progress__id="progress-success-example"
}}
{{/progress}}
```

### Warning
```hbs
{{#> progress
progress__value="100"
progress__description="Title"
progress--warning="true"
progress__id="progress-warning-example"
}}
{{/progress}}
```

### Failure
```hbs
{{#> progress
progress__value="33"
progress__description="Title"
progress--danger="true"
progress__id="progress-failure-example"
}}
{{/progress}}
```

### Inside success
```hbs
{{#> progress
progress__value="100"
progress__description="Title"
progress--modifier="pf-m-lg"
progress--inside="inside"
progress--success="success"
progress__id="progress-inside-success-example"
}}
{{/progress}}
```

### Inside warning
```hbs
{{#> progress
progress__value="100"
progress__description="Title"
progress--modifier="pf-m-lg"
progress--inside="inside"
progress--warning="warning"
progress__id="progress-inside-warning-example"
}}
{{/progress}}
```

### Outside failure
```hbs
{{#> progress
progress__value="33"
progress__description="Title"
progress--modifier="pf-m-outside pf-m-lg"
progress--danger="danger"
progress__id="progress-outside-failure-example"
}}
{{/progress}}
```

### Failure without measure
```hbs
{{#> progress
progress__value="33"
progress--no-measure="true"
progress__description="Title"
progress--danger="true"
progress__id="progress-no-measure-failure-example"
}}
{{/progress}}
```

## Documentation
### Overview
### Accessibility
Expand Down
3 changes: 3 additions & 0 deletions src/patternfly/components/Progress/progress-bar.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,9 @@
{{#if progress__aria-label}}
aria-label="{{progress__aria-label}}"
{{/if}}
{{#if helper-text--value}}
aria-describedby="{{progress__id}}-help-text"
{{/if}}
{{~#if progress__description}}
{{#unless progress__aria-labelledby}}
aria-labelledby="{{progress__id}}-description"
Expand Down
2 changes: 1 addition & 1 deletion src/patternfly/components/Progress/progress-helper-text.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
{{{progress-helper-text--attribute}}}
{{/if}}>
{{#if helper-text--value}}
{{> helper-text}}
{{> helper-text helper-text--attribute=(concat 'id="' progress__id '-help-text"')}}
{{else if @partial-block}}
{{> @partial-block}}
{{/if}}
Expand Down