From abcb849ac64a2280bd16b246d4917d68620c2866 Mon Sep 17 00:00:00 2001 From: Andrew Gliga Date: Tue, 11 Feb 2025 11:30:04 -0800 Subject: [PATCH] feat(avatar): added fit modifier (#2565) --- .changeset/happy-turkeys-hang.md | 5 + dist/avatar/avatar.css | 24 +- dist/mixins/_utility-mixins.scss | 4 +- .../_index/component/avatar/+page.marko | 334 ++++++++++-------- src/sass/avatar/avatar.scss | 10 +- src/sass/avatar/stories/avatar.stories.js | 23 ++ src/sass/mixins/public/_utility-mixins.scss | 4 +- 7 files changed, 247 insertions(+), 157 deletions(-) create mode 100644 .changeset/happy-turkeys-hang.md diff --git a/.changeset/happy-turkeys-hang.md b/.changeset/happy-turkeys-hang.md new file mode 100644 index 0000000000..788432d7bd --- /dev/null +++ b/.changeset/happy-turkeys-hang.md @@ -0,0 +1,5 @@ +--- +"@ebay/skin": minor +--- + +feat(avatar): added custom fit avatar diff --git a/dist/avatar/avatar.css b/dist/avatar/avatar.css index f2b59ba577..d7bc4fd9ee 100644 --- a/dist/avatar/avatar.css +++ b/dist/avatar/avatar.css @@ -1,8 +1,6 @@ .avatar { align-items: center; - background-color: #84b4fb; border-radius: 50%; - color: #002a69; display: inline-flex; font-size: var(--font-size-large-2); font-weight: var(--font-weight-bold); @@ -10,8 +8,26 @@ justify-content: center; line-height: 48px; overflow: hidden; + position: relative; width: 48px; } +.avatar:after { + background: rgba(0, 0, 0, 0.05); + bottom: 0; + content: ""; + display: block; + left: 0; + pointer-events: none; + position: absolute; + right: 0; + top: 0; +} +.avatar > img { + display: inline-block; + max-height: 100%; + max-width: 100%; + object-fit: contain; +} .avatar > svg { height: 100%; @@ -24,6 +40,10 @@ width: 48px; } +.avatar--fit > img { + object-fit: contain; +} + .avatar--teal { background-color: #84b4fb; color: #002a69; diff --git a/dist/mixins/_utility-mixins.scss b/dist/mixins/_utility-mixins.scss index 1b36c3b2e4..e228c49692 100644 --- a/dist/mixins/_utility-mixins.scss +++ b/dist/mixins/_utility-mixins.scss @@ -23,10 +23,10 @@ white-space: nowrap; } -@mixin image-treatment($border-radius: 8px) { +@mixin image-treatment($border-radius: 8px, $display: flex) { align-items: center; border-radius: $border-radius; - display: flex; + display: $display; justify-content: center; overflow: hidden; position: relative; diff --git a/src/routes/_index/component/avatar/+page.marko b/src/routes/_index/component/avatar/+page.marko index e8592e47fe..aa8fac7b67 100644 --- a/src/routes/_index/component/avatar/+page.marko +++ b/src/routes/_index/component/avatar/+page.marko @@ -27,17 +27,18 @@ - - + +

The default avatar can have a background color of teal, light-teal, green, lime, yellow, orange, magenta, or pink.

+

+ NOTE: An avatar with an image should not use color modifier, otherwise the image-treatment scrim will not be applied. +

@@ -99,67 +100,65 @@
- + - - - - - - - - - + + + + + + + + +

Custom Avatar @@ -184,13 +183,50 @@ - - - + + - +

Avatar Sizes @@ -306,86 +346,84 @@ - + - - + - + - + - + - + - + - + + + export const metadata = { component: "avatar", "ds-component": { name: "avatar", version: 1, - } + }, }; diff --git a/src/sass/avatar/avatar.scss b/src/sass/avatar/avatar.scss index 41e3f18c43..9598eea4d3 100644 --- a/src/sass/avatar/avatar.scss +++ b/src/sass/avatar/avatar.scss @@ -1,4 +1,5 @@ @import "../variables/variables"; +@import "../mixins/public/utility-mixins"; /* These are temporary colors until we get the new palette */ $_avatar-teal-foreground-color: #002a69; @@ -19,11 +20,10 @@ $_avatar-magenta-foreground-color: #3e135f; $_avatar-magenta-background-color: #cc9ef0; .avatar { + @include image-treatment(50%, inline-flex); + align-items: center; - background-color: $_avatar-teal-background-color; border-radius: 50%; - color: $_avatar-teal-foreground-color; - display: inline-flex; font-size: var(--font-size-large-2); font-weight: var(--font-weight-bold); height: 48px; @@ -43,6 +43,10 @@ $_avatar-magenta-background-color: #cc9ef0; width: 48px; } +.avatar--fit > img { + object-fit: contain; +} + .avatar--teal { background-color: $_avatar-teal-background-color; color: $_avatar-teal-foreground-color; diff --git a/src/sass/avatar/stories/avatar.stories.js b/src/sass/avatar/stories/avatar.stories.js index 37d5bbd675..4890501b01 100644 --- a/src/sass/avatar/stories/avatar.stories.js +++ b/src/sass/avatar/stories/avatar.stories.js @@ -77,6 +77,29 @@ export const withImage = () => /* HTML */ ` `; +export const withFitImage = () => /* HTML */ ` + + +`; + export const signedOut = () => /* HTML */ `