fix(avatar)!: rename AvatarLoadEvent => PfAvatarLoadEvent

patternfly · Mar 31, 2024 · cf4723b · cf4723b
1 parent e4460fe
commit cf4723b
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 6 deletions.
diff --git a/.changeset/remove-baseavatar.md b/.changeset/remove-baseavatar.md
@@ -2,3 +2,28 @@
 "@patternfly/elements": major
 ---
 `<pf-avatar>`: Removed `BaseAvatar` class. Reimplement (recommended) or extend `PfAvatar`.
+Renames `AvatarLoadEvent` to `PfAvatarLoadEvent` and moves it to `pf-avatar.js`.
+
+**Before**:
+
+```js
+import { AvatarLoadEvent } from '@patternfly/elements/pf-avatar/BaseAvatar.js';
+
+addEventListener('load', function(event) {
+  if (event instanceof AvatarLoadEvent) {
+    // ...
+  }
+});
+```
+
+**After**:
+
+```js
+import { PfAvatarLoadEvent } from '@patternfly/elements/pf-avatar/pf-avatar.js';
+
+addEventListener('load', function(event) {
+  if (event instanceof PfAvatarLoadEvent) {
+    // ...
+  }
+});
+```
diff --git a/elements/pf-avatar/pf-avatar.ts b/elements/pf-avatar/pf-avatar.ts
@@ -4,7 +4,7 @@ import { customElement } from 'lit/decorators/custom-element.js';
 
 import style from './pf-avatar.css';
 
-export class AvatarLoadEvent extends Event {
+export class PfAvatarLoadEvent extends Event {
   constructor(public originalEvent: Event) {
     super('load', { bubbles: true });
   }
@@ -14,7 +14,7 @@ export class AvatarLoadEvent extends Event {
  * An **avatar** is a visual used to represent a user. It may contain an image or a placeholder graphic.
  *
  * @summary For displaying a user's avatar image
- * @fires {AvatarLoadEvent} load - when the avatar loads
+ * @fires {PfAvatarLoadEvent} load - when the avatar loads
  *
  * @cssprop [--pf-c-avatar--Width=24px]
  * @cssprop [--pf-c-avatar--Height=24px]
@@ -57,7 +57,9 @@ export class PfAvatar extends LitElement {
            src=${this.src}
            @load="${this.#onLoad}">
     ` : this.dark ? html`
-      <svg xmlns="http://www.w3.org/2000/svg" style="enable-background:new 0 0 36 36" viewBox="0 0 36 36">
+      <svg xmlns="http://www.w3.org/2000/svg"
+           style="enable-background:new 0 0 36 36"
+           viewBox="0 0 36 36">
         <style>.st1,.st2{fill-rule:evenodd;clip-rule:evenodd;fill:#6a6e73}.st2{fill:#4f5255}</style><path d="M0 0h36v36H0z" style="fill:#212427"/>
         <path d="M30.5 36c-.4-3.9-1.3-9-2.9-11-1.1-1.4-2.3-2.2-3.5-2.6s-1.8-.6-6.3-.6-6.1.7-6.1.7c-1.2.4-2.4 1.2-3.4 2.6C6.7 27 5.8 32.2 5.4 36h25.1zM17.7 20.1c-3.5 0-6.4-2.9-6.4-6.4s2.9-6.4 6.4-6.4 6.4 2.9 6.4 6.4-2.8 6.4-6.4 6.4z" class="st1"/><path d="M13.3 36v-6.7c-2 .4-2.9 1.4-3.1 3.5l-.1 3.2h3.2zM22.7 36v-6.7c2 .4 2.9 1.4 3.1 3.5l.1 3.2h-3.2z" class="st2"/>
       </svg>
@@ -71,7 +73,7 @@ export class PfAvatar extends LitElement {
   }
 
   #onLoad(event: Event) {
-    this.dispatchEvent(new AvatarLoadEvent(event));
+    this.dispatchEvent(new PfAvatarLoadEvent(event));
   }
 }
 

diff --git a/elements/pf-avatar/test/pf-avatar.spec.ts b/elements/pf-avatar/test/pf-avatar.spec.ts
@@ -1,6 +1,6 @@
 import { html, expect, oneEvent, nextFrame } from '@open-wc/testing';
 import { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';
-import { PfAvatar, AvatarLoadEvent } from '@patternfly/elements/pf-avatar/pf-avatar.js';
+import { PfAvatar, PfAvatarLoadEvent } from '@patternfly/elements/pf-avatar/pf-avatar.js';
 
 describe('<pf-avatar>', function() {
   it('imperatively instantiates', function() {
@@ -31,7 +31,7 @@ describe('<pf-avatar>', function() {
     let element: PfAvatar;
     let loaded: string | undefined;
     const datauri = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAB0UlEQVR4Xu3UAQ0AAAyDsM+/6QspcwAh2zXawGj64K8A8AgKoABwAzh+D1AAuAEcvwcoANwAjt8DFABuAMfvAQoAN4Dj9wAFgBvA8XuAAsAN4Pg9QAHgBnD8HqAAcAM4fg9QALgBHL8HKADcAI7fAxQAbgDH7wEKADeA4/cABYAbwPF7gALADeD4PUAB4AZw/B6gAHADOH4PUAC4ARy/BygA3ACO3wMUAG4Ax+8BCgA3gOP3AAWAG8Dxe4ACwA3g+D1AAeAGcPweoABwAzh+D1AAuAEcvwcoANwAjt8DFABuAMfvAQoAN4Dj9wAFgBvA8XuAAsAN4Pg9QAHgBnD8HqAAcAM4fg9QALgBHL8HKADcAI7fAxQAbgDH7wEKADeA4/cABYAbwPF7gALADeD4PUAB4AZw/B6gAHADOH4PUAC4ARy/BygA3ACO3wMUAG4Ax+8BCgA3gOP3AAWAG8Dxe4ACwA3g+D1AAeAGcPweoABwAzh+D1AAuAEcvwcoANwAjt8DFABuAMfvAQoAN4Dj9wAFgBvA8XuAAsAN4Pg9QAHgBnD8HqAAcAM4fg9QALgBHL8HKADcAI7fAxQAbgDH7wEKADeA4/cABYAbwPF7ADyAB6SPAIFm19U7AAAAAElFTkSuQmCC';
-    const onLoad = (e: AvatarLoadEvent) => {
+    const onLoad = (e: PfAvatarLoadEvent) => {
       const paths = e.originalEvent.composedPath() as HTMLImageElement[];
       loaded = paths.find(x => x.localName === 'img')?.src;
     };