Skip to content

Commit 95cd45e

Browse files
Update elements/pf-alert/README.md
fix(alert): update README to match project style Co-authored-by: Benny Powers - עם ישראל חי! <[email protected]>
1 parent 107f8be commit 95cd45e

File tree

1 file changed

+0
-40
lines changed

1 file changed

+0
-40
lines changed

elements/pf-alert/README.md

Lines changed: 0 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -36,43 +36,3 @@ Toast usage (static helper):
3636
PfAlert.toast({ message: 'Saved', heading: 'Success', state: 'success' });
3737
</script>
3838
```
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.

0 commit comments

Comments
 (0)