pf-alert new elment

.changeset/pf-alert.md

@@ -0,0 +1,14 @@
+
+---
+"@patternfly/elements": minor
+---
+
+:sparkles: Added `<pf-alert>`
+
+An alert is a banner used to notify a user about a change in status or communicate other information. It can be created programmatically or declared in markup.
+
+```html
+<pf-alert state="success">
+  <h3 slot="header">Success alert title</h3>
+</pf-alert>
+```

elements/package.json

@@ -15,6 +15,7 @@
     "./pf-accordion/pf-accordion-header.js": "./pf-accordion/pf-accordion-header.js",
     "./pf-accordion/pf-accordion-panel.js": "./pf-accordion/pf-accordion-panel.js",
     "./pf-accordion/pf-accordion.js": "./pf-accordion/pf-accordion.js",
+    "./pf-alert/pf-alert.js": "./pf-alert/pf-alert.js",
     "./pf-avatar/pf-avatar.js": "./pf-avatar/pf-avatar.js",
     "./pf-back-to-top/pf-back-to-top.js": "./pf-back-to-top/pf-back-to-top.js",
     "./pf-background-image/pf-background-image.js": "./pf-background-image/pf-background-image.js",
@@ -26,6 +27,7 @@
     "./pf-chip/pf-chip-group.js": "./pf-chip/pf-chip-group.js",
     "./pf-clipboard-copy/pf-clipboard-copy.js": "./pf-clipboard-copy/pf-clipboard-copy.js",
     "./pf-code-block/pf-code-block.js": "./pf-code-block/pf-code-block.js",
+    "./pf-description-list/pf-description-list.js": "./pf-description-list/pf-description-list.js",
     "./pf-dropdown/context.js": "./pf-dropdown/context.js",
     "./pf-dropdown/pf-dropdown-group.js": "./pf-dropdown/pf-dropdown-group.js",
     "./pf-dropdown/pf-dropdown-item.js": "./pf-dropdown/pf-dropdown-item.js",

elements/pf-alert/README.md

@@ -0,0 +1,78 @@
+# pf-alert
+
+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.
+
+## Installation
+
+Import the element in your page or application as an ES module:
+
+```html
+<script type="module">
+	import '@patternfly/elements/pf-alert/pf-alert.js';
+</script>
+```
+
+## Basic usage
+
+Inline alert example:
+
+```html
+<pf-alert state="success">
+	<h3 slot="header">Success</h3>
+	The operation completed successfully.
+	<div slot="actions">
+		<pf-button variant="link">Details</pf-button>
+	</div>
+</pf-alert>
+```
+
+Toast usage (static helper):
+
+```html
+<script type="module">
+	import '@patternfly/elements/pf-alert/pf-alert.js';
+
+	// Show a simple toast notification
+	PfAlert.toast({ message: 'Saved', heading: 'Success', state: 'success' });
+</script>
+```
+
+## API
+
+### Attributes / Properties
+- `state` (string) — Visual state of the alert. Common values: `neutral`, `info`, `success`, `warning`, `danger`, `custom`, `cogear`. Default: `neutral`.
+- `variant` (string) — Visual variant: `inline`, `toast`, or `alternate`.
+- `dismissable` (boolean) — When true, a close control is shown and the alert will emit a close event when dismissed.
+
+> See `elements/pf-alert/pf-alert.ts` for exact property types, defaults, and any additional options.
+
+### Slots
+- `header` — Slot for the heading (typically an `<h3>`).
+- default (unnamed) — Main body/content of the alert.
+- `actions` — Buttons or links for user actions (e.g. `<pf-button slot="actions">`).
+
+### Events
+- `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.
+
+### Methods
+- `static toast(options)` — Static helper to show a toast notification. Options typically include `message`, `heading`, `state`, `persistent`, and `actions`.
+
+## Styling
+
+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.
+
+## Accessibility
+
+- 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.
+
+## Notes & tips
+
+- Use the `actions` slot to add interactive elements and listen for their events on the page.
+- For persistent toasts set the `persistent` option when calling `PfAlert.toast(...)`.
+- If you need the exact event names/shape or CSS variables, I can extract and add them from the component source.
+
+---
+If you want, I can also:
+- Add a short section listing every CSS custom property the component exposes.
+- Add a copyable example showing how to listen for the alert `close` event.
+- Add a brief section demonstrating integration in React or Angular.

elements/pf-alert/demo/Custom-icon.html

@@ -0,0 +1,38 @@
+<div class="demo-description">
+  <section class="alerts-page">
+    <pf-alert class="a" state="cogear">
+      <h3 slot="header">Success alert title</h3>
+    </pf-alert>
+    <pf-alert class="b" state="cogear">
+      <h3 slot="header">Success alert title</h3>
+    </pf-alert>
+  </section>
+</div>
+
+<style>
+  .alerts-page pf-alert::part(container) {
+    padding-top: 1rem;
+    padding-right: 1rem;
+    padding-bottom: 1rem;
+    padding-left: 1rem;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
+
+  }
+
+  pf-alert.a::part(container) {
+    background-color: #fff;
+  }
+
+  pf-alert.b::part(container) {
+    background-color: #f3faf2;
+  }
+
+  .demo-description {
+    padding: 1cm;
+    /* Maintain a distance of one centimeter on all sides */
+  }
+</style>
+<script type="module">
+  import '@patternfly/elements/pf-alert/pf-alert.js';
+  import '@patternfly/elements/pf-button/pf-button.js';
+</script>

elements/pf-alert/demo/Expandable.html

@@ -0,0 +1,50 @@
+<div class="demo-description">
+  <section class="alerts-page demo-with-arrows">
+    <pf-alert class="white-alerts-page" state="success" dismissable data-on-close="prevent-default">
+      <h3 slot="header">Success alert title</h3>
+      <pf-button slot="actions" variant="link" data-action="dismiss">View details</pf-button>
+      <pf-button slot="actions" variant="link" data-action="confirm">lgnore</pf-button>
+    </pf-alert>
+
+    <pf-alert class="white-alerts-page" state="success" dismissable data-on-close="prevent-default">
+      <h3 slot="header">Success alert title (expanded)</h3>
+      <p>Success alert description. This should tell the user more information about the alert.</p>
+      <pf-button slot="actions" variant="link" data-action="dismiss">View details</pf-button>
+      <pf-button slot="actions" variant="link" data-action="confirm">lgnore</pf-button>
+    </pf-alert>
+
+    <pf-alert state="success" dismissable data-on-close="prevent-default">
+      <h3 slot="header">Success alert title</h3>
+      <pf-button slot="actions" variant="link" data-action="dismiss">View details</pf-button>
+      <pf-button slot="actions" variant="link" data-action="confirm">lgnore</pf-button>
+    </pf-alert>
+
+    <pf-alert state="success" dismissable data-on-close="prevent-default">
+      <h3 slot="header">Success alert title (expanded)</h3>
+      <p>Success alert description. This should tell the user more information about the alert.</p>
+      <pf-button slot="actions" variant="link" data-action="dismiss">View details</pf-button>
+      <pf-button slot="actions" variant="link" data-action="confirm">lgnore</pf-button>
+    </pf-alert>
+  </section>
+</div>
+<style>
+  pf-alert.white-alerts-page::part(container) {
+    background-color: #fff;
+  }
+
+  .alerts-page pf-alert::part(container) {
+    padding-top: 1rem;
+    padding-right: 1rem;
+    padding-bottom: 1rem;
+    padding-left: 1rem;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
+  }
+  .demo-description{
+    padding: 1cm; 
+  }
+</style>
+
+<script type="module">
+  import '@patternfly/elements/pf-alert/pf-alert.js';
+  import '@patternfly/elements/pf-button/pf-button.js';
+</script>

elements/pf-alert/demo/Inline-Variations.html

@@ -0,0 +1,51 @@
+<div class="demo-description">
+  <section class="alerts-page">
+    <pf-alert class="white-alerts-page" state="success" dismissable data-on-close="prevent-default">
+      <h3 slot="header">Success alert title</h3>
+      <p>Success alert description. This should tell the user more information about the alert.</p>
+      <pf-button slot="actions" variant="link" data-action="dismiss">View details</pf-button>
+      <pf-button slot="actions" variant="link" data-action="confirm">lgnore</pf-button>
+    </pf-alert>
+
+    <pf-alert class="white-alerts-page" state="success" dismissable data-on-close="prevent-default">
+      <h3 slot="header">Success alert title</h3>
+      <p>Success alert description. This should tell the user more information about the alert.
+        <pf-button slot="actions" variant="link" style="text-decoration:none; color:#06c; font-size:0.875rem;">This is
+          a link.</pf-button>
+      </p>
+    </pf-alert>
+
+    <pf-alert state="success" dismissable data-on-close="prevent-default">
+      <h3 slot="header">Success alert title</h3>
+      <pf-button slot="actions" variant="link" data-action="dismiss">View details</pf-button>
+      <pf-button slot="actions" variant="link" data-action="confirm">lgnore</pf-button>
+    </pf-alert>
+
+    <pf-alert state="success" dismissable data-on-close="prevent-default">
+      <h3 slot="header">Success alert title</h3>
+    </pf-alert>
+  </section>
+</div>
+
+<style>
+  .white-alerts-page pf-alert::part(container) {
+    background-color: var(--pf-global--BackgroundColor--100);
+  }
+
+  .alerts-page pf-alert::part(container) {
+    padding-top: 1rem;
+    padding-right: 1rem;
+    padding-bottom: 1rem;
+    padding-left: 1rem;
+    box-shadow: 0 4px 12px #fff;
+  }
+
+  .demo-description {
+    padding: 1cm;
+  }
+</style>
+
+<script type="module">
+  import '@patternfly/elements/pf-alert/pf-alert.js';
+  import '@patternfly/elements/pf-button/pf-button.js';
+</script>

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

@@ -0,0 +1,30 @@
+<div class="demo-description">
+  <section class="alerts-page">
+    <pf-alert state="Success">
+      <h3 slot="header">Success alert title</h3>
+    </pf-alert>
+  </section>
+</div>
+
+<style>
+  .alerts-page pf-alert::part(container) {
+    background-color: #fff;
+    border-top-color: transparent;
+    padding-top: 1rem;
+    padding-right: 1rem;
+    padding-bottom: 1rem;
+    padding-left: 1rem;
+    box-shadow: 0 4px 12px #fff;
+  }
+
+  .demo-description {
+    padding: 1cm;
+  }
+</style>
+<script type="module">
+  import '@patternfly/elements/pf-alert/pf-alert.js';
+  import '@patternfly/elements/pf-button/pf-button.js';
+</script>
+
+
+

elements/pf-alert/demo/Types.html

@@ -0,0 +1,46 @@
+<div class="demo-description">
+
+<section class="white-alerts-page">
+  <pf-alert state="custom">
+    <h3 slot="header">Default alert title</h3>
+  </pf-alert>
+
+  <pf-alert state="info">
+    <h3 slot="header">Info alert title</h3>
+  </pf-alert>
+
+  <pf-alert state="success">
+    <h3 slot="header">Success alert title</h3>
+  </pf-alert>
+
+  <pf-alert state="warning">
+    <h3 slot="header">Warning alert title</h3>
+  </pf-alert>
+
+  <pf-alert state="danger">
+    <h3 slot="header">Danger alert title</h3>
+  </pf-alert>
+</section>
+</div>
+
+
+
+<style>
+  .white-alerts-page pf-alert::part(container) {
+    background-color: #fff;
+    padding-top: 1rem;
+    padding-right: 1rem;
+    padding-bottom: 1rem;
+    padding-left: 1rem;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
+
+  }
+   .demo-description{
+    padding: 1cm; 
+  }
+</style>
+
+<script type="module">
+  import '@patternfly/elements/pf-alert/pf-alert.js';
+  import '@patternfly/elements/pf-button/pf-button.js';
+</script>