Skip to content

revert: feat: Implementation of the Avatar component Style API (#77) #79

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
johannes-weber merged 1 commit into from
Aug 5, 2025
Merged

revert: feat: Implementation of the Avatar component Style API (#77) #79

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
132 changes: 0 additions & 132 deletions pages/avatar/custom-style.page.tsx
View file
Open in desktop

This file was deleted.

2 changes: 1 addition & 1 deletion pages/avatar/permutations.page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import { TestBed } from "../app/test-bed";
import { ScreenshotArea } from "../screenshot-area";
import smiley from "./smiley.png";

export const customIconSvg = (
const customIconSvg = (
<svg
className="w-6 h-6 text-gray-800 dark:text-white"
aria-hidden="true"
Expand Down
1 change: 0 additions & 1 deletion scripts/environment.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ 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));
Expand Down
8 changes: 1 addition & 7 deletions scripts/utils/custom-css-properties-list.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,5 @@
/*
* This file is only needed to generate the proper js and scss files in custom-css-properties script
*/
const customCssPropertiesList = [
"avatarSize",
"avatarRootBorderWidth",
"avatarFocusRingBorderColor",
"avatarFocusRingBorderRadius",
"avatarFocusRingBorderWidth",
];
const customCssPropertiesList = ["avatarSize"];
export default customCssPropertiesList;
92 changes: 0 additions & 92 deletions src/__tests__/__snapshots__/documenter.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,98 +77,6 @@ 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.

Expand Down
34 changes: 0 additions & 34 deletions src/avatar/__tests__/avatar.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,38 +123,4 @@ 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");
});
});
32 changes: 0 additions & 32 deletions src/avatar/interfaces.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,22 +62,6 @@ 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`.
Expand All @@ -88,20 +72,4 @@ 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;
};
};
}
}
Loading
Loading