Skip to content

Commit 280ef9b

Browse files
chubara62372bennypowers
chubara62372
and
bennypowers
authored
feat(alert): add <pf-alert> element (#2955)
* feat(alert): create pf-alert element * feat(alert): add pf-alert component with demo, functionality, styling, and README * Update elements/pf-alert/README.md fix(alert): update README to match project style Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com> * fix(alert): changes requested after first PR * Update .changeset/pf-alert.md Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com> * Update elements/pf-alert/demo/custom-icon.html Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com> * fix(alert): remove section/toast, update tests * fix(alert): expandable * fix(alert): replace state with status * fix(alert) write access permission * fix(alert): rename state property to status * fix(alert): fix alert element * fix(alert): fix alert new * fix(alert): fix alert new -no --verfy * fix(alert): fix alert new files -no --verfy * fix(alert): fix pf alert new -no --verfy * fix(alert): fix pf-alert * fix(alert): fix readme.md * docs: update changeset * refactor: docs, dom, css * feat(alert): plain, inline * feat(alert): add title-text and title-level attrs * test: update test * fix: attribution --------- Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com> Co-authored-by: Benny Powers <web@bennypowers.com>
1 parent a13e259 commit 280ef9b

File tree

17 files changed

+920
-4
lines changed

17 files changed

+920
-4
lines changed

‎.changeset/pf-alert.md‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
---
2+
"@patternfly/elements": minor
3+
---
4+
5+
✨ Added `<pf-alert>` component
6+
7+
An **alert** is a notification that provides brief information to the user without blocking their workflow.
8+
9+
```html
10+
<pf-alert variant="warning" dismissable>
11+
<h3 slot="title">Custom alert title</h3>
12+
<span>This is the alert description.</span>
13+
<pf-button slot="actionLinks">Action 1</pf-button>
14+
<pf-button slot="actionLinks">Action 2</pf-button>
15+
</pf-alert>

‎elements/package.json‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
"./pf-accordion/pf-accordion-header.js": "./pf-accordion/pf-accordion-header.js",
1616
"./pf-accordion/pf-accordion-panel.js": "./pf-accordion/pf-accordion-panel.js",
1717
"./pf-accordion/pf-accordion.js": "./pf-accordion/pf-accordion.js",
18+
"./pf-alert/pf-alert.js": "./pf-alert/pf-alert.js",
1819
"./pf-avatar/pf-avatar.js": "./pf-avatar/pf-avatar.js",
1920
"./pf-back-to-top/pf-back-to-top.js": "./pf-back-to-top/pf-back-to-top.js",
2021
"./pf-background-image/pf-background-image.js": "./pf-background-image/pf-background-image.js",
@@ -114,9 +115,12 @@
114115
"!test/*"
115116
],
116117
"contributors": [
118+
"Ajinyka Shinde <sajinkya359@gmail.com>",
119+
"Avigail Chubara (https://github.com/chubara62372)",
117120
"Benny Powers <bennyp@redhat.com>",
118121
"Daniel Faucette",
119122
"Diwanshi Pandey <diwanshipandey@gmail.com> (https://github.com/diwanshi)",
123+
"Gili Greenberger (https://github.com/Gili-Greenberger)",
120124
"Ivana Rodriguez (https://github.com/eyevana)",
121125
"Kendall Totten",
122126
"Kyle Buchanan <kylebuch8@gmail.com> (https://github.com/kylebuch8)",
@@ -125,12 +129,10 @@
125129
"Michael Clayton <mclayton@redhat.com>",
126130
"Michael Potter",
127131
"Nikki Massaro Kauffman <nmassaro@redhat.com> (https://github.com/nikkimk)",
132+
"Rohit Bharmal (https://github.com/Rohit2601)",
128133
"Steven Spriggs <sspriggs@redhat.com",
129-
"castastrophe (https://github.com/castastrophe)",
130134
"Wes Ruvalcaba",
131-
"Rohit Bharmal (https://github.com/Rohit2601)",
132-
"Ajinyka Shinde <sajinkya359@gmail.com>",
133-
"Gili Greenberger (https://github.com/Gili-Greenberger)"
135+
"castastrophe (https://github.com/castastrophe)"
134136
],
135137
"dependencies": {
136138
"@lit/context": "^1.1.6",

‎elements/pf-alert/README.md‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
# pf-alert
2+
3+
The `pf-alert` web component displays PatternFly-styled alerts. It can be used inline in pages or as a toast notification (if a static helper is provided separately). Alerts support several visual **variants** (for example: `info`, `success`, `warning`, `danger`), an optional title slot, body content, and an **action links** slot for interactive controls. Alerts can also be **closable** and **expandable**.
4+
5+
## Installation
6+
7+
Import the element in your page or application as an ES module:
8+
9+
```html
10+
<script type="module">
11+
import '@patternfly/elements/pf-alert/pf-alert.js';
12+
</script>
13+
```
14+
15+
## Basic usage
16+
17+
Inline alert example:
18+
19+
```html
20+
<pf-alert variant="success">
21+
<span slot="title">Operation Success</span>
22+
23+
The operation completed successfully.
24+
</pf-alert>
25+
26+
<pf-alert variant="info" onClose>
27+
<span slot="title">System Update</span>
28+
29+
A new system update is available.
30+
31+
<div slot="actionLinks">
32+
<pf-button plain>Update Now</pf-button>
33+
<pf-button plain>Later</pf-button>
34+
</div>
35+
</pf-alert>
36+
```
37+
38+

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

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<pf-alert variant="neutral"
2+
icon="users"
3+
title-text="Default alert title"></pf-alert>
4+
<pf-alert variant="info"
5+
icon="box"
6+
title-text="Info alert title"></pf-alert>
7+
<pf-alert variant="success"
8+
icon="database"
9+
title-text="Success alert title"></pf-alert>
10+
<pf-alert variant="warning"
11+
icon="server"
12+
title-text="Warning alert title"></pf-alert>
13+
<pf-alert variant="danger"
14+
icon="laptop"
15+
title-text="Danger alert title"></pf-alert>
16+
17+
<script type="module">
18+
import '@patternfly/elements/pf-alert/pf-alert.js';
19+
</script>
20+
21+
<style>
22+
pf-alert {
23+
margin-block-end: 1em;
24+
}
25+
</style>

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

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<pf-alert variant="success"
2+
dismissable
3+
expandable
4+
title-text="Success alert title">
5+
<p>Success alert description. This should tell the user more information about the alert.</p>
6+
</pf-alert>
7+
8+
<pf-alert variant="success"
9+
dismissable
10+
expandable
11+
expanded
12+
title-text="Success alert title">
13+
<p>Success alert description. This should tell the user more information about the alert.</p>
14+
<a href="#" slot="actions">View details</a>
15+
<a href="#" slot="actions">Ignore</a>
16+
</pf-alert>
17+
18+
<script type="module">
19+
import '@patternfly/elements/pf-alert/pf-alert.js';
20+
import '@patternfly/elements/pf-button/pf-button.js';
21+
</script>
22+
23+
<style>
24+
pf-alert {
25+
margin-block-end: 1em;
26+
}
27+
</style>

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<pf-alert title-text="Custom alert title"></pf-alert>
2+
<pf-alert variant="info" title-text="Info alert title"></pf-alert>
3+
<pf-alert variant="success" title-text="Success alert title"></pf-alert>
4+
<pf-alert variant="warning" title-text="Warning alert title"></pf-alert>
5+
<pf-alert variant="danger" title-text="Danger alert title"></pf-alert>
6+
7+
<script type="module">
8+
import '@patternfly/elements/pf-alert/pf-alert.js';
9+
</script>
10+
11+
<style>
12+
pf-alert {
13+
margin-block-end: 1em;
14+
}
15+
</style>

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

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<pf-alert inline
2+
title-text="Custom alert title"></pf-alert>
3+
<pf-alert inline
4+
variant="info"
5+
title-text="Info alert title"></pf-alert>
6+
<pf-alert inline
7+
variant="success"
8+
title-text="Success alert title"></pf-alert>
9+
<pf-alert inline
10+
variant="warning"
11+
title-text="Warning alert title"></pf-alert>
12+
<pf-alert inline
13+
variant="danger"
14+
title-text="Danger alert title"></pf-alert>
15+
16+
<script type="module">
17+
import '@patternfly/elements/pf-alert/pf-alert.js';
18+
</script>
19+
20+
<style>
21+
pf-alert {
22+
margin-block-end: 1em;
23+
}
24+
</style>

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

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<pf-alert plain
2+
inline
3+
title-text="Custom alert title"></pf-alert>
4+
<pf-alert plain
5+
inline
6+
variant="info"
7+
title-text="Info alert title"></pf-alert>
8+
<pf-alert plain
9+
inline
10+
variant="success"
11+
title-text="Success alert title"></pf-alert>
12+
<pf-alert plain
13+
inline
14+
variant="warning"
15+
title-text="Warning alert title"></pf-alert>
16+
<pf-alert plain
17+
inline
18+
variant="danger"
19+
title-text="Danger alert title"></pf-alert>
20+
21+
<script type="module">
22+
import '@patternfly/elements/pf-alert/pf-alert.js';
23+
</script>
24+
25+
<style>
26+
pf-alert {
27+
margin-block-end: 1em;
28+
}
29+
</style>

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

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
<pf-button id="addAlertButton"
2+
variant="secondary">Add alert</pf-button>
3+
<pf-button id="removeAllAlertsButton"
4+
variant="secondary">Remove all alerts</pf-button>
5+
6+
<div id="alert-container">
7+
</div>
8+
9+
<script type="module">
10+
import '@patternfly/elements/pf-alert/pf-alert.js';
11+
import '@patternfly/elements/pf-button/pf-button.js';
12+
13+
const addAlertButton = document.getElementById('addAlertButton');
14+
const removeAllAlertsButton = document.getElementById('removeAllAlertsButton');
15+
const alertContainer = document.getElementById('alert-container');
16+
17+
function addTimeoutAlert() {
18+
const timeoutMilliseconds = 8000;
19+
20+
const newAlert = document.createElement('pf-alert');
21+
newAlert.setAttribute('variant', 'neutral');
22+
newAlert.setAttribute('timeout', timeoutMilliseconds.toString());
23+
newAlert.titleText = 'Default timeout Alert';
24+
newAlert.titleLevel = 4;
25+
newAlert.innerHTML = `
26+
This alert will dismiss after ${timeoutMilliseconds/1000} seconds.
27+
<a href="#" slot="actions">View details</a>
28+
<a href="#" slot="actions">Ignore</a>
29+
`;
30+
31+
alertContainer.prepend(newAlert);
32+
33+
newAlert.addEventListener('click', (event) => {
34+
if (event.target.dataset.action === 'ignore') {
35+
event.preventDefault();
36+
newAlert.remove();
37+
}
38+
});
39+
}
40+
41+
if (addAlertButton) {
42+
addAlertButton.addEventListener('click', addTimeoutAlert);
43+
}
44+
45+
if (removeAllAlertsButton) {
46+
removeAllAlertsButton.addEventListener('click', () => {
47+
if (alertContainer) {
48+
alertContainer.innerHTML = '';
49+
}
50+
});
51+
}
52+
</script>
53+
54+
<style>
55+
#alert-container {
56+
margin-top: 20px;
57+
}
58+
59+
#addAlertButton {
60+
margin-inline-end: -0.25rem;
61+
}
62+
63+
pf-alert {
64+
margin-block-end: 1em;
65+
}
66+
</style>

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

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<pf-alert>
2+
<h3 slot="title">Custom alert title</h3>
3+
</pf-alert>
4+
5+
<pf-alert variant="info">
6+
<h3 slot="title">Info alert title</h3>
7+
</pf-alert>
8+
9+
<pf-alert variant="success">
10+
<h3 slot="title">Success alert title</h3>
11+
</pf-alert>
12+
13+
<pf-alert variant="warning">
14+
<h3 slot="title">Warning alert title</h3>
15+
</pf-alert>
16+
17+
<pf-alert variant="danger">
18+
<h3 slot="title">Danger alert title</h3>
19+
</pf-alert>
20+
21+
<script type="module">
22+
import '@patternfly/elements/pf-alert/pf-alert.js';
23+
</script>
24+
25+
<style>
26+
pf-alert {
27+
margin-block-end: 1em;
28+
}
29+
</style>

0 commit comments

Comments
 (0)