Skip to content

[NO-ISSUE] fix(webkit): add border to avatar initials variant#750

Merged
robsongajunior merged 5 commits into
devfrom
feat/avatar-initials-border
Jul 16, 2026
Merged

[NO-ISSUE] fix(webkit): add border to avatar initials variant#750
robsongajunior merged 5 commits into
devfrom
feat/avatar-initials-border

Conversation

@gab-az

@gab-az gab-az commented Jul 13, 2026

Copy link
Copy Markdown
Collaborator

Summary

Adds a border to the initials variant of the avatar component. The border renders only when the initials fallback is shown — i.e. a label is set and no src image is present. It uses the --border-default token and inherits the root's shape (kind: circle | square), so it does not appear for the image or icon fallbacks.

Notes

  • Single-line change in avatar.vue; no props, events, slots, or exports added.
  • No new dependencies. No breaking changes.

@gab-az
gab-az requested a review from a team as a code owner July 13, 2026 23:50
@robsongajunior

Copy link
Copy Markdown
Contributor

Success regression tests:
https://github.com/aziontech/webkit/actions/runs/29524742617/job/87711048405?pr=750

[TEST] Summary of all failing tests
[TEST] FAIL apps/storybook/src/stories/components/content/avatar/Avatar.stories.js
[TEST]   ● Components/Content/Avatar › Default › smoke-test
[TEST] 
[TEST]     Expected image to match or be a close match to snapshot but was 1.26953125% different from snapshot (52 differing pixels).
[TEST]     See diff for details: /home/runner/work/webkit/webkit/apps/storybook/.storybook/test-visual/__diff_output__/components-content-avatar--default-diff.png
[TEST] 
[TEST]       69 |
[TEST]       70 |     const image = await page.locator('#storybook-root').screenshot({ animations: 'disabled' })
[TEST]     > 71 |     expect(image).toMatchImageSnapshot({
[TEST]          |                   ^
[TEST]       72 |       customSnapshotsDir: SNAPSHOT_DIR,
[TEST]       73 |       customSnapshotIdentifier: context.id,
[TEST]       74 |       customDiffDir: DIFF_DIR,
[TEST] 
[TEST]       at toMatchImageSnapshot (apps/storybook/.storybook/test-runner.js:71:19)
[TEST] 
[TEST]   ● Components/Content/Avatar › Types › smoke-test
[TEST] 
[TEST]     Expected image to match or be a close match to snapshot but was 1.184640522875817% different from snapshot (145 differing pixels).
[TEST]     See diff for details: /home/runner/work/webkit/webkit/apps/storybook/.storybook/test-visual/__diff_output__/components-content-avatar--types-diff.png
[TEST] 
[TEST]       69 |
[TEST]       70 |     const image = await page.locator('#storybook-root').screenshot({ animations: 'disabled' })
[TEST]     > 71 |     expect(image).toMatchImageSnapshot({
[TEST]          |                   ^
[TEST]       72 |       customSnapshotsDir: SNAPSHOT_DIR,
[TEST]       73 |       customSnapshotIdentifier: context.id,
[TEST]       74 |       customDiffDir: DIFF_DIR,
[TEST] 
[TEST]       at toMatchImageSnapshot (apps/storybook/.storybook/test-runner.js:71:19)
[TEST] 
[TEST]   ● Components/Content/Avatar › Sizes › smoke-test
[TEST] 
[TEST]     Expected image to match or be a close match to snapshot but was 1.0714285714285714% different from snapshot (144 differing pixels).
[TEST]     See diff for details: /home/runner/work/webkit/webkit/apps/storybook/.storybook/test-visual/__diff_output__/components-content-avatar--sizes-diff.png
[TEST] 
[TEST]       69 |
[TEST]       70 |     const image = await page.locator('#storybook-root').screenshot({ animations: 'disabled' })
[TEST]     > 71 |     expect(image).toMatchImageSnapshot({
[TEST]          |                   ^
[TEST]       72 |       customSnapshotsDir: SNAPSHOT_DIR,
[TEST]       73 |       customSnapshotIdentifier: context.id,
[TEST]       74 |       customDiffDir: DIFF_DIR,
[TEST] 
[TEST]       at toMatchImageSnapshot (apps/storybook/.storybook/test-runner.js:71:19)
[TEST] 
[TEST] 
[TEST] Snapshot Summary
[TEST]  › 3 snapshots failed from 1 test suite. Inspect your code changes or re-run jest with `-u` to update them.

@robsongajunior
robsongajunior merged commit 78cc23e into dev Jul 16, 2026
19 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Development

Successfully merging this pull request may close these issues.

3 participants