Skip to content

Removed legacy settings behavior and editor components#29542

Merged
9larsons merged 6 commits into
mainfrom
codex/admin-settings-shade-behaviors-editors
Jul 22, 2026
Merged

Removed legacy settings behavior and editor components#29542
9larsons merged 6 commits into
mainfrom
codex/admin-settings-shade-behaviors-editors

Conversation

@9larsons

Copy link
Copy Markdown
Contributor

What changed

  • added reusable Shade SortableList, DragIndicator, and StickyFooter components
  • expanded the Shade color picker pattern with reusable triggers and swatches
  • moved settings-specific CodeMirror, HTML/Koenig, infinite-scroll, sorting-hook, and Stripe behavior into admin-x-settings
  • migrated navigation, tier benefits, newsletters, color fields, editors, history loading, Stripe controls, and sticky footers
  • removed the matching admin-x-design-system components, stories, exports, and dependencies
  • preserved immediate Escape handling so a color picker closes without closing its parent modal
  • added item-specific accessible names to drag handles

The theme code editor is intentionally unchanged because its IDE-style presentation needs a separate design decision.

Why

This is the behaviours and editors slice of the admin-x-settings design-system removal. Reusable interaction patterns now live in Shade, while Ghost-specific runtime integrations remain local to Settings, reducing the legacy design-system surface without promoting product-specific components.

Validation

  • admin-x-settings unit tests: 212 passed
  • Shade unit tests: 230 passed
  • admin-x-design-system unit tests: 13 passed
  • admin-x-settings acceptance tests: 299 passed
  • Shade lint and build
  • admin-x-settings lint and typecheck
  • two independent review passes with no significant findings

no ref

Centralized reusable behavior in Shade while keeping product-specific editors local ahead of removing admin-x-design-system.
@coderabbitai

coderabbitai Bot commented Jul 22, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: d0074d5f-ca68-4326-b64b-f8799044187f

📥 Commits

Reviewing files that changed from the base of the PR and between 35e8331 and 8f5b64a.

⛔ Files ignored due to path filters (1)
  • pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
📒 Files selected for processing (71)
  • apps/admin-x-design-system/package.json
  • apps/admin-x-design-system/src/design-system-app.tsx
  • apps/admin-x-design-system/src/global/form/code-editor.stories.tsx
  • apps/admin-x-design-system/src/global/form/color-indicator.stories.tsx
  • apps/admin-x-design-system/src/global/form/color-indicator.tsx
  • apps/admin-x-design-system/src/global/form/color-picker-field.stories.tsx
  • apps/admin-x-design-system/src/global/form/color-picker-field.tsx
  • apps/admin-x-design-system/src/global/form/color-picker.stories.tsx
  • apps/admin-x-design-system/src/global/form/color-picker.tsx
  • apps/admin-x-design-system/src/global/form/html-field.stories.tsx
  • apps/admin-x-design-system/src/global/infinite-scroll-listener.stories.tsx
  • apps/admin-x-design-system/src/global/modal/modal.tsx
  • apps/admin-x-design-system/src/global/sortable-list.stories.tsx
  • apps/admin-x-design-system/src/global/sortable-list.tsx
  • apps/admin-x-design-system/src/global/sticky-footer.stories.tsx
  • apps/admin-x-design-system/src/global/sticky-footer.tsx
  • apps/admin-x-design-system/src/index.ts
  • apps/admin-x-design-system/src/providers/design-system-provider.tsx
  • apps/admin-x-design-system/src/settings/stripe-button.stories.tsx
  • apps/admin-x-settings/package.json
  • apps/admin-x-settings/src/components/code-editor-view.tsx
  • apps/admin-x-settings/src/components/code-editor.tsx
  • apps/admin-x-settings/src/components/color-picker-field.tsx
  • apps/admin-x-settings/src/components/color-swatch-field.tsx
  • apps/admin-x-settings/src/components/html-editor.tsx
  • apps/admin-x-settings/src/components/html-field.tsx
  • apps/admin-x-settings/src/components/infinite-scroll-listener.tsx
  • apps/admin-x-settings/src/components/koenig-editor-base.tsx
  • apps/admin-x-settings/src/components/settings/advanced/code/code-modal.tsx
  • apps/admin-x-settings/src/components/settings/advanced/history-modal.tsx
  • apps/admin-x-settings/src/components/settings/advanced/labs/yaml-file-editor-modal.tsx
  • apps/admin-x-settings/src/components/settings/email-design/color-picker-field.tsx
  • apps/admin-x-settings/src/components/settings/email-design/design-fields/background-color-field.tsx
  • apps/admin-x-settings/src/components/settings/email-design/design-fields/button-color-field.tsx
  • apps/admin-x-settings/src/components/settings/email-design/design-fields/divider-color-field.tsx
  • apps/admin-x-settings/src/components/settings/email-design/design-fields/header-background-field.tsx
  • apps/admin-x-settings/src/components/settings/email-design/design-fields/link-color-field.tsx
  • apps/admin-x-settings/src/components/settings/email-design/design-fields/section-title-color-field.tsx
  • apps/admin-x-settings/src/components/settings/email/newsletters/newsletter-detail-modal.tsx
  • apps/admin-x-settings/src/components/settings/email/newsletters/newsletters-list.tsx
  • apps/admin-x-settings/src/components/settings/general/users/role-selector.tsx
  • apps/admin-x-settings/src/components/settings/general/users/staff-token.tsx
  • apps/admin-x-settings/src/components/settings/growth/embed-signup/embed-signup-sidebar.tsx
  • apps/admin-x-settings/src/components/settings/membership/member-emails/member-email-editor.tsx
  • apps/admin-x-settings/src/components/settings/membership/portal/look-and-feel.tsx
  • apps/admin-x-settings/src/components/settings/membership/portal/signup-options.tsx
  • apps/admin-x-settings/src/components/settings/membership/stripe/stripe-connect-modal.tsx
  • apps/admin-x-settings/src/components/settings/membership/tiers.tsx
  • apps/admin-x-settings/src/components/settings/membership/tiers/tier-detail-modal.tsx
  • apps/admin-x-settings/src/components/settings/membership/tiers/tier-detail-preview.tsx
  • apps/admin-x-settings/src/components/settings/site/announcement-bar-modal.tsx
  • apps/admin-x-settings/src/components/settings/site/design-and-branding/global-settings.tsx
  • apps/admin-x-settings/src/components/settings/site/design-and-branding/theme-setting.tsx
  • apps/admin-x-settings/src/components/settings/site/navigation/navigation-edit-form.tsx
  • apps/admin-x-settings/src/components/settings/site/navigation/navigation-item-editor.tsx
  • apps/admin-x-settings/src/components/stripe-button.tsx
  • apps/admin-x-settings/src/hooks/site/use-navigation-editor.tsx
  • apps/admin-x-settings/src/hooks/use-sortable-indexed-list.ts
  • apps/admin-x-settings/test/unit/hooks/use-sortable-indexed-list.test.ts
  • apps/admin-x-settings/test/unit/membership/tier-detail-preview.test.tsx
  • apps/admin/src/settings/site/design.acceptance.test.tsx
  • apps/shade/package.json
  • apps/shade/src/components.ts
  • apps/shade/src/components/patterns/color-picker.stories.tsx
  • apps/shade/src/components/patterns/color-picker.tsx
  • apps/shade/src/components/ui/sortable-list.stories.tsx
  • apps/shade/src/components/ui/sortable-list.tsx
  • apps/shade/src/components/ui/sticky-footer.stories.tsx
  • apps/shade/src/components/ui/sticky-footer.tsx
  • apps/shade/src/patterns.ts
  • pnpm-workspace.yaml

Walkthrough

The change relocates color-picker, sortable-list, and sticky-footer building blocks into Shade, adds their public exports and stories, and prunes the corresponding admin-x-design-system exports and dependencies. Admin X settings gains local field components, updated editor styling, revised imports, navigation layout changes, stable sortable-list comparisons, and related tests. Accessibility labels are added to color inputs, and several UI headings and controls receive updated styling.

Possibly related PRs

  • TryGhost/Ghost#29503 — Also removes chooser-related exports and dependencies from admin-x-design-system.
  • TryGhost/Ghost#29513 — Modifies the sortable-list implementation affected by this migration.
✨ 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-behaviors-editors

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 Checkov (3.3.8)
apps/admin-x-design-system/package.json

Traceback (most recent call last):
File "/usr/local/bin/checkov", line 2, in
from checkov.main import Checkov
ModuleNotFoundError: No module named 'checkov'

apps/admin-x-settings/package.json

Traceback (most recent call last):
File "/usr/local/bin/checkov", line 2, in
from checkov.main import Checkov
ModuleNotFoundError: No module named 'checkov'

apps/shade/package.json

Traceback (most recent call last):
File "/usr/local/bin/checkov", line 2, in
from checkov.main import Checkov
ModuleNotFoundError: No module named 'checkov'

  • 1 others

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

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

@nx-cloud

nx-cloud Bot commented Jul 22, 2026

Copy link
Copy Markdown

🤖 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 8f5b64a

Command Status Duration Result
nx run ghost:test:ci:integration ✅ Succeeded 3m 1s View ↗
nx run @tryghost/admin:test:acceptance ✅ Succeeded 8m 15s View ↗
nx run ghost:test:integration ✅ Succeeded 3m 2s View ↗
nx run-many -t test:unit -p @tryghost/admin-x-d... ✅ Succeeded 5m 21s View ↗
nx run ghost:test:legacy ✅ Succeeded 3m 15s View ↗
nx run ghost-monorepo:lint:boundaries ✅ Succeeded 22s View ↗
nx run @tryghost/koenig-lexical:test:acceptance ✅ Succeeded 2m 22s View ↗
nx run ghost:test:e2e ✅ Succeeded 2m 30s View ↗
Additional runs (8) ✅ Succeeded ... View ↗

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


☁️ Nx Cloud last updated this comment at 2026-07-22 20:40:55 UTC

9larsons added 5 commits July 22, 2026 15:14
no ref

Navigation actions now share the input control center, and duplicate benefit labels no longer leave stale rows in the live tier preview.
no ref

The compact trigger now keeps the selected currency visually connected to its dropdown chevron.
no ref

Benefit checks should remain centered alongside their fields at every control height.
no ref

Tier pricing controls and preview headings should match the surrounding settings hierarchy without overhanging their fields.
no ref

Interactive and section headings should retain the primary hierarchy while disabled controls and supporting copy remain visually secondary.
@9larsons
9larsons marked this pull request as ready for review July 22, 2026 20:41
@9larsons
9larsons enabled auto-merge (squash) July 22, 2026 20:41
@9larsons
9larsons merged commit 588f4cd into main Jul 22, 2026
50 of 51 checks passed
@9larsons
9larsons deleted the codex/admin-settings-shade-behaviors-editors branch July 22, 2026 20:42
@codecov

codecov Bot commented Jul 22, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 74.79%. Comparing base (35e8331) to head (8f5b64a).
⚠️ Report is 2 commits behind head on main.

Additional details and impacted files
@@            Coverage Diff             @@
##             main   #29542      +/-   ##
==========================================
+ Coverage   74.53%   74.79%   +0.25%     
==========================================
  Files        1609     1611       +2     
  Lines      141475   141678     +203     
  Branches    17261    17317      +56     
==========================================
+ Hits       105443   105961     +518     
+ Misses      34998    34644     -354     
- Partials     1034     1073      +39     
Flag Coverage Δ
admin-tests 55.62% <ø> (+0.18%) ⬆️
e2e-tests 76.86% <ø> (+0.26%) ⬆️

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.

9larsons added a commit that referenced this pull request Jul 22, 2026
- main's offers table rework (#29534) fixed sorting to apply across signup
  and retention rows together and added acceptance coverage; ported the
  unified sort (name tiebreak, null dates last) and the offers-table-body
  testid into the native offers index dialog
- main's color picker migration (#29538/#29542) renamed the hex input's
  accessible name to "Hex color" and the design suite now targets it;
  matched the native color picker field
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant