Merge 834200d into 7a7eafc

patternfly · Mar 31, 2024 · ad6d522 · ad6d522
2 parents 7a7eafc + 834200d
commit ad6d522
Show file tree

Hide file tree

Showing 7 changed files with 112 additions and 97 deletions.
diff --git a/.changeset/remove-baseavatar.md b/.changeset/remove-baseavatar.md
@@ -0,0 +1,4 @@
+---
+"@patternfly/elements": major
+---
+`<pf-avatar>`: Removed `BaseAvatar` class. Reimplement (recommended) or extend `PfAvatar`.
diff --git a/elements/package.json b/elements/package.json
@@ -16,7 +16,6 @@
     "./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-avatar/BaseAvatar.js": "./pf-avatar/BaseAvatar.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",

diff --git a/elements/pf-avatar/BaseAvatar.css b/elements/pf-avatar/BaseAvatar.css
diff --git a/elements/pf-avatar/BaseAvatar.ts b/elements/pf-avatar/BaseAvatar.ts
diff --git a/elements/pf-avatar/pf-avatar.css b/elements/pf-avatar/pf-avatar.css
@@ -1,40 +1,66 @@
+:host {
+  display: inline-block;
+	--pf-c-avatar--BorderColor: transparent;
+	--pf-c-avatar--BorderWidth: 0;
+	--pf-c-avatar--BorderRadius: var(--pf-global--BorderRadius--lg, 30em);
+	--pf-c-avatar--Width: 2.25rem;
+	--pf-c-avatar--Height: 2.25rem;
+	--pf-c-avatar--m-sm--Width: 1.5rem;
+	--pf-c-avatar--m-sm--Height: 1.5rem;
+	--pf-c-avatar--m-md--Width: 2.25rem;
+	--pf-c-avatar--m-md--Height: 2.25rem;
+	--pf-c-avatar--m-lg--Width: 4.5rem;
+	--pf-c-avatar--m-lg--Height: 4.5rem;
+	--pf-c-avatar--m-xl--Width: 8rem;
+	--pf-c-avatar--m-xl--Height: 8rem;
+	--pf-c-avatar--m-light--BorderColor: var(--pf-global--BorderColor--dark-100, #d2d2d2);
+	--pf-c-avatar--m-light--BorderWidth: var(--pf-global--BorderWidth--sm, 1px);
+	--pf-c-avatar--m-dark--BorderColor: var(--pf-global--palette--black-700, #4f5255);
+	--pf-c-avatar--m-dark--BorderWidth: var(--pf-global--BorderWidth--sm, 1px);
+	width: var(--pf-c-avatar--Width);
+	height: var(--pf-c-avatar--Height);
+	border-radius: var(--pf-c-avatar--BorderRadius);
+}
+
+:host([hidden]),
+[hidden] {
+  display: none !important;
+}
+
 svg,
 img {
-  width: var(--pf-c-avatar--Width, 24px);
-  height: var(--pf-c-avatar--Height, 24px);
-  border-radius: var(--pf-c-avatar--BorderRadius, var(--pf-global--BorderRadius--lg, 128px));
-  border:
-    var(--pf-c-avatar--BorderWidth, 0)
-    solid
-    var(--pf-c-avatar--BorderColor,
-      var(--pf-global--BorderColor--dark-100, #d2d2d2));
+  display: inline;
+  object-fit: cover;
+  width: var(--pf-c-avatar--Width);
+  height: var(--pf-c-avatar--Height);
+  border-radius: var(--pf-c-avatar--BorderRadius);
+  border: var(--pf-c-avatar--BorderWidth) solid var(--pf-c-avatar--BorderColor);
 }
 
-:host([border]) :is(img, svg) {
+:host([border]) {
   --pf-c-avatar--BorderWidth: var(--pf-global--BorderWidth--sm, 1px);
 }
 
-:host([border="dark"]) :is(img, svg) {
-  --pf-c-avatar--BorderColor: var(--pf-c-avatar--m-dark--BorderColor,
-      var(--pf-global--palette--black-700, #4f5255));
+:host([border="dark"]) {
+  --pf-c-avatar--BorderColor: var(--pf-c-avatar--m-dark--BorderColor);
 }
 
-:host([size='sm']) {
-  --pf-c-avatar--Width: var(--pf-c-avatar--m-sm--Width, 24px);
-  --pf-c-avatar--Height: var(--pf-c-avatar--m-sm--Height, 24px);
+:host([size="sm"]) {
+  --pf-c-avatar--Width: var(--pf-c-avatar--m-sm--Width);
+  --pf-c-avatar--Height: var(--pf-c-avatar--m-sm--Height);
 }
 
-:host([size='md']) {
-  --pf-c-avatar--Width: var(--pf-c-avatar--m-md--Width, 36px);
-  --pf-c-avatar--Height: var(--pf-c-avatar--m-md--Height, 36px);
+:host([size="md"]) {
+  --pf-c-avatar--Width: var(--pf-c-avatar--m-md--Width);
+  --pf-c-avatar--Height: var(--pf-c-avatar--m-md--Height);
 }
 
-:host([size='lg']) {
-  --pf-c-avatar--Width: var(--pf-c-avatar--m-lg--Width, 72px);
-  --pf-c-avatar--Height: var(--pf-c-avatar--m-lg--Height, 72px);
+:host([size="lg"]) {
+  --pf-c-avatar--Width: var(--pf-c-avatar--m-lg--Width);
+  --pf-c-avatar--Height: var(--pf-c-avatar--m-lg--Height);
 }
 
-:host([size='xl']) {
-  --pf-c-avatar--Width: var(--pf-c-avatar--m-xl--Width, 128px);
-  --pf-c-avatar--Height: var(--pf-c-avatar--m-xl--Height, 128px);
+:host([size="xl"]) {
+  --pf-c-avatar--Width: var(--pf-c-avatar--m-xl--Width);
+  --pf-c-avatar--Height: var(--pf-c-avatar--m-xl--Height);
 }
diff --git a/elements/pf-avatar/pf-avatar.ts b/elements/pf-avatar/pf-avatar.ts
@@ -1,24 +1,78 @@
+import { LitElement, html } from 'lit';
 import { property } from 'lit/decorators/property.js';
 import { customElement } from 'lit/decorators/custom-element.js';
 
-import { BaseAvatar } from './BaseAvatar.js';
-
 import style from './pf-avatar.css';
 
+export class AvatarLoadEvent extends Event {
+  constructor(public originalEvent: Event) {
+    super('load', { bubbles: true });
+  }
+}
+
 /**
  * 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
+ *
+ * @cssprop [--pf-c-avatar--Width=24px]
+ * @cssprop [--pf-c-avatar--Height=24px]
+ * @cssprop [--pf-c-avatar--BorderRadius=var(--pf-global--BorderRadius--lg, 128px)]
+ * @cssprop [--pf-c-avatar--BorderWidth=0]
+ * @cssprop [--pf-c-avatar--BorderColor=var(--pf-global--BorderColor--dark-100, #d2d2d2)]
+ * @cssprop [--pf-c-avatar--m-dark--BorderColor=var(--pf-global--palette--black-700, #4f5255)]
+ * @cssprop [--pf-c-avatar--m-sm--Width=24px]
+ * @cssprop [--pf-c-avatar--m-sm--Height=24px]
+ * @cssprop [--pf-c-avatar--m-md--Width=36px]
+ * @cssprop [--pf-c-avatar--m-md--Height=36px]
+ * @cssprop [--pf-c-avatar--m-lg--Width=72px]
+ * @cssprop [--pf-c-avatar--m-lg--Height=72px]
+ * @cssprop [--pf-c-avatar--m-xl--Width=28px]
+ * @cssprop [--pf-c-avatar--m-xl--Height=28px]
  */
 @customElement('pf-avatar')
-export class PfAvatar extends BaseAvatar {
+export class PfAvatar extends LitElement {
   static readonly styles = [style];
 
+  /** The URL to the user's custom avatar image. */
+  @property() src?: string;
+
+  /** The alt text for the avatar image. */
+  @property({ reflect: true }) alt?: string = 'Avatar image';
+
   /** Size of the Avatar */
   @property({ reflect: true }) size: 'sm' | 'md' | 'lg' | 'xl' = 'sm';
 
   /** Whether to display a border around the avatar */
   @property({ reflect: true }) border?: 'light' | 'dark';
+
+  /** Whether or not the Avatar image is dark */
+  @property({ type: Boolean, reflect: true }) dark = false;
+
+  render() {
+    return this.src != null ? html`
+      <img id="img"
+           alt="${this.alt ?? ''}"
+           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">
+        <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>
+    ` : html`
+      <svg xmlns="http://www.w3.org/2000/svg" style="enable-background:new 0 0 36 36" viewBox="0 0 36 36">
+        <style>.st2{fill:#b8bbbe}</style><path d="M0 0h36v36H0z" style="fill-rule:evenodd;clip-rule:evenodd;fill:#f0f0f0"/>
+        <path d="M17.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" style="fill-rule:evenodd;clip-rule:evenodd;fill:#d2d2d2"/><path d="M13.3 36v-6.7c-2 .4-2.9 1.4-3.1 3.5l-.1 3.2h3.2z" class="st2"/>
+        <path d="m10.1 36 .1-3.2c.2-2.1 1.1-3.1 3.1-3.5V36h9.4v-6.7c2 .4 2.9 1.4 3.1 3.5l.1 3.2h4.7c-.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.6-1.7 1.9-2.6 7.1-3 10.9h4.7z" style="fill:#d2d2d2"/><path d="m25.9 36-.1-3.2c-.2-2.1-1.1-3.1-3.1-3.5V36h3.2z" class="st2"/>
+      </svg>
+      `;
+  }
+
+  #onLoad(event: Event) {
+    this.dispatchEvent(new AvatarLoadEvent(event));
+  }
 }
 
 declare global {

diff --git a/elements/pf-avatar/test/pf-avatar.spec.ts b/elements/pf-avatar/test/pf-avatar.spec.ts
@@ -1,7 +1,6 @@
 import { html, expect, oneEvent, nextFrame } from '@open-wc/testing';
 import { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';
-import { PfAvatar } from '@patternfly/elements/pf-avatar/pf-avatar.js';
-import { AvatarLoadEvent } from '../BaseAvatar';
+import { PfAvatar, AvatarLoadEvent } from '@patternfly/elements/pf-avatar/pf-avatar.js';
 
 describe('<pf-avatar>', function() {
   it('imperatively instantiates', function() {