feat(avatar): add component tokens (#10280)

**Related Issue:** #7180 #7651 #4900 ## Summary ### Tokens --calcite-avatar-corner-radius: defines the corner radius of the component. --calcite-avatar-color: defines the icon or initial color in the component. --calcite-avatar-background-color: defines the background color of the component.
Esri · Sep 20, 2024 · f8f881b · f8f881b
1 parent 725254a
commit f8f881b
Show file tree

Hide file tree

Showing 5 changed files with 105 additions and 12 deletions.
diff --git a/packages/calcite-components/src/components/avatar/avatar.e2e.ts b/packages/calcite-components/src/components/avatar/avatar.e2e.ts
@@ -1,5 +1,5 @@
 import { newE2EPage } from "@stencil/core/testing";
-import { accessible, defaults, hidden, renders } from "../../tests/commonTests";
+import { accessible, defaults, hidden, renders, themed } from "../../tests/commonTests";
 import { placeholderImage } from "../../../.storybook/placeholder-image";
 import { html } from "../../../support/formatting";
 import { CSS } from "./resources";
@@ -53,7 +53,7 @@ describe("calcite-avatar", () => {
       const background = document.querySelector("calcite-avatar").shadowRoot.querySelector(".background");
       return background.getAttribute("style");
     });
-    expect(style).toEqual("background-color: rgb(214, 232, 245);");
+    expect(style).toEqual("background-color: var(--calcite-avatar-background-color, hsl(206, 60%, 90%));");
   });
 
   it("computes a background fill if id is not a valid hex", async () => {
@@ -65,7 +65,7 @@ describe("calcite-avatar", () => {
       const background = document.querySelector("calcite-avatar").shadowRoot.querySelector(".background");
       return background.getAttribute("style");
     });
-    expect(style).toEqual("background-color: rgb(245, 214, 236);");
+    expect(style).toEqual("background-color: var(--calcite-avatar-background-color, hsl(317, 60%, 90%));");
   });
 
   it("renders default icon when no information is passed", async () => {
@@ -98,4 +98,64 @@ describe("calcite-avatar", () => {
     expect(secondBgColor).not.toEqual(thirdBgColor);
     expect(firstBgColor).not.toEqual(thirdBgColor);
   });
+
+  describe("theme", () => {
+    describe("thumbnail", () => {
+      themed(
+        html`<calcite-avatar
+          thumbnail="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAIAQMAAAD+wSzIAAAABlBMVEX///+/v7+jQ3Y5AAAADklEQVQI12P4AIX8EAgALgAD/aNpbtEAAAAASUVORK5CYII"
+        ></calcite-avatar>`,
+        {
+          "--calcite-avatar-corner-radius": [
+            {
+              targetProp: "borderRadius",
+            },
+            {
+              shadowSelector: `.${CSS.thumbnail}`,
+              targetProp: "borderRadius",
+            },
+          ],
+        },
+      );
+    });
+
+    describe("icon", () => {
+      themed(html`<calcite-avatar user-id="umonti"></calcite-avatar>`, {
+        "--calcite-avatar-background-color": {
+          shadowSelector: `.${CSS.background}`,
+          targetProp: "backgroundColor",
+        },
+        "--calcite-avatar-color": {
+          shadowSelector: `.${CSS.icon}`,
+          targetProp: "color",
+        },
+        "--calcite-avatar-corner-radius": [
+          {
+            targetProp: "borderRadius",
+          },
+          {
+            shadowSelector: `.${CSS.background}`,
+            targetProp: "borderRadius",
+          },
+        ],
+      });
+    });
+
+    describe("initials", () => {
+      themed(html`<calcite-avatar full-name="Urbano Monti"></calcite-avatar>`, {
+        "--calcite-avatar-background-color": {
+          shadowSelector: `.${CSS.background}`,
+          targetProp: "backgroundColor",
+        },
+        "--calcite-avatar-color": {
+          shadowSelector: `.${CSS.initials}`,
+          targetProp: "color",
+        },
+        "--calcite-avatar-corner-radius": {
+          shadowSelector: `.${CSS.background}`,
+          targetProp: "borderRadius",
+        },
+      });
+    });
+  });
 });
diff --git a/packages/calcite-components/src/components/avatar/avatar.scss b/packages/calcite-components/src/components/avatar/avatar.scss
@@ -1,5 +1,18 @@
+/**
+ * CSS Custom Properties
+ *
+ * These properties can be overridden using the component's tag as selector.
+ *
+ * @prop --calcite-avatar-corner-radius: defines the corner radius of the component.
+ * @prop --calcite-avatar-color: defines the icon or initial color in the component.
+ * @prop --calcite-avatar-background-color: defines the background color of the component.
+ *
+ */
+
 :host {
-  @apply rounded-half inline-block overflow-hidden;
+  @apply inline-block overflow-hidden;
+  border-radius: var(--calcite-avatar-corner-radius, 50%);
+  color: var(--calcite-avatar-color, var(--calcite-color-text-2));
 }
 
 :host([scale="s"]) {
@@ -19,15 +32,17 @@
 }
 
 .background {
-  @apply rounded-half flex h-full w-full items-center justify-center;
+  @apply flex h-full w-full items-center justify-center;
+  border-radius: var(--calcite-avatar-corner-radius, 50%);
 }
 
 .initials {
-  @apply text-color-2 font-bold uppercase;
+  @apply font-bold uppercase;
 }
 
 .thumbnail {
-  @apply rounded-half h-full w-full;
+  @apply h-full w-full;
+  border-radius: var(--calcite-avatar-corner-radius, 50%);
 }
 
 @include base-component();
diff --git a/packages/calcite-components/src/components/avatar/avatar.tsx b/packages/calcite-components/src/components/avatar/avatar.tsx
@@ -103,11 +103,11 @@ export class Avatar {
     const hex = id && isValidHex(id) ? id : stringToHex(name);
     // if there is not unique information, or an invalid hex is produced, return a default
     if ((!userId && !name) || !isValidHex(hex)) {
-      return `var(--calcite-color-foreground-2)`;
+      return `var(--calcite-avatar-background-color, var(--calcite-color-foreground-2))`;
     }
     const hue = hexToHue(hex);
     const l = theme === "dark" ? 20 : 90;
-    return `hsl(${hue}, 60%, ${l}%)`;
+    return `var(--calcite-avatar-background-color, hsl(${hue}, 60%, ${l}%))`;
   }
 
   /**

diff --git a/packages/calcite-components/src/custom-theme.stories.ts b/packages/calcite-components/src/custom-theme.stories.ts
@@ -31,6 +31,7 @@ import { segmentedControl } from "./custom-theme/segmented-control";
 import { slider } from "./custom-theme/slider";
 import { calciteSwitch } from "./custom-theme/switch";
 import { tabs } from "./custom-theme/tabs";
+import { avatarIcon, avatarInitials, avatarThumbnail, avatarTokens } from "./custom-theme/avatar";
 
 const globalTokens = {
   calciteColorBrand: "#007ac2",
@@ -111,7 +112,9 @@ const kitchenSink = (args: Record<string, string>, useTestValues = false) =>
           <div>${checkbox}</div>
           ${chips} ${pagination} ${slider}
         </div>
-        <div class="demo-column">${datePicker} ${tabs} ${loader} ${calciteSwitch} ${progress} ${handle}</div>
+
+        <div class="demo-column">${datePicker} ${tabs} ${loader} ${calciteSwitch}  ${avatarIcon} ${avatarInitials} ${avatarThumbnail} ${progress} ${handle}</div>
+
       </div>
     </div>
   </div>`;
@@ -124,9 +127,10 @@ export default {
     ...accordionItemTokens,
     ...actionTokens,
     ...actionBarTokens,
+    ...actionGroupTokens,
     ...actionMenuTokens,
     ...actionPadTokens,
-    ...actionGroupTokens,
+    ...avatarTokens,
     ...cardTokens,
     ...checkboxTokens,
     ...handleTokens,
@@ -146,9 +150,10 @@ export const theming_TestOnly = (): string => {
       ...accordionItemTokens,
       ...actionTokens,
       ...actionBarTokens,
+      ...actionGroupTokens,
       ...actionMenuTokens,
       ...actionPadTokens,
-      ...actionGroupTokens,
+      ...avatarTokens,
       ...cardTokens,
       ...checkboxTokens,
       ...handleTokens,

diff --git a/packages/calcite-components/src/custom-theme/avatar.ts b/packages/calcite-components/src/custom-theme/avatar.ts
@@ -0,0 +1,13 @@
+import { html } from "../../support/formatting";
+
+export const avatarTokens = {
+  calciteAvatarCornerRadius: "",
+  calciteAvatarColor: "",
+  calciteAvatarBackgroundColor: "",
+};
+
+export const avatarInitials = html`<calcite-avatar full-name="Urbano Monti"></calcite-avatar>`;
+export const avatarIcon = html`<calcite-avatar user-id="umonti"></calcite-avatar>`;
+export const avatarThumbnail = html`<calcite-avatar
+  thumbnail="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAIAQMAAAD+wSzIAAAABlBMVEX///+/v7+jQ3Y5AAAADklEQVQI12P4AIX8EAgALgAD/aNpbtEAAAAASUVORK5CYII"
+></calcite-avatar>`;