Skip to content

Commit e3d200a

Browse files
chubara62372chubara62372
committed
chore(monitor): update monitor and arrange ESLINT permissions + merge
1 parent d1dfc4b commit e3d200a

File tree

11 files changed

+167
-240
lines changed

11 files changed

+167
-240
lines changed

‎elements/pf-alert/README.md‎

Lines changed: 72 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,78 @@
1-
# Alert
2-
Add a description of the component here.
1+
# pf-alert
32

4-
## Usage
5-
Describe how best to use this web component along with best practices.
3+
The `pf-alert` web component displays PatternFly-styled alerts. It can be used inline in pages or as a toast notification. Alerts support several visual states (for example: `info`, `success`, `warning`, `danger`), an optional header slot, body content, and an `actions` slot for interactive controls.
4+
5+
## Installation
6+
7+
Import the element in your page or application as an ES module:
68

79
```html
8-
<pf-alert>
10+
<script type="module">
11+
import '@patternfly/elements/pf-alert/pf-alert.js';
12+
</script>
13+
```
914

15+
## Basic usage
16+
17+
Inline alert example:
18+
19+
```html
20+
<pf-alert state="success">
21+
<h3 slot="header">Success</h3>
22+
The operation completed successfully.
23+
<div slot="actions">
24+
<pf-button variant="link">Details</pf-button>
25+
</div>
1026
</pf-alert>
1127
```
28+
29+
Toast usage (static helper):
30+
31+
```html
32+
<script type="module">
33+
import '@patternfly/elements/pf-alert/pf-alert.js';
34+
35+
// Show a simple toast notification
36+
PfAlert.toast({ message: 'Saved', heading: 'Success', state: 'success' });
37+
</script>
38+
```
39+
40+
## API
41+
42+
### Attributes / Properties
43+
- `state` (string) — Visual state of the alert. Common values: `neutral`, `info`, `success`, `warning`, `danger`, `custom`, `cogear`. Default: `neutral`.
44+
- `variant` (string) — Visual variant: `inline`, `toast`, or `alternate`.
45+
- `dismissable` (boolean) — When true, a close control is shown and the alert will emit a close event when dismissed.
46+
47+
> See `elements/pf-alert/pf-alert.ts` for exact property types, defaults, and any additional options.
48+
49+
### Slots
50+
- `header` — Slot for the heading (typically an `<h3>`).
51+
- default (unnamed) — Main body/content of the alert.
52+
- `actions` — Buttons or links for user actions (e.g. `<pf-button slot="actions">`).
53+
54+
### Events
55+
- `close` (AlertCloseEvent) — Fired when the alert is closed (either via UI or programmatically). The event contains the action (e.g. `'close'`, `'dismiss'`, or `'confirm'`). Check the component source for exact payload.
56+
57+
### Methods
58+
- `static toast(options)` — Static helper to show a toast notification. Options typically include `message`, `heading`, `state`, `persistent`, and `actions`.
59+
60+
## Styling
61+
62+
The component exposes CSS parts and custom properties for styling. Typical part(s): `::part(container)` for the main container. See the component stylesheet (`pf-alert.css`) for a list of CSS custom properties (colors, spacing, durations) you can override.
63+
64+
## Accessibility
65+
66+
- Toasts use `role="status"` and `aria-live="polite"` to announce messages to assistive technologies. Inline alerts should be used in-context with appropriate semantic markup.
67+
68+
## Notes & tips
69+
70+
- Use the `actions` slot to add interactive elements and listen for their events on the page.
71+
- For persistent toasts set the `persistent` option when calling `PfAlert.toast(...)`.
72+
- If you need the exact event names/shape or CSS variables, I can extract and add them from the component source.
73+
74+
---
75+
If you want, I can also:
76+
- Add a short section listing every CSS custom property the component exposes.
77+
- Add a copyable example showing how to listen for the alert `close` event.
78+
- Add a brief section demonstrating integration in React or Angular.

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

Lines changed: 34 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -35,66 +35,20 @@ const ICONS = new Map(Object.entries({
3535

3636
}));
3737

38+
3839
export class AlertCloseEvent extends Event {
3940
constructor(public action: 'close' | 'confirm' | 'dismiss' | string) {
4041
super('close', { bubbles: true, cancelable: true });
4142
}
4243
}
43-
4444
let toaster: HTMLElement;
4545
const toasts = new Set<Required<ToastOptions>>();
4646

47-
/**
48-
* An alert is a banner used to notify a user about a change in status
49-
* or communicate other information. It can be generated with or without
50-
* a user triggering an action first.
51-
*
52-
* @summary Notifies a user without blocking their workflow
53-
*
54-
* @alias alert
55-
*
56-
* @fires {AlertCloseEvent} close - when the dismissable alert closes
57-
*/
58-
5947

6048
@customElement('pf-alert')
6149
export class PfAlert extends LitElement {
6250
static readonly styles: CSSStyleSheet[] = [styles];
6351

64-
65-
firstUpdated(): void {
66-
const icons = this.renderRoot.querySelectorAll('#arrow-icon, #close-button');
67-
icons.forEach(icon => {
68-
icon.addEventListener('click', () => {
69-
// Remove active from all icons of all components
70-
document.querySelectorAll('pf-alert').forEach(alert => {
71-
const innerIcons = alert.renderRoot?.querySelectorAll('#arrow-icon, #close-button');
72-
innerIcons?.forEach(i => i.classList.remove('active'));
73-
});
74-
// Add active to the current icon
75-
icon.classList.add('active');
76-
});
77-
});
78-
79-
// Click anywhere else returns to normal mode
80-
document.addEventListener('click', event => {
81-
const path = event.composedPath();
82-
const clickedOnIcon = Array.from(icons).some(i => path.includes(i as EventTarget));
83-
if (!clickedOnIcon) {
84-
icons.forEach(i => i.classList.remove('active'));
85-
}
86-
});
87-
}
88-
89-
/**
90-
* Toast a message with an rh-alert
91-
* @param options
92-
* @param options.message alert text
93-
* @param [options.actions] optional array of actions
94-
* @param [options.heading="Success"] alert heading
95-
* @param [options.state="info"] `<rh-alert state="...">`
96-
* @param [options.persistent=false] when true, toast remains on screen until dismissed
97-
*/
9852
public static async toast(options: Omit<ToastOptions, 'id'>): Promise<void> {
9953
const {
10054
message,
@@ -119,21 +73,9 @@ export class PfAlert extends LitElement {
11973
toasts.delete(toast);
12074
}
12175
renderToasts();
122-
};
123-
124-
get #icon() {
125-
const state = this.state.toLowerCase() as this['state'];
126-
switch (state) {
127-
// @ts-expect-error: support for deprecated props
128-
case 'note': return ICONS.get('info');
129-
// @ts-expect-error: support for deprecated props
130-
case 'default': return ICONS.get('neutral');
131-
// @ts-expect-error: support for deprecated props
132-
case 'error': return ICONS.get('danger');
133-
default: return ICONS.get(state);
134-
}
13576
}
13677

78+
13779
@property({ reflect: true })
13880
state:
13981
| 'warning'
@@ -150,12 +92,19 @@ export class PfAlert extends LitElement {
15092

15193
#slots = new SlotController(this, 'header', null, 'actions');
15294

153-
#onClose() {
154-
if (this.dispatchEvent(new AlertCloseEvent('close'))) {
95+
get #icon() {
96+
const state = this.state.toLowerCase() as this['state'];
97+
switch (state) {
98+
// @ts-expect-error: support for deprecated props
99+
case 'note': return ICONS.get('info');
100+
// @ts-expect-error: support for deprecated props
101+
case 'default': return ICONS.get('neutral');
102+
// @ts-expect-error: support for deprecated props
103+
case 'error': return ICONS.get('danger');
104+
default: return ICONS.get(state);
155105
}
156106
}
157107

158-
159108
#aliasState(state: string) {
160109
switch (state.toLowerCase()) {
161110
// the first three are deprecated pre-DPO status names
@@ -197,7 +146,6 @@ export class PfAlert extends LitElement {
197146

198147

199148
const footer = html`<footer class="${classMap({ hasActions })}"
200-
@click="${this.#onActionsClick}">
201149
<!-- Provide actions that the user can take for the alert -->
202150
<slot name="actions"></slot>
203151
</footer>`;
@@ -244,7 +192,6 @@ export class PfAlert extends LitElement {
244192
role="button"
245193
tabindex="0"
246194
aria-label="Close"
247-
@click="${this.#onClose}">
248195
</pf-icon>
249196
</div>`}
250197
</header>
@@ -259,14 +206,28 @@ export class PfAlert extends LitElement {
259206
}
260207

261208

262-
async #onActionsClick(event: MouseEvent) {
263-
if (event.target instanceof HTMLElement
264-
&& event.target?.slot === 'actions'
265-
&& typeof event.target.dataset.action === 'string'
266-
&& this.dispatchEvent(
267-
new AlertCloseEvent(event.target?.dataset.action.toLowerCase()),
268-
)) {
269-
}
209+
firstUpdated(): void {
210+
const icons = this.renderRoot.querySelectorAll('#arrow-icon, #close-button');
211+
icons.forEach(icon => {
212+
icon.addEventListener('click', () => {
213+
// Remove active from all icons of all components
214+
document.querySelectorAll('pf-alert').forEach(alert => {
215+
const innerIcons = alert.renderRoot?.querySelectorAll('#arrow-icon, #close-button');
216+
innerIcons?.forEach(i => i.classList.remove('active'));
217+
});
218+
// Add active to the current icon
219+
icon.classList.add('active');
220+
});
221+
});
222+
223+
// Click anywhere else returns to normal mode
224+
document.addEventListener('click', event => {
225+
const path = event.composedPath();
226+
const clickedOnIcon = Array.from(icons).some(i => path.includes(i as EventTarget));
227+
if (!clickedOnIcon) {
228+
icons.forEach(i => i.classList.remove('active'));
229+
}
230+
});
270231
}
271232
}
272233

‎elements/pf-description-list/demo/pf-description-list.html‎

Lines changed: 24 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,25 @@
1-
<dl class="pf-c-description-list">
2-
<div class="pf-c-description-list__group">
3-
<dt class="pf-c-description-list__term">
4-
<span class="pf-c-description-list__text">Name</span>
5-
</dt>
6-
<dd class="pf-c-description-list__description">
7-
<div class="pf-c-description-list__text">example</div>
8-
</dd>
9-
</div>
10-
<div class="pf-c-description-list__group">
11-
<dt class="pf-c-description-list__term">
12-
<span class="pf-c-description-list__text">Namespace</span>
13-
</dt>
14-
<dd class="pf-c-description-list__description">
15-
<div class="pf-c-description-list__text">
16-
<a href="#">mary-test</a>
17-
</div>
18-
</dd>
19-
</div>
20-
<div class="pf-c-description-list__group">
21-
<dt class="pf-c-description-list__term">
22-
<span class="pf-c-description-list__text">Labels</span>
23-
</dt>
24-
<dd class="pf-c-description-list__description">
25-
<div class="pf-c-description-list__text">example</div>
26-
</dd>
27-
</div>
28-
<div class="pf-c-description-list__group">
29-
<dt class="pf-c-description-list__term">
30-
<span class="pf-c-description-list__text">Pod selector</span>
31-
</dt>
32-
<dd class="pf-c-description-list__description">
33-
<div class="pf-c-description-list__text">
34-
<button class="pf-c-button pf-m-link pf-m-inline" type="button">
35-
<span class="pf-c-button__icon pf-m-start">
36-
<i class="fas fa-plus-circle" aria-hidden="true"></i>
37-
</span>
38-
app=MyApp
39-
</button>
40-
</div>
41-
</dd>
42-
</div>
43-
<div class="pf-c-description-list__group">
44-
<dt class="pf-c-description-list__term">
45-
<span class="pf-c-description-list__text">Annotation</span>
46-
</dt>
47-
<dd class="pf-c-description-list__description">
48-
<div class="pf-c-description-list__text">2 Annotations</div>
49-
</dd>
50-
</div>
51-
</dl>
52-
<script type="module">
53-
import '@patternfly/elements/pf-description-list/pf-description-list.js';
54-
</script>
55-
56-
<style>
57-
pf-description-list {
58-
/* insert demo styles */
59-
}
60-
</style>
1+
<section class="demo">
2+
<pf-description-list>
3+
<div class="pf-c-description-list__group">
4+
<dt class="pf-c-description-list__term">
5+
<span class="pf-c-description-list__text">Name</span>
6+
</dt>
7+
<dd class="pf-c-description-list__description">
8+
<div class="pf-c-description-list__text">Example</div>
9+
</dd>
10+
</div>
6111

12+
<div class="pf-c-description-list__group">
13+
<dt class="pf-c-description-list__term">
14+
<span class="pf-c-description-list__text">Pod selector</span>
15+
</dt>
16+
<dd class="pf-c-description-list__description">
17+
<div class="pf-c-description-list__text">
18+
<button class="pf-c-button pf-m-link pf-m-inline" type="button">
19+
MyApp
20+
</button>
21+
</div>
22+
</dd>
23+
</div>
24+
</pf-description-list>
25+
</section>

‎elements/pf-description-list/pf-description-list.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
11
:host {
22
display: block;
33
}
4+
5+
.pf-c-description-list__group {
6+
margin-bottom: var(--pf-global--spacer--md);
7+
}

‎elements/pf-description-list/pf-description-list.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export class PfDescriptionList extends LitElement {
1313

1414
render(): TemplateResult<1> {
1515
return html`
16-
<slot></slot>
16+
<dl class="pf-c-description-list pf-m-grid-md"></dl>
1717
`;
1818
}
1919
}

‎elements/pf-description-list/test/pf-description-list.spec.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,9 @@ describe('<pf-description-list>', function() {
1313
element = await createFixture<PfDescriptionList>(html`<pf-description-list></pf-description-list>`);
1414
const klass = customElements.get('pf-description-list');
1515
expect(element)
16-
.to.be.an.instanceOf(klass)
17-
.and
18-
.to.be.an.instanceOf(PfDescriptionList);
16+
.to.be.an.instanceOf(klass)
17+
.and
18+
.to.be.an.instanceOf(PfDescriptionList);
1919
});
20-
})
20+
});
2121
});

‎elements/pf-search-input/demo/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,9 +29,9 @@
2929
const searchInput = document.getElementById('search-input');
3030

3131
searchInput.addEventListener('change', (event) => {
32-
/* eslint-disable no-console */
32+
3333
console.log('Selected:', event.target.value);
34-
/* eslint-disable no-console */
34+
3535
});
3636
</script>
3737

0 commit comments

Comments
 (0)