Skip to content

Commit ea1951d

Browse files
teodoranemesteodoranemes
authored
Reapply "feat: Implementation of the Avatar component Style API (#77)" (#79) (#80)
1 parent 288b8c9 commit ea1951d

File tree

13 files changed

+396
-11
lines changed

13 files changed

+396
-11
lines changed

‎pages/avatar/custom-style.page.tsx‎

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
2+
// SPDX-License-Identifier: Apache-2.0
3+
import SpaceBetween from "@cloudscape-design/components/space-between";
4+
5+
import { Avatar } from "../../lib/components";
6+
import { customIconSvg } from "./permutations.page";
7+
import smiley from "./smiley.png";
8+
9+
export default function CustomStyles() {
10+
return (
11+
<>
12+
<h1>Custom Avatars</h1>
13+
14+
<SpaceBetween direction="horizontal" size="m">
15+
<Avatar
16+
color="default"
17+
initials="AB"
18+
ariaLabel="AB"
19+
width={200}
20+
style={{
21+
root: {
22+
background: "#000",
23+
borderColor: "magenta",
24+
borderRadius: "16px",
25+
borderWidth: "8px",
26+
boxShadow: "0px 0px 10px blue",
27+
color: "#f7f6ff",
28+
focusRing: {
29+
borderColor: "green",
30+
borderRadius: "16px",
31+
borderWidth: "4px",
32+
},
33+
},
34+
}}
35+
/>
36+
37+
<Avatar
38+
color="default"
39+
ariaLabel="AB"
40+
width={80}
41+
iconSvg={customIconSvg}
42+
style={{
43+
root: {
44+
background: "#000",
45+
borderColor: "magenta",
46+
borderRadius: "8px",
47+
borderWidth: "3px",
48+
boxShadow: "0px 0px 10px blue",
49+
color: "#f7f6ff",
50+
focusRing: {
51+
borderColor: "green",
52+
borderRadius: "8px",
53+
borderWidth: "4px",
54+
},
55+
},
56+
}}
57+
/>
58+
59+
<Avatar
60+
color="default"
61+
ariaLabel="AB"
62+
width={140}
63+
imgUrl={smiley}
64+
style={{
65+
root: {
66+
background: "#000",
67+
borderColor: "green",
68+
borderRadius: "50%",
69+
borderWidth: "4px",
70+
boxShadow: "0px 0px 10px blue",
71+
color: "#f7f6ff",
72+
focusRing: {
73+
borderColor: "green",
74+
borderWidth: "4px",
75+
},
76+
},
77+
}}
78+
/>
79+
80+
<Avatar
81+
color="default"
82+
ariaLabel="AB"
83+
width={80}
84+
imgUrl={smiley}
85+
style={{
86+
root: {
87+
borderColor: "green",
88+
borderRadius: "30px",
89+
borderWidth: "2px",
90+
focusRing: {
91+
borderColor: "green",
92+
borderRadius: "30px",
93+
borderWidth: "4px",
94+
},
95+
},
96+
}}
97+
/>
98+
99+
<Avatar
100+
color="gen-ai"
101+
iconName="gen-ai"
102+
ariaLabel="AB"
103+
width={80}
104+
style={{
105+
root: {
106+
borderRadius: "0px",
107+
focusRing: {
108+
borderRadius: "0px",
109+
},
110+
},
111+
}}
112+
/>
113+
114+
<Avatar
115+
loading={true}
116+
iconName="gen-ai"
117+
ariaLabel="AB"
118+
width={60}
119+
style={{
120+
root: {
121+
background: "blue",
122+
borderRadius: "14px",
123+
focusRing: {
124+
borderRadius: "14px",
125+
},
126+
},
127+
}}
128+
/>
129+
</SpaceBetween>
130+
</>
131+
);
132+
}

‎pages/avatar/permutations.page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { TestBed } from "../app/test-bed";
88
import { ScreenshotArea } from "../screenshot-area";
99
import smiley from "./smiley.png";
1010

11-
const customIconSvg = (
11+
export const customIconSvg = (
1212
<svg
1313
className="w-6 h-6 text-gray-800 dark:text-white"
1414
aria-hidden="true"

‎scripts/environment.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ const values = {
1414
PACKAGE_SOURCE: "chat-components",
1515
PACKAGE_VERSION: packageVersion,
1616
THEME: "open-source-visual-refresh",
17+
SYSTEM: "core",
1718
ALWAYS_VISUAL_REFRESH: true,
1819
};
1920
writeFile(`${basePath}.json`, JSON.stringify(values, null, 2));

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

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,11 @@
33
/*
44
* This file is only needed to generate the proper js and scss files in custom-css-properties script
55
*/
6-
const customCssPropertiesList = ["avatarSize"];
6+
const customCssPropertiesList = [
7+
"avatarSize",
8+
"avatarRootBorderWidth",
9+
"avatarFocusRingBorderColor",
10+
"avatarFocusRingBorderRadius",
11+
"avatarFocusRingBorderWidth",
12+
];
713
export default customCssPropertiesList;

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

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,98 @@ Use it to define initials that uniquely identify the avatar's owner.",
7777
"optional": true,
7878
"type": "boolean",
7979
},
80+
{
81+
"description": "Specifies an object of selectors and properties that are used to apply custom styles.
82+
83+
- \`root.background\` (string) - (Optional) Background of the avatar.
84+
- \`root.borderColor\` (string) - (Optional) Border color of the avatar.
85+
- \`root.borderRadius\` (string) - (Optional) Border radius of the avatar.
86+
- \`root.borderWidth\` (string) - (Optional) Border width of the avatar.
87+
- \`root.boxShadow\` (string) - (Optional) Box shadow of the avatar.
88+
- \`root.color\` (string) - (Optional) Text color of the avatar.
89+
- \`root.focusRing.borderColor\` (string) - (Optional) Focus ring border color.
90+
- \`root.focusRing.borderRadius\` (string) - (Optional) Focus ring border radius.
91+
- \`root.focusRing.borderWidth\` (string) - (Optional) Focus ring border width.",
92+
"inlineType": {
93+
"name": "AvatarProps.Style",
94+
"properties": [
95+
{
96+
"inlineType": {
97+
"name": "object",
98+
"properties": [
99+
{
100+
"name": "background",
101+
"optional": true,
102+
"type": "string",
103+
},
104+
{
105+
"name": "borderColor",
106+
"optional": true,
107+
"type": "string",
108+
},
109+
{
110+
"name": "borderRadius",
111+
"optional": true,
112+
"type": "string",
113+
},
114+
{
115+
"name": "borderWidth",
116+
"optional": true,
117+
"type": "string",
118+
},
119+
{
120+
"name": "boxShadow",
121+
"optional": true,
122+
"type": "string",
123+
},
124+
{
125+
"name": "color",
126+
"optional": true,
127+
"type": "string",
128+
},
129+
{
130+
"inlineType": {
131+
"name": "object",
132+
"properties": [
133+
{
134+
"name": "borderColor",
135+
"optional": true,
136+
"type": "string",
137+
},
138+
{
139+
"name": "borderRadius",
140+
"optional": true,
141+
"type": "string",
142+
},
143+
{
144+
"name": "borderWidth",
145+
"optional": true,
146+
"type": "string",
147+
},
148+
],
149+
"type": "object",
150+
},
151+
"name": "focusRing",
152+
"optional": true,
153+
"type": "{ borderColor?: string | undefined; borderRadius?: string | undefined; borderWidth?: string | undefined; }",
154+
},
155+
],
156+
"type": "object",
157+
},
158+
"name": "root",
159+
"optional": true,
160+
"type": "{ background?: string | undefined; borderColor?: string | undefined; borderRadius?: string | undefined; borderWidth?: string | undefined; boxShadow?: string | undefined; color?: string | undefined; focusRing?: { ...; } | undefined; }",
161+
},
162+
],
163+
"type": "object",
164+
},
165+
"name": "style",
166+
"optional": true,
167+
"systemTags": [
168+
"core",
169+
],
170+
"type": "AvatarProps.Style",
171+
},
80172
{
81173
"description": "The text content shown in the avatar's tooltip.
82174

‎src/avatar/__tests__/avatar.test.tsx‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -123,4 +123,38 @@ describe("Avatar", () => {
123123
const wrapper = renderAvatar({ ariaLabel, initials: "JD", tooltipText: "Jane Doe" });
124124
expect(wrapper.getElement()).toHaveAttribute("aria-label", ariaLabel);
125125
});
126+
127+
test("style api", () => {
128+
const ariaLabel = "User avatar JD Jane Doe";
129+
const wrapper = renderAvatar({
130+
ariaLabel,
131+
initials: "JD",
132+
tooltipText: "Jane Doe",
133+
style: {
134+
root: {
135+
background: "#000",
136+
borderColor: "magenta",
137+
borderRadius: "16px",
138+
borderWidth: "8px",
139+
boxShadow: "0px 0px 10px blue",
140+
color: "#fff",
141+
},
142+
},
143+
});
144+
145+
expect(getComputedStyle(wrapper.getElement()).getPropertyValue("background")).toBe("rgb(0, 0, 0)");
146+
expect(getComputedStyle(wrapper.getElement()).getPropertyValue("border-radius")).toBe("16px");
147+
expect(getComputedStyle(wrapper.getElement()).getPropertyValue("box-shadow")).toBe("0px 0px 10px blue");
148+
expect(getComputedStyle(wrapper.getElement()).getPropertyValue("color")).toBe("rgb(255, 255, 255)");
149+
150+
expect(
151+
getComputedStyle(wrapper.findByClassName(avatarStyles.content)!.getElement()).getPropertyValue("border-color"),
152+
).toBe("magenta");
153+
expect(
154+
getComputedStyle(wrapper.findByClassName(avatarStyles.content)!.getElement()).getPropertyValue("border-radius"),
155+
).toBe("16px");
156+
expect(
157+
getComputedStyle(wrapper.findByClassName(avatarStyles.content)!.getElement()).getPropertyValue("border-width"),
158+
).toBe("8px");
159+
});
126160
});

‎src/avatar/interfaces.ts‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,22 @@ export interface AvatarProps {
6262
*/
6363
imgUrl?: string;
6464

65+
/**
66+
* Specifies an object of selectors and properties that are used to apply custom styles.
67+
*
68+
* - `root.background` (string) - (Optional) Background of the avatar.
69+
* - `root.borderColor` (string) - (Optional) Border color of the avatar.
70+
* - `root.borderRadius` (string) - (Optional) Border radius of the avatar.
71+
* - `root.borderWidth` (string) - (Optional) Border width of the avatar.
72+
* - `root.boxShadow` (string) - (Optional) Box shadow of the avatar.
73+
* - `root.color` (string) - (Optional) Text color of the avatar.
74+
* - `root.focusRing.borderColor` (string) - (Optional) Focus ring border color.
75+
* - `root.focusRing.borderRadius` (string) - (Optional) Focus ring border radius.
76+
* - `root.focusRing.borderWidth` (string) - (Optional) Focus ring border width.
77+
* @awsuiSystem core
78+
*/
79+
style?: AvatarProps.Style;
80+
6581
/**
6682
* Defines the width and height of the avatar.
6783
* 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 {
7288

7389
export namespace AvatarProps {
7490
export type Color = "default" | "gen-ai";
91+
92+
export interface Style {
93+
root?: {
94+
background?: string;
95+
borderColor?: string;
96+
borderRadius?: string;
97+
borderWidth?: string;
98+
boxShadow?: string;
99+
color?: string;
100+
focusRing?: {
101+
borderColor?: string;
102+
borderRadius?: string;
103+
borderWidth?: string;
104+
};
105+
};
106+
}
75107
}

0 commit comments

Comments
 (0)