feat(components): support contain image variant for child pages by seaerchin · Pull Request #1889 · opengovsg/isomer

seaerchin · 2026-03-17T04:35:30Z

Problem

Child pages block previously did not support the "contain" image fit variant, which is needed for profile pages use case where images may have white backgrounds and need to fit within their container rather than being cropped.

Solution

Breaking Changes

Yes - this PR contains breaking changes
No - this PR is backwards compatible

Features:

Added imageFit property to ChildrenPages schema with options: "cover" (default) and "contain"
Created reusable ImageFitSchema in ~/schemas/internal for consistent image fit options across components
Added IMAGE_FIT constant in ~/interfaces/constants for type-safe image fit values

Improvements:

Added isFallback prop to InfoCards to style fallback images differently (centered and contained)

Before & After Screenshots

boxes variant w contain

boxes variant w cover

rows variant w contain

rows variant w cover

Tests

Added Storybook stories for RowsWithContainAndThumbnail and BoxesWithContainAndThumbnail in ChildrenPages
Added IndexPage stories for RowsWithContainAndImageAndDescription and BoxesWithContainAndImageAndDescription

linear · 2026-03-17T04:35:33Z

ISOM-2179 Support contain image variant for profile pages use case

dcshzj · 2026-03-17T08:57:14Z

packages/components/src/templates/next/components/complex/ChildrenPages/ChildrenPages.tsx

@@ -121,7 +133,6 @@ const createRowStyles = tv({
    },
    hasFallbackImage: {
      true: { image: "h-auto w-2/3 object-contain" },


question: would this object-contain conflict with the imageFit if cover was selected?

oddly enough, no. attaching a vid so you can see what it looks like

Screen.Recording.2026-03-18.at.11.13.51.mov

packages/components/src/interfaces/complex/InfoCards.ts

sehyunidaaa

@seaerchin thanks!

This story is crashing, can't review child page editing for selecting contain/fit and column number
Are we changing the default columns to 2? (we discussed yesterday that all sites are either using the rows or 2-column boxes. if we shift default to 3, it will be jarring to all these sites)
Didn't review template here - reviewing template side changes in the other Chromatic, hope that's okay

seaerchin · 2026-03-18T03:16:07Z

@seaerchin thanks!

This story is crashing, can't review child page editing for selecting contain/fit and column number

Are we changing the default columns to 2? (we discussed yesterday that all sites are either using the rows or 2-column boxes. if we shift default to 3, it will be jarring to all these sites)

Didn't review template here - reviewing template side changes in the other Chromatic, hope that's okay

fixed the story, it had a missing handler oddly
updated default cols to 2 (i missed a change sorry)

seaerchin · 2026-03-19T05:34:34Z

This stack of pull requests is managed by Graphite. Learn more about stacking.

stale

seaerchin · 2026-03-19T06:12:47Z

Merge activity

Mar 19, 6:12 AM UTC: @seaerchin merged this pull request with Graphite.

## Problem Closes ISOM-2179 Child pages block previously did not support the "contain" image fit variant, which is needed for profile pages use case where images may have white backgrounds and need to fit within their container rather than being cropped. ## Solution **Breaking Changes** - [ ] Yes - this PR contains breaking changes - [x] No - this PR is backwards compatible **Features**: - Added `imageFit` property to ChildrenPages schema with options: "cover" (default) and "contain" - Created reusable `ImageFitSchema` in `~/schemas/internal` for consistent image fit options across components - Added `IMAGE_FIT` constant in `~/interfaces/constants` for type-safe image fit values **Improvements**: - Added `isFallback` prop to InfoCards to style fallback images differently (centered and contained) ## Before & After Screenshots **boxes variant w contain** <img width="1162" height="523" alt="image" src="https://github.com/user-attachments/assets/3c473857-6dc1-45af-83be-49bc26bc9aac" /> **boxes variant w cover** <img width="1161" height="524" alt="image" src="https://github.com/user-attachments/assets/a4075707-4aaf-4934-a141-cb0d8cef3e68" /> **rows variant w contain** <img width="1165" height="203" alt="image" src="https://github.com/user-attachments/assets/752953c7-73d6-4489-83b1-3701ec440bbd" /> **rows variant w cover** <img width="1163" height="225" alt="image" src="https://github.com/user-attachments/assets/700568df-b461-45ce-855a-567dd6a02102" /> ## Tests - Added Storybook stories for `RowsWithContainAndThumbnail` and `BoxesWithContainAndThumbnail` in ChildrenPages - Added IndexPage stories for `RowsWithContainAndImageAndDescription` and `BoxesWithContainAndImageAndDescription`

…es (#1889)" This reverts commit 3e003a3.

* Revert "refactor: update RowLayout styling to match InfoCards design (#1891)" This reverts commit 30209a1. * Revert "feat(components): support contain image variant for child pages (#1889)" This reverts commit 3e003a3. * Revert "refactor: centralize isExternalUrl check into ImageClient (#1865)" This reverts commit 56229e2.

## Problem Closes ISOM-2179 Child pages block previously did not support the "contain" image fit variant, which is needed for profile pages use case where images may have white backgrounds and need to fit within their container rather than being cropped. ## Solution **Breaking Changes** - [ ] Yes - this PR contains breaking changes - [x] No - this PR is backwards compatible **Features**: - Added `imageFit` property to ChildrenPages schema with options: "cover" (default) and "contain" - Created reusable `ImageFitSchema` in `~/schemas/internal` for consistent image fit options across components - Added `IMAGE_FIT` constant in `~/interfaces/constants` for type-safe image fit values **Improvements**: - Added `isFallback` prop to InfoCards to style fallback images differently (centered and contained) ## Before & After Screenshots **boxes variant w contain** <img width="1162" height="523" alt="image" src="https://github.com/user-attachments/assets/3c473857-6dc1-45af-83be-49bc26bc9aac" /> **boxes variant w cover** <img width="1161" height="524" alt="image" src="https://github.com/user-attachments/assets/a4075707-4aaf-4934-a141-cb0d8cef3e68" /> **rows variant w contain** <img width="1165" height="203" alt="image" src="https://github.com/user-attachments/assets/752953c7-73d6-4489-83b1-3701ec440bbd" /> **rows variant w cover** <img width="1163" height="225" alt="image" src="https://github.com/user-attachments/assets/700568df-b461-45ce-855a-567dd6a02102" /> ## Tests - Added Storybook stories for `RowsWithContainAndThumbnail` and `BoxesWithContainAndThumbnail` in ChildrenPages - Added IndexPage stories for `RowsWithContainAndImageAndDescription` and `BoxesWithContainAndImageAndDescription`

seaerchin requested a review from a team as a code owner March 17, 2026 04:35

seaerchin temporarily deployed to staging March 17, 2026 04:35 — with GitHub Actions Inactive

seaerchin changed the base branch from main to chin/isom-2183-update-child-pages-block-to-look-like-cards March 17, 2026 04:36

seaerchin requested a review from sehyunidaaa March 17, 2026 04:39

dcshzj reviewed Mar 17, 2026

View reviewed changes

sehyunidaaa previously requested changes Mar 17, 2026

View reviewed changes

seaerchin temporarily deployed to staging March 17, 2026 13:59 — with GitHub Actions Inactive

seaerchin temporarily deployed to staging March 18, 2026 03:15 — with GitHub Actions Inactive

seaerchin requested review from a team, dcshzj and sehyunidaaa March 18, 2026 03:16

seaerchin temporarily deployed to staging March 18, 2026 10:57 — with GitHub Actions Inactive

seaerchin force-pushed the chin/isom-2179-support-contain-image-variant-for-profile-pages-use-case branch from 994ef39 to baf9b0c Compare March 18, 2026 11:01

seaerchin temporarily deployed to staging March 18, 2026 11:01 — with GitHub Actions Inactive

dcshzj approved these changes Mar 19, 2026

View reviewed changes

This was referenced Mar 19, 2026

refactor: centralize isExternalUrl check into ImageClient #1865

Merged

refactor: update RowLayout styling to match InfoCards design #1891

Merged

seaerchin force-pushed the chin/isom-2179-support-contain-image-variant-for-profile-pages-use-case branch 2 times, most recently from 2191573 to ba7bb7d Compare March 19, 2026 05:47

seaerchin changed the base branch from chin/isom-2183-update-child-pages-block-to-look-like-cards to graphite-base/1889 March 19, 2026 05:56

seaerchin added 2 commits March 19, 2026 05:56

feat: add contain variant

1228d46

chore: add image fit schema

a19261e

seaerchin added 4 commits March 19, 2026 05:56

chore: add stories

ef6551d

chore: fix stories

5bd0d47

chore: update max cols to 2

f340cc5

chore: update import

32d7298

seaerchin force-pushed the graphite-base/1889 branch from 5377e8c to 56229e2 Compare March 19, 2026 05:56

seaerchin force-pushed the chin/isom-2179-support-contain-image-variant-for-profile-pages-use-case branch from ba7bb7d to f8e8825 Compare March 19, 2026 05:56

graphite-app bot changed the base branch from graphite-base/1889 to main March 19, 2026 05:57

chore: update title/desc for diff image schema

b1aaa9f

seaerchin force-pushed the chin/isom-2179-support-contain-image-variant-for-profile-pages-use-case branch from f8e8825 to b1aaa9f Compare March 19, 2026 05:57

seaerchin temporarily deployed to staging March 19, 2026 05:57 — with GitHub Actions Inactive

seaerchin merged commit 3e003a3 into main Mar 19, 2026
18 of 22 checks passed

seaerchin deleted the chin/isom-2179-support-contain-image-variant-for-profile-pages-use-case branch March 19, 2026 06:12

seaerchin added a commit that referenced this pull request Mar 19, 2026

Revert "feat(components): support contain image variant for child pag…

a415b6a

…es (#1889)" This reverts commit 3e003a3.

seaerchin mentioned this pull request Mar 19, 2026

fix: revert index page component changes #1903

Merged

2 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(components): support contain image variant for child pages#1889

feat(components): support contain image variant for child pages#1889
seaerchin merged 7 commits intomainfrom
chin/isom-2179-support-contain-image-variant-for-profile-pages-use-case

seaerchin commented Mar 17, 2026 •

edited

Loading

Uh oh!

linear bot commented Mar 17, 2026

Uh oh!

dcshzj Mar 17, 2026

Uh oh!

seaerchin Mar 18, 2026

Uh oh!

Uh oh!

sehyunidaaa left a comment

Uh oh!

seaerchin commented Mar 18, 2026

Uh oh!

seaerchin commented Mar 19, 2026 •

edited

Loading

Uh oh!

Uh oh!

seaerchin commented Mar 19, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

seaerchin commented Mar 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Problem

Solution

Before & After Screenshots

Tests

Uh oh!

linear bot commented Mar 17, 2026

Uh oh!

dcshzj Mar 17, 2026

Choose a reason for hiding this comment

Uh oh!

seaerchin Mar 18, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

sehyunidaaa left a comment

Choose a reason for hiding this comment

Uh oh!

seaerchin commented Mar 18, 2026

Uh oh!

seaerchin commented Mar 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

seaerchin commented Mar 19, 2026

Merge activity

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

seaerchin commented Mar 17, 2026 •

edited

Loading

seaerchin commented Mar 19, 2026 •

edited

Loading