Repository navigation
Convert the default and initials avatars to CSS modules - #6028
Draft
Eugene (OEvgeny) wants to merge 4 commits into
Draft
Eugene (OEvgeny) wants to merge 4 commits into
Eugene (OEvgeny) wants to merge 4 commits into
Conversation
added 4 commits
November 6, 2026 15:38
Moves the avatar and initialsAvatar style set entries and the local emotion styles of DefaultAvatar and InitialsAvatar into Avatar/Avatar.module.css, which takes over ImageAvatar.module.css. Class names keep the webchat__ prefix. avatarBorderRadius sets the reserved --webchat__border-radius--avatar; the background colors set --webchat__background--avatar(-user), with the accent fallback resolved in JavaScript. Deprecates both style set entries.
…us rule The selector :global(.stacked-loyout__bubble) matched nothing, so the message status in a copilot part group did not get the fontSizeBase200/lineHeightBase200 of its sibling title and text.
This branch has not been deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Changelog Entry
Changed
webchat__class names;avatarBorderRadius,botAvatarBackgroundColoranduserAvatarBackgroundColorare now custom properties, in PR #6028, by @OEvgenyRemoved
avatarandinitialsAvatarstyle set entries, which no longer affect rendering, in PR #6028, by @OEvgenyDescription
The default and initials avatars move from emotion style sets to CSS Modules. No snapshot changes; rendered class names stay.
Design
avatarBorderRadiussets the reserved--webchat__border-radius--avatar; backgrounds use--webchat__background--avatar(-user)with theaccentfallback in JavaScript (a CSSvar()fallback would give Fluent avatars Fluent's accent).Avatar.module.csswith 3 regions takes overImageAvatar.module.css.Specific Changes
DefaultAvatar,InitialsAvatar,ImageAvatar:Avatar/Avatar.module.css,InferReactPropsCustomPropertyNames.ts,CSSCustomPropertiesContainer.tsx: 3 avatar custom propertiescreateStyleSet.ts,StyleSet/{Avatar,InitialsAvatar}.ts:@deprecatedfluentCSSModuleTheme.module.css:stacked-loyout__bubbletypo →stacked-layout__bubble, no visible changestyleOptions/avatarBorderRadius.html: new page, numeric radius (4 px corners)DefaultAvatar.spec.tsxCSS mock;imageAvatarJSDoc paths.changelog/<PR#>-<slug>.mdReview Checklist
z-index)package.jsonandpackage-lock.jsonreviewed