Conversation
There was a problem hiding this comment.
Pull Request Overview
This PR introduces an "ai avatar" variant by adding new theme tokens, color primitives, and component styling changes that enable special styling and behavior for AI-generated avatars.
- Adds new high contrast and canvas colors to support the AI variant.
- Updates the Avatar component to use a new 'ai' variant with a fallback icon and gradient background.
- Enhances theme types and documentation to reflect the new variant.
Reviewed Changes
Copilot reviewed 10 out of 10 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| packages/ui-themes/src/themes/canvasHighContrast/colors.ts | Added violet and sea color contrasts for the canvasHighContrast theme. |
| packages/ui-themes/src/themes/canvas/colors.ts | Added violet and sea color contrasts for the canvas theme. |
| packages/ui-themes/src/sharedThemeTokens/colors/primitives.ts | Introduced new sea and violet primitives. |
| packages/ui-avatar/src/Avatar/theme.ts | Extended the theme with AI-specific gradient colors. |
| packages/ui-avatar/src/Avatar/styles.ts | Updated styling logic with a new scaling function and variant styles for the 'ai' variant. |
| packages/ui-avatar/src/Avatar/props.ts | Added the variant prop to control avatar behavior. |
| packages/ui-avatar/src/Avatar/index.tsx | Implemented conditional rendering for the 'ai' variant with a fallback icon. |
| packages/ui-avatar/src/Avatar/README.md | Added documentation for the new variant (note a typo in the variant title). |
| packages/shared-types/src/ComponentThemeVariables.ts | Updated type definitions to use string for several color-related properties. |
| packages/shared-types/src/Colors.ts | Updated contrast types to include the new color variants. |
Comments suppressed due to low confidence (2)
packages/ui-avatar/src/Avatar/index.tsx:128
- Add tests for the 'ai' avatar variant to ensure that the fallback IconAiSolid is rendered correctly when no renderIcon is provided.
const calcedRenderIcon = variant === 'ai' ? <IconAiSolid /> : renderIcon
packages/ui-avatar/src/Avatar/styles.ts:66
- Ensure that the new calcNewScaler function is adequately tested across different avatar sizes and shapes to verify that the scaling is calculated correctly.
const calcNewScaler = (originalFontSize: number, newFontSize: number, originalScaler: number) => {
|
balzss
requested changes
May 6, 2025
|
|
||
| Avatar has a variant prop, which currently only toggles it between `ai` and `default` behavior. `ai` is a preset where you can only change the `size` and `margin` visual props, all others are preset. In the following example, there are the `ai` variants. | ||
|
|
||
| ### ai |
Contributor
There was a problem hiding this comment.
I'd capitalize this title to AI
Contributor
There was a problem hiding this comment.
and also change the order. so default is first, but this is not that important
| --- | ||
| <div> | ||
| <View display="block" padding="small medium"> | ||
| <Avatar variant="ai" size="xx-small" margin="0 small 0 0" /> |
Contributor
There was a problem hiding this comment.
please use the new spacing tokens, small is deprecated and will be removed
matyasf
requested changes
May 7, 2025
matyasf
left a comment
matyasf
left a comment
Collaborator
There was a problem hiding this comment.
This code does not render the AI icon:
<Avatar variant="ai" size="xx-large" src={avatarSquare}/>
This code renders it in a weird shape:
<Avatar variant="ai" size="xx-large" shape/>
it would be nice to fix these if its not hard
balzss
approved these changes
May 14, 2025
joyenjoyer
approved these changes
May 15, 2025
HerrTopi
requested review from
joyenjoyer and
matyasf
and removed request for
matyasf
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.
TEST_PLAN:
Check out the ticket and its design. Also check out the new avatar docs.
INSTUI-4538