Skip to content

Commit 403517e

Browse files
chubara62372chubara62372
committed
fix(alert): replace state with status
1 parent a366f25 commit 403517e

File tree

9 files changed

+51
-50
lines changed

9 files changed

+51
-50
lines changed

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<div class="demo-description">
2-
<pf-alert class="a" state="cogear">
2+
<pf-alert class="a" status="cogear">
33
<h3 slot="header">Success alert title</h3>
44
</pf-alert>
5-
<pf-alert class="b" state="cogear">
5+
<pf-alert class="b" status="cogear">
66
<h3 slot="header">Success alert title</h3>
77
</pf-alert>
88
</div>

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

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,24 @@
1-
<div class="demo-description demo-with-arrows">
2-
<pf-alert class="white-alerts-page" state="success" dismissable data-on-close="prevent-default">
1+
<div class="demo-description alerts-page">
2+
<pf-alert class="white-alerts-page" status="success" dismissable data-on-close="prevent-default">
33
<h3 slot="header">Success alert title</h3>
44
<pf-button slot="actions" variant="link" data-action="dismiss">View details</pf-button>
55
<pf-button slot="actions" variant="link" data-action="confirm">lgnore</pf-button>
66
</pf-alert>
77

8-
<pf-alert class="white-alerts-page" state="success" dismissable data-on-close="prevent-default">
8+
<pf-alert class="white-alerts-page" status="success" dismissable data-on-close="prevent-default">
99
<h3 slot="header">Success alert title (expanded)</h3>
1010
<p>Success alert description. This should tell the user more information about the alert.</p>
1111
<pf-button slot="actions" variant="link" data-action="dismiss">View details</pf-button>
1212
<pf-button slot="actions" variant="link" data-action="confirm">lgnore</pf-button>
1313
</pf-alert>
1414

15-
<pf-alert state="success" dismissable data-on-close="prevent-default">
15+
<pf-alert status="success" dismissable data-on-close="prevent-default">
1616
<h3 slot="header">Success alert title</h3>
1717
<pf-button slot="actions" variant="link" data-action="dismiss">View details</pf-button>
1818
<pf-button slot="actions" variant="link" data-action="confirm">lgnore</pf-button>
1919
</pf-alert>
2020

21-
<pf-alert state="success" dismissable data-on-close="prevent-default">
21+
<pf-alert status="success" dismissable data-on-close="prevent-default">
2222
<h3 slot="header">Success alert title (expanded)</h3>
2323
<p>Success alert description. This should tell the user more information about the alert.</p>
2424
<pf-button slot="actions" variant="link" data-action="dismiss">View details</pf-button>
@@ -27,16 +27,18 @@ <h3 slot="header">Success alert title (expanded)</h3>
2727
</div>
2828

2929
<style>
30-
pf-alert.white-alerts-page::part(container) {
31-
background-color: #fff;
30+
.alerts-page pf-alert::part(container) {
3231
padding: 0.5cm;
3332
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
34-
3533
}
3634

3735
.demo-description {
3836
padding: 1cm;
3937
}
38+
39+
pf-alert.white-alerts-page::part(container) {
40+
background-color: #fff;
41+
}
4042
</style>
4143

4244
<script type="module">

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

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
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>
1+
<div class="demo-description alerts-page">
2+
<pf-alert status="success">
3+
<h3 slot="header">Success alert title</h3>
4+
</pf-alert>
75
</div>
86

97
<style>
@@ -14,6 +12,7 @@ <h3 slot="header">Success alert title</h3>
1412
box-shadow: 0 4px 12px #fff;
1513
}
1614

15+
1716
.demo-description {
1817
padding: 1cm;
1918
}

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

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

3-
<pf-alert state="custom">
3+
<pf-alert status="custom">
44
<h3 slot="header">Custom inline alert title</h3>
55
</pf-alert>
66

7-
<pf-alert state="info">
7+
<pf-alert status="info">
88
<h3 slot="header">Info inline alert title</h3>
99
</pf-alert>
1010

11-
<pf-alert state="success">
11+
<pf-alert status="success">
1212
<h3 slot="header">Success inline alert title</h3>
1313
</pf-alert>
1414

15-
<pf-alert state="warning">
15+
<pf-alert status="warning">
1616
<h3 slot="header">Warning inline alert title</h3>
1717
</pf-alert>
1818

1919

20-
<pf-alert state="danger">
20+
<pf-alert status="danger">
2121
<h3 slot="header">Danger inline alert title</h3>
2222
</pf-alert>
2323
</div>
2424

2525

2626
<style>
27-
.white-alerts-page pf-alert::part(container) {
27+
.alerts-page pf-alert::part(container) {
2828
padding: 0.5cm;
2929
box-shadow: 0 4px 12px #fff;
3030
}

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,27 @@
11
<div class="demo-description alerts-page">
22

3-
<pf-alert state="success" dismissable data-on-close="prevent-default">
3+
<pf-alert status="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 state="success" dismissable data-on-close="prevent-default">
10+
<pf-alert status="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
1414
a link.</pf-button>
1515
</p>
1616
</pf-alert>
1717

18-
<pf-alert state="success" dismissable data-on-close="prevent-default">
18+
<pf-alert status="success" dismissable data-on-close="prevent-default">
1919
<h3 slot="header">Success alert title</h3>
2020
<pf-button slot="actions" variant="link" data-action="dismiss">View details</pf-button>
2121
<pf-button slot="actions" variant="link" data-action="confirm">lgnore</pf-button>
2222
</pf-alert>
2323

24-
<pf-alert state="success" dismissable data-on-close="prevent-default">
24+
<pf-alert status="success" dismissable data-on-close="prevent-default">
2525
<h3 slot="header">Success alert title</h3>
2626
</pf-alert>
2727
</div>

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

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

3-
<pf-alert state="custom">
3+
<pf-alert status="custom">
44
<h3 slot="header">Default alert title</h3>
55
</pf-alert>
66

7-
<pf-alert state="info">
7+
<pf-alert status="info">
88
<h3 slot="header">Info alert title</h3>
99
</pf-alert>
1010

11-
<pf-alert state="success">
11+
<pf-alert status="success">
1212
<h3 slot="header">Success alert title</h3>
1313
</pf-alert>
1414

15-
<pf-alert state="warning">
15+
<pf-alert status="warning">
1616
<h3 slot="header">Warning alert title</h3>
1717
</pf-alert>
1818

19-
<pf-alert state="danger">
19+
<pf-alert status="danger">
2020
<h3 slot="header">Danger alert title</h3>
2121
</pf-alert>
2222
</div>
2323

2424

2525

2626
<style>
27-
.white-alerts-page pf-alert::part(container) {
27+
.alerts-page pf-alert::part(container) {
2828
background-color: #fff;
2929
padding: 0.5cm;
3030
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);

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

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

3-
<pf-alert state="success" dismissable>
3+
<pf-alert status="success" dismissable>
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="confirm">View details</pf-button>
77
<pf-button slot="actions" variant="link" data-action="dismiss">lgnore</pf-button>
88
</pf-alert>
99

10-
<pf-alert state="success" dismissable>
10+
<pf-alert status="success" dismissable>
1111
<h3 slot="header">Success alert title</h3>
1212
<p>Success alert description. This should tell the user more information about the alert. This is a link.</p>
1313
</pf-alert>
1414

15-
<pf-alert state="success" toast dismissable>
15+
<pf-alert status="success" toast dismissable>
1616
<h3 slot="header">Success alert title</h3>
1717
<pf-button slot="actions" variant="link" data-action="confirm">View details</pf-button>
1818
<pf-button slot="actions" variant="link" data-action="dismiss">lgnore</pf-button>
1919
</pf-alert>
2020

21-
<pf-alert state="success" dismissable data-on-close="prevent-default">
21+
<pf-alert status="success" dismissable data-on-close="prevent-default">
2222
<h3 slot="header">Success alert title</h3>
2323
</pf-alert>
2424

25-
<pf-alert state="success">
25+
<pf-alert status="success">
2626
<h3 slot="header">Success alert title</h3>
2727
</pf-alert>
2828

2929

30-
<pf-alert state="success">
30+
<pf-alert status="success">
3131
<h3 slot="header">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque cursus
3232
enim
3333
fringilla...</h3>
@@ -36,7 +36,7 @@ <h3 slot="header">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curab
3636
</pf-alert>
3737

3838

39-
<pf-alert variant="success">
39+
<pf-alert status="success">
4040
<h3 slot="header">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque cursus
4141
enim
4242
fringilla tincidunt. Proin lobortis aliquam dictum. Nam vel ullamcorper nulla, nec blandit dolor. Vivamus
@@ -53,7 +53,7 @@ <h3 slot="header">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curab
5353
</script>
5454

5555
<style>
56-
.white-alerts-page pf-alert::part(container) {
56+
.alerts-page pf-alert::part(container) {
5757
background-color: var(--pf-global--BackgroundColor--100);
5858
padding: 0.5cm;
5959
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);

‎elements/pf-alert/pf-alert.ts‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ interface ToastOptions {
1616
id?: string;
1717
message: string | TemplateResult;
1818
heading?: string;
19-
state?: PfAlert['state'];
19+
state?: PfAlert['status'];
2020
persistent?: boolean;
2121
actions?: AlertAction[];
2222
}
@@ -47,7 +47,7 @@ export class PfAlert extends LitElement {
4747
static readonly styles: CSSStyleSheet[] = [styles];
4848

4949
@property({ reflect: true })
50-
state:
50+
status:
5151
| 'warning'
5252
| 'custom'
5353
| 'neutral'
@@ -63,7 +63,7 @@ export class PfAlert extends LitElement {
6363
#slots = new SlotController(this, 'header', null, 'actions');
6464

6565
get #icon() {
66-
const state = this.state.toLowerCase() as this['state'];
66+
const state = this.status.toLowerCase() as this['status'];
6767
switch (state) {
6868
// @ts-expect-error: support for deprecated props
6969
case 'note': return ICONS.get('info');
@@ -89,7 +89,7 @@ export class PfAlert extends LitElement {
8989
case 'info':
9090
case 'success':
9191
case 'cogear':
92-
return state.toLowerCase() as this['state'];
92+
return state.toLowerCase() as this['status'];
9393
default:
9494
return 'neutral';
9595
}
@@ -108,7 +108,7 @@ export class PfAlert extends LitElement {
108108
const hasBody =
109109
_isServer || this.#slots.hasSlotted(SlotController.default as unknown as string);
110110
const { variant = 'inline' } = this;
111-
const state = this.#aliasState(this.state);
111+
const state = this.#aliasState(this.status);
112112
const inDemo = this.closest('.demo-with-arrows') !== null;
113113
const hasDescription = this.querySelector('p') !== null;
114114
const showArrow = inDemo;
@@ -124,7 +124,7 @@ export class PfAlert extends LitElement {
124124
${classMap({
125125
hasBody,
126126
light: true,
127-
[state]: true,
127+
[this.status as string]: true,
128128
[variant]: !!variant,
129129
})}
130130
role="alert"

‎elements/pf-alert/test/pf-alert.spec.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ describe('<pf-alert>', function() {
2525
it('reflects state attribute', async function() {
2626
const el = await createFixture<PfAlert>(html`<pf-alert state="success"></pf-alert>`);
2727
expect(el.getAttribute('state')).to.equal('success');
28-
expect(el.state).to.equal('success');
28+
expect(el.status).to.equal('success');
2929
});
3030

3131
it('reflects variant attribute', async function() {

0 commit comments

Comments
 (0)