Skip to content

Commit d95dc90

Browse files
bennypowersbennypowers
committed
feat(alert): add title-text and title-level attrs
1 parent 5081b41 commit d95dc90

File tree

11 files changed

+140
-103
lines changed

11 files changed

+140
-103
lines changed

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

Lines changed: 15 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,18 @@
1-
<pf-alert variant="neutral" icon="users">
2-
<h3 slot="title">Default alert title</h3>
3-
</pf-alert>
4-
5-
<pf-alert variant="info" icon="box">
6-
<h3 slot="title">Info alert title</h3>
7-
</pf-alert>
8-
9-
<pf-alert variant="success" icon="database">
10-
<h3 slot="title">Success alert title</h3>
11-
</pf-alert>
12-
13-
<pf-alert variant="warning" icon="server">
14-
<h3 slot="title">Warning alert title</h3>
15-
</pf-alert>
16-
17-
<pf-alert variant="danger" icon="laptop">
18-
<h3 slot="title">Danger alert title</h3>
19-
</pf-alert>
1+
<pf-alert variant="neutral"
2+
icon="users"
3+
title-text="Default alert title"></pf-alert>
4+
<pf-alert variant="info"
5+
icon="box"
6+
title-text="Info alert title"></pf-alert>
7+
<pf-alert variant="success"
8+
icon="database"
9+
title-text="Success alert title"></pf-alert>
10+
<pf-alert variant="warning"
11+
icon="server"
12+
title-text="Warning alert title"></pf-alert>
13+
<pf-alert variant="danger"
14+
icon="laptop"
15+
title-text="Danger alert title"></pf-alert>
2016

2117
<script type="module">
2218
import '@patternfly/elements/pf-alert/pf-alert.js';

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

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,15 @@
1-
<pf-alert variant="success" dismissable expandable>
2-
<h3 slot="title">Success alert title</h3>
1+
<pf-alert variant="success"
2+
dismissable
3+
expandable
4+
title-text="Success alert title">
35
<p>Success alert description. This should tell the user more information about the alert.</p>
46
</pf-alert>
57

6-
<pf-alert variant="success" dismissable expandable expanded>
7-
<h3 slot="title">Success alert title</h3>
8+
<pf-alert variant="success"
9+
dismissable
10+
expandable
11+
expanded
12+
title-text="Success alert title">
813
<p>Success alert description. This should tell the user more information about the alert.</p>
914
<a href="#" slot="actions">View details</a>
1015
<a href="#" slot="actions">Ignore</a>

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

Lines changed: 5 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,8 @@
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>
1+
<pf-alert title-text="Custom alert title"></pf-alert>
2+
<pf-alert variant="info" title-text="Info alert title"></pf-alert>
3+
<pf-alert variant="success" title-text="Success alert title"></pf-alert>
4+
<pf-alert variant="warning" title-text="Warning alert title"></pf-alert>
5+
<pf-alert variant="danger" title-text="Danger alert title"></pf-alert>
206

217
<script type="module">
228
import '@patternfly/elements/pf-alert/pf-alert.js';

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

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

2116
<script type="module">
2217
import '@patternfly/elements/pf-alert/pf-alert.js';

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

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

2121
<script type="module">
2222
import '@patternfly/elements/pf-alert/pf-alert.js';

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

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,11 +20,12 @@
2020
const newAlert = document.createElement('pf-alert');
2121
newAlert.setAttribute('variant', 'neutral');
2222
newAlert.setAttribute('timeout', timeoutMilliseconds.toString());
23+
newAlert.titleText = 'Default timeout Alert';
24+
newAlert.titleLevel = 4;
2325
newAlert.innerHTML = `
24-
<h4 slot="title">Default timeout Alert</h4>
2526
This alert will dismiss after ${timeoutMilliseconds/1000} seconds.
26-
<a href="#" slot="actionLinks">View details</a>
27-
<a href="#" slot="actionLinks" data-action="ignore">Ignore</a>
27+
<a href="#" slot="actions">View details</a>
28+
<a href="#" slot="actions">Ignore</a>
2829
`;
2930

3031
alertContainer.prepend(newAlert);

‎elements/pf-alert/demo/title-slot.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/variations.html‎

Lines changed: 16 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,28 @@
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>
1+
<pf-alert variant="success"
2+
title-text="Success alert title">
3+
Success alert description. This should tell the user more information about the alert.
44
<a href="#" slot="actionLinks">View details</a>
55
<a href="#" slot="actionLinks">Ignore</a>
66
</pf-alert>
77

8-
<pf-alert variant="success">
8+
<pf-alert variant="success"
9+
title-text="Success alert title">
910
<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>
11+
Success alert description.
12+
This should tell the user more information about the alert.
13+
<a href="#">This is a link.</a>
1414
</pf-alert>
1515

16-
<pf-alert variant="success" onClose>
17-
<h3 slot="title">Success alert title</h3>
18-
<p>Short alert description.</p>
16+
<pf-alert variant="success"
17+
dismissable
18+
title-text="Success alert title">
19+
Short alert description.
1920
</pf-alert>
2021

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>
22+
<pf-alert variant="success"
23+
title-text="h6 Success alert title"
24+
title-level="6">
25+
Short alert description.
2826
</pf-alert>
2927

3028
<script type="module">

‎elements/pf-alert/docs/pf-alert.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{% renderOverview %}
2-
<pf-alert></pf-alert>
2+
<pf-alert title-text="Success!" variant="success"></pf-alert>
33
{% endrenderOverview %}
44

55
{% band header="Usage" %}{% endband %}

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -159,6 +159,7 @@
159159
color: inherit;
160160
font-weight: inherit;
161161
}
162+
:is(h1,h2,h3,h4,h5,h6),
162163
::slotted(:is(h1,h2,h3,h4,h5,h6)) {
163164
margin-block: 0 !important;
164165
}

0 commit comments

Comments
 (0)