feat(avatar): update to new visual language (#2019)

Author: giamir

.changeset/moody-banks-study.md

@@ -16,6 +16,17 @@ const getChild = (child?: string): string => {
                 aria-hidden="true">
                     S
             </div>${srEl}`;
+        case "indicator":
+            return `<img
+                class="s-avatar--image"
+                src="https://picsum.photos/id/1/48"
+                alt="team logo"
+            />${srEl}
+            <div
+                class="s-avatar--indicator s-activity-indicator s-activity-indicator__sm s-activity-indicator__success"
+            >
+                <div class="v-visible-sr">Online</div>
+            </div>`;
         default:
             return srEl;
     }
@@ -29,7 +40,11 @@ describe("avatar", () => {
             default: getChild(),
             image: getChild("image"),
             letter: getChild("letter"),
+            indicator: getChild("indicator"),
         },
+        excludedTestids: [
+            /^s-avatar-(?=.*(32|48|64|96|128)).*-indicator.*$/, // s-avatar with indicator and 32 48 64 96 128 sizes not supported
+        ],
         tag: "span",
     });
 });

packages/stacks-classic/lib/components/avatar/avatar.a11y.test.ts

@@ -1,7 +1,6 @@
 .s-avatar {
     --_av-size: var(--su-static16);
     --_av-bg: var(--_white-static); // Force a white background color for when we have transparent avatars
-    --_av-br: var(--br-sm);
     --_av-fs-letter: calc(var(--su-static12) - var(--su-static1));
     --_av-scale-badge: 1;
 
@@ -18,14 +17,8 @@
 
     // MODIFIERS
     // Sizes
-    &&__32,
-    &&__48 {
-        --_av-br: var(--br-md);
-    }
-
     &&__96,
     &&__128 {
-        --_av-br: calc(var(--br-lg) + var(--br-sm));
         --_av-scale-badge: 3;
     }
 
@@ -49,7 +42,6 @@
 
     &&__64 {
         --_av-size: var(--su-static64);
-        --_av-br: var(--br-lg);
         --_av-fs-letter: calc(var(--su-static48) - var(--su-static4));
         --_av-scale-badge: 2.4;
     }
@@ -74,7 +66,6 @@
     }
 
     & &--image {
-        border-radius: var(--_av-br);
         display: block;
         height: var(--_av-size);
         width: var(--_av-size);
@@ -95,8 +86,15 @@
         user-select: none;
     }
 
-    background-color: var(--_av-bg); 
-    border-radius: var(--_av-br);
+    & &--indicator {
+        box-shadow: 0 0 0 var(--su-static2) var(--white);
+        bottom: 100%;
+        left: 100%;
+        position: absolute;
+        transform: translate(-50%, 60%);
+    }
+
+    background-color: var(--_av-bg);
     height: var(--_av-size);
     width: var(--_av-size);
 

packages/stacks-classic/lib/components/avatar/avatar.less

@@ -20,6 +20,17 @@ const getChild = (child?: string): string => {
                 aria-hidden="true">
                     S
             </div>${srEl}`;
+        case "indicator":
+            return `<img
+                class="s-avatar--image"
+                src="${base64Image}"
+                alt="team logo"
+            />${srEl}
+            <div
+                class="s-avatar--indicator s-activity-indicator s-activity-indicator__sm s-activity-indicator__success"
+            >
+                <div class="v-visible-sr">Online</div>
+            </div>`;
         default:
             return srEl;
     }
@@ -33,11 +44,15 @@ describe("avatar", () => {
             default: getChild(),
             image: getChild("image"),
             letter: getChild("letter"),
+            indicator: getChild("indicator"),
         },
         attributes: {
             href: "#",
         },
         tag: "a",
+        excludedTestids: [
+            /^s-avatar-(?=.*(32|48|64|96|128)).*-indicator.*$/, // s-avatar with indicator and 32 48 64 96 128 sizes not supported
+        ],
         template: ({ component, testid }) => html`
             <div
                 data-testid="${testid}"

packages/stacks-classic/lib/components/avatar/avatar.visual.test.ts

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:2eb3a780b8ee451573fe3abb8640c5c435ad235813e2037609e0928896b0907f
-size 3785
+oid sha256:2f5336fa7e0eae9ff6861159c45e75df86611438662e737a02c8df876fa2f866
+size 3120

packages/stacks-classic/screenshots/Chromium/baseline/s-avatar-dark-128-image.ico

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:73d15318ef2fcb2d550297144529593ba1bd631385df8722a487b483f1eb498c
+size 1062

packages/stacks-classic/screenshots/Chromium/baseline/s-avatar-dark-24-indicator.ico

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:878fc8f428c86982f7f13e1582fb7a6e016c46af10f2ca613e73abcdfe0f08b0
-size 2678
+oid sha256:18541c3914b450038a358f88aacfad64c57962ad3da01fa914572b672d92fab9
+size 2085

packages/stacks-classic/screenshots/Chromium/baseline/s-avatar-dark-96-image.ico

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:83120a2129ad0a996973974bf37923bdd7b4e6fe889faec21a8c0ee1e32da8e0
-size 923
+oid sha256:e0c32281a6152287cb6e5790a5b203aff44141fd766da3b7dc77dbdccd636c96
+size 360

packages/stacks-classic/screenshots/Chromium/baseline/s-avatar-dark-96-letter.ico

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:83120a2129ad0a996973974bf37923bdd7b4e6fe889faec21a8c0ee1e32da8e0
-size 923
+oid sha256:e0c32281a6152287cb6e5790a5b203aff44141fd766da3b7dc77dbdccd636c96
+size 360

packages/stacks-classic/screenshots/Chromium/baseline/s-avatar-dark-96.ico

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:f100e21d3f6e4d9f54d090edb6a5dd236dece1ece7c152bbe2f3c5bd7559056c
+size 896