Skip to content

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

Merged
giamir merged 11 commits into
betafrom
SPARK-61/avatar
Oct 30, 2025
Merged

feat(avatar): update to new visual language#2019
giamir merged 11 commits into
betafrom
SPARK-61/avatar

Conversation

@giamir

@giamir giamir commented Oct 24, 2025

Copy link
Copy Markdown
Contributor

SPARK-61

Figma

Here is what changed:

  • Stacks Classic: Made avatar border squared. Introduced .s-avatar--indicator class for positioning an activity indicator element in relation to the avatar. (docs)
  • Stacks Svelte: Introduced a new status prop. When set to online it will show an activity indicator on the avatar. (storybook)

Note: This PR should be merged after the activity indicator one get merged.

@changeset-bot

changeset-bot Bot commented Oct 24, 2025

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 9e33eb7

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

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

@netlify

netlify Bot commented Oct 24, 2025

Copy link
Copy Markdown

Deploy Preview for stacks-svelte ready!

Name Link
🔨 Latest commit 9e33eb7
🔍 Latest deploy log https://app.netlify.com/projects/stacks-svelte/deploys/6903adc0d6b6190008eee227
😎 Deploy Preview https://deploy-preview-2019--stacks-svelte.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@netlify

netlify Bot commented Oct 24, 2025

Copy link
Copy Markdown

Deploy Preview for stacks ready!

Name Link
🔨 Latest commit 9e33eb7
🔍 Latest deploy log https://app.netlify.com/projects/stacks/deploys/6903adc03b710f00080d51bd
😎 Deploy Preview https://deploy-preview-2019--stacks.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@giamir
giamir changed the base branch from beta to SPARK-62/activity-indicator October 29, 2025 18:07
@giamir
giamir marked this pull request as ready for review October 29, 2025 18:13

@CGuindon CGuindon left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@dancormier dancormier left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I keep going back and forth on the size of the indicator on the 24px avatar variant 😂. I think that means it's fine! Thanks for the thoughtfulness towards this component @giamir

LGTM (once activity indicator is merged and we make sure it plays nicely with this)!

@giamir

giamir commented Oct 30, 2025

Copy link
Copy Markdown
Contributor Author

@CGuindon @dancormier Now that we have changed the activity indicator small size to 10x10 I opted for using the small size for both 16x and 24x avatars. Going with the big one for the 24 looked pretty odd to me.

Before
Screenshot 2025-10-30 at 09 40 19

After
Screenshot 2025-10-30 at 09 38 56

Let me know if that seems sensible to you. Thank you.

@dancormier

Copy link
Copy Markdown
Contributor

@CGuindon @dancormier Now that we have changed the activity indicator small size to 10x10 I opted for using the small size for both 16x and 24x avatars. Going with the big one for the 24 looked pretty odd to me.

Before Screenshot 2025-10-30 at 09 40 19

After Screenshot 2025-10-30 at 09 38 56

Let me know if that seems sensible to you. Thank you.

That looks sm size on 24 looks good now!

Base automatically changed from SPARK-62/activity-indicator to beta October 30, 2025 17:38
@giamir
giamir enabled auto-merge (squash) October 30, 2025 18:26
@giamir
giamir merged commit e9b8885 into beta Oct 30, 2025
18 checks passed
@giamir
giamir deleted the SPARK-61/avatar branch October 30, 2025 18:33
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants