feat(user card) - Update User Card to SHINE styles (part 2) #2123

ttaylor-stack · 2026-01-14T14:23:19Z

This PR covers part 2 of the User Card component which includes:

States:
- New contributor
- Original poster
- Deleted
Additional bling
- Recognized member (collectives)
- top 3 leaderboard (collectives)

giamir

Thanks Tavian for the PR. As you can see I am asking for few changes. Hopefully they are all understandable if not let me know and we can pair.

For the svelte component I suggest to create a UserCardAdditionalBling subcomponent so that we don't have to add a lot of logic and props in the existing root UserCard component but just a snippet.

Sidenote
I think AdditionalBling is a pretty poor name to describe the little extra icons that can be added to between the badges and the blings but it is what we have in Figma so I guess we can roll with it. I don't have a better name for now. cc @CGuindon

giamir · 2026-01-16T14:25:16Z

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

+        &:before {
+            height: var(--_ba-before-h);
+            margin-top: 0;
+            margin-left: calc(var(--su2) * -1); // -2px margin


We should have --sun2 now after Dan's PR got merged

giamir · 2026-01-16T14:53:42Z

packages/stacks-classic/lib/components/user-card/user-card.less

        color: var(--black-400);
    }

+    & &--original-poster {


I wonder if this should be named s-user-card--username__op? cc @dancormier

giamir · 2026-01-16T14:55:50Z

packages/stacks-classic/lib/components/user-card/user-card.less

        word-break: break-all;
    }

+    & &--awarded-third {


How are those used? I cannot find them in the docs snippets?

It's used to set the colors for the additional bling trophies. It's used in the awarded snippet like so

<div class="s-user-card--group s-user-card--awarded-third" title="…" data-controller="s-tooltip"> @Svg.Icon.AchievementsSm.With("native") </div>

Thanks for clarifying. I would like to get @dancormier opinions on the API naming here. There is a part of me that still wonder if this "additional blings" are worthy to be included already in the central library or we should just have the consumer define them for now and only centralize when we see the pattern is used across several scenarios (not just collectives). What I mean is that instead of creating a s-user-card--awarded-third class to add just the color consumers could use atomic color classes and take care of it themselves (we could still keep an example in the docs but we won't have any dedicated less). The equivalent in the svelte component world would be just to have a snippet (e.g. additionalBlings - it would be nice to find a better name but it is what it is) to plug things in it but also there we will allow consumers to pass in it whatever they want.

Also cc @CGuindon for visibility.

By the way what I am suggesting is some version of the last responsible moment. Do we have enough confidence to nail the API at this stage, with the information and the use case we have or is it better to keep things flexible for the time being and defer centralization of some styling to a later moment.

giamir · 2026-01-16T14:56:55Z

packages/stacks-classic/lib/components/user-card/user-card.less

        color: var(--black-400);
    }

+    & &--original-poster {


The design differ compared to figma

PR

Figma

giamir · 2026-01-16T15:01:13Z

packages/stacks-svelte/src/components/UserCard/UserCard.svelte

+    import Popover from "../Popover/Popover.svelte";
+    import PopoverReference from "../Popover/PopoverReference.svelte";
+    import PopoverContent from "../Popover/PopoverContent.svelte";
+    import avatarDeleted16 from "../../assets/img/avatar-deleted-16.svg?url";


Does this inline the asset otherwise it won't work after things get bundled?

I think we could probably create an AvatarDeleted16.svelte and an AvatarDeleted24.svelte components in the UserCard folder for now with the svg in it.

giamir · 2026-01-16T16:19:56Z

packages/stacks-svelte/src/components/UserCard/UserCard.svelte

+            {@render badges()}
+        </ul>
+    {/if}
+    {#if award}


I think we would be better off to create UserCardAdditionalBling subcomponent here for consumer to use. We are inferring too much from the value of award (tooltip text, class, etc...). And then just have a additionalBling snippet in the root UserCard component.

giamir · 2026-01-16T16:27:48Z

packages/stacks-svelte/src/components/UserCard/UserCard.svelte


+{#snippet userCardMainContent()}
+    {@render avatarAndName()}
+    {#if recognition && size === "sm"}


Why do we need recognitionHref?
Can we actually make the UserCardAdditionalBling subcomponent generic so that the consumer can decide if they want to show the "little cup icon" bling or the "recognition icon" bling instead? It would be nice to keep the additions on the UserCard.svelte component to a minimum. As I said in a previous comment maybe just a additionalBling (or additionalBlings) snippet depending if more than one bling can be displayed together or not. Keep things generic and then have any additional logic in the UserCardAdditionalBling subcomponent.

In the Figma it states that the additional bling icons need to provide links to either the collective leaderboard or the collective landing page, this is a way for the user to provide this. I've removed it from UserCard.Svelte and placed it into the additional bling subcomponent

giamir · 2026-01-16T16:34:32Z

packages/stacks-docs/_data/user-card.json

+    },
+    {
+      "name": "New Contributor",
+      "class": "s-user-card--new-contributor",


This class does not exist in less, we should probably remove it from the docs and the examples

@ttaylor-stack it looks like there are still references of the s-user-card--new-contributor class across the codebase, Maybe you want to do an old fashion CTRL+F and make sure everything is cleaned up. Thank you. 🙂

giamir · 2026-01-16T16:39:38Z

packages/stacks-svelte/src/components/UserCard/UserCard.svelte

+                <svelte:element
+                    this={recognitionHref ? "a" : "div"}
+                    href={recognitionHref}
+                    class="s-user-card--group s-user-card--recognition"


The same s-user-card--recognition is used for 2 purposes:

for the container element "Recognized by..."

for the recognition icon in the additional blings section

I think this is confusing, we are probably better off create another class for the additional blings part

giamir · 2026-01-16T16:43:40Z

packages/stacks-svelte/src/components/UserCard/UserCard.svelte

+        </ul>
+    {/if}
+    {#if award}
+        <Popover id="user-card-award-popover" tooltip>


popover ids need to be unique for the whole page so if we generate them inside svelte we need to either create a random text we can append to them or ask the consumer to do that

giamir · 2026-01-19T13:58:28Z

packages/stacks-classic/lib/components/user-card/user-card.less

+        --_uc-username-d: flex;
+        --_uc-username-ai: center;
+        .s-user-card__sm & {
+        --_uc-username-p: 0px var(--su4);


NIT: incorrect indentation and px (unit of measure) not necessary

giamir · 2026-01-19T14:05:29Z

packages/stacks-svelte/package.json

        "test:watch": "npm run build:dependencies && web-test-runner --watch",
        "test:tools": "npm run storybook:build && node --test tools/*.test.js",
-        "storybook": "storybook dev -p 6006",
+        "storybook": "npm run build:dependencies && storybook dev -p 6006",


Why this bit @ttaylor-stack? We shouldn't need it since the less files of stacks classic are compiled on the fly.

I was getting this error [ERROR] Failed to resolve entry for package "@stackoverflow/stacks-utils". The package may have incorrect main/module/exports specified in its package.json. [plugin vite:dep-scan]

I've removed it and it seems to be working atm

giamir · 2026-01-19T14:13:13Z

packages/stacks-svelte/src/components/UserCard/AvatarDeleted16.svelte

I was actually suggesting something dumber than this. HTML (like SVGs) are valid svelte component. So AvatarDeleted16.svelte would basically be as simple as:

<svg ...> ...source code now under `assets/img` folder </svg>

If you prefer we could name the component AvatarDeleted16Svg.svelte or AvatarDeleted16Raw.svelte but it does not really matter since they are internal only to the UserCard. Nothing else can or should use it for now.
That way we don't need to create an assets folder at all for now.

Maybe we should sync about this. Perhaps I don't fully see all limitations/issues we would have with the approach I am suggesting.

giamir · 2026-01-19T14:19:11Z

packages/stacks-svelte/src/components/UserCard/UserCardAdditionalBling.svelte

+        /**
+         * Unique id for the popover
+         */
+        popoverId: string;


no need to call this popoverId, we just need an id for the component and should only knows that. That we use that for a popover internally is an implementation detail. 🙂

giamir · 2026-01-19T14:21:01Z

packages/stacks-svelte/src/components/UserCard/UserCardAdditionalBling.svelte

+        icon: string;
+
+        /**
+         * href for the link to leaderboard or collective landing page


I think the description should be more generic
link for the additional bling element (e.g. leaderboard or collective landing page)

giamir · 2026-01-19T14:28:45Z

packages/stacks-svelte/src/components/UserCard/UserCard.svelte


        /**
-         * Snippet used to display user bio
+         * Snippet used to display user recognized member


Why do we need a dedicated snippet for the recognized member bling? Can everything fall under the additionalBlings snippet umbrella?

It looks like all additionalBlings are always rendered after the badges according to figma

At the moment it seems we are placing the recognized member one before the badges snippet which should not be the case. I think one more reason to have a single snippet called additionalBlings.

…m/StackExchange/Stacks into spark-127/update-user-card-part-2

ttaylor-stack and others added 30 commits November 27, 2025 17:41

Update docs and formatting

0f5b7af

half finished docs update

a12c7c1

Finish docs and update svelte

349b469

Update docs

0bb346f

fix lint and tests

6365adb

Update gaps

ef94d69

fix lint issue

e00d975

fix test

eb7c284

fix lint

ab9794a

fix test

38b0d9b

lint fix

87b78bc

Merge branch 'beta' into spark-85/update-user-card-part-1

16b09dc

revert gap changes

87c4616

fix lint issue

ea428f1

fix spacing

01b1e2c

update title

97e14e4

fix

823cda0

Add large variant

8a5f156

Update user-card.less

3fb74e9

fix alignment issues

7673568

redo responsive code

81a0c75

Tweak the user card markup + less

039b5b2

Add PPCP and start secondary implementation

8529c35

clean up PPCP

dadc853

add position location class

8904436

fix secondary

0ce5ede

add excerpt class

a511581

remove no wrap

6d1903a

Update docs to match new markup

5695aeb

Style and docs adjustments

2013d0a

ttaylor-stack requested review from CGuindon, dancormier and giamir and removed request for dancormier January 16, 2026 09:59

ttaylor-stack added 3 commits January 16, 2026 10:19

Fix popover

45072c8

Add tests

2f3f0b2

lint and test issues

5fce2d9

ttaylor-stack marked this pull request as ready for review January 16, 2026 11:58

ttaylor-stack and others added 4 commits January 16, 2026 14:17

Merge branch 'beta' into spark-127/update-user-card-part-2

60c8942

update hrefs

90f9b64

Merge branch 'beta' into spark-127/update-user-card-part-2

5a4f378

Merge branch 'beta' into spark-127/update-user-card-part-2

b4ac81d

giamir requested changes Jan 16, 2026

View reviewed changes

ttaylor-stack added 4 commits January 19, 2026 13:09

Update based on PR comments

081edf5

Update tests

99eee8e

Merge branch 'beta' into spark-127/update-user-card-part-2

21f398d

run format

19e6f7c

giamir reviewed Jan 19, 2026

View reviewed changes

ttaylor-stack added 7 commits January 19, 2026 14:55

Update based on pr comments

463b3d1

Merge branch 'beta' into spark-127/update-user-card-part-2

040a47e

Update UserCard.test.ts

2324455

Merge branch 'spark-127/update-user-card-part-2' of https://github.co…

786e263

…m/StackExchange/Stacks into spark-127/update-user-card-part-2

Update based on comments

1eb0119

Update UserCard.test.ts

0d9b08a

Add tooltip for deleted user

85db7b7

feat(user card) - Update User Card to SHINE styles (part 2) #2123

Are you sure you want to change the base?

feat(user card) - Update User Card to SHINE styles (part 2) #2123

Uh oh!

Conversation

ttaylor-stack commented Jan 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

giamir left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

ttaylor-stack commented Jan 14, 2026 •

edited

Loading