feat: Implementation of the Avatar component Style API

pages/avatar/custom-style.page.tsx

@@ -0,0 +1,132 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import SpaceBetween from "@cloudscape-design/components/space-between";
+
+import { Avatar } from "../../lib/components";
+import { customIconSvg } from "./permutations.page";
+import smiley from "./smiley.png";
+
+export default function CustomStyles() {
+  return (
+    <>
+      <h1>Custom Avatars</h1>
+
+      <SpaceBetween direction="horizontal" size="m">
+        <Avatar
+          color="default"
+          initials="AB"
+          ariaLabel="AB"
+          width={200}
+          style={{
+            root: {
+              background: "#000",
+              borderColor: "magenta",
+              borderRadius: "16px",
+              borderWidth: "8px",
+              boxShadow: "0px 0px 10px blue",
+              color: "#f7f6ff",
+              focusRing: {
+                borderColor: "green",
+                borderRadius: "16px",
+                borderWidth: "4px",
+              },
+            },
+          }}
+        />
+
+        <Avatar
+          color="default"
+          ariaLabel="AB"
+          width={80}
+          iconSvg={customIconSvg}
+          style={{
+            root: {
+              background: "#000",
+              borderColor: "magenta",
+              borderRadius: "8px",
+              borderWidth: "3px",
+              boxShadow: "0px 0px 10px blue",
+              color: "#f7f6ff",
+              focusRing: {
+                borderColor: "green",
+                borderRadius: "8px",
+                borderWidth: "4px",
+              },
+            },
+          }}
+        />
+
+        <Avatar
+          color="default"
+          ariaLabel="AB"
+          width={140}
+          imgUrl={smiley}
+          style={{
+            root: {
+              background: "#000",
+              borderColor: "green",
+              borderRadius: "50%",
+              borderWidth: "4px",
+              boxShadow: "0px 0px 10px blue",
+              color: "#f7f6ff",
+              focusRing: {
+                borderColor: "green",
+                borderWidth: "4px",
+              },
+            },
+          }}
+        />
+
+        <Avatar
+          color="default"
+          ariaLabel="AB"
+          width={80}
+          imgUrl={smiley}
+          style={{
+            root: {
+              borderColor: "green",
+              borderRadius: "30px",
+              borderWidth: "2px",
+              focusRing: {
+                borderColor: "green",
+                borderRadius: "30px",
+                borderWidth: "4px",
+              },
+            },
+          }}
+        />
+
+        <Avatar
+          color="gen-ai"
+          iconName="gen-ai"
+          ariaLabel="AB"
+          width={80}
+          style={{
+            root: {
+              borderRadius: "0px",
+              focusRing: {
+                borderRadius: "0px",
+              },
+            },
+          }}
+        />
+
+        <Avatar
+          loading={true}
+          iconName="gen-ai"
+          ariaLabel="AB"
+          width={60}
+          style={{
+            root: {
+              background: "blue",
+              borderRadius: "14px",
+              focusRing: {
+                borderRadius: "14px",
+              },
+            },
+          }}
+        />
+      </SpaceBetween>
+    </>
+  );
+}

pages/avatar/permutations.page.tsx

@@ -8,7 +8,7 @@ import { TestBed } from "../app/test-bed";
 import { ScreenshotArea } from "../screenshot-area";
 import smiley from "./smiley.png";
 
-const customIconSvg = (
+export const customIconSvg = (
   <svg
     className="w-6 h-6 text-gray-800 dark:text-white"
     aria-hidden="true"

scripts/environment.js

@@ -14,6 +14,7 @@ const values = {
   PACKAGE_SOURCE: "chat-components",
   PACKAGE_VERSION: packageVersion,
   THEME: "open-source-visual-refresh",
+  SYSTEM: "core",
   ALWAYS_VISUAL_REFRESH: true,
 };
 writeFile(`${basePath}.json`, JSON.stringify(values, null, 2));

scripts/utils/custom-css-properties-list.js

@@ -3,5 +3,11 @@
 /*
  * This file is only needed to generate the proper js and scss files in custom-css-properties script
  */
-const customCssPropertiesList = ["avatarSize"];
+const customCssPropertiesList = [
+  "avatarSize",
+  "avatarRootBorderWidth",
+  "avatarFocusRingBorderColor",
+  "avatarFocusRingBorderRadius",
+  "avatarFocusRingBorderWidth",
+];
 export default customCssPropertiesList;

src/__tests__/__snapshots__/documenter.test.ts.snap

@@ -77,6 +77,98 @@ Use it to define initials that uniquely identify the avatar's owner.",
       "optional": true,
       "type": "boolean",
     },
+    {
+      "description": "Specifies an object of selectors and properties that are used to apply custom styles.
+
+- \`root.background\` (string) - (Optional) Background of the avatar.
+- \`root.borderColor\` (string) - (Optional) Border color of the avatar.
+- \`root.borderRadius\` (string) - (Optional) Border radius of the avatar.
+- \`root.borderWidth\` (string) - (Optional) Border width of the avatar.
+- \`root.boxShadow\` (string) - (Optional) Box shadow of the avatar.
+- \`root.color\` (string) - (Optional) Text color of the avatar.
+- \`root.focusRing.borderColor\` (string) - (Optional) Focus ring border color.
+- \`root.focusRing.borderRadius\` (string) - (Optional) Focus ring border radius.
+- \`root.focusRing.borderWidth\` (string) - (Optional) Focus ring border width.",
+      "inlineType": {
+        "name": "AvatarProps.Style",
+        "properties": [
+          {
+            "inlineType": {
+              "name": "object",
+              "properties": [
+                {
+                  "name": "background",
+                  "optional": true,
+                  "type": "string",
+                },
+                {
+                  "name": "borderColor",
+                  "optional": true,
+                  "type": "string",
+                },
+                {
+                  "name": "borderRadius",
+                  "optional": true,
+                  "type": "string",
+                },
+                {
+                  "name": "borderWidth",
+                  "optional": true,
+                  "type": "string",
+                },
+                {
+                  "name": "boxShadow",
+                  "optional": true,
+                  "type": "string",
+                },
+                {
+                  "name": "color",
+                  "optional": true,
+                  "type": "string",
+                },
+                {
+                  "inlineType": {
+                    "name": "object",
+                    "properties": [
+                      {
+                        "name": "borderColor",
+                        "optional": true,
+                        "type": "string",
+                      },
+                      {
+                        "name": "borderRadius",
+                        "optional": true,
+                        "type": "string",
+                      },
+                      {
+                        "name": "borderWidth",
+                        "optional": true,
+                        "type": "string",
+                      },
+                    ],
+                    "type": "object",
+                  },
+                  "name": "focusRing",
+                  "optional": true,
+                  "type": "{ borderColor?: string | undefined; borderRadius?: string | undefined; borderWidth?: string | undefined; }",
+                },
+              ],
+              "type": "object",
+            },
+            "name": "root",
+            "optional": true,
+            "type": "{ background?: string | undefined; borderColor?: string | undefined; borderRadius?: string | undefined; borderWidth?: string | undefined; boxShadow?: string | undefined; color?: string | undefined; focusRing?: { ...; } | undefined; }",
+          },
+        ],
+        "type": "object",
+      },
+      "name": "style",
+      "optional": true,
+      "systemTags": [
+        "core",
+      ],
+      "type": "AvatarProps.Style",
+    },
     {
       "description": "The text content shown in the avatar's tooltip.
 

src/avatar/__tests__/avatar.test.tsx

@@ -123,4 +123,38 @@ describe("Avatar", () => {
     const wrapper = renderAvatar({ ariaLabel, initials: "JD", tooltipText: "Jane Doe" });
     expect(wrapper.getElement()).toHaveAttribute("aria-label", ariaLabel);
   });
+
+  test("style api", () => {
+    const ariaLabel = "User avatar JD Jane Doe";
+    const wrapper = renderAvatar({
+      ariaLabel,
+      initials: "JD",
+      tooltipText: "Jane Doe",
+      style: {
+        root: {
+          background: "#000",
+          borderColor: "magenta",
+          borderRadius: "16px",
+          borderWidth: "8px",
+          boxShadow: "0px 0px 10px blue",
+          color: "#fff",
+        },
+      },
+    });
+
+    expect(getComputedStyle(wrapper.getElement()).getPropertyValue("background")).toBe("rgb(0, 0, 0)");
+    expect(getComputedStyle(wrapper.getElement()).getPropertyValue("border-radius")).toBe("16px");
+    expect(getComputedStyle(wrapper.getElement()).getPropertyValue("box-shadow")).toBe("0px 0px 10px blue");
+    expect(getComputedStyle(wrapper.getElement()).getPropertyValue("color")).toBe("rgb(255, 255, 255)");
+
+    expect(
+      getComputedStyle(wrapper.findByClassName(avatarStyles.content)!.getElement()).getPropertyValue("border-color"),
+    ).toBe("magenta");
+    expect(
+      getComputedStyle(wrapper.findByClassName(avatarStyles.content)!.getElement()).getPropertyValue("border-radius"),
+    ).toBe("16px");
+    expect(
+      getComputedStyle(wrapper.findByClassName(avatarStyles.content)!.getElement()).getPropertyValue("border-width"),
+    ).toBe("8px");
+  });
 });

src/avatar/interfaces.ts

@@ -62,6 +62,22 @@ export interface AvatarProps {
    */
   imgUrl?: string;
 
+  /**
+   * Specifies an object of selectors and properties that are used to apply custom styles.
+   *
+   * - `root.background` (string) - (Optional) Background of the avatar.
+   * - `root.borderColor` (string) - (Optional) Border color of the avatar.
+   * - `root.borderRadius` (string) - (Optional) Border radius of the avatar.
+   * - `root.borderWidth` (string) - (Optional) Border width of the avatar.
+   * - `root.boxShadow` (string) - (Optional) Box shadow of the avatar.
+   * - `root.color` (string) - (Optional) Text color of the avatar.
+   * - `root.focusRing.borderColor` (string) - (Optional) Focus ring border color.
+   * - `root.focusRing.borderRadius` (string) - (Optional) Focus ring border radius.
+   * - `root.focusRing.borderWidth` (string) - (Optional) Focus ring border width.
+   * @awsuiSystem core
+   */
+  style?: AvatarProps.Style;
+
   /**
    * Defines the width and height of the avatar.
    * This value corresponds to the `width` CSS-property and will center and crop images using `object-fit: cover`.
@@ -72,4 +88,20 @@ export interface AvatarProps {
 
 export namespace AvatarProps {
   export type Color = "default" | "gen-ai";
+
+  export interface Style {
+    root?: {
+      background?: string;
+      borderColor?: string;
+      borderRadius?: string;
+      borderWidth?: string;
+      boxShadow?: string;
+      color?: string;
+      focusRing?: {
+        borderColor?: string;
+        borderRadius?: string;
+        borderWidth?: string;
+      };
+    };
+  }
 }