Skip to content

Commit 56e3f85

Browse files
chubara62372chubara62372
committed
fix(alert): fix pf-alert
1 parent 3f23e1d commit 56e3f85

17 files changed

+384
-745
lines changed

‎.changeset/pf-alert.md‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,16 @@
55
### Minor Changes
66

77
- Added `pf-alert` component for displaying alert messages of different types:
8-
- Types: info, warning, danger, success, cogear, neutral, custom
9-
- Features: optional heading, description, actions, dismiss button
8+
- Types: info, warning, danger, success, neutral, custom
9+
- Features: optional title, description, actions, dismiss button
1010
- Enables consistent alert messaging across apps and demos
1111

1212
```html
13-
<pf-alert type="warning" heading="Attention!">
14-
This is a warning alert with optional description and actions.
13+
<pf-alert ouia-id="CustomAlert" variant="warning" onClose>
14+
<h3 slot="title">Custom alert title</h3>
15+
<span>This is the alert description.</span>
16+
<div slot="actionLinks">
17+
<pf-button>Action 1</pf-button>
18+
<pf-button>Action 2</pf-button>
19+
</div>
1520
</pf-alert>

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,22 @@
11
<div class="alerts-page">
22

3-
<pf-alert variant="neutral">
3+
<pf-alert ouia-id="CustomAlert">
44
<h3 slot="title">Custom alert title</h3>
55
</pf-alert>
66

7-
<pf-alert variant="info">
7+
<pf-alert variant="info" ouia-id="InfoAlert">
88
<h3 slot="title">Info alert title</h3>
99
</pf-alert>
1010

11-
<pf-alert variant="success">
11+
<pf-alert variant="success" ouia-id="SuccessAlert">
1212
<h3 slot="title">Success alert title</h3>
1313
</pf-alert>
1414

15-
<pf-alert variant="warning">
15+
<pf-alert variant="warning" ouia-id="WarningAlert">
1616
<h3 slot="title">Warning alert title</h3>
1717
</pf-alert>
1818

19-
<pf-alert variant="danger">
19+
<pf-alert variant="danger" ouia-id="DangerAlert">
2020
<h3 slot="title">Danger alert title</h3>
2121
</pf-alert>
2222
</div>

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

Lines changed: 55 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,64 @@
1-
<pf-button>Add alert</pf-button>
2-
<pf-button>Remove all alerts</pf-button>
1+
<pf-button variant="secondary" id="addAlertButton">Add alert</pf-button>
2+
<pf-button variant="secondary" id="removeAllAlertsButton">Remove all alerts</pf-button>
3+
4+
<div id="alert-container" style="margin-top: 20px;">
5+
</div>
36

47
<script type="module">
58
import '@patternfly/elements/pf-alert/pf-alert.js';
69
import '@patternfly/elements/pf-button/pf-button.js';
7-
</script>
810

11+
const addAlertButton = document.getElementById('addAlertButton');
12+
const removeAllAlertsButton = document.getElementById('removeAllAlertsButton');
13+
const alertContainer = document.getElementById('alert-container');
14+
15+
let alertCounter = 0;
16+
17+
function addTimeoutAlert() {
18+
alertCounter++;
19+
const timeoutMilliseconds = 8000;
20+
21+
const newAlert = document.createElement('pf-alert');
22+
newAlert.setAttribute('variant', 'neutral');
23+
newAlert.setAttribute('timeout', timeoutMilliseconds.toString());
24+
newAlert.innerHTML = `
25+
<h4 slot="title">Default timeout Alert</h4>
26+
This alert will dismiss after ${timeoutMilliseconds/1000} seconds.
27+
<a href="#" slot="actionLinks">View details</a>
28+
<a href="#" slot="actionLinks" data-action="ignore">Ignore</a>
29+
`;
930

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>
1053

54+
<style>
55+
pf-alert::part(container) {
56+
background-color: #fff !important;
57+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
1158

59+
}
1260

61+
#addAlertButton {
62+
margin-inline-end: -0.25rem;
63+
}
64+
</style>

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

Lines changed: 17 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@
33
<pf-alert variant="success">
44
<h3 slot="title">Success alert title</h3>
55
<p>Success alert description. This should tell the user more information about the alert.</p>
6-
<pf-button variant="link" data-action="view-details">View details</pf-button>
7-
<pf-button variant="link" data-action="ignore">Ignore</pf-button>
6+
<a href="#" slot="actionLinks">View details</a>
7+
<a href="#" slot="actionLinks">Ignore</a>
88
</pf-alert>
99

1010
<pf-alert variant="success">
@@ -15,17 +15,17 @@ <h3 slot="title">Success alert title</h3>
1515
</p>
1616
</pf-alert>
1717

18-
<pf-alert variant="success">
18+
<pf-alert variant="success" onClose>
1919
<h3 slot="title">Success alert title</h3>
2020
<p>Short alert description.</p>
2121
</pf-alert>
2222

2323
<pf-alert variant="success">
24-
<h3 slot="title">div success alert title</h3>
24+
<div slot="title">div success alert title</div>
2525
</pf-alert>
2626

2727
<pf-alert variant="success">
28-
<h3 slot="title">h6 Success alert title</h3>
28+
<h6 slot="title">h6 Success alert title</h6>
2929
<p>Short alert description.</p>
3030
</pf-alert>
3131

@@ -41,4 +41,16 @@ <h3 slot="title">h6 Success alert title</h3>
4141
background-color: #fff;
4242
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
4343
}
44+
45+
pf-alert p a {
46+
color: #06c;
47+
text-decoration: none;
48+
}
49+
50+
pf-alert p a:active,
51+
pf-alert p a:hover {
52+
text-decoration: underline;
53+
color: #004080;
54+
55+
}
4456
</style>

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
<pf-alert variant="neutral">
44
<pf-icon icon="users" slot="icon"></pf-icon>
5-
<h3 slot="title">Default alert title</h3>
5+
<h3 slot="title">Default alert title</h3>
66
</pf-alert>
77

88
<pf-alert variant="info">
@@ -34,4 +34,5 @@ <h3 slot="title">Danger alert title</h3>
3434
background-color: #fff;
3535
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
3636
}
37+
3738
</style>

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
<div class="alerts-page">
2-
<pf-alert variant="success">
2+
<pf-alert variant="success" onClose **isExpandable**>
33
<h3 slot="title">Success alert title</h3>
4-
<p>Success alert description. This should tell the user more information about the alert.</p>
4+
<p slot="isExpandable">Success alert description. This should tell the user more information about the alert.</p>
55
</pf-alert>
66
</div>
77

88

99
<pf-alert variant="success">
1010
<h3 slot="title">Success alert title</h3>
11-
<p>Success alert description. This should tell the user more information about the alert.</p>
12-
<pf-button variant="link" data-action="view-details">View details</pf-button>
13-
<pf-button variant="link" data-action="ignore">Ignore</pf-button>
11+
<p slot="isExpandable">Success alert description. This should tell the user more information about the alert.</p>
12+
<a href="#" slot="actionLinks">View details</a>
13+
<a href="#" slot="actionLinks">Ignore</a>
1414
</pf-alert>
1515

1616
<script type="module">

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

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

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

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

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

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

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

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

0 commit comments

Comments
 (0)