diff --git a/.changeset/remove-baseavatar.md b/.changeset/remove-baseavatar.md new file mode 100644 index 0000000000..e3be349b97 --- /dev/null +++ b/.changeset/remove-baseavatar.md @@ -0,0 +1,4 @@ +--- +"@patternfly/elements": major +--- +``: Removed `BaseAvatar` class. Reimplement (recommended) or extend `PfAvatar`. diff --git a/elements/package.json b/elements/package.json index fbda0ac799..357d3d1111 100644 --- 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 deleted file mode 100644 index 17dfb3d9a1..0000000000 --- a/elements/pf-avatar/BaseAvatar.css +++ /dev/null @@ -1,13 +0,0 @@ -:host { - display: contents; -} - -svg, -:host([src]) img { - display: inline; - object-fit: cover; -} - -:host([hidden]) { - display: none; -} diff --git a/elements/pf-avatar/BaseAvatar.ts b/elements/pf-avatar/BaseAvatar.ts deleted file mode 100644 index 970f46a43d..0000000000 --- a/elements/pf-avatar/BaseAvatar.ts +++ /dev/null @@ -1,54 +0,0 @@ -import { LitElement, html } from 'lit'; -import { property } from 'lit/decorators/property.js'; - -import style from './BaseAvatar.css'; - -export class AvatarLoadEvent extends Event { - constructor(public originalEvent: Event) { - super('load', { bubbles: true, composed: true }); - } -} - -/** - * Avatar is an element for displaying a user's avatar image. - * - * - * @summary For displaying a user's avatar image - */ - -export class BaseAvatar 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 or not the Avatar image is dark */ - @property({ type: Boolean, reflect: true }) dark = false; - - render() { - return this.src != null ? html` - ${this.alt - ` : this.dark ? html` - - - - - ` : html` - - - - - - `; - } -} diff --git a/elements/pf-avatar/pf-avatar.css b/elements/pf-avatar/pf-avatar.css index 319668ddfc..6a72785021 100644 --- 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 index 06c4c8bf25..5f5d855ec8 100644 --- 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` + ${this.alt ?? ''} + ` : this.dark ? html` + + + + + ` : html` + + + + + + `; + } + + #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 index 160b67b0e6..4eb8ff598d 100644 --- 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('', function() { it('imperatively instantiates', function() {