feat(Combobox): add themeResetClass for the portalled menu (MET-3088) by Zayooo00 · Pull Request #64 · fullstackhouse/plasmic-utils

Zayooo00 · 2026-09-01T05:09:00Z

Follow-up to #62 / #63.

Problem

In prod the Combobox options list is portalled to document.body (Headless UI anchor). Plasmic's design tokens are declared as CSS variables on .plasmic_tokens_<projectId> (applied on each component root), not :root. The portalled menu is outside that element, so var(--token-*) in its generated styles resolves to nothing and the menu renders unstyled on the deployed app. The Plasmic canvas is unaffected because #63 renders the menu inline there.

Change

Register a type: "themeResetClass" prop and apply it to the portalled root (ComboboxOptions). Plasmic's built-in theme-reset mechanism supplies the class carrying the project's default styles and token variable definitions — no hardcoded project id, survives a project migration.

// generated wrapper passes it automatically once re-registered<Combobox.../>

No behaviour change when unset (e.g. non-Plasmic consumers). No effect in the canvas.

Verified

tsc -p tsconfig.package.json, next lint, vitest (49) green.

notion-workspace · 2026-09-01T05:09:06Z

Combobox: allow overriding dropdown menu width / min-width (long option labels wrap in narrow triggers)

In prod the options list is portalled to `document.body`, outside the element that carries Plasmic's design-token CSS variables (they live on `.plasmic_tokens_<projectId>`, not `:root`). `var(--token-*)` in the menu's generated styles then resolves to nothing and the menu renders unstyled. The Plasmic canvas is unaffected because #63 renders the menu inline there. Register a `type: "themeResetClass"` prop and apply it to the portalled root (`ComboboxOptions`). Plasmic supplies the class automatically, so there is no hardcoded project id and it survives a project migration.

…(MET-3088) (fullstackhouse#64) (#6) In prod the options list is portalled to `document.body`, so any style scoped to an ancestor class - notably Plasmic design tokens, which live on `.plasmic_tokens_<projectId>` rather than `:root` - stops applying and the menu renders unstyled. `menuRootClassName` is added to the portalled root (`ComboboxOptions`), so the caller can re-apply that scoped class there. No effect in the Plasmic canvas, where the menu already renders inline inside the scope.

Zayooo00 · 2026-09-01T05:09:00Z

Follow-up to #62 / #63.

Problem

In prod the Combobox options list is portalled to document.body (Headless UI anchor). Plasmic's design tokens are declared as CSS variables on .plasmic_tokens_<projectId> (applied on each component root), not :root. The portalled menu is outside that element, so var(--token-*) in its generated styles resolves to nothing and the menu renders unstyled on the deployed app. The Plasmic canvas is unaffected because #63 renders the menu inline there.

Change

Register a type: "themeResetClass" prop and apply it to the portalled root (ComboboxOptions). Plasmic's built-in theme-reset mechanism supplies the class carrying the project's default styles and token variable definitions — no hardcoded project id, survives a project migration.

// generated wrapper passes it automatically once re-registered<Combobox.../>

No behaviour change when unset (e.g. non-Plasmic consumers). No effect in the canvas.

Verified

tsc -p tsconfig.package.json, next lint, vitest (49) green.

notion-workspace · 2026-09-01T05:09:06Z

Combobox: allow overriding dropdown menu width / min-width (long option labels wrap in narrow triggers)

In prod the options list is portalled to `document.body`, outside the element that carries Plasmic's design-token CSS variables (they live on `.plasmic_tokens_<projectId>`, not `:root`). `var(--token-*)` in the menu's generated styles then resolves to nothing and the menu renders unstyled. The Plasmic canvas is unaffected because #63 renders the menu inline there. Register a `type: "themeResetClass"` prop and apply it to the portalled root (`ComboboxOptions`). Plasmic supplies the class automatically, so there is no hardcoded project id and it survives a project migration.

…(MET-3088) (fullstackhouse#64) (#6) In prod the options list is portalled to `document.body`, so any style scoped to an ancestor class - notably Plasmic design tokens, which live on `.plasmic_tokens_<projectId>` rather than `:root` - stops applying and the menu renders unstyled. `menuRootClassName` is added to the portalled root (`ComboboxOptions`), so the caller can re-apply that scoped class there. No effect in the Plasmic canvas, where the menu already renders inline inside the scope.

Zayooo00 · 2026-09-01T05:09:00Z

Follow-up to #62 / #63.

Problem

In prod the Combobox options list is portalled to document.body (Headless UI anchor). Plasmic's design tokens are declared as CSS variables on .plasmic_tokens_<projectId> (applied on each component root), not :root. The portalled menu is outside that element, so var(--token-*) in its generated styles resolves to nothing and the menu renders unstyled on the deployed app. The Plasmic canvas is unaffected because #63 renders the menu inline there.

Change

Register a type: "themeResetClass" prop and apply it to the portalled root (ComboboxOptions). Plasmic's built-in theme-reset mechanism supplies the class carrying the project's default styles and token variable definitions — no hardcoded project id, survives a project migration.

// generated wrapper passes it automatically once re-registered<Combobox.../>

No behaviour change when unset (e.g. non-Plasmic consumers). No effect in the canvas.

Verified

tsc -p tsconfig.package.json, next lint, vitest (49) green.

notion-workspace · 2026-09-01T05:09:06Z

Combobox: allow overriding dropdown menu width / min-width (long option labels wrap in narrow triggers)

In prod the options list is portalled to `document.body`, outside the element that carries Plasmic's design-token CSS variables (they live on `.plasmic_tokens_<projectId>`, not `:root`). `var(--token-*)` in the menu's generated styles then resolves to nothing and the menu renders unstyled. The Plasmic canvas is unaffected because #63 renders the menu inline there. Register a `type: "themeResetClass"` prop and apply it to the portalled root (`ComboboxOptions`). Plasmic supplies the class automatically, so there is no hardcoded project id and it survives a project migration.

…(MET-3088) (fullstackhouse#64) (#6) In prod the options list is portalled to `document.body`, so any style scoped to an ancestor class - notably Plasmic design tokens, which live on `.plasmic_tokens_<projectId>` rather than `:root` - stops applying and the menu renders unstyled. `menuRootClassName` is added to the portalled root (`ComboboxOptions`), so the caller can re-apply that scoped class there. No effect in the Plasmic canvas, where the menu already renders inline inside the scope.

Zayooo00 · 2026-09-01T05:09:00Z

Follow-up to #62 / #63.

Problem

In prod the Combobox options list is portalled to document.body (Headless UI anchor). Plasmic's design tokens are declared as CSS variables on .plasmic_tokens_<projectId> (applied on each component root), not :root. The portalled menu is outside that element, so var(--token-*) in its generated styles resolves to nothing and the menu renders unstyled on the deployed app. The Plasmic canvas is unaffected because #63 renders the menu inline there.

Change

Register a type: "themeResetClass" prop and apply it to the portalled root (ComboboxOptions). Plasmic's built-in theme-reset mechanism supplies the class carrying the project's default styles and token variable definitions — no hardcoded project id, survives a project migration.

// generated wrapper passes it automatically once re-registered<Combobox.../>

No behaviour change when unset (e.g. non-Plasmic consumers). No effect in the canvas.

Verified

tsc -p tsconfig.package.json, next lint, vitest (49) green.

notion-workspace · 2026-09-01T05:09:06Z

Combobox: allow overriding dropdown menu width / min-width (long option labels wrap in narrow triggers)

In prod the options list is portalled to `document.body`, outside the element that carries Plasmic's design-token CSS variables (they live on `.plasmic_tokens_<projectId>`, not `:root`). `var(--token-*)` in the menu's generated styles then resolves to nothing and the menu renders unstyled. The Plasmic canvas is unaffected because #63 renders the menu inline there. Register a `type: "themeResetClass"` prop and apply it to the portalled root (`ComboboxOptions`). Plasmic supplies the class automatically, so there is no hardcoded project id and it survives a project migration.

…(MET-3088) (fullstackhouse#64) (#6) In prod the options list is portalled to `document.body`, so any style scoped to an ancestor class - notably Plasmic design tokens, which live on `.plasmic_tokens_<projectId>` rather than `:root` - stops applying and the menu renders unstyled. `menuRootClassName` is added to the portalled root (`ComboboxOptions`), so the caller can re-apply that scoped class there. No effect in the Plasmic canvas, where the menu already renders inline inside the scope.

Zayooo00 · 2026-09-01T05:09:00Z

Follow-up to #62 / #63.

Problem

In prod the Combobox options list is portalled to document.body (Headless UI anchor). Plasmic's design tokens are declared as CSS variables on .plasmic_tokens_<projectId> (applied on each component root), not :root. The portalled menu is outside that element, so var(--token-*) in its generated styles resolves to nothing and the menu renders unstyled on the deployed app. The Plasmic canvas is unaffected because #63 renders the menu inline there.

Change

Register a type: "themeResetClass" prop and apply it to the portalled root (ComboboxOptions). Plasmic's built-in theme-reset mechanism supplies the class carrying the project's default styles and token variable definitions — no hardcoded project id, survives a project migration.

// generated wrapper passes it automatically once re-registered<Combobox.../>

No behaviour change when unset (e.g. non-Plasmic consumers). No effect in the canvas.

Verified

tsc -p tsconfig.package.json, next lint, vitest (49) green.

notion-workspace · 2026-09-01T05:09:06Z

Combobox: allow overriding dropdown menu width / min-width (long option labels wrap in narrow triggers)

In prod the options list is portalled to `document.body`, outside the element that carries Plasmic's design-token CSS variables (they live on `.plasmic_tokens_<projectId>`, not `:root`). `var(--token-*)` in the menu's generated styles then resolves to nothing and the menu renders unstyled. The Plasmic canvas is unaffected because #63 renders the menu inline there. Register a `type: "themeResetClass"` prop and apply it to the portalled root (`ComboboxOptions`). Plasmic supplies the class automatically, so there is no hardcoded project id and it survives a project migration.

…(MET-3088) (fullstackhouse#64) (#6) In prod the options list is portalled to `document.body`, so any style scoped to an ancestor class - notably Plasmic design tokens, which live on `.plasmic_tokens_<projectId>` rather than `:root` - stops applying and the menu renders unstyled. `menuRootClassName` is added to the portalled root (`ComboboxOptions`), so the caller can re-apply that scoped class there. No effect in the Plasmic canvas, where the menu already renders inline inside the scope.

Zayooo00 · 2026-09-01T05:09:00Z

Follow-up to #62 / #63.

Problem

In prod the Combobox options list is portalled to document.body (Headless UI anchor). Plasmic's design tokens are declared as CSS variables on .plasmic_tokens_<projectId> (applied on each component root), not :root. The portalled menu is outside that element, so var(--token-*) in its generated styles resolves to nothing and the menu renders unstyled on the deployed app. The Plasmic canvas is unaffected because #63 renders the menu inline there.

Change

Register a type: "themeResetClass" prop and apply it to the portalled root (ComboboxOptions). Plasmic's built-in theme-reset mechanism supplies the class carrying the project's default styles and token variable definitions — no hardcoded project id, survives a project migration.

// generated wrapper passes it automatically once re-registered<Combobox.../>

No behaviour change when unset (e.g. non-Plasmic consumers). No effect in the canvas.

Verified

tsc -p tsconfig.package.json, next lint, vitest (49) green.

notion-workspace · 2026-09-01T05:09:06Z

Combobox: allow overriding dropdown menu width / min-width (long option labels wrap in narrow triggers)

In prod the options list is portalled to `document.body`, outside the element that carries Plasmic's design-token CSS variables (they live on `.plasmic_tokens_<projectId>`, not `:root`). `var(--token-*)` in the menu's generated styles then resolves to nothing and the menu renders unstyled. The Plasmic canvas is unaffected because #63 renders the menu inline there. Register a `type: "themeResetClass"` prop and apply it to the portalled root (`ComboboxOptions`). Plasmic supplies the class automatically, so there is no hardcoded project id and it survives a project migration.

…(MET-3088) (fullstackhouse#64) (#6) In prod the options list is portalled to `document.body`, so any style scoped to an ancestor class - notably Plasmic design tokens, which live on `.plasmic_tokens_<projectId>` rather than `:root` - stops applying and the menu renders unstyled. `menuRootClassName` is added to the portalled root (`ComboboxOptions`), so the caller can re-apply that scoped class there. No effect in the Plasmic canvas, where the menu already renders inline inside the scope.

Zayooo00 · 2026-09-01T05:09:00Z

Follow-up to #62 / #63.

Problem

In prod the Combobox options list is portalled to document.body (Headless UI anchor). Plasmic's design tokens are declared as CSS variables on .plasmic_tokens_<projectId> (applied on each component root), not :root. The portalled menu is outside that element, so var(--token-*) in its generated styles resolves to nothing and the menu renders unstyled on the deployed app. The Plasmic canvas is unaffected because #63 renders the menu inline there.

Change

Register a type: "themeResetClass" prop and apply it to the portalled root (ComboboxOptions). Plasmic's built-in theme-reset mechanism supplies the class carrying the project's default styles and token variable definitions — no hardcoded project id, survives a project migration.

// generated wrapper passes it automatically once re-registered<Combobox.../>

No behaviour change when unset (e.g. non-Plasmic consumers). No effect in the canvas.

Verified

tsc -p tsconfig.package.json, next lint, vitest (49) green.

notion-workspace · 2026-09-01T05:09:06Z

Combobox: allow overriding dropdown menu width / min-width (long option labels wrap in narrow triggers)

In prod the options list is portalled to `document.body`, outside the element that carries Plasmic's design-token CSS variables (they live on `.plasmic_tokens_<projectId>`, not `:root`). `var(--token-*)` in the menu's generated styles then resolves to nothing and the menu renders unstyled. The Plasmic canvas is unaffected because #63 renders the menu inline there. Register a `type: "themeResetClass"` prop and apply it to the portalled root (`ComboboxOptions`). Plasmic supplies the class automatically, so there is no hardcoded project id and it survives a project migration.

…(MET-3088) (fullstackhouse#64) (#6) In prod the options list is portalled to `document.body`, so any style scoped to an ancestor class - notably Plasmic design tokens, which live on `.plasmic_tokens_<projectId>` rather than `:root` - stops applying and the menu renders unstyled. `menuRootClassName` is added to the portalled root (`ComboboxOptions`), so the caller can re-apply that scoped class there. No effect in the Plasmic canvas, where the menu already renders inline inside the scope.

Zayooo00 · 2026-09-01T05:09:00Z

Follow-up to #62 / #63.

Problem

In prod the Combobox options list is portalled to document.body (Headless UI anchor). Plasmic's design tokens are declared as CSS variables on .plasmic_tokens_<projectId> (applied on each component root), not :root. The portalled menu is outside that element, so var(--token-*) in its generated styles resolves to nothing and the menu renders unstyled on the deployed app. The Plasmic canvas is unaffected because #63 renders the menu inline there.

Change

Register a type: "themeResetClass" prop and apply it to the portalled root (ComboboxOptions). Plasmic's built-in theme-reset mechanism supplies the class carrying the project's default styles and token variable definitions — no hardcoded project id, survives a project migration.

// generated wrapper passes it automatically once re-registered<Combobox.../>

No behaviour change when unset (e.g. non-Plasmic consumers). No effect in the canvas.

Verified

tsc -p tsconfig.package.json, next lint, vitest (49) green.

notion-workspace · 2026-09-01T05:09:06Z

Combobox: allow overriding dropdown menu width / min-width (long option labels wrap in narrow triggers)

In prod the options list is portalled to `document.body`, outside the element that carries Plasmic's design-token CSS variables (they live on `.plasmic_tokens_<projectId>`, not `:root`). `var(--token-*)` in the menu's generated styles then resolves to nothing and the menu renders unstyled. The Plasmic canvas is unaffected because #63 renders the menu inline there. Register a `type: "themeResetClass"` prop and apply it to the portalled root (`ComboboxOptions`). Plasmic supplies the class automatically, so there is no hardcoded project id and it survives a project migration.

…(MET-3088) (fullstackhouse#64) (#6) In prod the options list is portalled to `document.body`, so any style scoped to an ancestor class - notably Plasmic design tokens, which live on `.plasmic_tokens_<projectId>` rather than `:root` - stops applying and the menu renders unstyled. `menuRootClassName` is added to the portalled root (`ComboboxOptions`), so the caller can re-apply that scoped class there. No effect in the Plasmic canvas, where the menu already renders inline inside the scope.

Zayooo00 enabled auto-merge (squash) September 1, 2026 05:14

Zayooo00 force-pushed the feat/combobox-menu-root-classname branch from 94b08d5 to 1cfbfdcCompare September 1, 2026 05:15

Zayooo00 changed the title ~~feat(Combobox): add menuRootClassName for portalled-menu style scope (MET-3088)~~feat(Combobox): add themeResetClass for the portalled menu (MET-3088)Sep 1, 2026

dosmiko7 approved these changes Sep 1, 2026
View reviewed changes

Zayooo00 merged commit 69d60f1 into mainSep 1, 2026
2 checks passed

Zayooo00 deleted the feat/combobox-menu-root-classname branch September 1, 2026 05:43

Zayooo00 mentioned this pull request Sep 1, 2026
fix(Combobox): let the menu drop shadow render in prod (MET-3088) #65
Merged