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

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

SPARK-127

Figma

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)

changeset-bot · 2026-01-14T14:23:23Z

🦋 Changeset detected

Latest commit: b4ac81d

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 · 2026-01-14T14:23:37Z

✅ Deploy Preview for stacks ready!

Name	Link
🔨 Latest commit	`b4ac81d`
🔍 Latest deploy log	https://app.netlify.com/projects/stacks/deploys/696a4f18b15c890008923e81
😎 Deploy Preview	https://deploy-preview-2123--stacks.netlify.app
📱 Preview on mobile	Toggle 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 · 2026-01-14T14:23:38Z

✅ Deploy Preview for stacks-svelte ready!

Name	Link
🔨 Latest commit	`b4ac81d`
🔍 Latest deploy log	https://app.netlify.com/projects/stacks-svelte/deploys/696a4f18fea0930008cbfd9c
😎 Deploy Preview	https://deploy-preview-2123--stacks-svelte.netlify.app
📱 Preview on mobile	Toggle 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

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?

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.

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

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

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 added 2 commits January 12, 2026 16:29

additional bling p1

7b29dd4

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

ae4d022

ttaylor-stack changed the base branch from develop to beta January 14, 2026 14:23

ttaylor-stack added 9 commits January 14, 2026 14:27

Fix broken merge from beta

c1d0ebc

Finish Recognized Member section

ae0af0d

awarded

88d7153

Svelte component

026a10d

Svelte component

c8e299c

fix lint issues

04d52f5

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

0e0ab06

Add changeset

027a9c6

Fix static import

bbcb6e5

ttaylor-stack requested review from CGuindon, dancormier, giamir and mukunku 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

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!

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

Uh oh!

🦋 Changeset detected

Uh oh!

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

Uh oh!

✅ Deploy Preview for stacks ready!

Uh oh!

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

Uh oh!

✅ Deploy Preview for stacks-svelte ready!

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!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

ttaylor-stack commented Jan 14, 2026 •

edited

Loading

changeset-bot bot commented Jan 14, 2026 •

edited

Loading

netlify bot commented Jan 14, 2026 •

edited

Loading

netlify bot commented Jan 14, 2026 •

edited

Loading