Skip to content

Commit 424d52d

Browse files
chubara62372chubara62372
committed
Fix the pf-alert component
1 parent cb8e30f commit 424d52d

17 files changed

+477
-453
lines changed

‎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+
<style>
13+
.alerts-page pf-alert::part(container) {
14+
padding-top: 1rem;
15+
padding-right: 1rem;
16+
padding-bottom: 1rem;
17+
padding-left: 1rem;
18+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
19+
20+
}
21+
22+
pf-alert.a::part(container) {
23+
background-color: #fff;
24+
}
25+
26+
/* צבע כחול ל-b */
27+
pf-alert.b::part(container) {
28+
background-color: #f3faf2;
29+
}
30+
31+
.demo-description {
32+
padding: 1cm;
33+
/* שמירה על מרחק של ס"מ אחד מכל הצדדים */
34+
}
35+
</style>
36+
<script type="module">
37+
import '@patternfly/elements/pf-alert/pf-alert.js';
38+
import '@patternfly/elements/pf-button/pf-button.js';
39+
</script>

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

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
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>

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

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
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+
}
47+
</style>
48+
49+
<script type="module">
50+
import '@patternfly/elements/pf-alert/pf-alert.js';
51+
import '@patternfly/elements/pf-button/pf-button.js';
52+
</script>

elements/pf-alert/demo/toast.html renamed to elements/pf-alert/demo/Inline-plain.html

Lines changed: 33 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,35 @@
1-
<form id="alert-variant-toast">
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+
}
24+
</style>
25+
<script type="module">
26+
import '@patternfly/elements/pf-alert/pf-alert.js';
27+
import '@patternfly/elements/pf-button/pf-button.js';
28+
</script>
29+
30+
31+
32+
<!-- <form id="alert-variant-toast">
233
<fieldset>
334
<legend>Alert State</legend>
435
<label><input type="radio" name="state" value="default">Neutral</label>
@@ -57,4 +88,4 @@
5788
] : undefined,
5889
});
5990
});
60-
</script>
91+
</script> -->

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

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

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
<div class="demo-description">
2+
3+
<section class="white-alerts-page">
4+
<pf-alert state="success" dismissable>
5+
<h3 slot="header">Success alert title</h3>
6+
<p>Success alert description. This should tell the user more information about the alert.</p>
7+
<pf-button slot="actions" variant="link" data-action="confirm">View details</pf-button>
8+
<pf-button slot="actions" variant="link" data-action="dismiss">lgnore</pf-button>
9+
</pf-alert>
10+
11+
<pf-alert state="success" dismissable>
12+
<h3 slot="header">Success alert title</h3>
13+
<p>Success alert description. This should tell the user more information about the alert. This is a link.</p>
14+
</pf-alert>
15+
16+
<pf-alert state="success" toast dismissable>
17+
<h3 slot="header">Success alert title</h3>
18+
<pf-button slot="actions" variant="link" data-action="confirm">View details</pf-button>
19+
<pf-button slot="actions" variant="link" data-action="dismiss">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</h3>
24+
</pf-alert>
25+
26+
<pf-alert state="success">
27+
<h3 slot="header">Success alert title</h3>
28+
</pf-alert>
29+
30+
31+
<pf-alert state="success">
32+
<h3 slot="header">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque cursus
33+
enim
34+
fringilla...</h3>
35+
<p>This example uses ".pf-m-truncate" to limit the title to a single line and truncate any overflow text with
36+
ellipses.</p>
37+
</pf-alert>
38+
39+
40+
<pf-alert state="success">
41+
<h3 slot="header">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque cursus
42+
enim
43+
fringilla tincidunt. Proin lobortis aliquam dictum. Nam vel ullamcorper nulla, nec blandit dolor. Vivamus
44+
pellentesque...</h3>
45+
<p>This example uses ".pf-m-truncate" and sets "--pf-c-alert__title--max-lines: 2" to limit title to two lines and
46+
truncate any overflow text with ellipses.</p>
47+
</pf-alert>
48+
</section>
49+
</div>
50+
51+
52+
<script type="module">
53+
import '@patternfly/elements/pf-alert/pf-alert.js';
54+
import '@patternfly/elements/pf-button/pf-button.js';
55+
</script>
56+
57+
<style>
58+
.white-alerts-page pf-alert::part(container) {
59+
background-color: var(--pf-global--BackgroundColor--100);
60+
padding-top: 1rem;
61+
padding-right: 1rem;
62+
padding-bottom: 1rem;
63+
padding-left: 1rem;
64+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
65+
66+
}
67+
68+
.demo-description {
69+
padding: 1cm;
70+
/* שמירה על מרחק של ס"מ אחד מכל הצדדים */
71+
}
72+
</style>

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

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

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

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

0 commit comments

Comments
 (0)