Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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/Alert/alert-icon.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -2,5 +2,5 @@
{{#if alert-icon--attribute}}
{{{alert-icon--attribute}}}
{{/if}}>
<i class="fas fa-fw{{#if alert-icon--type}} fa-{{alert-icon--type}}{{/if}}" aria-hidden="true"></i>
{{pfIcon alert-icon--type}}

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.

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
set -euo pipefail

# 1) Locate pfIcon helper implementation(s)
echo "=== Searching for pfIcon helper implementation ==="
fd -HI 'pfIcon' 2>/dev/null | head -20 || echo "fd search completed"
echo ""

echo "=== Searching for pfIcon registration/definition ==="
rg -n 'registerHelper.*pfIcon|function\s+pfIcon|export.*pfIcon' 2>/dev/null | head -20 || echo "No matches"
echo ""

# 2) Verify whether legacy token(s) like "cog" are mapped/supported
echo "=== Searching for cog icon mappings ==="
rg -n -C2 'cog' -g '*.js' -g '*.ts' -g '*.json' -g '*.yml' -g '*.yaml' 2>/dev/null | head -40 || echo "No cog mappings found"
echo ""

# 3) Confirm current Alert custom-icon examples
echo "=== Checking Alert examples for cog usage ==="
if [ -f "src/patternfly/components/Alert/examples/Alert.md" ]; then
  rg -n -C2 'alert-icon--type.*cog|cog.*alert-icon' src/patternfly/components/Alert/examples/Alert.md 2>/dev/null || echo "No alert-icon--type=cog found"
else
  echo "Alert.md not found at expected path, searching for it"
  fd -HI 'Alert.md' src/patternfly/components/Alert/ 2>/dev/null
fi
echo ""

# 4) Check the alert-icon.hbs file structure
echo "=== Checking alert-icon.hbs file ==="
if [ -f "src/patternfly/components/Alert/alert-icon.hbs" ]; then
  cat -n src/patternfly/components/Alert/alert-icon.hbs
else
  echo "alert-icon.hbs not found"
fi

Repository: patternfly/patternfly

Length of output: 2570


🏁 Script executed:

cat -n scripts/helpers.mjs | sed -n '375,400p'

Repository: patternfly/patternfly

Length of output: 1214


🏁 Script executed:

# Check if react-icons or any icon references are in package.json
echo "=== Checking package.json for react-icons ==="
if [ -f "package.json" ]; then
  rg -A 5 -B 5 'react-icons' package.json
fi
echo ""

# Search for any SVG files with "cog" in the codebase
echo "=== Searching for cog SVG files ==="
fd -HI 'cog' -e svg 2>/dev/null || echo "No cog SVG files found"
echo ""

# Check if there's a mapping/translation of icon tokens to SVG names
echo "=== Checking for icon mappings or token translations ==="
rg -n 'cog.*\.svg|alert-icon.*mapping' -g '*.js' -g '*.ts' -g '*.mjs' 2>/dev/null | head -20 || echo "No mappings found"
echo ""

# Look at pfIcons definition for context
echo "=== Checking pfIcons definition ==="
cat -n src/icons/definitions/pficons.mjs | head -50

Repository: patternfly/patternfly

Length of output: 50377


🏁 Script executed:

# Check if react-icons is available and look for cog icon
echo "=== Looking for cog.svg in node_modules if available ==="
find node_modules/@patternfly/react-icons -name "*cog*" -o -name "cog.svg" 2>/dev/null | head -20 || echo "node_modules not accessible or cog not found"
echo ""

# Check the package.json to understand the react-icons version
echo "=== React-icons version in package.json ==="
rg '"@patternfly/react-icons"' package.json
echo ""

# Search for any existing references or mappings for icon names in the code
echo "=== Searching for icon name references/mappings ==="
rg -n 'cog|icon.*name|icon.*token' src/patternfly/components/Alert/ --type hbs -A 2 -B 2 | head -40

Repository: patternfly/patternfly

Length of output: 273


🏁 Script executed:

# Check if there are any other components using pfIcon helper to understand naming convention
echo "=== Files using pfIcon helper ==="
rg -l 'pfIcon' --type hbs src/patternfly/components/ | head -10
echo ""

# Search for other icon usages in hbs files to see naming pattern
echo "=== Icon naming patterns in hbs files ==="
rg -n '\{\{pfIcon' src/patternfly/components/ --type hbs -A 0 -B 0 | head -30
echo ""

# Check if there's any icon name validation or mapping in the codebase
echo "=== Checking for icon registry or validation ==="
fd -HI 'icon' -e json src/icons/ | head -10
echo ""

# Look at the exact usage in alert examples more carefully
echo "=== Detailed Alert example context ==="
rg -n -C 5 'alert-icon--type="cog"' src/patternfly/components/Alert/examples/ | head -50

Repository: patternfly/patternfly

Length of output: 2331


🏁 Script executed:

# Check git diff/history to see what the previous alert-icon.hbs looked like
echo "=== Git log for alert-icon.hbs (last few commits) ==="
git log --oneline -20 src/patternfly/components/Alert/alert-icon.hbs 2>/dev/null || echo "Not a git repo or file history unavailable"
echo ""

# Check if there's a git diff showing what changed
echo "=== Git diff for alert-icon.hbs ==="
git diff HEAD~1 src/patternfly/components/Alert/alert-icon.hbs 2>/dev/null || echo "Git diff not available"
echo ""

# Check if button-icon.hbs provides hints about expected icon names
echo "=== Full button-icon.hbs content ==="
cat -n src/patternfly/components/Button/button-icon.hbs
echo ""

# Search for any comments or documentation about valid icon names
echo "=== Looking for icon name documentation ==="
rg -n 'icon.*name|valid.*icon|cog' README.md CONTRIBUTING.md 2>/dev/null | head -20 || echo "No matches"

Repository: patternfly/patternfly

Length of output: 1333


🏁 Script executed:

# Show the git commit that updated to microns icons
echo "=== Git show of the microns update commit ==="
git show b104e8ca --stat | head -50
echo ""

# Check git diff for that commit
git show b104e8ca src/patternfly/components/Alert/alert-icon.hbs 2>/dev/null | head -100
echo ""

# Look for any git history showing what the old version had
echo "=== Previous version of alert-icon.hbs ==="
git show b104e8ca~1:src/patternfly/components/Alert/alert-icon.hbs 2>/dev/null || echo "Previous version not available"

Repository: patternfly/patternfly

Length of output: 3921


🏁 Script executed:

# Check the pfIcons definition to see what icon names are actually available
echo "=== Available icons in pfIcons definition (first 30) ==="
rg -A 1 'export const pfIcons' src/icons/definitions/pficons.mjs | head -5
echo ""

# Look for "cog" in pficons
echo "=== Search for cog in pficons.mjs ==="
rg 'cog' src/icons/definitions/pficons.mjs
echo ""

# Count total icons available
echo "=== Total count of icons in pficons.mjs ==="
rg '"[^"]+":' src/icons/definitions/pficons.mjs | wc -l
echo ""

# Check if microns icon library is mentioned
echo "=== Searching for microns references ==="
rg -n 'microns|rh-microns' src/patternfly/components/Alert/ --type hbs -B 2 -A 2

Repository: patternfly/patternfly

Length of output: 1487


🏁 Script executed:

# Let's check what icons are actually available by looking at valid icon names used in the codebase
echo "=== Valid icon names used in components (sample) ==="
rg 'pfIcon\s+"[^"]+"' src/patternfly/components/ --type hbs | head -20
echo ""

# Check if there's any documentation about valid icon names
echo "=== Looking for icon names starting with rh- ==="
rg 'rh-[a-z-]+' src/patternfly/components/ --type hbs | head -30
echo ""

# See if alert examples reference any other custom examples
echo "=== Full Alert.md file to understand context ==="
grep -n "alert-icon--type" src/patternfly/components/Alert/examples/Alert.md

Repository: patternfly/patternfly

Length of output: 3325


Update Alert examples to use valid icon names; "cog" token incompatible with pfIcon helper.

Lines 262 and 270 in src/patternfly/components/Alert/examples/Alert.md pass alert-icon--type="cog", but all valid icon tokens in this codebase follow the rh-ui-* or rh-microns-* naming pattern (e.g., rh-ui-settings, rh-ui-check-circle-fill). The pfIcon helper looks for SVG files matching the provided token; "cog" will not resolve and will silently render as a missing icon. Replace the bare "cog" token with a valid icon name such as "rh-ui-settings".

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@src/patternfly/components/Alert/alert-icon.hbs` at line 5, The alert examples
pass an invalid icon token "cog" to the pfIcon helper via the alert-icon--type
attribute (used by the alert-icon.hbs template), which won't resolve to an SVG;
update the examples in Alert.md (the Alert component examples that set
alert-icon--type="cog") to use a valid icon token such as "rh-ui-settings" (or
another rh-ui-* / rh-microns-* token) so pfIcon can find the corresponding SVG.

</div>
2 changes: 1 addition & 1 deletion src/patternfly/components/Alert/alert-toggle-icon.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -2,5 +2,5 @@
{{#if alert-toggle-icon--attribute}}
{{{alert-toggle-icon--attribute}}}
{{/if}}>
<i class="fas fa-angle-right" aria-hidden="true"></i>
{{pfIcon "rh-microns-caret-down"}}
</span>
3 changes: 2 additions & 1 deletion src/patternfly/components/Alert/alert.scss
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,7 @@
--#{$alert}--m-expandable__description--action-group--PaddingBlockStart: var(--#{$alert}__action-group--PaddingBlockStart-base);

// Expanded
--#{$alert}--m-expanded__toggle-icon--Rotate: 90deg;
--#{$alert}--m-expanded__toggle-icon--Rotate: -180deg;
--#{$alert}--m-expanded__description--action-group--PaddingBlockStart: var(--#{$alert}__description--action-group--PaddingBlockStart-base);
}

Expand Down Expand Up @@ -197,6 +197,7 @@
margin-inline-end: var(--#{$alert}__icon--MarginInlineEnd);
font-size: var(--#{$alert}__icon--FontSize);
color: var(--#{$alert}__icon--Color);
scale: 1.14;
}

.#{$alert}__title {
Expand Down
64 changes: 32 additions & 32 deletions src/patternfly/components/Alert/examples/Alert.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,39 +8,39 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
### Types
```hbs
{{#> alert alert--modifier="pf-m-custom" alert--attribute='aria-label="Custom alert"'}}
{{> alert-icon alert-icon--type="bell"}}
{{> alert-icon alert-icon--type="rh-ui-notification-fill"}}
{{#> alert-title}}
{{#> screen-reader}}Custom alert:{{/screen-reader}}
Custom alert title
{{/alert-title}}
{{/alert}}
<br>
{{#> alert alert--modifier="pf-m-info" alert--attribute='aria-label="Information alert"'}}
{{> alert-icon alert-icon--type="info-circle"}}
{{> alert-icon alert-icon--type="rh-ui-information-fill"}}
{{#> alert-title}}
{{#> screen-reader}}Info alert:{{/screen-reader}}
Info alert title
{{/alert-title}}
{{/alert}}
<br>
{{#> alert alert--modifier="pf-m-success" alert--attribute='aria-label="Success alert"'}}
{{> alert-icon alert-icon--type="check-circle"}}
{{> alert-icon alert-icon--type="rh-ui-check-circle-fill"}}
{{#> alert-title}}
{{#> screen-reader}}Success alert:{{/screen-reader}}
Success alert title
{{/alert-title}}
{{/alert}}
<br>
{{#> alert alert--modifier="pf-m-warning" alert--attribute='aria-label="Warning alert"'}}
{{> alert-icon alert-icon--type="exclamation-triangle"}}
{{> alert-icon alert-icon--type="rh-ui-warning-fill"}}
{{#> alert-title}}
{{#> screen-reader}}Warning alert:{{/screen-reader}}
Warning alert title
{{/alert-title}}
{{/alert}}
<br>
{{#> alert alert--modifier="pf-m-danger" alert--attribute='aria-label="Danger alert"'}}
{{> alert-icon alert-icon--type="exclamation-circle"}}
{{> alert-icon alert-icon--type="rh-ui-error-fill"}}
{{#> alert-title}}
{{#> screen-reader}}Danger alert:{{/screen-reader}}
Danger alert title
Expand All @@ -51,7 +51,7 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
### Variations
```hbs
{{#> alert alert--modifier="pf-m-success" alert--attribute='aria-label="Success alert"'}}
{{> alert-icon alert-icon--type="check-circle"}}
{{> alert-icon alert-icon--type="rh-ui-check-circle-fill"}}
{{#> alert-title}}
{{#> screen-reader}}Success alert:{{/screen-reader}}
Success alert title
Expand All @@ -73,7 +73,7 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
{{/alert}}
<br>
{{#> alert alert--modifier="pf-m-success" alert--attribute='aria-label="Success alert"'}}
{{> alert-icon alert-icon--type="check-circle"}}
{{> alert-icon alert-icon--type="rh-ui-check-circle-fill"}}
{{#> alert-title}}
{{#> screen-reader}}Success alert:{{/screen-reader}}
Success alert title
Expand All @@ -87,7 +87,7 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
{{/alert}}
<br>
{{#> alert alert--modifier="pf-m-success" alert--attribute='aria-label="Success alert"'}}
{{> alert-icon alert-icon--type="check-circle"}}
{{> alert-icon alert-icon--type="rh-ui-check-circle-fill"}}
{{#> alert-title}}
{{#> screen-reader}}Success alert:{{/screen-reader}}
Success alert title
Expand All @@ -106,7 +106,7 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
{{/alert}}
<br>
{{#> alert alert--modifier="pf-m-success" alert--attribute='aria-label="Success alert"'}}
{{> alert-icon alert-icon--type="check-circle"}}
{{> alert-icon alert-icon--type="rh-ui-check-circle-fill"}}
{{#> alert-title}}
{{#> screen-reader}}Success alert:{{/screen-reader}}
Success alert title
Expand All @@ -117,15 +117,15 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
{{/alert}}
<br>
{{#> alert alert--modifier="pf-m-success" alert--attribute='aria-label="Success alert"'}}
{{> alert-icon alert-icon--type="check-circle"}}
{{> alert-icon alert-icon--type="rh-ui-check-circle-fill"}}
{{#> alert-title}}
{{#> screen-reader}}Success alert:{{/screen-reader}}
Success alert title
{{/alert-title}}
{{/alert}}
<br>
{{#> alert alert--modifier="pf-m-success" alert--attribute='aria-label="Success alert with title truncation"'}}
{{> alert-icon alert-icon--type="check-circle"}}
{{> alert-icon alert-icon--type="rh-ui-check-circle-fill"}}
{{#> alert-title alert-title--modifier="pf-m-truncate"}}
{{#> screen-reader}}Success alert:{{/screen-reader}}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque cursus enim fringilla tincidunt. Proin lobortis aliquam dictum. Nam vel ullamcorper nulla, nec blandit dolor. Vivamus pellentesque neque justo, nec accumsan nulla rhoncus id. Suspendisse mollis, tortor quis faucibus volutpat, sem leo fringilla turpis, ac lacinia augue metus in nulla. Cras vestibulum lacinia orci. Pellentesque sodales consequat interdum. Sed porttitor tincidunt metus nec iaculis. Pellentesque non commodo justo. Morbi feugiat rhoncus neque, vitae facilisis diam aliquam nec. Sed dapibus vitae quam at tristique. Nunc vel commodo mi. Mauris et rhoncus leo.
Expand All @@ -136,7 +136,7 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
{{/alert}}
<br>
{{#> alert alert--modifier="pf-m-success" alert--attribute='aria-label="Success alert with title truncation at 2 lines"'}}
{{> alert-icon alert-icon--type="check-circle"}}
{{> alert-icon alert-icon--type="rh-ui-check-circle-fill"}}
{{#> alert-title alert-title--modifier="pf-m-truncate" alert-title--attribute='style="--pf-v6-c-alert__title--max-lines: 2"'}}
{{#> screen-reader}}Success alert:{{/screen-reader}}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque cursus enim fringilla tincidunt. Proin lobortis aliquam dictum. Nam vel ullamcorper nulla, nec blandit dolor. Vivamus pellentesque neque justo, nec accumsan nulla rhoncus id. Suspendisse mollis, tortor quis faucibus volutpat, sem leo fringilla turpis, ac lacinia augue metus in nulla. Cras vestibulum lacinia orci. Pellentesque sodales consequat interdum. Sed porttitor tincidunt metus nec iaculis. Pellentesque non commodo justo. Morbi feugiat rhoncus neque, vitae facilisis diam aliquam nec. Sed dapibus vitae quam at tristique. Nunc vel commodo mi. Mauris et rhoncus leo.
Expand All @@ -150,39 +150,39 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
### Inline types
```hbs
{{#> alert alert--modifier="pf-m-custom pf-m-inline" alert--attribute='aria-label="Inline custom alert"'}}
{{> alert-icon alert-icon--type="bell"}}
{{> alert-icon alert-icon--type="rh-ui-notification-fill"}}
{{#> alert-title}}
{{#> screen-reader}}Custom inline alert:{{/screen-reader}}
Custom inline alert title
{{/alert-title}}
{{/alert}}
<br>
{{#> alert alert--modifier="pf-m-info pf-m-inline" alert--attribute='aria-label="Inline information alert"'}}
{{> alert-icon alert-icon--type="info-circle"}}
{{> alert-icon alert-icon--type="rh-ui-information-fill"}}
{{#> alert-title}}
{{#> screen-reader}}Info alert:{{/screen-reader}}
Info inline alert title
{{/alert-title}}
{{/alert}}
<br>
{{#> alert alert--modifier="pf-m-success pf-m-inline" alert--attribute='aria-label="Inline success alert"'}}
{{> alert-icon alert-icon--type="check-circle"}}
{{> alert-icon alert-icon--type="rh-ui-check-circle-fill"}}
{{#> alert-title}}
{{#> screen-reader}}Success alert:{{/screen-reader}}
Success inline alert title
{{/alert-title}}
{{/alert}}
<br>
{{#> alert alert--modifier="pf-m-warning pf-m-inline" alert--attribute='aria-label="Inline warning alert"'}}
{{> alert-icon alert-icon--type="exclamation-triangle"}}
{{> alert-icon alert-icon--type="rh-ui-warning-fill"}}
{{#> alert-title}}
{{#> screen-reader}}Warning alert:{{/screen-reader}}
Warning inline alert title
{{/alert-title}}
{{/alert}}
<br>
{{#> alert alert--modifier="pf-m-danger pf-m-inline" alert--attribute='aria-label="Inline danger alert"'}}
{{> alert-icon alert-icon--type="exclamation-circle"}}
{{> alert-icon alert-icon--type="rh-ui-error-fill"}}
{{#> alert-title}}
{{#> screen-reader}}Danger alert:{{/screen-reader}}
Danger inline alert title
Expand All @@ -193,7 +193,7 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
### Inline variations
```hbs
{{#> alert alert--modifier="pf-m-success pf-m-inline" alert--attribute='aria-label="Success alert"'}}
{{> alert-icon alert-icon--type="check-circle"}}
{{> alert-icon alert-icon--type="rh-ui-check-circle-fill"}}
{{#> alert-title}}
{{#> screen-reader}}Success alert:{{/screen-reader}}
Success alert title
Expand All @@ -215,7 +215,7 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
{{/alert}}
<br>
{{#> alert alert--modifier="pf-m-success pf-m-inline" alert--attribute='aria-label="Success alert"'}}
{{> alert-icon alert-icon--type="check-circle"}}
{{> alert-icon alert-icon--type="rh-ui-check-circle-fill"}}
{{#> alert-title}}
{{#> screen-reader}}Success alert:{{/screen-reader}}
Success alert title
Expand All @@ -229,7 +229,7 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
{{/alert}}
<br>
{{#> alert alert--modifier="pf-m-success pf-m-inline" alert--attribute='aria-label="Success alert"'}}
{{> alert-icon alert-icon--type="check-circle"}}
{{> alert-icon alert-icon--type="rh-ui-check-circle-fill"}}
{{#> alert-title}}
{{#> screen-reader}}Success alert:{{/screen-reader}}
Success alert title
Expand All @@ -248,7 +248,7 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
{{/alert}}
<br>
{{#> alert alert--modifier="pf-m-success pf-m-inline" alert--attribute='aria-label="Success alert"'}}
{{> alert-icon alert-icon--type="check-circle"}}
{{> alert-icon alert-icon--type="rh-ui-check-circle-fill"}}
{{#> alert-title}}
{{#> screen-reader}}Success alert:{{/screen-reader}}
Success alert title
Expand Down Expand Up @@ -278,7 +278,7 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
### Inline plain
```hbs
{{#> alert alert--modifier="pf-m-success pf-m-plain pf-m-inline" alert--attribute='aria-label="Success alert"'}}
{{> alert-icon alert-icon--type="check-circle"}}
{{> alert-icon alert-icon--type="rh-ui-check-circle-fill"}}
{{#> alert-title}}
{{#> screen-reader}}Success alert:{{/screen-reader}}
Success alert title
Expand All @@ -290,7 +290,7 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
```hbs
{{#> alert alert--id="alert-expandable-example-1" alert--IsExpandable="true" alert--modifier="pf-m-success" alert--attribute='aria-label="Success alert"'}}
{{> alert-toggle}}
{{> alert-icon alert-icon--type="check-circle"}}
{{> alert-icon alert-icon--type="rh-ui-check-circle-fill"}}
{{#> alert-title}}
{{#> screen-reader}}Success alert:{{/screen-reader}}
Success alert title
Expand All @@ -313,7 +313,7 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
<br>
{{#> alert alert--id="alert-expandable-example-2" alert--IsExpandable="true" alert--IsExpanded="true" alert--modifier="pf-m-success" alert--attribute='aria-label="Success alert"'}}
{{> alert-toggle}}
{{> alert-icon alert-icon--type="check-circle"}}
{{> alert-icon alert-icon--type="rh-ui-check-circle-fill"}}
{{#> alert-title}}
{{#> screen-reader}}Success alert:{{/screen-reader}}
Success alert title (expanded)
Expand All @@ -336,7 +336,7 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
<br>
{{#> alert alert--id="alert-expandable-example-3" alert--IsExpandable="true" alert--modifier="pf-m-success pf-m-inline" alert--attribute='aria-label="Success alert"'}}
{{> alert-toggle}}
{{> alert-icon alert-icon--type="check-circle"}}
{{> alert-icon alert-icon--type="rh-ui-check-circle-fill"}}
{{#> alert-title}}
{{#> screen-reader}}Success alert:{{/screen-reader}}
Success alert title
Expand All @@ -359,7 +359,7 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
<br>
{{#> alert alert--id="alert-expandable-example-4" alert--IsExpandable="true" alert--IsExpanded="true" alert--modifier="pf-m-success pf-m-inline" alert--attribute='aria-label="Success alert"'}}
{{> alert-toggle}}
{{> alert-icon alert-icon--type="check-circle"}}
{{> alert-icon alert-icon--type="rh-ui-check-circle-fill"}}
{{#> alert-title}}
{{#> screen-reader}}Success alert:{{/screen-reader}}
Success alert title (expanded)
Expand Down Expand Up @@ -390,7 +390,7 @@ An alert group is optional when only one static alert is needed. It becomes requ
{{#> alert-group}}
{{#> alert-item}}
{{#> alert alert--modifier="pf-m-inline pf-m-success" alert--attribute='aria-label="Success alert"'}}
{{#> alert-icon alert-icon--type="check-circle"}}
{{#> alert-icon alert-icon--type="rh-ui-check-circle-fill"}}
{{/alert-icon}}
{{#> alert-title}}
{{#> screen-reader}}Success alert:{{/screen-reader}}
Expand All @@ -401,7 +401,7 @@ An alert group is optional when only one static alert is needed. It becomes requ

{{#> alert-item}}
{{#> alert alert--modifier="pf-m-inline pf-m-danger" alert--attribute='aria-label="Danger alert"'}}
{{#> alert-icon alert-icon--type="exclamation-circle"}}
{{#> alert-icon alert-icon--type="rh-ui-error-fill"}}
{{/alert-icon}}
{{#> alert-title}}
{{#> screen-reader}}Danger alert:{{/screen-reader}}
Expand All @@ -412,7 +412,7 @@ An alert group is optional when only one static alert is needed. It becomes requ

{{#> alert-item}}
{{#> alert alert--modifier="pf-m-inline pf-m-info" alert--attribute='aria-label="Information alert"'}}
{{#> alert-icon alert-icon--type="info-circle"}}
{{#> alert-icon alert-icon--type="rh-ui-information-fill"}}
{{/alert-icon}}
{{#> alert-title}}
{{#> screen-reader}}Info alert:{{/screen-reader}}
Expand Down Expand Up @@ -442,7 +442,7 @@ For sighted users, interactive elements can be included in this message in one o
{{#> alert-group alert-group--modifier="pf-m-toast"}}
{{#> alert-item}}
{{#> alert alert--modifier="pf-m-success" alert--attribute='aria-label="Success toast alert"'}}
{{#> alert-icon alert-icon--type="check-circle"}}
{{#> alert-icon alert-icon--type="rh-ui-check-circle-fill"}}
{{/alert-icon}}
{{#> alert-title alert-title--attribute='id="alert_one_title"'}}
{{#> screen-reader}}Success alert:{{/screen-reader}}
Expand All @@ -459,7 +459,7 @@ For sighted users, interactive elements can be included in this message in one o

{{#> alert-item}}
{{#> alert alert--modifier="pf-m-danger" alert--attribute='aria-label="Danger toast alert"'}}
{{#> alert-icon alert-icon--type="exclamation-circle"}}
{{#> alert-icon alert-icon--type="rh-ui-error-fill"}}
{{/alert-icon}}
{{#> alert-title alert-title--attribute='id="alert_two_title"'}}
{{#> screen-reader}}Danger alert:{{/screen-reader}}
Expand All @@ -473,7 +473,7 @@ For sighted users, interactive elements can be included in this message in one o

{{#> alert-item}}
{{#> alert alert--modifier="pf-m-info" alert--attribute='aria-label="Information toast alert"'}}
{{#> alert-icon alert-icon--type="info-circle"}}
{{#> alert-icon alert-icon--type="rh-ui-information-fill"}}
{{/alert-icon}}
{{#> alert-title alert-title--attribute='id="alert_three_title"'}}
{{#> screen-reader}}Info alert:{{/screen-reader}}
Expand Down