fix(alert): fix pf alert new -no --verfy

Author: chubara62372

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

@@ -1,7 +1,12 @@
-<pf-button>Add </pf-button>
-<pf-button></pf-button>
+<pf-button>Add alert</pf-button>
+<pf-button>Remove all alerts</pf-button>
 
 <script type="module">
   import '@patternfly/elements/pf-alert/pf-alert.js';
   import '@patternfly/elements/pf-button/pf-button.js';
-</script>
+</script>
+
+
+
+
+

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

@@ -3,15 +3,15 @@
     <h3 slot="title">Custom inline alert title</h3>
   </pf-alert>
 
-  <pf-alert variant="info">
+  <pf-alert variant="info" onClose>
     <h3 slot="title">Info inline alert title</h3>
   </pf-alert>
 
   <pf-alert variant="success">
     <h3 slot="title">Success inline alert title</h3>
   </pf-alert>
 
-  <pf-alert variant="warning">
+  <pf-alert variant="warning" >
     <h3 slot="title">Warning inline alert title</h3>
   </pf-alert>
 

elements/pf-alert/demo/static-live-region-alerts.html

@@ -22,8 +22,6 @@ <h3 slot="title">Customized live region</h3>
 
 <script type="module">
     import '@patternfly/elements/pf-alert/pf-alert.js';
-    import '@patternfly/elements/pf-icon/pf-icon.js';
-
 </script>
 <style>
   .alerts-page pf-alert::part(container) {

elements/pf-alert/pf-alert.ts

@@ -4,6 +4,7 @@ import { property } from 'lit/decorators/property.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';
 import '@patternfly/elements/pf-icon/pf-icon.js';
+import '@patternfly/elements/pf-button/pf-button.js';
 import styles from './pf-alert.css';
 
 
@@ -22,8 +23,16 @@ export class PfAlert extends LitElement {
 
   @property() icon?: string;
 
+  @property({ reflect: true, type: Boolean }) onClose = false;
+
+
   #slots = new SlotController(this, null, 'icon', 'actionClose', 'title');
 
+  #onCloseClick() {
+    if (this.isConnected) {
+      this.remove();
+    }
+  }
 
   override render(): TemplateResult<1> {
     const { variant } = this;
@@ -53,6 +62,14 @@ export class PfAlert extends LitElement {
           <slot></slot>
         </div>
 
+        <pf-button id="close-button"
+                   plain
+                   icon="close"
+                   icon-set="patternfly"
+                   ?hidden="${!this.onClose}"
+                   @click="${this.#onCloseClick}">
+        </pf-button>
+
       </div>
     `;
   }