Skip to content

Commit 67bd66c

Browse files
chubara62372chubara62372
committed
fix(alert): remove section/toast, update tests
1 parent 6b397c9 commit 67bd66c

File tree

11 files changed

+61
-243
lines changed

11 files changed

+61
-243
lines changed

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

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="alert-demo">
1+
<div class="demo-description">
22
<pf-alert class="a" state="cogear">
33
<h3 slot="header">Success alert title</h3>
44
</pf-alert>
@@ -13,21 +13,16 @@ <h3 slot="header">Success alert title</h3>
1313
</script>
1414

1515
<style>
16-
.alerts-page pf-alert::part(container) {
17-
padding-top: 1rem;
18-
padding-right: 1rem;
19-
padding-bottom: 1rem;
20-
padding-left: 1rem;
21-
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
22-
23-
}
24-
2516
pf-alert.a::part(container) {
2617
background-color: #fff;
18+
padding: 0.5cm;
19+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
2720
}
2821

2922
pf-alert.b::part(container) {
3023
background-color: #f3faf2;
24+
padding: 0.5cm;
25+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
3126
}
3227

3328
.demo-description {

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

Lines changed: 31 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,46 @@
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>
1+
<div class="demo-description demo-with-arrows">
2+
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>
88

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

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

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>
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>
2928
</div>
29+
3030
<style>
3131
pf-alert.white-alerts-page::part(container) {
3232
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;
33+
padding: 0.5cm;
4034
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
35+
4136
}
42-
.demo-description{
43-
padding: 1cm;
37+
38+
.demo-description {
39+
padding: 1cm;
4440
}
4541
</style>
4642

4743
<script type="module">
4844
import '@patternfly/elements/pf-alert/pf-alert.js';
4945
import '@patternfly/elements/pf-button/pf-button.js';
50-
</script>
51-
46+
</script>

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

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,7 @@ <h3 slot="header">Success alert title</h3>
1010
.alerts-page pf-alert::part(container) {
1111
background-color: #fff;
1212
border-top-color: transparent;
13-
padding-top: 1rem;
14-
padding-right: 1rem;
15-
padding-bottom: 1rem;
16-
padding-left: 1rem;
13+
padding: 0.5cm;
1714
box-shadow: 0 4px 12px #fff;
1815
}
1916

@@ -24,7 +21,4 @@ <h3 slot="header">Success alert title</h3>
2421
<script type="module">
2522
import '@patternfly/elements/pf-alert/pf-alert.js';
2623
import '@patternfly/elements/pf-button/pf-button.js';
27-
</script>
28-
29-
30-
24+
</script>

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

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
1+
<div class="demo-description white-alerts-page">
12

2-
<div class="demo-description">
3-
<section class="white-alerts-page">
43
<pf-alert state="custom">
54
<h3 slot="header">Custom inline alert title</h3>
65
</pf-alert>
@@ -21,24 +20,21 @@ <h3 slot="header">Warning inline alert title</h3>
2120
<pf-alert state="danger">
2221
<h3 slot="header">Danger inline alert title</h3>
2322
</pf-alert>
24-
</section>
2523
</div>
2624

2725

2826
<style>
2927
.white-alerts-page pf-alert::part(container) {
30-
padding-top: 1rem;
31-
padding-right: 1rem;
32-
padding-bottom: 1rem;
33-
padding-left: 1rem;
28+
padding: 0.5cm;
3429
box-shadow: 0 4px 12px #fff;
3530
}
36-
.demo-description{
31+
32+
.demo-description {
3733
padding: 1cm;
3834
}
3935
</style>
4036

4137
<script type="module">
4238
import '@patternfly/elements/pf-alert/pf-alert.js';
4339
import '@patternfly/elements/pf-button/pf-button.js';
44-
</script>
40+
</script>

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

Lines changed: 5 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
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">
1+
<div class="demo-description alerts-page">
2+
3+
<pf-alert state="success" dismissable data-on-close="prevent-default">
44
<h3 slot="header">Success alert title</h3>
55
<p>Success alert description. This should tell the user more information about the alert.</p>
66
<pf-button slot="actions" variant="link" data-action="dismiss">View details</pf-button>
77
<pf-button slot="actions" variant="link" data-action="confirm">lgnore</pf-button>
88
</pf-alert>
99

10-
<pf-alert class="white-alerts-page" state="success" dismissable data-on-close="prevent-default">
10+
<pf-alert state="success" dismissable data-on-close="prevent-default">
1111
<h3 slot="header">Success alert title</h3>
1212
<p>Success alert description. This should tell the user more information about the alert.
1313
<pf-button slot="actions" variant="link" style="text-decoration:none; color:#06c; font-size:0.875rem;">This is
@@ -24,19 +24,12 @@ <h3 slot="header">Success alert title</h3>
2424
<pf-alert state="success" dismissable data-on-close="prevent-default">
2525
<h3 slot="header">Success alert title</h3>
2626
</pf-alert>
27-
</section>
2827
</div>
2928

3029
<style>
31-
.white-alerts-page pf-alert::part(container) {
32-
background-color: var(--pf-global--BackgroundColor--100);
33-
}
3430

3531
.alerts-page pf-alert::part(container) {
36-
padding-top: 1rem;
37-
padding-right: 1rem;
38-
padding-bottom: 1rem;
39-
padding-left: 1rem;
32+
padding: 0.5cm;
4033
box-shadow: 0 4px 12px #fff;
4134
}
4235

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

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

3-
<section class="white-alerts-page">
43
<pf-alert state="custom">
54
<h3 slot="header">Default alert title</h3>
65
</pf-alert>
@@ -20,23 +19,20 @@ <h3 slot="header">Warning alert title</h3>
2019
<pf-alert state="danger">
2120
<h3 slot="header">Danger alert title</h3>
2221
</pf-alert>
23-
</section>
2422
</div>
2523

2624

2725

2826
<style>
2927
.white-alerts-page pf-alert::part(container) {
3028
background-color: #fff;
31-
padding-top: 1rem;
32-
padding-right: 1rem;
33-
padding-bottom: 1rem;
34-
padding-left: 1rem;
29+
padding: 0.5cm;
3530
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
36-
31+
3732
}
38-
.demo-description{
39-
padding: 1cm;
33+
34+
.demo-description {
35+
padding: 1cm;
4036
}
4137
</style>
4238

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

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
1-
<div class="demo-description">
1+
<div class="demo-description white-alerts-page">
22

3-
<section class="white-alerts-page">
43
<pf-alert state="success" dismissable>
54
<h3 slot="header">Success alert title</h3>
65
<p>Success alert description. This should tell the user more information about the alert.</p>
@@ -45,7 +44,6 @@ <h3 slot="header">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curab
4544
<p>This example uses ".pf-m-truncate" and sets "--pf-c-alert__title--max-lines: 2" to limit title to two lines and
4645
truncate any overflow text with ellipses.</p>
4746
</pf-alert>
48-
</section>
4947
</div>
5048

5149

@@ -57,10 +55,7 @@ <h3 slot="header">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curab
5755
<style>
5856
.white-alerts-page pf-alert::part(container) {
5957
background-color: var(--pf-global--BackgroundColor--100);
60-
padding-top: 1rem;
61-
padding-right: 1rem;
62-
padding-bottom: 1rem;
63-
padding-left: 1rem;
58+
padding: 0.5cm;
6459
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
6560

6661
}

‎elements/pf-alert/pf-alert.css‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ header {
1010
}
1111

1212

13-
1413
#container {
1514
align-items: flex-start;
1615
background-color: var(--_background-color);

0 commit comments

Comments
 (0)