[Truncation] Align "read more" button and gradient with updated design spec
Closed, ResolvedPublic1 Estimated Story Points
Actions

Assigned To

Authored By

	mfossati
	Jul 31 2026, 9:54 AM

Project Tags

Referenced Files

	F101115931: earth_lead section_correct truncation.gif
	Mon, Aug 31, 7:58 PM

	F101116570: Screenshot 2026-08-31 at 3.48.15 PM.png
	Mon, Aug 31, 7:58 PM

	F101116891: Screenshot 2026-08-31 at 3.55.57 PM.png
	Mon, Aug 31, 7:58 PM

	F100470972: truncation_read_more_after.png
	Fri, Aug 28, 5:33 PM

	F100470961: truncation_read_more_before.png
	Fri, Aug 28, 5:33 PM

Subscribers

Description

The "Read more" button expands the truncated lead section. The designs have changed overtime, so this task addresses that.

Figma design spec

Relevant files in MinervaNeue are: truncateLeadSection.less and truncateLeadSection.js
Refer to Codex Button: https://doc.wikimedia.org/codex/latest/components/demos/button.html

Acceptance criteria

Button size is large
Button weight is quiet (borderless button)
Add gradient fade stop

Details

Related Changes in Gerrit:

	Subject	Author	Repo	Branch	Lines +/-
	Truncation: fix read more button and add gradient stop	LWatson	mediawiki/skins/MinervaNeue	master	+12 -17

Customize query in gerrit

Related Objects
Search...

Status	Assigned	Task
Open	None	T432075 [Epic] Truncation experiment
Resolved	None	T432189 Truncation bug bash
Resolved	lwatson	T433674 [Truncation] Align "read more" button and gradient with updated design spec

Event Timeline

mfossati created this task.Jul 31 2026, 9:54 AM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJul 31 2026, 9:54 AM

mfossati added a parent task: T432189: Truncation bug bash.Jul 31 2026, 9:55 AM

mfossati mentioned this in T432187: [Truncation] Truncate lead sections.Jul 31 2026, 10:02 AM

HSwan-WMF triaged this task as High priority.Jul 31 2026, 7:26 PM

HSwan-WMF moved this task from Incoming/Inbox to Needs Refinement on the Reader Growth Team board.

NOTE: This is large button in Codex. Need to increase size only.

HSwan-WMF set the point value for this task to 1.Aug 4 2026, 4:44 PM

HSwan-WMF moved this task from Needs Refinement to Ready on the Reader Growth Team board.Aug 4 2026, 4:52 PM

SherryYang-WMF moved this task from Ready to Sprint 4 (Aug 12 - 25) Q1 FY26-27 on the Reader Growth Team board.Aug 11 2026, 11:12 PM

SherryYang-WMF edited projects, added: Reader Growth Team (Sprint 4 (Aug 12 - 25) Q1 FY26-27); removed: Reader Growth Team.

SherryYang-WMF moved this task from Sprint 4 (Aug 12 - 25) Q1 FY26-27 to Ready on the Reader Growth Team board.Aug 13 2026, 10:50 PM

SherryYang-WMF edited projects, added: Reader Growth Team; removed: Reader Growth Team (Sprint 4 (Aug 12 - 25) Q1 FY26-27).

SherryYang-WMF moved this task from Ready to Sprint 5 (Aug 26 - Sep 9) Q1 FY26-27 on the Reader Growth Team board.Wed, Aug 26, 2:59 PM

SherryYang-WMF edited projects, added: Reader Growth Team (Sprint 5 (Aug 26 - Sep 9) Q1 FY26-27); removed: Reader Growth Team.

lwatson claimed this task.Fri, Aug 28, 2:04 PM

lwatson moved this task from Committed to Doing on the Reader Growth Team (Sprint 5 (Aug 26 - Sep 9) Q1 FY26-27) board.Fri, Aug 28, 3:11 PM

Change #1331718 had a related patch set uploaded (by LWatson; author: LWatson):

[mediawiki/skins/MinervaNeue@master] Truncation: fix read more button and add gradient stop

https://gerrit.wikimedia.org/r/1331718

gerritbot added a project: Patch-For-Review.Fri, Aug 28, 5:19 PM

The ticket was outdated. The open patch should align the "Read more" button to look like the updated Figma spec.

Button is large size and quiet weight (borderless button).
Add a fade gradient solid stop that's measured from the button's height. The solid background color covers the bottom 44px, which matches the button's height. The fade runs over the top 40px.
Font color remains progressive blue.
Interactive styles come from Codex.

Before	After

lwatson renamed this task from [Truncation] Increase expand button's font size to [Truncation] Align "read more" button and gradient with updated design spec.Fri, Aug 28, 5:47 PM

lwatson updated the task description. (Show Details)

Change #1331718 merged by jenkins-bot:

[mediawiki/skins/MinervaNeue@master] Truncation: fix read more button and add gradient stop

https://gerrit.wikimedia.org/r/1331718

ReleaseTaggerBot added a project: MW-1.47-notes (1.47.0-wmf.18; 2026-09-01).Mon, Aug 31, 11:00 AM

Maintenance_bot removed a project: Patch-For-Review.Mon, Aug 31, 11:31 AM

mfossati moved this task from Code Review to QA on the Reader Growth Team (Sprint 5 (Aug 26 - Sep 9) Q1 FY26-27) board.Mon, Aug 31, 12:19 PM

Test wiki created on Patch demo by LWatson-WMF using patch(es) linked to this task:
https://rg-truncation-b9cd5b357748.catalyst.wmcloud.org/wiki/Main Page

@Etonkovidova I created patch 1332766 to enable truncation with URL query param: ?minerva-truncate=1 for QA testing. I don't intend to merge the patch but please add Gerrit patch 1332766 when creating a new patchdemo instance if you need to enable truncation in the meantime.

Example: https://rg-truncation-b9cd5b357748.catalyst.wmcloud.org/wiki/Apollo?useformat=mobile&minerva-truncate=1

Etonkovidova updated the task description. (Show Details)Mon, Aug 31, 7:44 PM

In T433674#12272062, @lwatson wrote:

@Etonkovidova I created patch 1332766 to enable truncation with URL query param: ?minerva-truncate=1 for QA testing. I don't intend to merge the patch but please add Gerrit patch 1332766 when creating a new patchdemo instance if you need to enable truncation in the meantime.

Example: https://rg-truncation-b9cd5b357748.catalyst.wmcloud.org/wiki/Apollo?useformat=mobile&minerva-truncate=1