Skip to content

chore(HelperText): updated how status is conveyed #7751

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
mcoker merged 2 commits into from
Sep 12, 2025
Merged

chore(HelperText): updated how status is conveyed #7751

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d8396e5
chore(HelperText): updated how status is conveyed
thatblindgeye Aug 21, 2025
4f09462
chore(HelperText): updated logic for no icon render
thatblindgeye Aug 29, 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
2 changes: 1 addition & 1 deletion src/patternfly/components/DatePicker/examples/DatePicker.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ import './DatePicker.css'

### Invalid
```hbs
{{#> date-picker date-picker--id="invalid" helper-text--value="Invalid date" helper-text-item--IsError="true" helper-text-item--HasIcon=true}}
{{#> date-picker date-picker--id="invalid" helper-text--value="Invalid date" helper-text-item--IsError=true}}
{{#> input-group}}
{{#> input-group-item input-group-item--IsFill=true}}
{{> form-control controlType="input" input="true" form-control--IsError="true" form-control--attribute=(concat 'aria-invalid="true" type="text" value="2020-03-05" id="' date-picker--id '-input" name="' date-picker--id '-input" aria-label="Date picker"')}}
Expand Down
2 changes: 1 addition & 1 deletion src/patternfly/components/FileUpload/examples/FileUpload.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -187,7 +187,7 @@ cssPrefix: pf-v6-c-file-upload
file-upload-file-details--attribute='aria-describedby="with-error-example-helper-text" aria-invalid="true"'
file-upload-file-details--aria-label="Empty text area"}}{{/file-upload-file-details}}
{{#> file-upload-helper-text}}
{{> helper-text helper-text-item--HasIcon=true helper-text--value="Must be a CSV file no larger than 1 KB" helper-text-item--id='with-error-example-helper-text' helper-text-item--IsError=true}}
{{> helper-text helper-text--value="Must be a CSV file no larger than 1 KB" helper-text-item--id='with-error-example-helper-text' helper-text-item--IsError=true}}
{{/file-upload-helper-text}}
{{/file-upload}}
{{/form-group-control}}
Expand Down
2 changes: 1 addition & 1 deletion src/patternfly/components/Form/examples/Form.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -198,7 +198,7 @@ cssPrefix: pf-v6-c-form
{{#> form-group-control}}
{{#> form-control controlType="textarea" form-control--modifier='pf-m-resize-both' form-control--IsError='true' form-control--attribute=(concat 'id="' form-group--id '" name="' form-group--id '" aria-invalid="true" aria-describedby="' form-group--id '-helper"')}}
{{/form-control}}
{{> form-helper-text helper-text--value='This is helper text with an icon.' helper-text-item--IsError=true helper-text-item--HasIcon=true}}
{{> form-helper-text helper-text--value='This is helper text with an icon.' helper-text-item--IsError=true}}
{{/form-group-control}}
{{/form-group}}
{{/form}}
Expand Down
2 changes: 1 addition & 1 deletion src/patternfly/components/Form/form-helper-text.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
{{{form-helper-text--attribute}}}
{{/if}}>
{{#if helper-text--value}}
{{> helper-text helper-text-item--id=(concat form-group--id '-helper') helper-text-item--HasIcon=true}}
{{> helper-text helper-text-item--id=(concat form-group--id '-helper')}}
{{else if @partial-block}}
{{> @partial-block}}
{{/if}}
Expand Down
23 changes: 10 additions & 13 deletions src/patternfly/components/HelperText/examples/HelperText.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ cssPrefix: pf-v6-c-helper-text
---

## Examples
### Static
### Basic
```hbs
{{> helper-text helper-text--value="This is default helper text"}}
{{> helper-text helper-text--value="This is indeterminate helper text" helper-text-item--IsIndeterminate=true}}
Expand All @@ -14,27 +14,24 @@ cssPrefix: pf-v6-c-helper-text
{{> helper-text helper-text--value="This is error helper text" helper-text-item--IsError=true}}
```

### Icon
```hbs
{{> helper-text helper-text--value="This is default helper text" helper-text-item--HasIcon=true}}
{{> helper-text helper-text--value="This is indeterminate helper text" helper-text-item--IsIndeterminate=true helper-text-item--HasIcon=true}}
{{> helper-text helper-text--value="This is warning helper text" helper-text-item--IsWarning=true helper-text-item--HasIcon=true}}
{{> helper-text helper-text--value="This is success helper text" helper-text-item--IsSuccess=true helper-text-item--HasIcon=true}}
{{> helper-text helper-text--value="This is error helper text" helper-text-item--IsError=true helper-text-item--HasIcon=true}}
```
### Multiple items

You can include multiple `HelperTextItem` components inside a single `HelperText` container.

### Multiple static
```hbs
{{#> helper-text}}
{{#> helper-text helper-text--IsList=true}}
{{> helper-text-item helper-text--value="This is default helper text"}}
{{> helper-text-item helper-text--value="This is another default helper text in the same block"}}
{{> helper-text-item helper-text--value="And this is more default text in the same block"}}
{{/helper-text}}
```

### Dynamic

If the `HelperTextItem` components are expected or intended to dynamically update in some way, you should use a dynamic `HelperText` container.

```hbs
{{#> helper-text-wrapper helper-text-item--IsDynamic=true helper-text-item--HasIcon=true}}
{{#> helper-text-wrapper helper-text-item--IsDynamic=true}}
{{> helper-text helper-text--value="This is default helper text"}}
{{> helper-text helper-text--value="This is indeterminate helper text" helper-text-item--IsIndeterminate=true}}
{{> helper-text helper-text--value="This is warning helper text" helper-text-item--IsWarning=true}}
Expand All @@ -45,7 +42,7 @@ cssPrefix: pf-v6-c-helper-text

### Dynamic list
```hbs
{{#> helper-text helper-text-item--IsDynamic=true helper-text-item--HasIcon=true}}
{{#> helper-text helper-text-item--IsDynamic=true helper-text--IsList=true}}
{{> helper-text-item helper-text--value='Must be at least 14 characters' helper-text-item--IsSuccess=true}}
{{> helper-text-item helper-text--value='Cannot contain any variation of the word "redhat"' helper-text-item--IsError=true}}
{{> helper-text-item helper-text--value='Must include at least 3 of the following: lowercase letter, uppercase letters, numbers, symbols' helper-text-item--IsSuccess=true}}
Expand Down
22 changes: 9 additions & 13 deletions src/patternfly/components/HelperText/helper-text-item-icon.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,21 +2,17 @@
{{#if helper-text-item-icon--attribute}}
{{{helper-text-item-icon--attribute}}}
{{/if}}>
{{#if helper-text-item--HasIcon}}
{{#if helper-text-item--IsIndeterminate}}
<i class="fas fa-fw fa-minus" aria-hidden="true"></i>
{{else if helper-text-item--IsWarning}}
<i class="fas fa-fw fa-exclamation-triangle" aria-hidden="true"></i>
{{else if helper-text-item--IsSuccess}}
<i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
{{else if helper-text-item--IsError}}
<i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
{{else}}
<i class="fas fa-fw fa-minus" aria-hidden="true"></i>
{{/if}}
{{#if helper-text-item--IsIndeterminate}}
<i class="fas fa-fw fa-minus" aria-hidden="true"></i>
{{else if helper-text-item--IsWarning}}
<i class="fas fa-fw fa-exclamation-triangle" aria-hidden="true"></i>
{{else if helper-text-item--IsSuccess}}
<i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
{{else if helper-text-item--IsError}}
<i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
{{else if @partial-block}}
{{> @partial-block}}
{{else}}
{{else if helper-text-item-icon--type}}
<i class="fas fa-fw fa-{{helper-text-item-icon--type}}" aria-hidden="true"></i>
{{/if}}
</span>
13 changes: 13 additions & 0 deletions src/patternfly/components/HelperText/helper-text-item-text.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,19 @@
{{#if helper-text-item-text--attribute}}
{{{helper-text-item-text--attribute}}}
{{/if}}>
{{#ifAny helper-text-item--IsSuccess helper-text-item--IsError helper-text-item--IsWarning helper-text-item--IsIndeterminate helper-text-item-icon--type}}
{{#> screen-reader}}
{{#if helper-text-item--IsWarning}}
Warning:
{{else if helper-text-item--IsSuccess}}
Success:
{{else if helper-text-item--IsError}}
Error:
{{else}}
Indeterminate:
{{/if}}
{{/screen-reader}}
{{/ifAny}}
{{#if helper-text--value}}
{{{helper-text--value}}}
{{else if @partial-block}}
Expand Down
6 changes: 2 additions & 4 deletions src/patternfly/components/HelperText/helper-text-item.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,10 @@
{{#if helper-text-item--attribute}}
{{{helper-text-item--attribute}}}
{{/if}}>
{{#if helper-text-item--HasIcon}}
{{#ifAny helper-text-item--IsSuccess helper-text-item--IsError helper-text-item--IsWarning helper-text-item--IsIndeterminate helper-text-item-icon--type}}
{{> helper-text-item-icon}}
{{/if}}
{{/ifAny}}
{{#if helper-text--value}}
{{> helper-text-item-text}}
{{else if @partial-block}}
{{> @partial-block}}
{{/if}}
</{{#if helper-text--IsList}}li{{else}}div{{/if}}>
10 changes: 5 additions & 5 deletions src/patternfly/components/Login/examples/Login.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ wrapperTag: div
{{> __login-main-header}}
{{#> login-main-body}}
{{#> form}}
{{> form-helper-text helper-text--value='Invalid login credentials.' helper-text--IsHidden=true helper-text-item--IsError=true helper-text-item--HasIcon=true}}
{{> form-helper-text helper-text--value='Invalid login credentials.' helper-text--IsHidden=true helper-text-item--IsError=true}}
{{#> form-group}}
{{#> form-label form-label--attribute='for="login-demo-form-username"' required="true"}}Username{{/form-label}}
{{#> form-control controlType="input" input="true" form-control--IsRequired='true' form-control--attribute='input="true" type="text" id="login-demo-form-username" name="login-demo-form-username"'}}{{/form-control}}
Expand Down Expand Up @@ -55,7 +55,7 @@ wrapperTag: div
{{> __login-main-header}}
{{#> login-main-body}}
{{#> form}}
{{> form-helper-text helper-text--value='Invalid login credentials.' helper-text-item--IsError=true helper-text-item--HasIcon=true}}
{{> form-helper-text helper-text--value='Invalid login credentials.' helper-text-item--IsError=true}}
{{#> form-group}}
{{#> form-label form-label--attribute='for="invalid-login-demo-form-username"' required="true"}}Username{{/form-label}}
{{#> form-control controlType="input" input="true" form-control--IsRequired='true' form-control--IsError='true' form-control--attribute='type="text" id="invalid-login-demo-form-username" name="invalid-login-demo-form-username" aria-invalid="true"'}}{{/form-control}}
Expand Down Expand Up @@ -94,7 +94,7 @@ wrapperTag: div
{{> __login-main-header}}
{{#> login-main-body}}
{{#> form}}
{{> form-helper-text helper-text--value='Invalid login credentials.' helper-text--IsHidden=true helper-text-item--IsError=true helper-text-item--HasIcon=true}}
{{> form-helper-text helper-text--value='Invalid login credentials.' helper-text--IsHidden=true helper-text-item--IsError=true}}
{{#> form-group}}
{{#> form-label form-label--attribute='for="login-demo-form-username"' required="true"}}Username{{/form-label}}
{{#> form-control controlType="input" input="true" form-control--IsRequired='true' form-control--attribute='type="text" id="login-demo-form-username" name="login-demo-form-username"'}}{{/form-control}}
Expand Down Expand Up @@ -136,7 +136,7 @@ wrapperTag: div
{{> __login-main-header}}
{{#> login-main-body}}
{{#> form}}
{{> form-helper-text helper-text--value='Invalid login credentials.' helper-text--IsHidden=true helper-text-item--IsError=true helper-text-item--HasIcon=true}}
{{> form-helper-text helper-text--value='Invalid login credentials.' helper-text--IsHidden=true helper-text-item--IsError=true}}
{{#> form-helper-text form-helper-text--modifier="pf-m-error pf-m-hidden"}}
{{#> form-helper-text-icon}}
<i class="fas fa-exclamation-circle" aria-hidden="true"></i>
Expand Down Expand Up @@ -184,7 +184,7 @@ wrapperTag: div
{{> __login-main-header __login-main-header--HasLangaugeSelector="true"}}
{{#> login-main-body}}
{{#> form}}
{{> form-helper-text helper-text--value='Invalid login credentials.' helper-text--IsHidden=true helper-text-item--IsError=true helper-text-item--HasIcon=true}}
{{> form-helper-text helper-text--value='Invalid login credentials.' helper-text--IsHidden=true helper-text-item--IsError=true}}
{{#> form-group}}
{{#> form-label form-label--attribute='for="login-demo-form-username"' required="true"}}Username{{/form-label}}
{{#> form-control controlType="input" input="true" form-control--IsRequired='true' form-control--attribute='type="text" id="login-demo-form-username" name="login-demo-form-username"'}}{{/form-control}}
Expand Down
2 changes: 1 addition & 1 deletion src/patternfly/demos/Alert/alert-template-horizontal-form.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@
{{/form-label}}
{{/form-group-label}}
{{#> form-group-control}}
{{> form-helper-text helper-text--value='This is a required field' helper-text-item--IsError=true helper-text-item--HasIcon=true}}
{{> form-helper-text helper-text--value='This is a required field' helper-text-item--IsError=true}}
{{#> check}}
{{#> check-input check-input--attribute='type="checkbox" id="alt-checkbox1" name="alt-checkbox1"'}}{{/check-input}}
{{#> check-label check-label--attribute='for="alt-checkbox1"'}}Follow up via email.{{/check-label}}
Expand Down
2 changes: 1 addition & 1 deletion src/patternfly/demos/Alert/alert-template-stacked-form.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@
{{#> form-label form-label--attribute=(concat 'for="' form-group--id '"') required='true'}}
How can we contact you?
{{/form-label}}
{{> form-helper-text helper-text--value='This is a required field' helper-text-item--HasIcon=true helper-text-item--IsError=true}}
{{> form-helper-text helper-text--value='This is a required field' helper-text-item--IsError=true}}
{{/form-group-label}}
{{#> form-group-control form-group-control--modifier="pf-m-inline"}}
{{#> check}}
Expand Down
10 changes: 5 additions & 5 deletions src/patternfly/demos/HelperText/examples/HelperText.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,10 +42,10 @@ section: components
{{#> form-group-control}}
{{#> form-control controlType="input" input="true" form-control--IsRequired='true' form-control--IsError='true' form-control--attribute=(concat 'type="text" id="' form-group--id '" name="' form-group--id '" aria-invalid="true" aria-describedby="' form-group--id '-helper"')}}{{/form-control}}
{{#> form-helper-text form-helper-text--id=(concat form-group--id '-helper')}}
{{#> helper-text helper-text--type="ul" helper-text-item--type="li"}}
{{> helper-text-item helper-text--value='This criteria has been met.' helper-text-item--HasIcon=true helper-text-item--IsDynamic=true helper-text-item--IsSuccess=true}}
{{> helper-text-item helper-text--value='This criteria has not been met.' helper-text-item--HasIcon=true helper-text-item--IsDynamic=true helper-text-item--IsError=true}}
{{> helper-text-item helper-text--value='This criteria has been met.' helper-text-item--HasIcon=true helper-text-item--IsDynamic=true helper-text-item--IsSuccess=true}}
{{#> helper-text helper-text--IsList=true}}
{{> helper-text-item helper-text--value='This criteria has been met.' helper-text-item--IsDynamic=true helper-text-item--IsSuccess=true}}
{{> helper-text-item helper-text--value='This criteria has not been met.' helper-text-item--IsDynamic=true helper-text-item--IsError=true}}
{{> helper-text-item helper-text--value='This criteria has been met.' helper-text-item--IsDynamic=true helper-text-item--IsSuccess=true}}
{{/helper-text}}
{{/form-helper-text}}
{{/form-group-control}}
Expand All @@ -59,7 +59,7 @@ section: components
{{#> form-group-control}}
{{#> form-control controlType="input" input="true" form-control--IsSuccess='true' form-control--attribute=(concat 'value="This is a valid comment"' 'type="text" id="' form-group--id '" name="' form-group--id '" aria-describedby="' form-group--id '-helper"')}}{{/form-control}}
{{#> form-helper-text form-helper-text--id=(concat form-group--id '-helper')}}
{{> helper-text helper-text--value='This is dynamic helper text with an icon showing success.' helper-text-item--HasIcon=true helper-text-item--IsDynamic=true helper-text-item--IsSuccess=true}}
{{> helper-text helper-text--value='This is dynamic helper text with an icon showing success.' helper-text-item--IsDynamic=true helper-text-item--IsSuccess=true}}
{{/form-helper-text}}
{{/form-group-control}}
{{/form-group}}
Expand Down
Loading