Skip to content

Commit 107f8be

Browse files
chubara62372chubara62372
committed
feat(alert): add pf-alert component with demo, functionality, styling, and README
1 parent ee76f59 commit 107f8be

File tree

15 files changed

+1148
-28
lines changed

15 files changed

+1148
-28
lines changed

‎.changeset/pf-alert.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@patternfly/elements/pf-alert": minor
3+
---
4+
5+
Add `pf-alert` component to display alert messages of various types (info, warning, danger, success, cogear, neutral, custom) with optional heading, description, actions, and dismiss button. This component allows developers to consistently show alerts in their apps or demos.

‎elements/pf-alert/README.md‎

Lines changed: 72 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,78 @@
1-
# Alert
2-
Add a description of the component here.
1+
# pf-alert
32

4-
## Usage
5-
Describe how best to use this web component along with best practices.
3+
The `pf-alert` web component displays PatternFly-styled alerts. It can be used inline in pages or as a toast notification. Alerts support several visual states (for example: `info`, `success`, `warning`, `danger`), an optional header slot, body content, and an `actions` slot for interactive controls.
4+
5+
## Installation
6+
7+
Import the element in your page or application as an ES module:
68

79
```html
8-
<pf-alert>
10+
<script type="module">
11+
import '@patternfly/elements/pf-alert/pf-alert.js';
12+
</script>
13+
```
914

15+
## Basic usage
16+
17+
Inline alert example:
18+
19+
```html
20+
<pf-alert state="success">
21+
<h3 slot="header">Success</h3>
22+
The operation completed successfully.
23+
<div slot="actions">
24+
<pf-button variant="link">Details</pf-button>
25+
</div>
1026
</pf-alert>
1127
```
28+
29+
Toast usage (static helper):
30+
31+
```html
32+
<script type="module">
33+
import '@patternfly/elements/pf-alert/pf-alert.js';
34+
35+
// Show a simple toast notification
36+
PfAlert.toast({ message: 'Saved', heading: 'Success', state: 'success' });
37+
</script>
38+
```
39+
40+
## API
41+
42+
### Attributes / Properties
43+
- `state` (string) — Visual state of the alert. Common values: `neutral`, `info`, `success`, `warning`, `danger`, `custom`, `cogear`. Default: `neutral`.
44+
- `variant` (string) — Visual variant: `inline`, `toast`, or `alternate`.
45+
- `dismissable` (boolean) — When true, a close control is shown and the alert will emit a close event when dismissed.
46+
47+
> See `elements/pf-alert/pf-alert.ts` for exact property types, defaults, and any additional options.
48+
49+
### Slots
50+
- `header` — Slot for the heading (typically an `<h3>`).
51+
- default (unnamed) — Main body/content of the alert.
52+
- `actions` — Buttons or links for user actions (e.g. `<pf-button slot="actions">`).
53+
54+
### Events
55+
- `close` (AlertCloseEvent) — Fired when the alert is closed (either via UI or programmatically). The event contains the action (e.g. `'close'`, `'dismiss'`, or `'confirm'`). Check the component source for exact payload.
56+
57+
### Methods
58+
- `static toast(options)` — Static helper to show a toast notification. Options typically include `message`, `heading`, `state`, `persistent`, and `actions`.
59+
60+
## Styling
61+
62+
The component exposes CSS parts and custom properties for styling. Typical part(s): `::part(container)` for the main container. See the component stylesheet (`pf-alert.css`) for a list of CSS custom properties (colors, spacing, durations) you can override.
63+
64+
## Accessibility
65+
66+
- Toasts use `role="status"` and `aria-live="polite"` to announce messages to assistive technologies. Inline alerts should be used in-context with appropriate semantic markup.
67+
68+
## Notes & tips
69+
70+
- Use the `actions` slot to add interactive elements and listen for their events on the page.
71+
- For persistent toasts set the `persistent` option when calling `PfAlert.toast(...)`.
72+
- If you need the exact event names/shape or CSS variables, I can extract and add them from the component source.
73+
74+
---
75+
If you want, I can also:
76+
- Add a short section listing every CSS custom property the component exposes.
77+
- Add a copyable example showing how to listen for the alert `close` event.
78+
- Add a brief section demonstrating integration in React or Angular.

‎elements/pf-alert/demo/custom-icon.html‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<div class="demo-description">
2+
<section class="alerts-page">
3+
<pf-alert class="a" state="cogear">
4+
<h3 slot="header">Success alert title</h3>
5+
</pf-alert>
6+
<pf-alert class="b" state="cogear">
7+
<h3 slot="header">Success alert title</h3>
8+
</pf-alert>
9+
</section>
10+
</div>
11+
12+
<script type="module">
13+
import '@patternfly/elements/pf-alert/pf-alert.js';
14+
import '@patternfly/elements/pf-button/pf-button.js';
15+
</script>
16+
17+
<style>
18+
.alerts-page pf-alert::part(container) {
19+
padding-top: 1rem;
20+
padding-right: 1rem;
21+
padding-bottom: 1rem;
22+
padding-left: 1rem;
23+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
24+
25+
}
26+
27+
pf-alert.a::part(container) {
28+
background-color: #fff;
29+
}
30+
31+
pf-alert.b::part(container) {
32+
background-color: #f3faf2;
33+
}
34+
35+
.demo-description {
36+
padding: 1cm;
37+
/* Maintain a distance of one centimeter on all sides */
38+
}
39+
</style>

‎elements/pf-alert/demo/expandable.html‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<div class="demo-description">
2+
<section class="alerts-page demo-with-arrows">
3+
<pf-alert class="white-alerts-page" state="success" dismissable data-on-close="prevent-default">
4+
<h3 slot="header">Success alert title</h3>
5+
<pf-button slot="actions" variant="link" data-action="dismiss">View details</pf-button>
6+
<pf-button slot="actions" variant="link" data-action="confirm">lgnore</pf-button>
7+
</pf-alert>
8+
9+
<pf-alert class="white-alerts-page" state="success" dismissable data-on-close="prevent-default">
10+
<h3 slot="header">Success alert title (expanded)</h3>
11+
<p>Success alert description. This should tell the user more information about the alert.</p>
12+
<pf-button slot="actions" variant="link" data-action="dismiss">View details</pf-button>
13+
<pf-button slot="actions" variant="link" data-action="confirm">lgnore</pf-button>
14+
</pf-alert>
15+
16+
<pf-alert state="success" dismissable data-on-close="prevent-default">
17+
<h3 slot="header">Success alert title</h3>
18+
<pf-button slot="actions" variant="link" data-action="dismiss">View details</pf-button>
19+
<pf-button slot="actions" variant="link" data-action="confirm">lgnore</pf-button>
20+
</pf-alert>
21+
22+
<pf-alert state="success" dismissable data-on-close="prevent-default">
23+
<h3 slot="header">Success alert title (expanded)</h3>
24+
<p>Success alert description. This should tell the user more information about the alert.</p>
25+
<pf-button slot="actions" variant="link" data-action="dismiss">View details</pf-button>
26+
<pf-button slot="actions" variant="link" data-action="confirm">lgnore</pf-button>
27+
</pf-alert>
28+
</section>
29+
</div>
30+
<style>
31+
pf-alert.white-alerts-page::part(container) {
32+
background-color: #fff;
33+
}
34+
35+
.alerts-page pf-alert::part(container) {
36+
padding-top: 1rem;
37+
padding-right: 1rem;
38+
padding-bottom: 1rem;
39+
padding-left: 1rem;
40+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
41+
}
42+
.demo-description{
43+
padding: 1cm;
44+
}
45+
</style>
46+
47+
<script type="module">
48+
import '@patternfly/elements/pf-alert/pf-alert.js';
49+
import '@patternfly/elements/pf-button/pf-button.js';
50+
</script>
51+

‎elements/pf-alert/demo/inline-plain.html‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<div class="demo-description">
2+
<section class="alerts-page">
3+
<pf-alert state="Success">
4+
<h3 slot="header">Success alert title</h3>
5+
</pf-alert>
6+
</section>
7+
</div>
8+
9+
<style>
10+
.alerts-page pf-alert::part(container) {
11+
background-color: #fff;
12+
border-top-color: transparent;
13+
padding-top: 1rem;
14+
padding-right: 1rem;
15+
padding-bottom: 1rem;
16+
padding-left: 1rem;
17+
box-shadow: 0 4px 12px #fff;
18+
}
19+
20+
.demo-description {
21+
padding: 1cm;
22+
}
23+
</style>
24+
<script type="module">
25+
import '@patternfly/elements/pf-alert/pf-alert.js';
26+
import '@patternfly/elements/pf-button/pf-button.js';
27+
</script>
28+
29+
30+

‎elements/pf-alert/demo/inline-types.html‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
2+
<div class="demo-description">
3+
<section class="white-alerts-page">
4+
<pf-alert state="custom">
5+
<h3 slot="header">Custom inline alert title</h3>
6+
</pf-alert>
7+
8+
<pf-alert state="info">
9+
<h3 slot="header">Info inline alert title</h3>
10+
</pf-alert>
11+
12+
<pf-alert state="success">
13+
<h3 slot="header">Success inline alert title</h3>
14+
</pf-alert>
15+
16+
<pf-alert state="warning">
17+
<h3 slot="header">Warning inline alert title</h3>
18+
</pf-alert>
19+
20+
<pf-alert state="danger">
21+
<h3 slot="header">Danger inline alert title</h3>
22+
</pf-alert>
23+
</section>
24+
</div>
25+
26+
27+
<style>
28+
.white-alerts-page pf-alert::part(container) {
29+
padding-top: 1rem;
30+
padding-right: 1rem;
31+
padding-bottom: 1rem;
32+
padding-left: 1rem;
33+
box-shadow: 0 4px 12px #fff;
34+
}
35+
.demo-description{
36+
padding: 1cm;
37+
}
38+
</style>
39+
40+
<script type="module">
41+
import '@patternfly/elements/pf-alert/pf-alert.js';
42+
import '@patternfly/elements/pf-button/pf-button.js';
43+
</script>

‎elements/pf-alert/demo/inline-variations.html‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<div class="demo-description">
2+
<section class="alerts-page">
3+
<pf-alert class="white-alerts-page" state="success" dismissable data-on-close="prevent-default">
4+
<h3 slot="header">Success alert title</h3>
5+
<p>Success alert description. This should tell the user more information about the alert.</p>
6+
<pf-button slot="actions" variant="link" data-action="dismiss">View details</pf-button>
7+
<pf-button slot="actions" variant="link" data-action="confirm">lgnore</pf-button>
8+
</pf-alert>
9+
10+
<pf-alert class="white-alerts-page" state="success" dismissable data-on-close="prevent-default">
11+
<h3 slot="header">Success alert title</h3>
12+
<p>Success alert description. This should tell the user more information about the alert.
13+
<pf-button slot="actions" variant="link" style="text-decoration:none; color:#06c; font-size:0.875rem;">This is
14+
a link.</pf-button>
15+
</p>
16+
</pf-alert>
17+
18+
<pf-alert state="success" dismissable data-on-close="prevent-default">
19+
<h3 slot="header">Success alert title</h3>
20+
<pf-button slot="actions" variant="link" data-action="dismiss">View details</pf-button>
21+
<pf-button slot="actions" variant="link" data-action="confirm">lgnore</pf-button>
22+
</pf-alert>
23+
24+
<pf-alert state="success" dismissable data-on-close="prevent-default">
25+
<h3 slot="header">Success alert title</h3>
26+
</pf-alert>
27+
</section>
28+
</div>
29+
30+
<style>
31+
.white-alerts-page pf-alert::part(container) {
32+
background-color: var(--pf-global--BackgroundColor--100);
33+
}
34+
35+
.alerts-page pf-alert::part(container) {
36+
padding-top: 1rem;
37+
padding-right: 1rem;
38+
padding-bottom: 1rem;
39+
padding-left: 1rem;
40+
box-shadow: 0 4px 12px #fff;
41+
}
42+
43+
.demo-description {
44+
padding: 1cm;
45+
}
46+
</style>
47+
48+
<script type="module">
49+
import '@patternfly/elements/pf-alert/pf-alert.js';
50+
import '@patternfly/elements/pf-button/pf-button.js';
51+
</script>

‎elements/pf-alert/demo/pf-alert.html‎

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

‎elements/pf-alert/demo/types.html‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<div class="demo-description">
2+
3+
<section class="white-alerts-page">
4+
<pf-alert state="custom">
5+
<h3 slot="header">Default alert title</h3>
6+
</pf-alert>
7+
8+
<pf-alert state="info">
9+
<h3 slot="header">Info alert title</h3>
10+
</pf-alert>
11+
12+
<pf-alert state="success">
13+
<h3 slot="header">Success alert title</h3>
14+
</pf-alert>
15+
16+
<pf-alert state="warning">
17+
<h3 slot="header">Warning alert title</h3>
18+
</pf-alert>
19+
20+
<pf-alert state="danger">
21+
<h3 slot="header">Danger alert title</h3>
22+
</pf-alert>
23+
</section>
24+
</div>
25+
26+
27+
28+
<style>
29+
.white-alerts-page pf-alert::part(container) {
30+
background-color: #fff;
31+
padding-top: 1rem;
32+
padding-right: 1rem;
33+
padding-bottom: 1rem;
34+
padding-left: 1rem;
35+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
36+
37+
}
38+
.demo-description{
39+
padding: 1cm;
40+
}
41+
</style>
42+
43+
<script type="module">
44+
import '@patternfly/elements/pf-alert/pf-alert.js';
45+
import '@patternfly/elements/pf-button/pf-button.js';
46+
</script>

0 commit comments

Comments
 (0)