Skip to content

fix(plugin-multi-tenant): use Dialog components, convert SCSS to CSS with UI4 tokens#17006

Merged
JarrodMFlesch merged 3 commits into
mainfrom
fix/plugin-multi-tenant-use-dialog-components
Jun 16, 2026
Merged

fix(plugin-multi-tenant): use Dialog components, convert SCSS to CSS with UI4 tokens#17006
JarrodMFlesch merged 3 commits into
mainfrom
fix/plugin-multi-tenant-use-dialog-components

Conversation

@JarrodMFlesch

@JarrodMFlesch JarrodMFlesch commented Jun 15, 2026

Copy link
Copy Markdown
Contributor

Modernizes plugin-multi-tenant to use the new Dialog primitives shipped in #16904 and converts all SCSS to CSS with UI4 design tokens.

AssignTenantFieldModal is refactored to use DialogModal/DialogHeader/DialogBody/DialogFooter/DialogCancel/DialogConfirm from @payloadcms/ui, replacing the custom Modal + manual close/confirm wiring. drawerZBase/useDrawerDepth are removed since DialogModal handles z-index internally.

SCSS → CSS migrations:

  • TenantSelector/index.scss — trivial, token cleanup
  • TenantField/index.scss — SCSS nesting flattened, broken --main-gutter-h-*/--sidebar-gutter-h-* vars (never defined anywhere in the codebase) replaced with var(--gutter-h)
  • test/BeforeLogin/index.scss — SCSS nesting flattened, all var(--base) arithmetic and hardcoded rem font sizes replaced with --text-* typography tokens and spacer tokens
  • test/Logo/styles.css--theme-* color tokens replaced with --color-* semantic tokens

Removes the unused Icon test component (only consumed by the OG image route, never rendered in the admin UI).

Before

CleanShot.2026-06-15.at.16.59.22.mp4

After

CleanShot.2026-06-15.at.16.55.15.mp4

…with UI4 tokens

- Refactors AssignTenantFieldModal to use DialogModal/DialogHeader/DialogBody/DialogFooter/DialogCancel/DialogConfirm from @payloadcms/ui
- Converts TenantSelector/index.scss and TenantField/index.scss to CSS with UI4 tokens; replaces broken --main-gutter-h-* vars with --gutter-h
- Converts test BeforeLogin/index.scss to CSS using typography tokens (--text-*) and semantic color tokens
- Converts test Logo/styles.css to UI4 color tokens
- Removes unused Icon test component
- Reduces DocumentFields sidebar padding-top from --spacer-5 to --spacer-4

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@github-actions

github-actions Bot commented Jun 15, 2026

Copy link
Copy Markdown
Contributor

📦 esbuild Bundle Analysis for payload

This analysis was generated by esbuild-bundle-analyzer. 🤖
This PR introduced no changes to the esbuild bundle! 🙌

Comment thread packages/plugin-multi-tenant/src/components/TenantSelector/index.css Outdated
@PatrikKozak PatrikKozak self-assigned this Jun 16, 2026
@JarrodMFlesch JarrodMFlesch enabled auto-merge (squash) June 16, 2026 13:24
@JarrodMFlesch JarrodMFlesch merged commit 29ef906 into main Jun 16, 2026
333 of 336 checks passed
@JarrodMFlesch JarrodMFlesch deleted the fix/plugin-multi-tenant-use-dialog-components branch June 16, 2026 13:57
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.

2 participants