From 4a2ac36bfbb652cee1ad7f3951f85c5df5b08e1f Mon Sep 17 00:00:00 2001 From: onlyexeption Date: Mon, 1 Jun 2026 11:15:37 +0300 Subject: [PATCH 1/2] fix(avatar): set background through correct css var --- samples/interactions/chat/features/src/index.ts | 12 ++++++------ samples/layouts/avatar/styling/src/AvatarStyle.css | 10 +++++----- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/samples/interactions/chat/features/src/index.ts b/samples/interactions/chat/features/src/index.ts index c40e9fce28..89c4d5d745 100644 --- a/samples/interactions/chat/features/src/index.ts +++ b/samples/interactions/chat/features/src/index.ts @@ -41,13 +41,13 @@ export class ChatOverview { id: '4', text: ` -Thank you for your patience. It seems that the issue is the name of the CSS part. Here is the fixed code: +Thank you for your patience. The background should be applied using the \`--ig-avatar-background\` CSS variable on the \`igc-avatar\` host element. Here is the fixed code: \`\`\`css -igc-avatar::part(base) { - --size: 60px; - color: var(--ig-success-500-contrast); - background: var(--ig-success-500); - border-radius: 20px; +igc-avatar { + --ig-avatar-size: 60px; + --ig-avatar-color: var(--ig-success-500-contrast); + --ig-avatar-background: var(--ig-success-500); + --ig-avatar-border-radius: 20px; } \`\`\` `, diff --git a/samples/layouts/avatar/styling/src/AvatarStyle.css b/samples/layouts/avatar/styling/src/AvatarStyle.css index a55c955108..32ede370af 100644 --- a/samples/layouts/avatar/styling/src/AvatarStyle.css +++ b/samples/layouts/avatar/styling/src/AvatarStyle.css @@ -1,6 +1,6 @@ -igc-avatar::part(base) { - --size: 60px; - color: var(--ig-success-500-contrast); - background: var(--ig-success-500);; - border-radius: 20px; +igc-avatar { + --ig-avatar-size: 60px; + --ig-avatar-color: var(--ig-success-500-contrast); + --ig-avatar-background: var(--ig-success-500); + --ig-avatar-border-radius: 20px; } \ No newline at end of file From 1a8a5009c0b3436cacb3ea262d18a370ba585f56 Mon Sep 17 00:00:00 2001 From: onlyexeption Date: Thu, 25 Jun 2026 09:24:00 +0300 Subject: [PATCH 2/2] fix: avat styling samples --- samples/interactions/chat/features/src/index.ts | 5 ++++- samples/layouts/avatar/styling/src/AvatarStyle.css | 5 ++++- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/samples/interactions/chat/features/src/index.ts b/samples/interactions/chat/features/src/index.ts index 89c4d5d745..4b90fb259c 100644 --- a/samples/interactions/chat/features/src/index.ts +++ b/samples/interactions/chat/features/src/index.ts @@ -47,7 +47,10 @@ igc-avatar { --ig-avatar-size: 60px; --ig-avatar-color: var(--ig-success-500-contrast); --ig-avatar-background: var(--ig-success-500); - --ig-avatar-border-radius: 20px; +} + +igc-avatar::part(base) { + border-radius: 20px; } \`\`\` `, diff --git a/samples/layouts/avatar/styling/src/AvatarStyle.css b/samples/layouts/avatar/styling/src/AvatarStyle.css index 32ede370af..2fea3ec7c7 100644 --- a/samples/layouts/avatar/styling/src/AvatarStyle.css +++ b/samples/layouts/avatar/styling/src/AvatarStyle.css @@ -2,5 +2,8 @@ igc-avatar { --ig-avatar-size: 60px; --ig-avatar-color: var(--ig-success-500-contrast); --ig-avatar-background: var(--ig-success-500); - --ig-avatar-border-radius: 20px; +} + +igc-avatar::part(base) { + border-radius: 20px; } \ No newline at end of file