feat(avatar): add pf-v6-avatar element #3139
+401
−0
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| --- | ||
| name: Basic | ||
| description: A basic avatar displays a user image. | ||
| --- | ||
| <pf-v6-avatar alt="Avatar image" | ||
| src="./avatarImg.svg"></pf-v6-avatar> | ||
|
|
||
| <script type="module"> | ||
| import '@patternfly/elements/pf-v6-avatar/pf-v6-avatar.js'; | ||
| </script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| --- | ||
| name: Bordered | ||
| description: A bordered avatar has a thin border around the image. | ||
| --- | ||
| <section> | ||
| <pf-v6-avatar bordered | ||
| alt="Bordered avatar" | ||
| src="./avatarImg.svg"></pf-v6-avatar> | ||
| </section> | ||
|
|
||
| <script type="module"> | ||
| import '@patternfly/elements/pf-v6-avatar/pf-v6-avatar.js'; | ||
| </script> | ||
|
|
||
| <style> | ||
| section { | ||
| padding: 64px 48px; | ||
| } | ||
| </style> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| --- | ||
| name: Basic | ||
| description: A basic avatar displays a user image. | ||
| --- | ||
| <pf-v6-avatar></pf-v6-avatar> | ||
|
|
||
| <script type="module"> | ||
| import '@patternfly/elements/pf-v6-avatar/pf-v6-avatar.js'; | ||
| </script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,63 @@ | ||
| --- | ||
| name: Size variations | ||
| description: Avatars can be displayed in four sizes. | ||
| --- | ||
| <dl> | ||
| <div> | ||
| <dt>Small</dt> | ||
| <dd> | ||
| <pf-v6-avatar size="sm" | ||
| alt="Small avatar" | ||
| src="./avatarImg.svg"></pf-v6-avatar> | ||
| </dd> | ||
| </div> | ||
|
|
||
| <div> | ||
| <dt>Medium</dt> | ||
| <dd> | ||
| <pf-v6-avatar size="md" | ||
| alt="Medium avatar" | ||
| src="./avatarImg.svg"></pf-v6-avatar> | ||
| </dd> | ||
| </div> | ||
|
|
||
| <div> | ||
| <dt>Large</dt> | ||
| <dd> | ||
| <pf-v6-avatar size="lg" | ||
| alt="Large avatar" | ||
| src="./avatarImg.svg"></pf-v6-avatar> | ||
| </dd> | ||
| </div> | ||
|
|
||
| <div> | ||
| <dt>Extra Large</dt> | ||
| <dd> | ||
| <pf-v6-avatar size="xl" | ||
| alt="Extra large avatar" | ||
| src="./avatarImg.svg"></pf-v6-avatar> | ||
| </dd> | ||
| </div> | ||
| </dl> | ||
|
|
||
| <script type="module"> | ||
| import '@patternfly/elements/pf-v6-avatar/pf-v6-avatar.js'; | ||
| </script> | ||
|
|
||
| <style> | ||
| dl { | ||
| padding: 64px 48px; | ||
| display: flex; | ||
| gap: 1em; | ||
|
|
||
| & > div { | ||
| display: flex; | ||
| gap: 1em; | ||
| flex-flow: column; | ||
| } | ||
|
|
||
| & dd { | ||
| margin: 0; | ||
| } | ||
| } | ||
| </style> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,54 @@ | ||
| :host { | ||
| --_width: var(--pf-v6-c-avatar--Width, 2.25rem); | ||
| --_height: var(--pf-v6-c-avatar--Height, 2.25rem); | ||
| --_border-radius: var(--pf-v6-c-avatar--BorderRadius, var(--pf-t--global--border--radius--pill, 30em)); | ||
| --_border-color: var(--pf-v6-c-avatar--BorderColor, transparent); | ||
| --_border-width: var(--pf-v6-c-avatar--BorderWidth, 0); | ||
| --_placeholder-bg: var(--pf-t--global--background--color--200, light-dark(var(--pf-t--color--gray--10, #f2f2f2), var(--pf-t--color--gray--80, #292929))); | ||
| --_placeholder-fg: var(--pf-t--global--icon--color--subtle, light-dark(var(--pf-t--color--gray--50, #707070), var(--pf-t--color--gray--40, #a3a3a3))); | ||
|
|
||
| display: inline-block; | ||
| width: var(--_width); | ||
| height: var(--_height); | ||
| border-radius: var(--_border-radius); | ||
| } | ||
|
|
||
| :host([hidden]), | ||
| [hidden] { | ||
| display: none !important; | ||
| } | ||
|
|
||
| :host([bordered]) { | ||
| --_border-color: var(--pf-v6-c-avatar--m-bordered--BorderColor, var(--pf-t--global--border--color--default, #d2d2d2)); | ||
| --_border-width: var(--pf-v6-c-avatar--m-bordered--BorderWidth, var(--pf-t--global--border--width--box--default, 1px)); | ||
| } | ||
|
|
||
| :host([size="sm"]) { | ||
| --_width: var(--pf-v6-c-avatar--m-sm--Width, 1.5rem); | ||
| --_height: var(--pf-v6-c-avatar--m-sm--Height, 1.5rem); | ||
| } | ||
|
|
||
| :host([size="md"]) { | ||
| --_width: var(--pf-v6-c-avatar--m-md--Width, 2.25rem); | ||
| --_height: var(--pf-v6-c-avatar--m-md--Height, 2.25rem); | ||
| } | ||
|
|
||
| :host([size="lg"]) { | ||
| --_width: var(--pf-v6-c-avatar--m-lg--Width, 4.5rem); | ||
| --_height: var(--pf-v6-c-avatar--m-lg--Height, 4.5rem); | ||
| } | ||
|
|
||
| :host([size="xl"]) { | ||
| --_width: var(--pf-v6-c-avatar--m-xl--Width, 8rem); | ||
| --_height: var(--pf-v6-c-avatar--m-xl--Height, 8rem); | ||
| } | ||
|
|
||
| svg, | ||
| img { | ||
| display: block; | ||
| object-fit: cover; | ||
| width: var(--_width); | ||
| height: var(--_height); | ||
| border-radius: var(--_border-radius); | ||
| border: var(--_border-width) solid var(--_border-color); | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
| @@ -0,0 +1,80 @@ | ||||||
| import { LitElement, html, type TemplateResult } from 'lit'; | ||||||
| import { property } from 'lit/decorators/property.js'; | ||||||
| import { customElement } from 'lit/decorators/custom-element.js'; | ||||||
|
|
||||||
| import style from './pf-v6-avatar.css'; | ||||||
|
|
||||||
| /** Size variants for the avatar. */ | ||||||
| export type AvatarSize = 'sm' | 'md' | 'lg' | 'xl'; | ||||||
|
|
||||||
| export class PfV6AvatarLoadEvent 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 Displays a user's avatar image | ||||||
| * @fires {PfV6AvatarLoadEvent} load - when the avatar image loads | ||||||
| * @cssprop {<length>} --pf-v6-c-avatar--Width - Width of the avatar | ||||||
|
Collaborator
Author
There was a problem hiding this comment. We should adjust the |
||||||
| * @cssprop {<length>} --pf-v6-c-avatar--Height - Height of the avatar | ||||||
| * @cssprop {<length>} --pf-v6-c-avatar--BorderRadius - Border radius of the avatar | ||||||
| * @cssprop {<color>} --pf-v6-c-avatar--BorderColor - Border color of the avatar | ||||||
| * @cssprop {<length>} --pf-v6-c-avatar--BorderWidth - Border width of the avatar | ||||||
| * @cssprop {<length>} --pf-v6-c-avatar--m-sm--Width - Width when size is `sm` | ||||||
| * @cssprop {<length>} --pf-v6-c-avatar--m-sm--Height - Height when size is `sm` | ||||||
| * @cssprop {<length>} --pf-v6-c-avatar--m-md--Width - Width when size is `md` | ||||||
| * @cssprop {<length>} --pf-v6-c-avatar--m-md--Height - Height when size is `md` | ||||||
| * @cssprop {<length>} --pf-v6-c-avatar--m-lg--Width - Width when size is `lg` | ||||||
| * @cssprop {<length>} --pf-v6-c-avatar--m-lg--Height - Height when size is `lg` | ||||||
| * @cssprop {<length>} --pf-v6-c-avatar--m-xl--Width - Width when size is `xl` | ||||||
| * @cssprop {<length>} --pf-v6-c-avatar--m-xl--Height - Height when size is `xl` | ||||||
| * @cssprop {<color>} --pf-v6-c-avatar--m-bordered--BorderColor - Border color when bordered | ||||||
| * @cssprop {<length>} --pf-v6-c-avatar--m-bordered--BorderWidth - Border width when bordered | ||||||
| */ | ||||||
| @customElement('pf-v6-avatar') | ||||||
| export class PfV6Avatar extends LitElement { | ||||||
| static readonly styles: CSSStyleSheet[] = [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; | ||||||
|
|
||||||
| /** Size of the avatar */ | ||||||
| @property({ reflect: true }) size?: AvatarSize; | ||||||
|
|
||||||
| /** Whether to display a border around the avatar */ | ||||||
| @property({ type: Boolean, reflect: true }) bordered = false; | ||||||
|
|
||||||
| override render(): TemplateResult { | ||||||
| return this.src != null ? html` | ||||||
| <img id="img" | ||||||
| alt="${this.alt ?? ''}" | ||||||
| src=${this.src} | ||||||
|
Member
There was a problem hiding this comment.
Suggested change
Collaborator
Author
There was a problem hiding this comment. we should be able to improve the check for this in |
||||||
| @load="${this.#onLoad}"> | ||||||
| ` : html` | ||||||
| <svg id="placeholder" | ||||||
| aria-hidden="true" | ||||||
| xmlns="http://www.w3.org/2000/svg" | ||||||
| viewBox="0 0 36 36"> | ||||||
| <rect width="36" height="36" fill="var(--_placeholder-bg)"/> | ||||||
| <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" | ||||||
| fill="var(--_placeholder-fg)"/> | ||||||
| </svg> | ||||||
| `; | ||||||
| } | ||||||
|
|
||||||
| #onLoad(event: Event) { | ||||||
| this.dispatchEvent(new PfV6AvatarLoadEvent(event)); | ||||||
| } | ||||||
| } | ||||||
|
|
||||||
| declare global { | ||||||
| interface HTMLElementTagNameMap { | ||||||
| 'pf-v6-avatar': PfV6Avatar; | ||||||
| } | ||||||
| } | ||||||
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.