Skip to content

Commit 13f9454

Browse files
chubara62372chubara62372
committed
fix(alert): fix alert element
1 parent 5408d1f commit 13f9454

15 files changed

+659
-364
lines changed

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

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
2+
<div class="alerts-page">
3+
4+
<pf-alert variant="default">
5+
<pf-icon icon="bell" slot="icon"></pf-icon>
6+
<h3 slot="title">Custom alert title</h3>
7+
</pf-alert>
8+
9+
<pf-alert variant="info">
10+
<pf-icon icon="info-circle" slot="icon"></pf-icon>
11+
<h3 slot="title">Info alert title</h3>
12+
</pf-alert>
13+
14+
<pf-alert variant="success">
15+
<pf-icon icon="check-circle" slot="icon"></pf-icon>
16+
<h3 slot="title">Success alert title</h3>
17+
</pf-alert>
18+
19+
<pf-alert variant="warning">
20+
<pf-icon icon="exclamation-triangle" slot="icon"></pf-icon>
21+
<h3 slot="title">Warning alert title</h3>
22+
</pf-alert>
23+
24+
<pf-alert variant="danger">
25+
<pf-icon icon="exclamation-circle" slot="icon"></pf-icon>
26+
<h3 slot="title">Danger alert title</h3>
27+
</pf-alert>
28+
</div>
29+
30+
<script type="module">
31+
import '@patternfly/elements/pf-alert/pf-alert.js';
32+
</script>
33+
<style>
34+
.alerts-page pf-alert::part(container) {
35+
background-color: #fff;
36+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
37+
}
38+
</style>
39+

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<alert-demo-page></alert-demo-page>
2+
3+
<div id="toast-alerts-container"></div>
4+
5+
<script type="module">
6+
import '@patternfly/elements/pf-alert/pf-alert.js';
7+
import '@patternfly/elements/pf-button/pf-button.js';
8+
import '@patternfly/elements/pf-icon/pf-icon.js';
9+
</script>

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

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<div class="alerts-page">
2+
3+
<pf-alert variant="success">
4+
<pf-icon icon="check-circle" slot="icon"></pf-icon>
5+
<h3 slot="title">Success alert title</h3>
6+
<p>Success alert description. This should tell the user more information about the alert.</p>
7+
<div slot="actionLinks">
8+
<pf-button variant="link" data-action="view-details">View details</pf-button>
9+
<pf-button variant="link" data-action="ignore">Ignore</pf-button>
10+
</div>
11+
</pf-alert>
12+
13+
<pf-alert variant="success">
14+
<pf-icon icon="check-circle" slot="icon"></pf-icon>
15+
<h3 slot="title">Success alert title</h3>
16+
<p>Success alert description. This should tell the user more information about the alert.
17+
<a href="#">This is a link.</a>
18+
</p>
19+
</pf-alert>
20+
21+
<pf-alert variant="success">
22+
<pf-icon icon="check-circle" slot="icon"></pf-icon>
23+
<h3 slot="title">Success alert title</h3>
24+
<p>Short alert description.</p>
25+
<pf-icon icon="times" slot="actionClose"></pf-icon>
26+
</pf-alert>
27+
28+
<pf-alert variant="success">
29+
<pf-icon icon="check-circle" slot="icon"></pf-icon>
30+
<h3 slot="title">div success alert title</h3>
31+
</pf-alert>
32+
33+
<pf-alert variant="success">
34+
<pf-icon icon="check-circle" slot="icon"></pf-icon>
35+
<h3 slot="title">h6 Success alert title</h3>
36+
<p>Short alert description.</p>
37+
</pf-alert>
38+
39+
</div>
40+
41+
<script type="module">
42+
import '@patternfly/elements/pf-alert/pf-alert.js';
43+
import '@patternfly/elements/pf-button/pf-button.js';
44+
45+
</script>
46+
<style>
47+
.alerts-page pf-alert::part(container) {
48+
background-color: #fff;
49+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
50+
}
51+
</style>

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

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

‎elements/pf-alert/demo/expandable-alerts.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+
<pf-icon icon="check-circle" slot="icon"></pf-icon>
3+
<h3 slot="title">Success alert title</h3>
4+
<p>Success alert description. This should tell the user more information about the alert.</p>
5+
<pf-icon icon="times" slot="actionClose"></pf-icon>
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.</p>
12+
<div slot="actionLinks">
13+
<pf-button variant="link" data-action="view-details">View details</pf-button>
14+
<pf-button variant="link" data-action="ignore">Ignore</pf-button>
15+
</div>
16+
</pf-alert>
17+
18+
<script type="module">
19+
import '@patternfly/elements/pf-alert/pf-alert.js';
20+
</script>
21+
22+
<style>
23+
.alerts-page pf-alert::part(container) {
24+
background-color: #fff;
25+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
26+
}
27+
</style>

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

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

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

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

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

Lines changed: 35 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="demo-description alerts-page">
1+
<!-- <div class="demo-description alerts-page">
22
33
<pf-alert status="custom">
44
<h3 slot="header">Custom inline alert title</h3>
@@ -37,4 +37,38 @@ <h3 slot="header">Danger inline alert title</h3>
3737
<script type="module">
3838
import '@patternfly/elements/pf-alert/pf-alert.js';
3939
import '@patternfly/elements/pf-button/pf-button.js';
40+
</script> -->
41+
42+
43+
<div class="demo-container">
44+
45+
<pf-alert variant="default">
46+
<pf-icon icon="bell" slot="icon"></pf-icon>
47+
<h3 slot="header">Default alert title</h3>
48+
</pf-alert>
49+
50+
<pf-alert variant="info">
51+
<pf-icon icon="info-circle" slot="icon"></pf-icon>
52+
<h3 slot="header">Info alert title</h3>
53+
</pf-alert>
54+
55+
<pf-alert variant="success">
56+
<pf-icon icon="check-circle" slot="icon"></pf-icon>
57+
<h3 slot="header">Success alert title</h3>
58+
</pf-alert>
59+
60+
<pf-alert variant="warning">
61+
<pf-icon icon="exclamation-triangle" slot="icon"></pf-icon>
62+
<h3 slot="header">Warning alert title</h3>
63+
</pf-alert>
64+
65+
<pf-alert variant="danger">
66+
<pf-icon icon="exclamation-circle" slot="icon"></pf-icon>
67+
<h3 slot="header">Danger alert title</h3>
68+
</pf-alert>
69+
</div>
70+
71+
<script type="module">
72+
import '@patternfly/elements/pf-alert/pf-alert.js';
73+
import '@patternfly/elements/pf-icon/pf-icon.js';
4074
</script>

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

Lines changed: 35 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="demo-description alerts-page">
1+
<!-- <div class="demo-description alerts-page">
22
33
<pf-alert status="success" dismissable data-on-close="prevent-default">
44
<h3 slot="header">Success alert title</h3>
@@ -41,4 +41,38 @@ <h3 slot="header">Success alert title</h3>
4141
<script type="module">
4242
import '@patternfly/elements/pf-alert/pf-alert.js';
4343
import '@patternfly/elements/pf-button/pf-button.js';
44+
</script> -->
45+
46+
47+
<div class="demo-container">
48+
49+
<pf-alert variant="default">
50+
<pf-icon icon="bell" slot="icon"></pf-icon>
51+
<h3 slot="header">Default alert title</h3>
52+
</pf-alert>
53+
54+
<pf-alert variant="info">
55+
<pf-icon icon="info-circle" slot="icon"></pf-icon>
56+
<h3 slot="header">Info alert title</h3>
57+
</pf-alert>
58+
59+
<pf-alert variant="success">
60+
<pf-icon icon="check-circle" slot="icon"></pf-icon>
61+
<h3 slot="header">Success alert title</h3>
62+
</pf-alert>
63+
64+
<pf-alert variant="warning">
65+
<pf-icon icon="exclamation-triangle" slot="icon"></pf-icon>
66+
<h3 slot="header">Warning alert title</h3>
67+
</pf-alert>
68+
69+
<pf-alert variant="danger">
70+
<pf-icon icon="exclamation-circle" slot="icon"></pf-icon>
71+
<h3 slot="header">Danger alert title</h3>
72+
</pf-alert>
73+
</div>
74+
75+
<script type="module">
76+
import '@patternfly/elements/pf-alert/pf-alert.js';
77+
import '@patternfly/elements/pf-icon/pf-icon.js';
4478
</script>

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

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<div class="alerts-page">
2+
3+
<pf-alert variant="info">
4+
<pf-icon icon="info-circle" slot="icon"></pf-icon>
5+
<h3 slot="title">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque cursus enim
6+
fringilla tincidunt. Proin lobortis aliquam dictum. Nam vel ullamcorper nulla, nec blandit dolor. Vivamus
7+
pellentesque neque justo, nec accumsan nulla rhoncus id. Suspendisse mollis, tortor quis faucibus volutpat, sem
8+
leo fringilla turpis, ac lacinia augue metus in nulla. Cras vestibulum lacinia orci. Pellentesque sodales
9+
consequat interdum. Sed porttitor tincidunt metus nec iaculis. Pellentesque non commodo justo. Morbi feugiat
10+
rhoncus neque, vitae facilisis diam aliquam nec. Sed dapibus vitae quam at tristique. Nunc vel commodo mi. Mauris
11+
et rhoncus leo.
12+
</h3>
13+
</pf-alert>
14+
15+
<pf-alert variant="warning">
16+
<pf-icon icon="exclamation-triangle" slot="icon"></pf-icon>
17+
<h3 slot="title">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque cursus enim
18+
fringilla tincidunt. Proin lobortis aliquam dictum. Nam vel ullamcorper nulla, nec blandit</h3>
19+
</pf-alert>
20+
21+
<pf-alert variant="danger">
22+
<pf-icon icon="exclamation-circle" slot="icon"></pf-icon>
23+
<h3 slot="title">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque cursus enim
24+
fringilla tincidunt. Proin lobortis aliquam dictum. Nam vel ullamcorper nulla, nec blandit dolor. Vivamus
25+
pellentesque neque justo, nec accumsan nulla rhoncus id. Suspendisse mollis,</h3>
26+
</pf-alert>
27+
</div>
28+
29+
<script type="module">
30+
import '@patternfly/elements/pf-alert/pf-alert.js';
31+
import '@patternfly/elements/pf-icon/pf-icon.js';
32+
</script>
33+
34+
<style>
35+
.alerts-page pf-alert::part(container) {
36+
background-color: #fff;
37+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
38+
}
39+
</style>

0 commit comments

Comments
 (0)