Bump smoot-design for the outlined chip fix, keeping the homepage trending chips unchanged by ChristopherChudzicki · Pull Request #4136 · mitodl/mit-learn

ChristopherChudzicki · 2026-10-21T20:43:32Z

What are the relevant tickets?

None directly; related to Channel page redesign: filter counts, the search card, the tab row, an empty state, and a white topic hero #4133

Note

Update smoot-design to a semantic release before merging

Description (What does it do?)

Bumps smoot-design to 6.39.1, which carries mitodl/smoot-design#279 and moves outlined chips to the design's Dark Gray 2 text, and keeps the homepage's trending chips exactly as they are.

The topics page's sub-topic chips and the program page's label chip get darker text, as the design has it.
The homepage's trending chips are a separate design (Figma's TrendingPill). On their own, the smoot change would darken their hover text; this pins it to the Dark Gray 1 they render today.

Implementation details

smoot's .MuiChip-clickable:hover rule (specificity 0,3,0) outranks TrendingChip's &:hover (0,2,0), the same reason its background and border overrides already carry !important. So the Dark Gray 2 that TrendingChip declared for outlinedWhite hover never applied, and Explore All (outlined) declared none.
color: darkGray1 !important on both variants' hover. On smoot 6.38.0 this changes nothing; on 6.39.1 it keeps today's colour.
ol-components declares smoot as an exact-version peer, so it's bumped alongside main.

Screenshots (if appropriate):

Before: main with smoot 6.38.0. After: this branch with 0.0.0-8f8796b, the prerelease of #279; 6.39.1's theme is identical to it.

Homepage trending chips — (UNCHANGED)

Topics page sub-topic chips — darker text

Program page label — darker text

Contract admin status badges — unchanged

How can this be tested?

On the homepage, hover each trending chip (Recently Added through Explore All): the text darkens to the same grey as on main, not to near-black.
/topics/: the sub-topic chips' text is darker than on main, at rest and on hover, at desktop and mobile widths.
A program page, e.g. /programs/program-v1:MITxT+SCM: the label above the title is darker.

Agent-Run Checks

Computed styles and pixels, local dev, main + 6.38.0 vs this branch + 0.0.0-8f8796b (the prerelease of Distinguish deps vs devDeps + make each package.json specify own dependencies #279; src/components/ThemeProvider/ is unchanged between it and 6.39.1):
- Homepage trending chips (6), at rest and with Recently Added and Explore All hovered: 0 changes.
- Topics page sub-topic chips (8, desktop and mobile, at rest and hovered) and the program label: text rgb(64, 70, 76) → rgb(33, 35, 38); borders, fills and sizes unchanged.
- Contract admin status badges: 0 changes.
The pin alone on 6.38.0: 0 changes on every surface above. smoot's chip change without the pin: the hover text and icon of all 6 homepage chips change to rgb(33, 35, 38).
prek hooks pass.

Additional Context

main is already on 6.39.0 (Mount the flag-gated Contact Us launcher #4139), and 6.39.1 is 6.39.0 plus fix: match outlined chips' text and close icon to the Chips design smoot-design#279 only, so this bump carries nothing but the chip change.
TrendingChip's outlined hover also declares a silverGray border that never applies (smoot's silverGrayDark wins, before and after). I left it, since fixing it would change the homepage.

🤖 Co-authored with Claude Code

agent-optibot

Summary

Trending search chips now retain readable dark text across hover states, while the frontend adopts an updated Smoot design-system prerelease.

Key Changes

Updates Smoot design-system dependencies to prerelease 0.0.0-8f8796b.
Applies dark hover text to filled trending chips.
Applies dark hover text to outlined trending chips.

All Relevant File Changes (click to expand)

frontends/main/package.json: Updates the application’s Smoot design-system dependency.
frontends/main/src/page-components/HeroSearch/HeroSearch.tsx: Adjusts hover text colors for trending chip variants.
frontends/ol-components/package.json: Updates the shared components’ Smoot design-system peer dependency.
yarn.lock: Resolves the new Smoot design-system version and updated dependency checksums.

💬 Feedback & Commands

Share feedback on my comments with 👍 👎 — I'll stop raising issues you push back on. Think I missed something? Adjust my sensitivity →

5 things I can do →

#optibot review — I'll re-review your latest changes (incremental)
#optibot full review — I'll re-review the entire PR from scratch
#optibot fix — I'll apply my suggested fixes to your code
#optibot compliance — I'll run a compliance check on your changes
#optibot release notes — I'll write up release notes for your production release

💡 Tip: I can audit every dependency change before it reaches main — one compromised package can take down your entire system. Try Supply Chain Agent.

🔄 re-review this PR

github-actions · 2026-10-21T20:43:54Z

OpenAPI Changes

No changes detected

View full changelog

Unexpected changes? Ensure your branch is up-to-date with main (consider rebasing).

agent-optibot

Summary

The frontend now uses a newer Smoot Design prerelease, bringing updated design-system behavior. Trending search chips also retain the intended dark text color across hover states.

Key Changes

Upgrades Smoot Design dependencies to prerelease build 0.0.0-8f8796b
Ensures filled and outlined trending chips use consistent hover text colors

All Relevant File Changes (click to expand)

frontends/main/package.json: Updates the Smoot Design dependency to a prerelease build
frontends/main/src/page-components/HeroSearch/HeroSearch.tsx: Sets dark hover text for trending chips
frontends/ol-components/package.json: Updates the Smoot Design peer dependency
yarn.lock: Resolves the new Smoot Design package and updated dependency checksums

💬 Feedback & Commands

Share feedback on my comments with 👍 👎 — I'll stop raising issues you push back on. Think I missed something? Adjust my sensitivity →

5 things I can do →

#optibot review — I'll re-review your latest changes (incremental)
#optibot full review — I'll re-review the entire PR from scratch
#optibot fix — I'll apply my suggested fixes to your code
#optibot compliance — I'll run a compliance check on your changes
#optibot release notes — I'll write up release notes for your production release

💡 Tip: I can audit every dependency change before it reaches main — one compromised package can take down your entire system. Try Supply Chain Agent.

agent-optibot

Status: Code Looks Good 👍

No blocking issues found.

📌 Reviewed up to the latest commit · ⏱️ Review completed in 1 minute

🔄 re-review this PR

Copilot

🔵 Needs a closer look

Final approval should wait until the prerelease is replaced with the required published semantic release and that version is validated.

No open issues 🎉

What changed in this PR

Updates smoot-design to a prerelease that darkens outlined chip text on topic and program pages while preserving the homepage trending chips’ existing appearance.

Changes:

Aligns the application dependency, shared-component peer dependency, and lockfile on 0.0.0-8f8796b.
Explicitly preserves Dark Gray 1 hover text for both homepage trending chip variants.

File	Description
`yarn.lock`	Locks the prerelease package and matching workspace references.
`frontends/ol-components/package.json`	Aligns the exact smoot-design peer dependency.
`frontends/main/src/page-components/HeroSearch/HeroSearch.tsx`	Pins trending chip hover text to its existing color.
`frontends/main/package.json`	Updates the application’s smoot-design dependency.

_{Review effort: Balanced}

ahtesham-quraish · 2026-10-23T08:00:20Z

@@ -188,6 +188,7 @@ const TrendingChip = styled(ChipLink)(({ theme, variant }) => [
    "&:hover": {
      backgroundColor: `${theme.custom.colors.lightGray2} !important`,
      borderColor: theme.custom.colors.silverGray,


Non-blocking nit: this borderColor never takes effect. smoot's &.MuiChip-clickable:hover rule (0,3,0) beats this &:hover (0,2,0) and sets silverGrayDark, so the actual hover border is silverGrayDark, not silverGray. You mention this in the description; it's the same kind of silently overridden declaration this PR just fixed for color on line 181.

Agree with not changing the homepage's look here. Could we make the code match what renders, so nobody later assumes this line works? Either:

Suggested change

borderColor: theme.custom.colors.silverGray,

borderColor: `${theme.custom.colors.silverGrayDark} !important`,

(no visual change, since it's what renders today), or delete the line, or add a short comment noting smoot overrides it.

ahtesham-quraish

LGTM!

On smoot 6.38.0 the hover text on the homepage's trending chips is smoot's outlined/outlinedWhite hover colour, Dark Gray 1: smoot's `.MuiChip-clickable:hover` rule (specificity 0,3,0) outranks TrendingChip's `&:hover` (0,2,0), which is also why its background and border overrides need `!important`. The Dark Gray 2 that TrendingChip declared for outlinedWhite never applied, and Explore All (outlined) declared none. smoot's chips are moving to Dark Gray 2 to match the design system's Chips component, but the homepage's trending pills are a separate design. Setting Dark Gray 1 here with `!important` keeps them as they are on either smoot. Measured on local dev against both smoot 6.38.0 and a build with the chip change: every computed colour, border, background, padding and font on all six chips, at rest and on hover, is identical to today. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

6.39.1 is 6.39.0 plus mitodl/smoot-design#279 and nothing else: outlined and outlinedWhite chips draw Dark Gray 2 text, and the close icon sits 4px from the label. ol-components declares smoot as an exact-version peer, so it moves with main. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

agent-optibot Bot reviewed Oct 21, 2026

View reviewed changes

This was referenced Oct 21, 2026

fix: match outlined chips' text and close icon to the Chips design mitodl/smoot-design#279

Merged

Channel page redesign: filter counts, the search card, the tab row, an empty state, and a white topic hero #4133

Merged

ChristopherChudzicki marked this pull request as ready for review October 22, 2026 00:10

ChristopherChudzicki requested a review from a team as a code owner October 22, 2026 00:10

Copilot AI balanced review requested due to automatic review settings October 22, 2026 00:10

agent-optibot Bot reviewed Oct 22, 2026

View reviewed changes

Copilot started reviewing on behalf of ChristopherChudzicki October 22, 2026 00:11

View session

agent-optibot Bot reviewed Oct 22, 2026

View reviewed changes

Copilot AI reviewed Oct 22, 2026

View reviewed changes

ahtesham-quraish reviewed Oct 23, 2026

View reviewed changes

ahtesham-quraish approved these changes Oct 23, 2026

View reviewed changes

ChristopherChudzicki force-pushed the cc/pin-trending-chip-hover-text branch from 8f8107f to 85e9aa9 Compare October 23, 2026 13:31

ChristopherChudzicki and others added 2 commits October 23, 2026 09:32

ChristopherChudzicki force-pushed the cc/pin-trending-chip-hover-text branch from 85e9aa9 to 3c3744c Compare October 23, 2026 13:32

ChristopherChudzicki merged commit 0ce264e into main Oct 23, 2026
14 checks passed

ChristopherChudzicki deleted the cc/pin-trending-chip-hover-text branch October 23, 2026 13:47

This was referenced Oct 26, 2026

Release 0.85.0 #4164

Closed

Release 0.85.1 #4174

Merged

Navigation Menu

Repository navigation

Bump smoot-design for the outlined chip fix, keeping the homepage trending chips unchanged - #4136

Bump smoot-design for the outlined chip fix, keeping the homepage trending chips unchanged#4136
ChristopherChudzicki merged 2 commits into
mainfrom
cc/pin-trending-chip-hover-text

ChristopherChudzicki commented Oct 21, 2026 •

edited

Loading

Uh oh!

agent-optibot Bot left a comment

Uh oh!

github-actions Bot commented Oct 21, 2026 •

edited

Loading

Uh oh!

agent-optibot Bot left a comment

Uh oh!

agent-optibot Bot left a comment

Uh oh!

Copilot AI left a comment

Uh oh!

ahtesham-quraish Oct 23, 2026

Uh oh!

ahtesham-quraish left a comment

Uh oh!

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

	borderColor: theme.custom.colors.silverGray,
	borderColor: `${theme.custom.colors.silverGrayDark} !important`,

Conversation

ChristopherChudzicki commented Oct 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What are the relevant tickets?

Description (What does it do?)

Screenshots (if appropriate):

How can this be tested?

Agent-Run Checks

Additional Context

Uh oh!

agent-optibot Bot left a comment

Choose a reason for hiding this comment

Summary

Key Changes

Uh oh!

github-actions Bot commented Oct 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

OpenAPI Changes

Uh oh!

agent-optibot Bot left a comment

Choose a reason for hiding this comment

Summary

Key Changes

Uh oh!

agent-optibot Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

🔵 Needs a closer look

Uh oh!

ahtesham-quraish Oct 23, 2026

Choose a reason for hiding this comment

Uh oh!

ahtesham-quraish left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

ChristopherChudzicki commented Oct 21, 2026 •

edited

Loading

github-actions Bot commented Oct 21, 2026 •

edited

Loading