Skip to content

feat(sidebar-widget): initial SHINE design changes #2155

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
mukunku wants to merge 20 commits into
base: beta
Choose a base branch
from
+165 −1,774
Open

feat(sidebar-widget): initial SHINE design changes #2155

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
e02c58e
first draft
mukunku Jan 28, 2026
923526c
update tests
mukunku Jan 28, 2026
d89bd7e
Merge branch 'beta' into sal/SPARK-79
mukunku Jan 28, 2026
936b6c1
update baseline
mukunku Jan 28, 2026
842d142
lint
mukunku Jan 28, 2026
c04482f
Create fair-chicken-joke.md
mukunku Jan 28, 2026
e87c12e
update migration guide
mukunku Jan 28, 2026
de20945
fix baseline
mukunku Jan 28, 2026
6a0fa00
fix heading sizes
mukunku Jan 28, 2026
b99cd20
fix header links
mukunku Jan 28, 2026
7a09401
update baseline
mukunku Jan 29, 2026
ecae04a
center the basic example
mukunku Jan 29, 2026
ac3283c
remove all variants besides the base style
mukunku Jan 30, 2026
cf363be
adjust tests
mukunku Jan 30, 2026
ee67f63
prune test images
mukunku Jan 30, 2026
5083c35
add href
mukunku Jan 30, 2026
efb2b48
pr feedback
mukunku Jan 30, 2026
e7e4f00
6px title gap
mukunku Jan 30, 2026
6cbc8a2
Merge branch 'beta' into sal/SPARK-79
mukunku Jan 30, 2026
38625af
update baseline
mukunku Jan 30, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
5 changes: 5 additions & 0 deletions .changeset/fair-chicken-joke.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@stackoverflow/stacks": patch
---

feat(sidebar-widget): initial SHINE design changes
7 changes: 7 additions & 0 deletions MIGRATION_GUIDE.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -143,6 +143,13 @@ The menu component has been updated to use new class names and structure. The fo
#### Select
- `md` and `xl` sizes removed

#### Sidebar Widget
- `s-sidebarwidget__items` renamed to `s-sidebarwidget--items` and must be nested inside `s-sidebarwidget--content` now
- `s-sidebarwidget--item` is only supported for navigation items now
- `s-sidebarwidget__small-bold-text` class removed
- Table layout support removed
- Expandable sidebar support removed

#### Tags
- `.s-tag__xs` removed
- `.s-tag__md` removed
Expand Down
222 changes: 26 additions & 196 deletions packages/stacks-classic/lib/components/sidebar-widget/sidebar-widget.less
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,218 +1,48 @@
.s-sidebarwidget {
// COMPONENT-SPECIFIC CUSTOM PROPERTIES
--_sw-bc: var(--bc-medium);

// MODIFIERS
&:not(.s-anchors) {
a:not(.button):not(.s-tag):not(.post-tag):not(.s-btn):not(.s-sidebarwidget--action):not(.s-user-card--link) {
&,
&:visited {
color: var(--black-600);
}
}
}

// VARIANTS
.alternate-color(blue);
.alternate-color(yellow);
.alternate-color(green);
@headings: h1, h2, h3, h4, h5, h6;

.s-sidebarwidget {
// CHILD ELEMENTS
& &--action {
color: var(--blue-400);
font-size: var(--fs-body1);
font-weight: normal;
margin-left: auto;
}

& &--content {
&:not(table) {
&:not(.s-sidebarwidget__items),
&:not(.s-sidebarwidget__block-items) .s-sidebarwidget--item {
display: flex;
}
}

+ .s-sidebarwidget--content {
border-top: var(--su-static1) solid var(--bc-light);
}

&.s-sidebarwidget__items {
&,
&.s-sidebarwidget__block-items .s-sidebarwidget--item {
display: block;
}

padding: var(--su6) var(--su16); // the items themselves provide part of the spacing, so the content padding needs to account for that
& &--content {
.s-sidebarwidget--action {
font-size: var(--fs-fine);
margin-left: var(--su16);
align-self: flex-start;
}

&:active {
outline: none;
}


margin: 0;
padding: var(--su16);
display: flex;
padding: var(--su12) 0 var(--su16) 0;
font-size: var(--fs-body2);
}

& &--header {
&:first-child {
border-top: none;
}

+ .s-expandable:not(.is-expanded) {
margin-bottom: var(--su16);
}

&.s-sidebarwidget {
&__expanding-control {
&:before {
border: calc(var(--su-static4) + var(--su-static1)) solid transparent;
border-left-color: var(--black-400);
border-right-width: 0;
content: '';
float: left;
margin-right: var(--su12);
margin-top: calc(calc(var(--lh-base) * 1em) / 2 - 5px); // 1.3 is our standard line height
transition: transform 0.3s cubic-bezier(0.4, 0.4, 0.6, 1);
}

&[aria-expanded='true']:before {
transform: rotate(90deg);
}

cursor: pointer;
}

&__small-bold-text {
.s-sidebarwidget--action {
font-weight: normal;
line-height: calc(var(--lh-base) * var(--fs-caption)); // line-height should be the same as in the outside element, so the header and action baselines line up
}

font-size: var(--fs-caption);
font-weight: bold;
}
> @{headings} {
margin: 0;
padding-right: var(--su6);
font-size: var(--fs-body1);
font-weight: 500;
}

&:active {
outline: none;
.s-sidebarwidget--action {
margin-left: auto;
}

align-items: center;
border-top: var(--su-static1) solid var(--bc-light);
color: var(--black-600);
display: flex;
font-size: var(--fs-body2);
font-weight: bold;
justify-content: flex-start;
line-height: var(--lh-xs);
margin: 0;
padding: var(--su16) var(--su16) 0;
padding: var(--su4) 0;
}

& &--item {
&,
& > :first-child {
&[aria-current="true"],
&[aria-current="page"] {
&:before {
border-left-color: var(--theme-primary);
border-left-style: solid;
border-left-width: calc(var(--su-static1) * 3); // 3px
content: '';
height: calc(100% + var(--su16));
left: 0;
margin-left: var(--sun16); // the orange selection indicator overlaps with the widget border
margin-top: var(--sun8);
position: absolute;
}

a { // TODO: this isn't the best way to go about this. There should be a "is current" highlight without font modification for more complex cases
&,
&:visited {
color: inherit;
}
}

color: var(--black);
font-weight: bold;
position: relative;
}
& &--footer {
.s-sidebarwidget--action {
flex: 1;
}

margin: var(--su12) 0;
}

& &--subnav {
li {
&[aria-current="page"],
&[aria-current="true"] {
a {
&,
&:visited {
color: inherit;
}
}

#stacks-internals #bullet-arrow(var(--theme-primary));
color: var(--black);
font-weight: bold;
}

#stacks-internals #bullet-arrow(var(--black-225));
background-position: 0 calc((1.2em - calc(var(--su-static8) + var(--su-static2))) / 2); // 0 ((1.2em - 10) / 2)
background-repeat: no-repeat;
background-size: auto calc(var(--su-static8) + var(--su-static2)); // auto 10px
margin-top: var(--su-static12);
padding-left: var(--su-static16);
}

list-style-type: none;
margin-left: var(--su8);
padding-left: 0;

display: flex;
font-size: var(--fs-body2);
}

& table&--content&__items {
tr.s-sidebarwidget--item {
td {
padding: 0;
}

display: table-row;
}

border-collapse: separate;
border-spacing: var(--su16) var(--su12);
padding: var(--su6) 0 0;
& &--action:is(a, button) {
white-space: nowrap;
}

background-color: var(--white);
border: var(--su-static1) solid var(--_sw-bc);
border-radius: var(--br-md);
font-size: var(--fs-body1);
}

// COLOR ALTERNATIVES
.alternate-color(@name) {
&.s-sidebarwidget__@{name} {
--_sw-bc: var(~"--@{name}-300");

.highcontrast-mode({
--_sw-bc: var(~"--@{name}-500");
});

&:after,
.s-sidebarwidget--content + .s-sidebarwidget--content,
.s-sidebarwidget--header {
border-color: var(--_sw-bc);
}

.s-sidebarwidget--header {
color: var(--fc-medium);
}

background-color: var(~"--@{name}-100");
border-color: var(--_sw-bc);
}
}
104 changes: 17 additions & 87 deletions packages/stacks-classic/lib/components/sidebar-widget/sidebar-widget.test.setup.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,108 +1,38 @@
import type { TestVariationArgs } from "../../test/test-utils";
import { IconAward, IconPlus } from "@stackoverflow/stacks-icons/icons";
import "../../index";

const getChild = (child?: string): string => {
switch (child) {
case "accordions":
return `<h2
class="s-sidebarwidget--header s-sidebarwidget__expanding-control s-sidebarwidget__small-bold-text"
aria-controls="expanded"
aria-expanded="true"
aria-label="toggle expanded"
data-controller="s-expandable-control"
tabindex="0">
Expanded section
</h2>
<div class="s-expandable is-expanded" id="expanded">
<div class="s-expandable--content">
<div class="s-sidebarwidget--content">This is expanded</div>
</div>
case "basic":
return `
<div class="s-sidebarwidget--header">
<h4>${IconAward} Community Achievements</h4>
<button class="s-link s-sidebarwidget--action">
${IconPlus} Track
</button>
</div>
<h2
class="s-sidebarwidget--header s-sidebarwidget__expanding-control s-sidebarwidget__small-bold-text"
aria-controls="collapsed"
aria-expanded="false"
aria-label="toggle collapsed"
data-controller="s-expandable-control"
tabindex="0">
Collapsed section
</h2>
<div class="s-expandable" id="collapsed">
<div class="s-expandable--content">
<div class="s-sidebarwidget--content">This is collapsed</div>
</div>
</div>`;
case "items":
return `<div class="s-sidebarwidget--content s-sidebarwidget__items">
<div class="s-sidebarwidget--item">
<span><strong>bkelly</strong> contributed 6 edits</span>
</div>
<div class="s-sidebarwidget--item">
<span><strong>giamir</strong> contributed 7 edits</span>
<div class="s-sidebarwidget--content">
You’ve earned 3 new badges this week! Keep contributing to unlock more achievements and privileges within the community.
<button class="s-btn s-btn__tonal s-sidebarwidget--action">View all badges</button>
</div>
<div class="s-sidebarwidget--item">
<span><strong>dc</strong> contributed 3 edits</span>
</div>
</div>`;
case "nav":
return `<h2 class="s-sidebarwidget--header">Personal Information</h2>
<ul class="s-sidebarwidget--content s-sidebarwidget__items">
<li class="s-sidebarwidget--item"><a href="#">Nav item 1</a></li>
<li class="s-sidebarwidget--item d-block">
<a href="#" aria-current="true">Nav item 2</a>
<ul class="s-sidebarwidget--subnav">
<li><a href="#">Subnav item 1</a></li>
<li aria-current="page">
<a href="#">Subnav item 3. This one's long, selected, and wraps.</a>
</li>
<li><a href="#">Subnav item 3</a></li>
</ul>
</li>
<li class="s-sidebarwidget--item"><a href="#">Nav item 3</a></li>
</ul>
<h2 class="s-sidebarwidget--header">Site Settings</h2>
<ul class="s-sidebarwidget--content s-sidebarwidget__items">
<li class="s-sidebarwidget--item"><a href="#">Preferences</a></li>
<li class="s-sidebarwidget--item"><a href="#">Flair</a></li>
</ul>`;
case "small-bold-headers":
return `<h2 class="s-sidebarwidget--header s-sidebarwidget__small-bold-text">Small bold text</h2>
<div class="s-sidebarwidget--content">Widget content</div>`;
case "table":
return `<table class="s-sidebarwidget--content s-sidebarwidget__items">
<tbody>
<tr class="s-sidebarwidget--item">
<td class="tc-black-350">asked</td>
<td>4 years, 4 months ago</td>
</tr>
<tr class="s-sidebarwidget--item">
<td class="tc-black-350">viewed</td>
<td>7,437 times</td>
</tr>
<tr class="s-sidebarwidget--item">
<td class="tc-black-350">active</td>
<td>2 months ago</td>
</tr>
</tbody>
</table>`;
<div class="s-sidebarwidget--footer">
<button class="s-btn s-btn__tonal s-sidebarwidget--action">See your progress</button>
</div>`;
default:
return `<div class="s-sidebarwidget--content">12,345,678</div>`;
}
};

const testArgs: TestVariationArgs = {
baseClass: "s-sidebarwidget",
variants: ["blue", "green", "yellow"],
variants: [],
modifiers: {
global: ["ws3"],
},
children: {
"default": getChild(),
"accordions": getChild("accordions"),
"items": getChild("items"),
"nav": getChild("nav"),
"small-bold-headers": getChild("small-bold-headers"),
"table": getChild("table"),
default: getChild(),
basic: getChild("basic"),
},
options: {
includeNullModifier: false,
Expand Down
3 changes: 0 additions & 3 deletions ...stacks-classic/screenshots/Chromium/baseline/s-sidebarwidget-dark-blue-ws3-accordions.ico
View file
Open in desktop

This file was deleted.

3 changes: 0 additions & 3 deletions ...ages/stacks-classic/screenshots/Chromium/baseline/s-sidebarwidget-dark-blue-ws3-items.ico
View file
Open in desktop

This file was deleted.

Loading