diff --git a/.changeset/moody-banks-study.md b/.changeset/moody-banks-study.md
new file mode 100644
index 0000000000..896926f209
--- /dev/null
+++ b/.changeset/moody-banks-study.md
@@ -0,0 +1,10 @@
+---
+"@stackoverflow/stacks": patch
+"@stackoverflow/stacks-svelte": patch
+---
+
+**Avatar Updates:**
+
+- **Stacks Classic**: Made avatar border squared. Introduced `.s-avatar--indicator` class for positioning an activity indicator element in relation to the avatar.
+
+- **Stacks Svelte**: Introduced a new `status` prop. When set to `online` it will show an activity indicator on the avatar.
diff --git a/packages/stacks-classic/lib/components/avatar/avatar.a11y.test.ts b/packages/stacks-classic/lib/components/avatar/avatar.a11y.test.ts
index 3a2fba6f35..e5445839dc 100644
--- a/packages/stacks-classic/lib/components/avatar/avatar.a11y.test.ts
+++ b/packages/stacks-classic/lib/components/avatar/avatar.a11y.test.ts
@@ -16,6 +16,17 @@ const getChild = (child?: string): string => {
aria-hidden="true">
S
${srEl}`;
+ case "indicator":
+ return `
${srEl}
+ `;
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",
});
});
diff --git a/packages/stacks-classic/lib/components/avatar/avatar.less b/packages/stacks-classic/lib/components/avatar/avatar.less
index f6b4518872..98ba7ac470 100644
--- a/packages/stacks-classic/lib/components/avatar/avatar.less
+++ b/packages/stacks-classic/lib/components/avatar/avatar.less
@@ -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);
diff --git a/packages/stacks-classic/lib/components/avatar/avatar.visual.test.ts b/packages/stacks-classic/lib/components/avatar/avatar.visual.test.ts
index 5420e2e554..db927a3576 100644
--- a/packages/stacks-classic/lib/components/avatar/avatar.visual.test.ts
+++ b/packages/stacks-classic/lib/components/avatar/avatar.visual.test.ts
@@ -20,6 +20,17 @@ const getChild = (child?: string): string => {
aria-hidden="true">
S
${srEl}`;
+ case "indicator":
+ return `
${srEl}
+ `;
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`
{% header "h2", "Examples" %}
{% header "h3", "Users" %}
-
Including an image with the class s-avatar--image within s-avatar will apply the correct size and border radius. Remember, you’ll want to double the size of the avatar image to account for retina screens.
+
Including an image with the class s-avatar--image within s-avatar will apply the correct size. Remember, you’ll want to double the size of the avatar image to account for retina screens.
+ Avatars can display activity indicators to show activities or status changes.
+ Add the s-avatar--indicator class to a child element of s-avatar along with s-activity-indicator and s-activity-indicator__sm classes.
+ The indicator is positioned at the top-right corner of the avatar.
+
+{% highlight html %}
+
+
+ 
+
+
+
+
+ 
+
+{% endhighlight %}
+
+
+
+
+ 16px
+ default
+ |
+
+
+
+
+
+ |
+
+
+
+ 24px
+ .s-avatar__24
+ |
+
+
+
+
+
+ |
+
+
+
+
When displaying a team’s identity, we badge the avatar with a shield. We fall back to the first letter of their name and a color we choose at random. As team administrators add more data—choosing a color or uploading an avatar—we progressively enhance the avatar.
+ {% header "h3", "Stack Internal" %}
+ When displaying a team’s identity, we badge the avatar with a shield. We fall back to the first letter of their name and a color we choose at random. As Stack Internal administrators add more data—choosing a color or uploading an avatar—we progressively enhance the avatar.
In this example, from left to right, we have a team name of Hum with no avatar or custom color. In the middle we have a team name of Hum with a custom color. In the last example, we have a team name of Hum with a custom avatar applied.
{% highlight html %}
diff --git a/packages/stacks-svelte/src/components/Avatar/Avatar.stories.svelte b/packages/stacks-svelte/src/components/Avatar/Avatar.stories.svelte
index 0143ee2b6b..b77285308b 100644
--- a/packages/stacks-svelte/src/components/Avatar/Avatar.stories.svelte
+++ b/packages/stacks-svelte/src/components/Avatar/Avatar.stories.svelte
@@ -55,7 +55,7 @@
+
+
+
+
+
+
+ | Sizes |
+ Example |
+
+
+
+
+
+ | 16 |
+
+
+ |
+
+
+ | 24 |
+
+
+ |
+
+
+
+
diff --git a/packages/stacks-svelte/src/components/Avatar/Avatar.svelte b/packages/stacks-svelte/src/components/Avatar/Avatar.svelte
index 0707f275b5..f839fbbd02 100644
--- a/packages/stacks-svelte/src/components/Avatar/Avatar.svelte
+++ b/packages/stacks-svelte/src/components/Avatar/Avatar.svelte
@@ -4,6 +4,7 @@