Skip to content

Add new scrollable onwards container with new design - #14894

Merged
marjisound merged 10 commits into
mainfrom
gallery-secondary-onward-container
Dec 5, 2025
Merged

marjisound merged 10 commits into
mainfrom
gallery-secondary-onward-container

Conversation

@marjisound

@marjisound marjisound commented Nov 24, 2025

Copy link
Copy Markdown
Contributor

What does this change?

This PR adds a new component ScrollableSmallOnwards. The purpose of this component is to be used for onwards contents. Currently as part of this PR, the new component is only used for Gallery articles onwards. But the future plan is to migrate all the rest of articles to use the new design for onwards contents.

Note: Because the design of the cards for this new container are different from the cards used in the existing onwards containers, I had to introduce a new field in the Card component: contextFormat?: ArticleFormat;. This field is used to distinguish between the new design of the onwards cards in gallery articles and the existing onwards cards which are used in all other articles. In the future when we apply this new design to the onwards contents of all articles, this new field (contextFormat) can be removed.

Why?

This change is a re-design of the onwards container. Currently as part of this PR, the re-design is only applied for the Gallery onwards containers, but the future plan is to do this for all article.

Screenshots

Light LeftCol Dark LeftCol
lightLeftCol darkLeftCold
Light mobile Dark mobile
before after

This PR fixes #14313

@marjisound marjisound changed the title Add new onward container with new design New approach - Add new onward container with new design Nov 24, 2025
@marjisound marjisound added the run_chromatic Runs chromatic when label is applied label Nov 24, 2025
@github-actions github-actions Bot removed the run_chromatic Runs chromatic when label is applied label Nov 24, 2025
@github-actions

github-actions Bot commented Nov 24, 2025

Copy link
Copy Markdown

@github-actions

github-actions Bot commented Nov 24, 2025

Copy link
Copy Markdown

@marjisound
marjisound force-pushed the gallery-secondary-onward-container branch from f4723ef to 938b4a8 Compare November 24, 2025 16:38
@marjisound marjisound added the run_chromatic Runs chromatic when label is applied label Nov 24, 2025
@github-actions github-actions Bot removed the run_chromatic Runs chromatic when label is applied label Nov 24, 2025
@marjisound marjisound added the run_chromatic Runs chromatic when label is applied label Nov 25, 2025
@github-actions github-actions Bot removed the run_chromatic Runs chromatic when label is applied label Nov 25, 2025
@marjisound
marjisound force-pushed the gallery-secondary-onward-container branch 2 times, most recently from 2b9af5d to 464aa26 Compare November 25, 2025 09:39
@marjisound marjisound added the run_chromatic Runs chromatic when label is applied label Nov 25, 2025
@github-actions github-actions Bot removed the run_chromatic Runs chromatic when label is applied label Nov 25, 2025
@marjisound marjisound changed the title New approach - Add new onward container with new design Add new scrollable onwards container with new design Nov 25, 2025
@marjisound marjisound self-assigned this Nov 25, 2025
@marjisound marjisound modified the milestones: Decommission AR, Requests Nov 25, 2025
@marjisound marjisound added the run_chromatic Runs chromatic when label is applied label Nov 25, 2025
@github-actions github-actions Bot removed the run_chromatic Runs chromatic when label is applied label Nov 25, 2025
@marjisound
marjisound force-pushed the gallery-secondary-onward-container branch from d0ab9df to a54742c Compare November 25, 2025 11:14
@marjisound marjisound added the run_chromatic Runs chromatic when label is applied label Nov 25, 2025
@github-actions github-actions Bot removed the run_chromatic Runs chromatic when label is applied label Nov 25, 2025
@marjisound marjisound added the run_chromatic Runs chromatic when label is applied label Nov 26, 2025
@marjisound
marjisound force-pushed the gallery-secondary-onward-container branch from 01bc311 to de1226c Compare November 26, 2025 16:03
@github-actions github-actions Bot removed the run_chromatic Runs chromatic when label is applied label Nov 26, 2025
@marjisound marjisound added the run_chromatic Runs chromatic when label is applied label Nov 26, 2025
@github-actions

github-actions Bot commented Dec 1, 2025

Copy link
Copy Markdown

Hello 👋! When you're ready to run Chromatic, please apply the run_chromatic label to this PR.

You will need to reapply the label each time you want to run Chromatic.

Click here to see the Chromatic project.

@marjisound
marjisound requested a review from JamieB-gu December 1, 2025 08:56
@marjisound
marjisound force-pushed the gallery-secondary-onward-container branch from a8e877f to 86c9c15 Compare December 3, 2025 14:09
@marjisound marjisound added the run_chromatic Runs chromatic when label is applied label Dec 3, 2025
@github-actions github-actions Bot removed the run_chromatic Runs chromatic when label is applied label Dec 3, 2025
Comment thread dotcom-rendering/src/components/Card/Card.tsx
Comment thread dotcom-rendering/src/components/Card/Card.tsx
Comment thread dotcom-rendering/src/components/FetchOnwardsData.importable.tsx
Comment thread dotcom-rendering/src/components/MoreGalleries.tsx

@Fweddi Fweddi left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM - great stuff!

Left some comments for clarification.

@marjisound marjisound added the run_chromatic Runs chromatic when label is applied label Dec 5, 2025
@github-actions github-actions Bot removed the run_chromatic Runs chromatic when label is applied label Dec 5, 2025
@marjisound
marjisound merged commit 182cbd1 into main Dec 5, 2025
25 checks passed
@marjisound
marjisound deleted the gallery-secondary-onward-container branch December 5, 2025 10:36
@gu-prout

gu-prout Bot commented Dec 5, 2025

Copy link
Copy Markdown

Seen on PROD (merged by @marjisound 7 minutes and 53 seconds ago) Please check your changes!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Feasibility: Replace 'More on this story' with new layout

2 participants