style(ui-avatar): use the rectangleradius token for the rectangle var…

[adamlobler]

No description provided.

[github-actions]

PR Preview Action v1.8.1
🚀 View preview at https://instructure.design/pr-preview/pr-2592/
Built to branch gh-pages at 2026-06-19 10:11 UTC. Preview will be ready when the GitHub Pages deployment is complete.

[github-actions]

Visual regression report

✅ No changes.

Status	Count
Unchanged	32
Changed	0
New	0
Removed	0

📊 View full report

_{Baselines come from the visual-baselines branch. They refresh on every merge to master.}

[matyasf]

Looks good. The code

<Avatar name="Arthur C. Clarke" shape="rectangle"
      themeOverride={{ rectangleRadius: '0.7rem' }}/>

overrides thist token correctly

[matyasf]

While the code works OK, can you please fix the broken test too?

This override works now:

<Avatar name="Arthur C. Clarke" shape="rectangle"
      themeOverride={{ rectangleRadius: '0.7rem' }}/>

This test is broken:

packages/ui-avatar/src/Avatar/__tests__/Avatar.test.tsx > <Avatar /> > when shape is set to "rectangle" > should display as a rectangle
Error: expect(element).toHaveStyle()

- Expected

- border-radius: 0;
+ border-radius: 0rem;
 ❯ packages/ui-avatar/src/Avatar/__tests__/Avatar.test.tsx:169:25
    167|       )

    168|       const avatarDiv = container.querySelector('div')
    169|       expect(avatarDiv).toHaveStyle('border-radius: 0')
       |                         ^
    170|     })
    171|   })

[adamlobler]

While the code works OK, can you please fix the broken test too?

This override works now:

<Avatar name="Arthur C. Clarke" shape="rectangle"
      themeOverride={{ rectangleRadius: '0.7rem' }}/>

This test is broken:

packages/ui-avatar/src/Avatar/__tests__/Avatar.test.tsx > <Avatar /> > when shape is set to "rectangle" > should display as a rectangle
Error: expect(element).toHaveStyle()

- Expected

- border-radius: 0;
+ border-radius: 0rem;
 ❯ packages/ui-avatar/src/Avatar/__tests__/Avatar.test.tsx:169:25
    167|       )

    168|       const avatarDiv = container.querySelector('div')
    169|       expect(avatarDiv).toHaveStyle('border-radius: 0')
       |                         ^
    170|     })
    171|   })

I don’t have an exact radius value that I can check. I only have the rectangleRadius token for the Avatar, which is 0rem in the legacy themes and 0.25rem in the new light/dark themes. Do you have any idea how can i access it here?

[matyasf]

I don’t have an exact radius value that I can check. I only have the rectangleRadius token for the Avatar, which is 0rem in the legacy themes and 0.25rem in the new light/dark themes. Do you have any idea how can i access it here?

Here the fix should be simple. Instead of expect(avatarDiv).toHaveStyle('border-radius: 0') you just need expect(avatarDiv).toHaveStyle('border-radius: 0rem')

You can test that it passes with pnpm run test:vitest or pnpm run test:vitest-watch