Moved settings ModalPage to Shade

[9larsons]

What changed

• Added a compositional ModalPage page template to Shade, with Storybook and unit coverage.
• Migrated Portal links, official themes, and advanced theme settings to the Shade template.
• Removed the legacy design-system ModalPage implementation and exports.
• Fixed the Portal settings underline flicker and made preview/sidebar tab synchronization reflect their non-1:1 relationship:
  • Signup options and Look & feel use the Signup preview.
  • Account page uses the Account preview.
  • Links remains an independent preview and does not alter the settings tab.

Why

These were the final Settings consumers of the legacy ModalPage. Moving the settled, state-free page shell into Shade removes another legacy design-system dependency while preserving the existing layout.

The Portal tab regression came from partially synchronizing two tab bars that control overlapping, but not identical, views. The stale state also left the pseudo-element underline susceptible to visual flicker.

Validation

• pnpm --dir apps/shade lint
• pnpm --dir apps/shade test:types
• pnpm --dir apps/shade test (235 tests)
• pnpm --dir apps/shade build
• pnpm --dir apps/shade build-storybook
• pnpm --dir apps/admin-x-settings lint
• pnpm --dir apps/admin-x-settings test (217 tests)
• pnpm --dir apps/admin-x-design-system lint
• pnpm --dir apps/admin-x-design-system build
• pnpm --dir apps/admin typecheck
• Portal acceptance test (6 tests)
• Full Admin production build

Manual testing

• Portal → Links layout and link/tier controls.
• Portal preview and sidebar tab navigation in both directions.
• Design → official themes layout and theme selection.
• Installed themes → Advanced layout and action menus.
• Light/dark mode and narrower viewport behavior.

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 140cc26e-50d1-4f1a-b61a-e9e0451a2ddc

📥 Commits

Reviewing files that changed from the base of the PR and between 3c56efa and 4bb4558.

📒 Files selected for processing (13)

• apps/admin-x-design-system/src/global/modal/modal-page.stories.tsx
• apps/admin-x-design-system/src/global/modal/modal-page.tsx
• apps/admin-x-design-system/src/global/modal/modal.stories.tsx
• apps/admin-x-design-system/src/index.ts
• apps/admin-x-settings/src/components/settings/membership/portal/portal-links.tsx
• apps/admin-x-settings/src/components/settings/membership/portal/portal-modal.tsx
• apps/admin-x-settings/src/components/settings/site/theme/advanced-theme-settings.tsx
• apps/admin-x-settings/src/components/settings/site/theme/official-themes.tsx
• apps/admin/src/settings/membership/portal.acceptance.test.tsx
• apps/shade/src/components/page-templates/modal-page.stories.tsx
• apps/shade/src/components/page-templates/modal-page.tsx
• apps/shade/src/page-templates.ts
• apps/shade/test/unit/components/page-templates/modal-page.test.tsx

---

Walkthrough

The legacy design-system ModalPage component and exports are removed. A new compositional ModalPage with ModalPage.Title is added to Shade, publicly re-exported, documented in Storybook, and unit tested. Settings consumers migrate to the Shade component. Portal modal tab state now uses strict union types and centralized mapping, with added acceptance coverage for tab synchronization.

Possibly related PRs

• TryGhost/Ghost#29408: Adds related Admin membership portal modal acceptance-test coverage.
• TryGhost/Ghost#29538: Previously updates the legacy ModalPage before its migration to Shade.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch codex/admin-settings-shade-modal-page

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[nx-cloud]

🤖 Nx Cloud AI Fix

Ensure the fix-ci command is configured to always run in your CI pipeline to get automatic fixes in future runs. For more information, please see https://nx.dev/ci/features/self-healing-ci

---

View your CI Pipeline Execution ↗ for commit 4bb4558

Command	Status	Duration	Result
nx run @tryghost/admin:test:acceptance	✅ Succeeded	8m	View ↗
nx run-many -t test:unit -p @tryghost/admin-x-d...	✅ Succeeded	4m 45s	View ↗
nx run ghost-admin:test	✅ Succeeded	3m 22s	View ↗
nx run ghost-monorepo:lint:boundaries	✅ Succeeded	16s	View ↗
nx run-many -t lint -p @tryghost/admin-x-design...	✅ Succeeded	1m 34s	View ↗
nx run @tryghost/admin:build	✅ Succeeded	1m 29s	View ↗
nx run @tryghost/activitypub:test:acceptance	✅ Succeeded	46s	View ↗
nx run-many --target=build --projects=tag:publi...	✅ Succeeded	<1s	View ↗

💡 Verify your cache is correct by running tasks in a sandbox. Read docs ↗

---

☁️ Nx Cloud last updated this comment at 2026-07-23 20:07:00 UTC

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 74.84%. Comparing base (fd7d8dc) to head (4bb4558).
⚠️ Report is 2 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #29563      +/-   ##
==========================================
+ Coverage   74.82%   74.84%   +0.01%     
==========================================
  Files        1611     1611              
  Lines      141725   141744      +19     
  Branches    17330    17338       +8     
==========================================
+ Hits       106051   106087      +36     
+ Misses      34602    34584      -18     
- Partials     1072     1073       +1     

Flag	Coverage Δ
admin-tests	55.62% <ø> (+0.18%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.