fix(Avatar): don't overlap image with color border

[andipaetzold]

Purpose of PR

In the current version of the avatar component, the colored border overlaps with the image. The colored border is about 2 or 3px wide, so a total of 6px horizontal and vertical could be covered. With this PR, the size of the image is reduced to reduce overlaps.

The existing implementation was mixing size numbers with size strings. To shrink the image correctly, its size must be calculated. I, therefore, changed methods to always return numbers and to only add the px suffix at the very last moment. Imo, it's now way easier to understand when a variable is a number or a string.

Additionally, the overlay icon is round again.

Screenshot

PR Checklist

• I have read the relevant readme.md file(s)
• All commits follow our Git commit message convention
• Tests are added/updated/not required
• Tests are passing
• Storybook stories are added/updated/not required
• Usage notes are added/updated/not required
• Has been tested based on Contentful's browser support
• Doesn't contain any sensitive information

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
forma-36	✅ Ready (Inspect)	Visit Preview	Oct 4, 2024 3:06pm

[changeset-bot]

🦋 Changeset detected

Latest commit: 0be92cd

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 36 packages

Name	Type
@contentful/f36-avatar	Patch
@contentful/f36-components	Patch
@contentful/f36-navbar	Patch
@contentful/f36-accordion	Patch
@contentful/f36-asset	Patch
@contentful/f36-autocomplete	Patch
@contentful/f36-badge	Patch
@contentful/f36-button	Patch
@contentful/f36-card	Patch
@contentful/f36-collapse	Patch
@contentful/f36-copybutton	Patch
@contentful/f36-core	Patch
@contentful/f36-datetime	Patch
@contentful/f36-datepicker	Patch
@contentful/f36-drag-handle	Patch
@contentful/f36-entity-list	Patch
@contentful/f36-empty-state	Patch
@contentful/f36-forms	Patch
@contentful/f36-icon	Patch
@contentful/f36-header	Patch
@contentful/f36-list	Patch
@contentful/f36-menu	Patch
@contentful/f36-modal	Patch
@contentful/f36-note	Patch
@contentful/f36-notification	Patch
@contentful/f36-pagination	Patch
@contentful/f36-pill	Patch
@contentful/f36-popover	Patch
@contentful/f36-skeleton	Patch
@contentful/f36-spinner	Patch
@contentful/f36-table	Patch
@contentful/f36-tabs	Patch
@contentful/f36-text-link	Patch
@contentful/f36-tooltip	Patch
@contentful/f36-typography	Patch
@contentful/f36-image	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

size-limit report 📦

Path	Size	Loading time (3g)	Running time (snapdragon)	Total time
CommonJS	112.06 KB (-0.09% 🔽)	2.3 s (-0.09% 🔽)	192 ms (+11.34% 🔺)	2.5 s
Module	110.85 KB (+0.06% 🔺)	2.3 s (+0.06% 🔺)	229 ms (+7.36% 🔺)	2.5 s