Skip to content

Commit 5081b41

Browse files
bennypowersbennypowers
committed
feat(alert): plain, inline
1 parent de35dd4 commit 5081b41

File tree

12 files changed

+403
-307
lines changed

12 files changed

+403
-307
lines changed

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

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

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

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

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

Lines changed: 21 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,29 @@
1-
<div class="alerts-page">
1+
<pf-alert variant="neutral" icon="users">
2+
<h3 slot="title">Default alert title</h3>
3+
</pf-alert>
24

3-
<pf-alert variant="neutral">
4-
<pf-icon icon="users" slot="icon"></pf-icon>
5-
<h3 slot="title">Default alert title</h3>
6-
</pf-alert>
5+
<pf-alert variant="info" icon="box">
6+
<h3 slot="title">Info alert title</h3>
7+
</pf-alert>
78

8-
<pf-alert variant="info">
9-
<pf-icon icon="box" slot="icon"></pf-icon>
10-
<h3 slot="title">Info alert title</h3>
11-
</pf-alert>
9+
<pf-alert variant="success" icon="database">
10+
<h3 slot="title">Success alert title</h3>
11+
</pf-alert>
1212

13-
<pf-alert variant="success">
14-
<pf-icon icon="database" slot="icon"></pf-icon>
15-
<h3 slot="title">Success alert title</h3>
16-
</pf-alert>
13+
<pf-alert variant="warning" icon="server">
14+
<h3 slot="title">Warning alert title</h3>
15+
</pf-alert>
1716

18-
<pf-alert variant="warning">
19-
<pf-icon icon="server" slot="icon"></pf-icon>
20-
<h3 slot="title">Warning alert title</h3>
21-
</pf-alert>
22-
23-
<pf-alert variant="danger">
24-
<pf-icon icon="laptop" slot="icon"></pf-icon>
25-
<h3 slot="title">Danger alert title</h3>
26-
</pf-alert>
27-
</div>
17+
<pf-alert variant="danger" icon="laptop">
18+
<h3 slot="title">Danger alert title</h3>
19+
</pf-alert>
2820

2921
<script type="module">
30-
import '@patternfly/elements/pf-alert/pf-alert.js';
22+
import '@patternfly/elements/pf-alert/pf-alert.js';
3123
</script>
32-
<style>
33-
.alerts-page pf-alert::part(container) {
34-
background-color: #fff;
35-
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
36-
}
3724

38-
</style>
25+
<style>
26+
pf-alert {
27+
margin-block-end: 1em;
28+
}
29+
</style>

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

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

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

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

‎elements/pf-alert/demo/index.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>

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

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<pf-alert inline>
2+
<h3 slot="title">Custom alert title</h3>
3+
</pf-alert>
4+
5+
<pf-alert inline variant="info">
6+
<h3 slot="title">Info alert title</h3>
7+
</pf-alert>
8+
9+
<pf-alert inline variant="success">
10+
<h3 slot="title">Success alert title</h3>
11+
</pf-alert>
12+
13+
<pf-alert inline variant="warning">
14+
<h3 slot="title">Warning alert title</h3>
15+
</pf-alert>
16+
17+
<pf-alert inline 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>

‎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 inline>
2+
<h3 slot="title">Custom alert title</h3>
3+
</pf-alert>
4+
5+
<pf-alert plain inline variant="info">
6+
<h3 slot="title">Info alert title</h3>
7+
</pf-alert>
8+
9+
<pf-alert plain inline variant="success">
10+
<h3 slot="title">Success alert title</h3>
11+
</pf-alert>
12+
13+
<pf-alert plain inline variant="warning">
14+
<h3 slot="title">Warning alert title</h3>
15+
</pf-alert>
16+
17+
<pf-alert plain inline 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>

elements/pf-alert/demo/alert-timeout.html renamed to elements/pf-alert/demo/timeout.html

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
1-
<pf-button variant="secondary" id="addAlertButton">Add alert</pf-button>
2-
<pf-button variant="secondary" id="removeAllAlertsButton">Remove all alerts</pf-button>
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>
35

4-
<div id="alert-container" style="margin-top: 20px;">
6+
<div id="alert-container">
57
</div>
68

79
<script type="module">
@@ -12,10 +14,7 @@
1214
const removeAllAlertsButton = document.getElementById('removeAllAlertsButton');
1315
const alertContainer = document.getElementById('alert-container');
1416

15-
let alertCounter = 0;
16-
1717
function addTimeoutAlert() {
18-
alertCounter++;
1918
const timeoutMilliseconds = 8000;
2019

2120
const newAlert = document.createElement('pf-alert');
@@ -52,13 +51,15 @@ <h4 slot="title">Default timeout Alert</h4>
5251
</script>
5352

5453
<style>
55-
pf-alert::part(container) {
56-
background-color: #fff !important;
57-
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
58-
54+
#alert-container {
55+
margin-top: 20px;
5956
}
6057

6158
#addAlertButton {
6259
margin-inline-end: -0.25rem;
6360
}
64-
</style>
61+
62+
pf-alert {
63+
margin-block-end: 1em;
64+
}
65+
</style>

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

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<pf-alert variant="success">
2+
<h3 slot="title">Success alert title</h3>
3+
<p>Success alert description. This should tell the user more information about the alert.</p>
4+
<a href="#" slot="actionLinks">View details</a>
5+
<a href="#" slot="actionLinks">Ignore</a>
6+
</pf-alert>
7+
8+
<pf-alert variant="success">
9+
<pf-icon icon="check-circle" slot="icon"></pf-icon>
10+
<h3 slot="title">Success alert title</h3>
11+
<p>Success alert description. This should tell the user more information about the alert.
12+
<a href="#">This is a link.</a>
13+
</p>
14+
</pf-alert>
15+
16+
<pf-alert variant="success" onClose>
17+
<h3 slot="title">Success alert title</h3>
18+
<p>Short alert description.</p>
19+
</pf-alert>
20+
21+
<pf-alert variant="success">
22+
<div slot="title">div success alert title</div>
23+
</pf-alert>
24+
25+
<pf-alert variant="success">
26+
<h6 slot="title">h6 Success alert title</h6>
27+
<p>Short alert description.</p>
28+
</pf-alert>
29+
30+
<script type="module">
31+
import '@patternfly/elements/pf-alert/pf-alert.js';
32+
import '@patternfly/elements/pf-button/pf-button.js';
33+
</script>
34+
35+
36+
<style>
37+
pf-alert {
38+
margin-block-end: 1em;
39+
}
40+
</style>

0 commit comments

Comments
 (0)