feat(post-summary): update to SHINE styles #2137

dancormier · 2026-01-20T23:10:04Z

SPARK-75, Figma

This PR updates the Post Summary to the latest SHINE styles. cc @ycantu

Note

See also this PR which includes updated visual regression test images.

Deploy previews

TODO

Open questions/requests

How should we handle the :visited title given that we cannot manipulate the font-weight property in this context?
- Punting on this
We need the following icons
- Answer16
- Answer16Fill
- Shield (using legacy icon for now)

changeset-bot · 2026-01-20T23:10:09Z

🦋 Changeset detected

Latest commit: 85d29f8

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-20T23:10:19Z

👷 Deploy Preview for stacks processing.

Name	Link
🔨 Latest commit	`85d29f8`
🔍 Latest deploy log	https://app.netlify.com/projects/stacks/deploys/69827cf370f964000818963d

netlify · 2026-01-20T23:10:19Z

👷 Deploy Preview for stacks-svelte processing.

Name	Link
🔨 Latest commit	`85d29f8`
🔍 Latest deploy log	https://app.netlify.com/projects/stacks-svelte/deploys/69827cf3ffe01600083a30e3

giamir

I skimmed through it and everything seems in order from a code perspective @dancormier. Thanks for tackling this huge component.

The only thing I observed is that for the Svelte component the readableTimestamp tooltip is somehow not tabbable via keyboard.

MIGRATION_GUIDE.md

giamir · 2026-02-02T11:59:21Z

packages/stacks-classic/lib/components/post-summary/post-summary.less

-    &&__minimal {
-        .s-post-summary--content {
-            width: 100%;
+    @psx-container-sm: 28rem;


Curiosity: How did we settle on 448px as a breakpoint?

I chose it after some trial and error. I figured we needed a breakpoint that was larger than the sidebar width (21.5rem, 344px). I tried that but felt like it looked pretty cluttered at just above that breakpoint. This image is at with the container right at 345px with the breakpoint at 344px:

For that reason, I chose the next defined size up in our library (the 28rem). That said, I could be convinced that this breakpoint should match up with the sidebar size. Any strong opinions on that?

Sounds good to me, it is just not one of our "official" breakpoints meaning that it will change the layout at a custom viewport size compared to other things. I guess it is fine. I wonder though if the sm breakpoint (780px one) could have suffice. In the sense that for viewports below that size we show the compact version even if in theory there is the estate to show more.
Anyway I am good with what we have. This is really a NIT. Thanks Dan.

CGuindon

YAY!!! Looking good! I only have small nit picky stuff:

I noticed the line-height on the description and title are 18px — which feels a bit tight. We increased the base line-height to 140% which should put the line-height of the description to around 19.6px (we probably rounded up to 20px as that's what I'm seeing on the typography page for Body1). I think we had the line-height not centralized before so wondering if this is a case if it inheriting the custom old vs new here.

I'm seeing a 6px gutter used as spacing in between each line. Unfortunately (sorry), the spacing here isn't all the same. We have 8px, 4px and 10px amounts between each line. (Note the bottom tags container does have a sneaky 2px margin top if that helps or not with the math).
There should be an 8px gap between each tag (instead of 4).

The gutter between the score box and the container with the answer data should be 8px (instead of 6).
The font and icon color for the answer data (when not accepted) should be black-400

Similar to how you have the classes listed out at the top, I think it might be worth listing out all the class options above each example (within each section). For example, showing the truncate classes and the state classes (danger, warning, etc) all listed out in a table between description and code example. I found it a bit hard sometimes to see find the "different" classes within the code examples that show everything.

Border left on answers should be black-200 (instead of 150)

Co-authored-by: Giamir Buoncristiani <gbuoncristiani@stackoverflow.com>

dancormier · 2026-02-02T20:27:02Z

Thanks for the review @CGuindon! I've address everything you mentioned. Let me know if I missed anything!

CGuindon · 2026-02-02T21:35:33Z

@dancormier Sorry I probably miscommunicate the line-height. It looks good on the description now but still needs that 140% on the title of the post as well. Should be 25px based on our new sizing. Looks like you have 20px for both

CGuindon · 2026-02-02T21:48:42Z

UPDATE: Ellen preferred above and it won't be as common so leaving as is for now.

For the Responsive (small screen) version of the States (with badges like Review, Draft): I'm tempted to keep the badge in line with the metadata and not make the height of the whole post bigger. (Just want to confirm with Ellen she feels the same). My thinking would be to do something more like the Draft example than what we have now — I also realize we didn't have this in the Figma mocked up. (sorry)

dancormier · 2026-02-03T19:25:06Z

@CGuindon sorry for the oversight! I've updated the title to have a 25px (aka 1.563rem) line height.

CGuindon

Just the Answer icon missing (should be released now in the icons package) but otherwise LGTM 🙌

CGuindon

🙌

mukunku

Wow this is amazing stuff. Great work, Dan!

Left one small comment below but otherwise flawless 🤌

mukunku · 2026-02-03T21:16:24Z

packages/stacks-docs/_includes/post-summary-item.html

+                    {% else %}
+                        {% icon "Answer16" %}
+                    {% endif %}
+                    {{ data.answers | default: 1 }}


Should this be answerCount? On the smallest page size the answer count gets rendered as [object Object]

Suggested change

{{ data.answers | default: 1 }}

{{ data.answerCount | default: 1 }}

* Update post summary visual test regression images * Update test images

feat(post-summary): update to SHINE styles

487b051

dancormier added the do-not-merge Pull requests that are in progress and should not be merged yet label Jan 20, 2026

dancormier changed the base branch from develop to beta January 20, 2026 23:10

dancormier added 3 commits January 20, 2026 18:13

rename s-psx to s-post-summary

e7907e1

Styling tweaks to ignored, deleted

8842530

Add docs todos

9f33f49

dancormier changed the title ~~Spark 75/post summary~~ feat(post-summary): update to SHINE styles Jan 21, 2026

dancormier added 15 commits January 21, 2026 15:00

Docs tweaks

e1a1b3d

docs updates; inline answers; and more!

808cca4

Minor tweaks

8660549

Initial updates to Svelte component

2bc3810

More mostly svelte changes

d64fb50

cleanup

4bfaecb

More cleanup

06c26da

docs 'n' tweaks

b690108

Update migration guide

12e96af

Changeset

8b32408

Update svelte tests

92d04d9

Merge branch 'beta' into SPARK-75/post-summary

d031fd7

tweak timestamp

e891c61

minor fixes

891cea8

Update stacks classic tests

b1b096e

dancormier requested review from CGuindon, giamir, mukunku and ttaylor-stack January 30, 2026 23:29

dancormier removed the do-not-merge Pull requests that are in progress and should not be merged yet label Jan 30, 2026

dancormier mentioned this pull request Jan 30, 2026

test(post-summary): update test images #2162

Merged

dancormier marked this pull request as ready for review January 30, 2026 23:32

formatting

9cd6494

giamir approved these changes Feb 2, 2026

View reviewed changes

CGuindon requested changes Feb 2, 2026

View reviewed changes

dancormier and others added 4 commits February 2, 2026 12:45

Update MIGRATION_GUIDE.md

41f7be5

Co-authored-by: Giamir Buoncristiani <gbuoncristiani@stackoverflow.com>

Minor fixes addressing review

03e96d2

Update line-height for excerpt, title

179c0a4

fix lint issues

e29d169

Update title line height

a9b9180

Lint

6dae49f

CGuindon approved these changes Feb 3, 2026

View reviewed changes

Update stacks-icons for those sweet answer icons

eaeeced

CGuindon approved these changes Feb 3, 2026

View reviewed changes

mukunku reviewed Feb 3, 2026

View reviewed changes

test(post-summary): update test images (#2162)

85d29f8

* Update post summary visual test regression images * Update test images

	{{ data.answers \| default: 1 }}
	{{ data.answerCount \| default: 1 }}

feat(post-summary): update to SHINE styles #2137

Are you sure you want to change the base?

feat(post-summary): update to SHINE styles #2137

Uh oh!

Conversation

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

Uh oh!

Deploy previews

TODO

Open questions/requests

Uh oh!

changeset-bot bot commented Jan 20, 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 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

👷 Deploy Preview for stacks processing.

Uh oh!

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

Uh oh!

👷 Deploy Preview for stacks-svelte processing.

Uh oh!

giamir left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

giamir Feb 2, 2026

Choose a reason for hiding this comment

Uh oh!

dancormier Feb 2, 2026

Choose a reason for hiding this comment

Uh oh!

giamir Feb 3, 2026

Choose a reason for hiding this comment

Uh oh!

CGuindon left a comment

Choose a reason for hiding this comment

Uh oh!

dancormier commented Feb 2, 2026

Uh oh!

CGuindon commented Feb 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

CGuindon commented Feb 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

dancormier commented Feb 3, 2026

Uh oh!

CGuindon left a comment

Choose a reason for hiding this comment

Uh oh!

CGuindon left a comment

Choose a reason for hiding this comment

Uh oh!

mukunku left a comment

Choose a reason for hiding this comment

Uh oh!

mukunku Feb 3, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

dancormier commented Jan 20, 2026 •

edited

Loading

changeset-bot bot commented Jan 20, 2026 •

edited

Loading

netlify bot commented Jan 20, 2026 •

edited

Loading

netlify bot commented Jan 20, 2026 •

edited

Loading

CGuindon commented Feb 2, 2026 •

edited

Loading

CGuindon commented Feb 2, 2026 •

edited

Loading