fix(alert): changes requested after first PR

Author: chubara62372

.changeset/pf-alert.md

@@ -2,4 +2,14 @@
 "@patternfly/elements/pf-alert": minor
 ---
 
-Add `pf-alert` component to display alert messages of various types (info, warning, danger, success, cogear, neutral, custom) with optional heading, description, actions, and dismiss button. This component allows developers to consistently show alerts in their apps or demos.
+### Minor Changes
+
+- Added `pf-alert` component for displaying alert messages of different types:
+  - Types: info, warning, danger, success, cogear, neutral, custom
+  - Features: optional heading, description, actions, dismiss button
+- Enables consistent alert messaging across apps and demos
+
+```html
+<pf-alert type="warning" heading="Attention!">
+  This is a warning alert with optional description and actions.
+</pf-alert>

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

@@ -17,6 +17,7 @@ <h3 slot="header">Success inline alert title</h3>
     <h3 slot="header">Warning inline alert title</h3>
   </pf-alert>
 
+
   <pf-alert state="danger">
     <h3 slot="header">Danger inline alert title</h3>
   </pf-alert>

elements/pf-alert/demo/variations.html

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

elements/pf-alert/pf-alert.ts

@@ -201,40 +201,11 @@ export class PfAlert extends LitElement {
     </section>
     `;
   }
-
-  firstUpdated(): void {
-    const icons = this.renderRoot.querySelectorAll('#arrow-icon, #close-button');
-    icons.forEach(icon => {
-      icon.addEventListener('click', () => {
-        // Remove active from all icons of all components
-        document.querySelectorAll('pf-alert').forEach(alert => {
-          const innerIcons = alert.renderRoot?.querySelectorAll('#arrow-icon, #close-button');
-          innerIcons?.forEach(i => i.classList.remove('active'));
-        });
-        // Add active to the current icon
-        icon.classList.add('active');
-      });
-    });
-
-    // Click anywhere else returns to normal mode
-    document.addEventListener('click', event => {
-      const path = event.composedPath();
-      const clickedOnIcon = Array.from(icons).some(i => path.includes(i as EventTarget));
-      if (!clickedOnIcon) {
-        icons.forEach(i => i.classList.remove('active'));
-      }
-    });
-  }
 }
 
-
 function initToaster() {
   const node = document.createElement('section');
   node.classList.add('pf-alert-toast-group');
-  document.adoptedStyleSheets = [
-    ...document.adoptedStyleSheets ?? [],
-  ];
-
   document.body.append(node);
   return node;
 }