Skip to content

Commit

Permalink
style(avatar): update presence size and fix layout issue (#1817)
Browse files Browse the repository at this point in the history 
* style(avatar): update presence size and fix layout issue

* style(avatar): fix test error

---------

Co-authored-by: Jason Chai Jing <[email protected]>
  • Loading branch information
@Jason20020
Jason20020 and Jason Chai Jing authored Nov 7, 2024
1 parent 82a4cf2 commit a1bd5ce
Show file tree
Hide file tree
Showing 10 changed files with 187 additions and 474 deletions.
26 changes: 21 additions & 5 deletions web-components/src/components/avatar/Avatar.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,11 @@ describe("Avatar", () => {
});

test("should set size property", async () => {
const element = await fixture<Avatar.ELEMENT>(html` <md-avatar alt="avatar" size="44"></md-avatar> `);
const element = await fixture<Avatar.ELEMENT>(
html`
<md-avatar alt="avatar" size="44"></md-avatar>
`
);
expect(element.size).toEqual(44);
});

Expand All @@ -34,7 +38,11 @@ describe("Avatar", () => {

expect(letter!.textContent!.trim()).toEqual("AH");

const element2 = await fixture<Avatar.ELEMENT>(html` <md-avatar alt="avatar" title="Chandler"></md-avatar> `);
const element2 = await fixture<Avatar.ELEMENT>(
html`
<md-avatar alt="avatar" title="Chandler"></md-avatar>
`
);
const letter2 = element2.shadowRoot!.querySelector(".md-avatar__letter");

expect(letter2!.textContent!.trim()).toEqual("C");
Expand Down Expand Up @@ -89,13 +97,21 @@ describe("Avatar", () => {
});

test("should provide loading status if type is typing", async () => {
const element = await fixture<Avatar.ELEMENT>(html` <md-avatar type="typing" title="Tom Smith"></md-avatar> `);
const element = await fixture<Avatar.ELEMENT>(
html`
<md-avatar type="typing" title="Tom Smith"></md-avatar>
`
);

expect(element.shadowRoot!.querySelector("md-loading")).not.toBeNull();
});

test("should provide loading status if boolean typing is true", async () => {
const element = await fixture<Avatar.ELEMENT>(html` <md-avatar typing="true" title="Tom Smith"></md-avatar> `);
const element = await fixture<Avatar.ELEMENT>(
html`
<md-avatar typing="true" title="Tom Smith"></md-avatar>
`
);

expect(element.shadowRoot!.querySelector("md-loading")).not.toBeNull();
});
Expand Down Expand Up @@ -123,7 +139,7 @@ describe("Avatar", () => {
expect(computedStyle.color).toBe(
getComputedStyle(document.documentElement).getPropertyValue("--avatar-presence-active")
);
expect(presenceIndicator.getAttribute("name")).toBe("unread-filled");
expect(presenceIndicator.getAttribute("name")).toBe("active-presence-small-filled");
expect(presenceIndicator.hasAttribute("isCircularWrapper"));
}
});
Expand Down
17 changes: 3 additions & 14 deletions web-components/src/components/avatar/Avatar.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ export namespace Avatar {
@property({ type: Boolean }) decrypting = false;
@property({ type: String }) role: Avatar.Role = "img";
@property({ type: String, attribute: "icon-name" }) iconName = "";
@property({ type: Boolean }) failurePresence = false;
@property({ type: String }) type: Type = "";
@property({ type: Boolean }) newMomentum = false;
@property({ type: Boolean }) typing = false;
Expand All @@ -60,34 +61,23 @@ export namespace Avatar {
@internalProperty() private imageErrored = false;
@internalProperty() private presenceColor = "";
@internalProperty() private presenceIcon = "";
@internalProperty() private isCircularWrapper = false;

static get styles() {
return [reset, styles];
}

firstUpdated() {
const { presenceColor, presenceIcon, isCircularWrapper } = getPresenceIconColor(
this.type,
false,
this.newMomentum
);
const { presenceColor, presenceIcon } = getPresenceIconColor(this.type, this.failurePresence, this.newMomentum);
this.presenceColor = presenceColor!;
this.presenceIcon = presenceIcon!;
this.isCircularWrapper = isCircularWrapper!;
}

updated(changedProperties: PropertyValues) {
super.updated(changedProperties);
if (changedProperties.has("type")) {
const { presenceColor, presenceIcon, isCircularWrapper } = getPresenceIconColor(
this.type,
false,
this.newMomentum
);
const { presenceColor, presenceIcon } = getPresenceIconColor(this.type, this.failurePresence, this.newMomentum);
this.presenceColor = presenceColor!;
this.presenceIcon = presenceIcon!;
this.isCircularWrapper = isCircularWrapper!;
}
if (changedProperties.has("role")) {
this.style.setProperty("--avatar-cursor", this.role === "button" ? "pointer" : "default");
Expand Down Expand Up @@ -252,7 +242,6 @@ export namespace Avatar {
class="avatar-presence"
name="${this.presenceIcon}"
color="${this.presenceColor}"
.isCircularWrapper=${this.isCircularWrapper}
size="${this.size}"
>
</md-presence>
Expand Down
88 changes: 37 additions & 51 deletions web-components/src/components/avatar/Presence.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,11 @@ describe("Presence", () => {
afterEach(fixtureCleanup);

test("should set size property", async () => {
const element = await fixture<Presence.ELEMENT>(html` <md-presence size="36" title="active"></md-presence> `);
const element = await fixture<Presence.ELEMENT>(
html`
<md-presence size="36" title="active"></md-presence>
`
);
expect(element.size).toEqual(36);
expect(element.title).toEqual("active");
});
Expand All @@ -25,162 +29,144 @@ describe("Presence", () => {
test("returns correct values for active presenceType", () => {
const result = getPresenceIconColor("active", false);
expect(result).toEqual({
presenceIcon: "unread-filled",
presenceColor: "var(--avatar-presence-active)",
isCircularWrapper: true
presenceIcon: "active-presence-small-filled",
presenceColor: "var(--avatar-presence-active)"
});
});

test("returns correct values for meeting presenceType", () => {
const result = getPresenceIconColor("meeting", false);
expect(result).toEqual({
presenceIcon: "camera-presence_14",
presenceColor: "var(--avatar-presence-unstable)",
isCircularWrapper: false
presenceColor: "var(--avatar-presence-unstable)"
});
});

test("returns correct values for schedule presenceType", () => {
const result = getPresenceIconColor("schedule", false);
expect(result).toEqual({
presenceIcon: "meetings-presence_14",
presenceColor: "var(--avatar-presence-unstable)",
isCircularWrapper: false
presenceColor: "var(--avatar-presence-unstable)"
});
});

test("returns correct values for call presenceType", () => {
const result = getPresenceIconColor("call", false);
expect(result).toEqual({
presenceIcon: "handset-active_16",
presenceColor: "var(--avatar-presence-unstable)",
isCircularWrapper: false
presenceColor: "var(--avatar-presence-unstable)"
});
});

test("returns correct values for dnd presenceType", () => {
const result = getPresenceIconColor("dnd", false);
expect(result).toEqual({
presenceIcon: "dnd-presence_14",
presenceColor: "var(--avatar-presence-dnd)",
isCircularWrapper: true
presenceColor: "var(--avatar-presence-dnd)"
});
});

test("returns correct values for presenting presenceType", () => {
const result = getPresenceIconColor("presenting", false);
expect(result).toEqual({
presenceIcon: "content-share_14",
presenceColor: "var(--avatar-presence-dnd)",
isCircularWrapper: false
presenceColor: "var(--avatar-presence-dnd)"
});
});

test("returns correct values for quiet hours presenceType", () => {
const result = getPresenceIconColor("quiet-hours", false);
expect(result).toEqual({
presenceIcon: "quiet-hours-presence-filled",
presenceColor: "var(--avatar-presence-inactive)",
isCircularWrapper: true
presenceColor: "var(--avatar-presence-inactive)"
});
});

test("returns correct values for away presenceType", () => {
const result = getPresenceIconColor("away", false);
expect(result).toEqual({
presenceIcon: "recents-presence_14",
presenceColor: "var(--avatar-presence-inactive)",
isCircularWrapper: true
presenceColor: "var(--avatar-presence-inactive)"
});
});

test("returns correct values for idle presenceType", () => {
const result = getPresenceIconColor("idle", false);
expect(result).toEqual({
presenceIcon: "recents-presence_14",
presenceColor: "var(--avatar-presence-inactive)",
isCircularWrapper: true
presenceColor: "var(--avatar-presence-inactive)"
});
});

test("returns correct values for away calling presenceType", () => {
const result = getPresenceIconColor("away-calling", false);
expect(result).toEqual({
presenceIcon: "away-calling-presence-filled",
presenceColor: "var(--avatar-presence-inactive)",
isCircularWrapper: false
presenceColor: "var(--avatar-presence-inactive)"
});
});

test("returns correct values for pto presenceType", () => {
const result = getPresenceIconColor("ooo", false);
expect(result).toEqual({
presenceIcon: "pto-presence-filled",
presenceColor: "var(--avatar-presence-inactive)",
isCircularWrapper: true
presenceColor: "var(--avatar-presence-inactive)"
});
});

test("returns correct values for busy presenceType", () => {
const result = getPresenceIconColor("busy", false);
expect(result).toEqual({
presenceIcon: "busy-presence-bold",
presenceColor: "var(--avatar-presence-unstable)",
isCircularWrapper: true
presenceColor: "var(--avatar-presence-unstable)"
});
});

test("returns correct values for on mobile presenceType", () => {
const result = getPresenceIconColor("on-mobile", false);
expect(result).toEqual({
presenceIcon: "phone-filled",
presenceColor: "var(--avatar-presence-inactive)",
isCircularWrapper: false
presenceColor: "var(--avatar-presence-inactive)"
});
});

test("returns correct values for on device presenceType", () => {
const result = getPresenceIconColor("on-device", false);
expect(result).toEqual({
presenceIcon: "generic-device-video_16",
presenceColor: "var(--avatar-presence-inactive)",
isCircularWrapper: false
presenceColor: "var(--avatar-presence-inactive)"
});
});

test("returns correct values for meeting presenceType", () => {
const result = getPresenceIconColor("on-hold", false);
expect(result).toEqual({
presenceIcon: "pause-badge-filled",
presenceColor: "var(--avatar-presence-inactive)",
isCircularWrapper: false
presenceColor: "var(--avatar-presence-inactive)"
});
});

test("returns correct values for engaged presenceType", () => {
const result = getPresenceIconColor("engaged", false);
expect(result).toEqual({
presenceIcon: "busy-presence-bold",
presenceColor: "var(--avatar-presence-engaged)",
isCircularWrapper: true
presenceColor: "var(--avatar-presence-engaged)"
});
});

test("returns correct values for rona presenceType", () => {
const result = getPresenceIconColor("rona", false);
expect(result).toEqual({
presenceIcon: "dnd-presence-badge-filled",
presenceColor: "var(--avatar-presence-rona)",
isCircularWrapper: true
presenceColor: "var(--avatar-presence-rona)"
});
});

test("returns correct values when failureBadge is true", () => {
const result = getPresenceIconColor("", true);
expect(result).toEqual({
presenceIcon: "warning",
presenceColor: "var(--mds-color-theme-indicator-attention)",
isCircularWrapper: true
presenceIcon: "warning-badge-filled",
presenceColor: "var(--mds-color-theme-indicator-attention)"
});
});

Expand All @@ -203,33 +189,33 @@ describe("getPresenceSize", () => {
});

it("should return 16 for sizes <= 36", () => {
expect(getPresenceSize(36)).toBe(16);
expect(getPresenceSize(33)).toBe(16);
expect(getPresenceSize(36)).toBe(13.94);
expect(getPresenceSize(33)).toBe(13.94);
});

it("should return 16 for sizes <= 40", () => {
expect(getPresenceSize(40)).toBe(16);
expect(getPresenceSize(37)).toBe(16);
expect(getPresenceSize(40)).toBe(13.94);
expect(getPresenceSize(37)).toBe(13.94);
});

it("should return 16 for sizes <= 48", () => {
expect(getPresenceSize(48)).toBe(16);
expect(getPresenceSize(41)).toBe(16);
expect(getPresenceSize(48)).toBe(13.94);
expect(getPresenceSize(41)).toBe(13.94);
});

it("should return 18 for sizes <= 64", () => {
expect(getPresenceSize(64)).toBe(18);
expect(getPresenceSize(49)).toBe(18);
expect(getPresenceSize(64)).toBe(18.58);
expect(getPresenceSize(49)).toBe(18.58);
});

it("should return 20 for sizes <= 72", () => {
expect(getPresenceSize(72)).toBe(20);
expect(getPresenceSize(65)).toBe(20);
expect(getPresenceSize(72)).toBe(20.9);
expect(getPresenceSize(65)).toBe(20.9);
});

it("should return 28 for sizes <= 88", () => {
expect(getPresenceSize(88)).toBe(28);
expect(getPresenceSize(73)).toBe(28);
expect(getPresenceSize(88)).toBe(25.55);
expect(getPresenceSize(73)).toBe(25.55);
});

it("should return 36 for sizes > 88", () => {
Expand Down
10 changes: 2 additions & 8 deletions web-components/src/components/avatar/Presence.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,14 @@ import { getPresenceSize } from "./Presence.utils";
import styles from "./scss/module.scss";

export namespace Presence {
export type Size = (typeof AvatarSize)[number];
export type Size = typeof AvatarSize[number];

@customElementWithCheck("md-presence")
export class ELEMENT extends LitElement {
@property({ type: String }) name = "";
@property({ type: Number }) size: Size = 48;
@property({ type: String }) title = "";
@property({ type: String }) color = "";
@property({ type: Boolean }) isCircularWrapper = true;

static get styles() {
return [reset, styles];
Expand All @@ -25,12 +24,7 @@ export namespace Presence {
const iconSize = getPresenceSize(this.size);

return html`
<div
class="avatar-presence-wrapper"
data-shape=${this.isCircularWrapper}
data-size=${this.size}
data-icon-size=${iconSize}
>
<div class="avatar-presence-wrapper" data-size=${this.size} data-icon-size=${iconSize}>
<md-icon
name="${this.name}"
color="${this.color}"
Expand Down
Loading

0 comments on commit a1bd5ce

Please sign in to comment.