From 196f9bc0dfd60a8866d57e6253b31ccaa8d07658 Mon Sep 17 00:00:00 2001 From: Tavian Taylor Date: Wed, 28 Jan 2026 17:31:17 +0000 Subject: [PATCH] fix tooltip in user card docs --- packages/stacks-docs/_data/user-card.json | 823 +++++++++--------- .../product/components/user-cards.html | 2 +- 2 files changed, 414 insertions(+), 411 deletions(-) diff --git a/packages/stacks-docs/_data/user-card.json b/packages/stacks-docs/_data/user-card.json index 331658754a..4447f70112 100644 --- a/packages/stacks-docs/_data/user-card.json +++ b/packages/stacks-docs/_data/user-card.json @@ -1,427 +1,430 @@ { - "classes": [ - { - "class": ".s-user-card", - "applies": "N/A", - "description": "Base user card container that applies the basic style." - }, - { - "class": ".s-user-card--group", - "applies": "N/A", - "description": "A container for group elements." - }, - { - "class": ".s-user-card--group__split", - "applies": "Modifier for
.s-user-card--group", - "description": "Inserts a separator between each element." - }, - { - "class": ".s-user-card--column", - "applies": "N/A", - "description": "A container for column elements." - }, - { - "class": ".s-user-card--row", - "applies": "N/A", - "description": "A container for row elements." - }, - { - "class": ".s-user-card--bio", - "applies": "N/A", - "description": "Container for the user's bio." - }, - { - "class": ".s-user-card--recognition", - "applies": "N/A", - "description": "Container for recognition by a collective." - }, - { - "class": ".s-user-card--rep", - "applies": "N/A", - "description": "Container for the user's reputation." - }, - { - "class": ".s-user-card--time", - "applies": "N/A", - "description": "Container for the user's timestamp." - }, - { - "class": ".s-user-card--username", - "applies": "N/A", - "description": "Container for the user's username." - } - ], - "base": [ - { - "username": "SofiaAlc", - "timestamp": "asked 2 hr ago" - }, - { - "username": "SofiaAlc", - "timestamp": "asked 2 hr ago", - "reputation": "1,775" - }, - { - "username": "SofiaAlc", - "timestamp": "asked 2 hr ago", - "reputation": "1,775", - "gold": "", - "silver": "", - "bronze": "" - }, - { - "username": "SofiaAlc", - "timestamp": "asked 2 hr ago", - "reputation": "1,775", - "gold": 8, - "silver": 12, - "bronze": 4 - } - ], - "with-badges": [ - { - "username": "Community", - "timestamp": "asked 2 hr ago", - "badges": [ - { - "class": "s-badge__bot", - "text": "Bot" - } - ] - }, - { - "username": "SofiaAlc", - "timestamp": "asked 2 hr ago", - "badges": [ - { - "class": "s-badge__moderator", - "text": "Mod" + "classes": [ + { + "class": ".s-user-card", + "applies": "N/A", + "description": "Base user card container that applies the basic style." + }, + { + "class": ".s-user-card--group", + "applies": "N/A", + "description": "A container for group elements." + }, + { + "class": ".s-user-card--group__split", + "applies": "Modifier for
.s-user-card--group", + "description": "Inserts a separator between each element." + }, + { + "class": ".s-user-card--column", + "applies": "N/A", + "description": "A container for column elements." + }, + { + "class": ".s-user-card--row", + "applies": "N/A", + "description": "A container for row elements." + }, + { + "class": ".s-user-card--bio", + "applies": "N/A", + "description": "Container for the user's bio." + }, + { + "class": ".s-user-card--recognition", + "applies": "N/A", + "description": "Container for recognition by a collective." + }, + { + "class": ".s-user-card--rep", + "applies": "N/A", + "description": "Container for the user's reputation." + }, + { + "class": ".s-user-card--time", + "applies": "N/A", + "description": "Container for the user's timestamp." + }, + { + "class": ".s-user-card--username", + "applies": "N/A", + "description": "Container for the user's username." } - ] - }, - { - "username": "SofiaAlc", - "timestamp": "asked 2 hr ago", - "badges": [ + ], + "base": [ { - "class": "s-badge__staff", - "text": "Staff" + "username": "SofiaAlc", + "timestamp": "asked 2 hr ago" }, { - "class": "s-badge__moderator", - "text": "Mod" + "username": "SofiaAlc", + "timestamp": "asked 2 hr ago", + "reputation": "1,775" + }, + { + "username": "SofiaAlc", + "timestamp": "asked 2 hr ago", + "reputation": "1,775", + "gold": "", + "silver": "", + "bronze": "" + }, + { + "username": "SofiaAlc", + "timestamp": "asked 2 hr ago", + "reputation": "1,775", + "gold": 8, + "silver": 12, + "bronze": 4 } - ] - }, - { - "username": "SofiaAlc", - "timestamp": "asked 2 hr ago", - "reputation": "1,775", - "gold": "", - "silver": "", - "bronze": "", - "badges": [ - { - "class": "s-badge__moderator", - "text": "Mod" + ], + "with-badges": [ + { + "username": "Community", + "timestamp": "asked 2 hr ago", + "badges": [ + { + "class": "s-badge__bot", + "text": "Bot" + } + ] + }, + { + "username": "SofiaAlc", + "timestamp": "asked 2 hr ago", + "badges": [ + { + "class": "s-badge__moderator", + "text": "Mod" + } + ] + }, + { + "username": "SofiaAlc", + "timestamp": "asked 2 hr ago", + "badges": [ + { + "class": "s-badge__staff", + "text": "Staff" + }, + { + "class": "s-badge__moderator", + "text": "Mod" + } + ] + }, + { + "username": "SofiaAlc", + "timestamp": "asked 2 hr ago", + "reputation": "1,775", + "gold": "", + "silver": "", + "bronze": "", + "badges": [ + { + "class": "s-badge__moderator", + "text": "Mod" + } + ] + }, + { + "username": "SofiaAlc", + "timestamp": "asked 2 hr ago", + "reputation": "1,775", + "gold": 8, + "silver": 12, + "bronze": 4, + "badges": [ + { + "class": "s-badge__staff", + "text": "Staff" + }, + { + "class": "s-badge__moderator", + "text": "Mod" + } + ] } - ] - }, - { - "username": "SofiaAlc", - "timestamp": "asked 2 hr ago", - "reputation": "1,775", - "gold": 8, - "silver": 12, - "bronze": 4, - "badges": [ - { - "class": "s-badge__staff", - "text": "Staff" - }, - { - "class": "s-badge__moderator", - "text": "Mod" + ], + "small": [ + { + "username": "SofiaAlc", + "timestamp": "asked 2 hr ago" + }, + { + "username": "SofiaAlc", + "timestamp": "asked 2 hr ago", + "reputation": "1,775", + "gold": 8, + "silver": 12, + "bronze": 4 + }, + { + "username": "SofiaAlc", + "timestamp": "asked 2 hr ago", + "badges": [ + { + "class": "s-badge__moderator", + "text": "Mod" + } + ] } - ] - } - ], - "small": [ - { - "username": "SofiaAlc", - "timestamp": "asked 2 hr ago" - }, - { - "username": "SofiaAlc", - "timestamp": "asked 2 hr ago", - "reputation": "1,775", - "gold": 8, - "silver": 12, - "bronze": 4 - }, - { - "username": "SofiaAlc", - "timestamp": "asked 2 hr ago", - "badges": [ - { - "class": "s-badge__moderator", - "text": "Mod" + ], + "large": [ + { + "username": "SofiaAlc", + "reputation": "1,775", + "gold": 8, + "silver": 12, + "bronze": 4, + "badges": [ + { + "class": "s-badge__moderator", + "text": "Mod" + } + ], + "recognition": "Recognized by AudioBubble", + "role": "Senior Product Designer", + "location": "Vancouver, Canada", + "bio": "Developer who believes in clean code, clear coffee, and the occasional snake pun. Automating the boring stuff one script at a time." + }, + { + "username": "SofiaAlc", + "reputation": 1, + "location": "Vancouver, Canada", + "bio": "Developer who believes in clean code, clear coffee, and the occasional snake pun. Automating the boring stuff one script at a time." + }, + { + "username": "SofiaAlc", + "reputation": "1", + "gold": 8, + "silver": 12, + "bronze": 4 } - ] - } - ], - "large": [ - { - "username": "SofiaAlc", - "reputation": "1,775", - "gold": 8, - "silver": 12, - "bronze": 4, - "badges": [ - { - "class": "s-badge__moderator", - "text": "Mod" + ], + "sizes": [ + { + "size": "small", + "class": ".s-user-card__sm", + "description": "Use the small variant for space-constrained areas, such as post summaries, or to establish visual hierarchy for secondary content like comments and replies." + }, + { + "size": "default", + "class": "N/A", + "description": "Use the default variant when the user needs a more primary focus of the content. This style features a larger avatar to establish top-level hierarchy like question and answer authors." + }, + { + "size": "large", + "class": ".s-user-card__lg", + "description": "Use the large variant when space permits and more detailed information is desired" } - ], - "recognition": "Recognized by AudioBubble", - "role": "Senior Product Designer", - "location": "Vancouver, Canada", - "bio": "Developer who believes in clean code, clear coffee, and the occasional snake pun. Automating the boring stuff one script at a time." - }, - { - "username": "SofiaAlc", - "reputation": 1, - "location": "Vancouver, Canada", - "bio": "Developer who believes in clean code, clear coffee, and the occasional snake pun. Automating the boring stuff one script at a time." - }, - { - "username": "SofiaAlc", - "reputation": "1", - "gold": 8, - "silver": 12, - "bronze": 4 - } - ], - "sizes": [ - { - "size": "small", - "class": ".s-user-card__sm", - "description": "Use the small variant for space-constrained areas, such as post summaries, or to establish visual hierarchy for secondary content like comments and replies." - }, - { - "size": "default", - "class": "N/A", - "description": "Use the default variant when the user needs a more primary focus of the content. This style features a larger avatar to establish top-level hierarchy like question and answer authors." - }, - { - "size": "large", - "class": ".s-user-card__lg", - "description": "Use the large variant when space permits and more detailed information is desired" - } - ], - "original-poster": [ - { - "username": "SofiaAlc", - "timestamp": "asked 2 hr ago", - "reputation": "1,775", - "gold": 8, - "silver": 12, - "bronze": 4, - "size": "small" - }, - { - "username": "SofiaAlc", - "timestamp": "asked 2 hr ago", - "reputation": "1,775", - "gold": 8, - "silver": 12, - "bronze": 4 - }, - { - "username": "SofiaAlc", - "reputation": "1,775", - "gold": 8, - "silver": 12, - "bronze": 4, - "badges": [ - { - "class": "s-badge__moderator", - "text": "Mod" + ], + "original-poster": [ + { + "username": "SofiaAlc", + "timestamp": "asked 2 hr ago", + "reputation": "1,775", + "gold": 8, + "silver": 12, + "bronze": 4, + "size": "small" + }, + { + "username": "SofiaAlc", + "timestamp": "asked 2 hr ago", + "reputation": "1,775", + "gold": 8, + "silver": 12, + "bronze": 4 + }, + { + "username": "SofiaAlc", + "reputation": "1,775", + "gold": 8, + "silver": 12, + "bronze": 4, + "badges": [ + { + "class": "s-badge__moderator", + "text": "Mod" + } + ] } - ] - } - ], - "new-contributor": [ - { - "username": "SofiaAlc", - "timestamp": "asked 2 hr ago", - "reputation": "1,775", - "gold": 8, - "silver": 12, - "bronze": 4, - "size": "small", - "badges": [ - { - "class": "s-badge__new", - "text": "New" + ], + "new-contributor": [ + { + "username": "SofiaAlc", + "timestamp": "asked 2 hr ago", + "reputation": "1,775", + "gold": 8, + "silver": 12, + "bronze": 4, + "size": "small", + "badges": [ + { + "class": "s-badge__new", + "text": "New" + } + ] + }, + { + "username": "SofiaAlc", + "timestamp": "asked 2 hr ago", + "reputation": "1,775", + "gold": 8, + "silver": 12, + "bronze": 4, + "badges": [ + { + "class": "s-badge__new", + "text": "New" + } + ] + }, + { + "username": "SofiaAlc", + "timestamp": "asked 2 hr ago", + "reputation": "1,775", + "gold": 8, + "silver": 12, + "bronze": 4, + "badges": [ + { + "class": "s-badge__new", + "text": "New" + }, + { + "class": "s-badge__staff", + "text": "Staff" + } + ] } - ] - }, - { - "username": "SofiaAlc", - "timestamp": "asked 2 hr ago", - "reputation": "1,775", - "gold": 8, - "silver": 12, - "bronze": 4, - "badges": [ - { - "class": "s-badge__new", - "text": "New" + ], + "deleted-user": [ + { + "username": "SofiaAlc", + "timestamp": "asked 2 hr ago", + "size": "small" + }, + { + "username": "SofiaAlc", + "timestamp": "asked 2 hr ago" } - ] - }, - { - "username": "SofiaAlc", - "timestamp": "asked 2 hr ago", - "reputation": "1,775", - "gold": 8, - "silver": 12, - "bronze": 4, - "badges": [ - { - "class": "s-badge__new", - "text": "New" - }, - { - "class": "s-badge__staff", - "text": "Staff" + ], + "states": [ + { + "name": "Original Poster", + "class": "s-user-card--username__op", + "description": "This label identifies the author of the primary post (such as the Question asker) when they appear in secondary contexts, like comment threads." + }, + { + "name": "New Contributor", + "class": "N/A", + "description": "This label appears on a user's first-ever question or answer to signal that they are new to the platform." + }, + { + "name": "Deleted user", + "class": "s-user-card__deleted", + "description": "When a user is deleted, we still need to show their name, but we strip the meta data." } - ] - } - ], - "deleted-user": [ - { - "username": "SofiaAlc", - "timestamp": "asked 2 hr ago", - "size": "small" - }, - { - "username": "SofiaAlc", - "timestamp": "asked 2 hr ago" - } - ], - "states": [ - { - "name": "Original Poster", - "class": "s-user-card--username__op", - "description": "This label identifies the author of the primary post (such as the Question asker) when they appear in secondary contexts, like comment threads." - }, - { - "name": "New Contributor", - "class": "N/A", - "description": "This label appears on a user's first-ever question or answer to signal that they are new to the platform." - }, - { - "name": "Deleted user", - "class": "s-user-card__deleted", - "description": "When a user is deleted, we still need to show their name, but we strip the meta data." - } - ], - "recognized-member": [ - { - "username": "SofiaAlc", - "timestamp": "asked 2 hr ago", - "reputation": "1,775", - "gold": 8, - "silver": 12, - "bronze": 4, - "recognitionIcon": "StarVerifiedSm", - "size": "small" - }, - { - "username": "SofiaAlc", - "timestamp": "asked 2 hr ago", - "reputation": "1,775", - "gold": 8, - "silver": 12, - "bronze": 4, - "recognitionIcon": "StarVerifiedSm", - "size": "small", - "badges": [ - { - "class": "s-badge__staff", - "text": "Staff" + ], + "recognized-member": [ + { + "username": "SofiaAlc", + "timestamp": "asked 2 hr ago", + "reputation": "1,775", + "gold": 8, + "silver": 12, + "bronze": 4, + "recognitionIcon": "StarVerifiedSm", + "size": "small" + }, + { + "username": "SofiaAlc", + "timestamp": "asked 2 hr ago", + "reputation": "1,775", + "gold": 8, + "silver": 12, + "bronze": 4, + "recognitionIcon": "StarVerifiedSm", + "size": "small", + "badges": [ + { + "class": "s-badge__staff", + "text": "Staff" + } + ] + }, + { + "username": "SofiaAlc", + "timestamp": "asked 2 hr ago", + "reputation": "1,775", + "gold": 8, + "silver": 12, + "bronze": 4, + "recognitionIcon": "StarVerifiedSm" + }, + { + "username": "SofiaAlc", + "timestamp": "asked 2 hr ago", + "reputation": "1,775", + "gold": 8, + "silver": 12, + "bronze": 4, + "recognitionIcon": "StarVerifiedSm", + "badges": [ + { + "class": "s-badge__staff", + "text": "Staff" + } + ] } - ] - }, - { - "username": "SofiaAlc", - "timestamp": "asked 2 hr ago", - "reputation": "1,775", - "gold": 8, - "silver": 12, - "bronze": 4, - "recognitionIcon": "StarVerifiedSm" - }, - { - "username": "SofiaAlc", - "timestamp": "asked 2 hr ago", - "reputation": "1,775", - "gold": 8, - "silver": 12, - "bronze": 4, - "recognitionIcon": "StarVerifiedSm", - "badges": [ - { - "class": "s-badge__staff", - "text": "Staff" + ], + "awarded": [ + { + "username": "SofiaAlc", + "award": "fc-orange-400", + "position": "third", + "timestamp": "asked 2 hr ago", + "size": "small" + }, + { + "username": "SofiaAlc", + "timestamp": "asked 2 hr ago", + "reputation": "1,775", + "gold": "", + "silver": "", + "bronze": "", + "award": "fc-yellow-400", + "position": "second" + }, + { + "username": "SofiaAlc", + "timestamp": "asked 2 hr ago", + "reputation": "1,775", + "gold": "8", + "silver": "12", + "bronze": "4", + "award": "fc-blue-400", + "position": "first", + "badges": [ + { + "class": "s-badge__moderator", + "text": "Mod" + } + ] } - ] - } - ], - "awarded": [ - { - "username": "SofiaAlc", - "award": "fc-orange-400", - "timestamp": "asked 2 hr ago", - "size": "small" - }, - { - "username": "SofiaAlc", - "timestamp": "asked 2 hr ago", - "reputation": "1,775", - "gold": "", - "silver": "", - "bronze": "", - "award": "fc-yellow-400" - }, - { - "username": "SofiaAlc", - "timestamp": "asked 2 hr ago", - "reputation": "1,775", - "gold": "8", - "silver": "12", - "bronze": "4", - "award": "fc-blue-400", - "badges": [ - { - "class": "s-badge__moderator", - "text": "Mod" + ], + "additional-bling": [ + { + "name": "Recognized Member", + "class": "s-user-card--recognition-additional-bling", + "description": "This label appears on within a Collective question post to signal that they are a Recognized Member." + }, + { + "name": "Awarded", + "class": "N/A", + "description": "This icon appears next to a user when they are within the top 3 positions of a Collective’s leaderboard." } - ] - } - ], - "additional-bling": [ - { - "name": "Recognized Member", - "class": "s-user-card--recognition-additional-bling", - "description": "This label appears on within a Collective question post to signal that they are a Recognized Member." - }, - { - "name": "Awarded", - "class": "N/A", - "description": "This icon appears next to a user when they are within the top 3 positions of a Collective’s leaderboard." - } - ] -} \ No newline at end of file + ] +} diff --git a/packages/stacks-docs/product/components/user-cards.html b/packages/stacks-docs/product/components/user-cards.html index 8752c28e9a..bde2e3dc6a 100644 --- a/packages/stacks-docs/product/components/user-cards.html +++ b/packages/stacks-docs/product/components/user-cards.html @@ -1089,7 +1089,7 @@ {% endfor %} {% endif %} - + {% icon "AchievementsSm", native %} {% if user.reputation or user.gold or user.silver or user.bronze %}