Conversation
Generated component following the Webflow code components scaffold pattern. Includes full and simple prop surface variations.
|
Review the following changes in direct dependencies. Learn more about Socket for GitHub.
|
|
Caution Review the following alerts detected in dependencies. According to your organization's Security Policy, you must resolve all "Block" alerts before proceeding. It is recommended to resolve "Warn" alerts too. Learn more about Socket for GitHub.
|
Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
bodyContent is declared as props.RichText, so at runtime Webflow hands
the component a React slot element, not a string. The React code typed
it as string and fed it to dangerouslySetInnerHTML, which expects
{__html: string} — passing a React element there produces nothing
readable, which is why the modal body was blank. Two changes:
- Type bodyContent (and modalTitle, also a Webflow-provided value) as
React.ReactNode and render bodyContent with {bodyContent} directly.
The contentSlot fallback branch is preserved for consumers who want
to pass custom component children.
- Add a plain-text defaultValue to the bodyContent RichText prop so the
modal has real copy when first dropped on a site (Webflow doesn't
fall back to the React default because it always supplies a slot
element, not undefined).
Also: add vite/client to tsconfig so *.css side-effect imports
type-check, and replace dead activeTheme === 'dark' ternaries inside
the main.tsx activeTheme === 'custom' branch so the build compiles
cleanly.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The contentSlot branch was always winning because the runtime value is a React slot element, which is truthy even when the designer's Content Slot editor shows "Empty". That meant the bodyContent RichText (the only field with a usable editor in the Properties panel) was never rendered. Webflow doesn't currently expose a helpful editor for props.Slot in this position either, so the slot was unusable in practice. Remove the contentSlot prop and always render bodyContent. Consumers who need composable children can fork the component; the common case is rich-text body copy. Also dropped the matching contentSlot demo section from main.tsx. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
1 participant
Component: ModalDialog
Description
A modal dialog component that displays as a centered overlay with a semi-transparent backdrop. Features a title heading at the top, rich body content area, and a close button (X icon) positioned in the top-right corner. Opens with a smooth fade and scale animation, and closes when clicking the backdrop, pressing Escape, or clicking the close button. Focus is trapped within the modal when open, preventing interaction with underlying content. The modal is fully responsive and adapts to different screen sizes with configurable maximum width variants.
What's Included
var(--background-primary, #ffffff), etc.font-family: inherit; color: inherit;ModalDialog.webflow.tsx) — 20+ props for developers/agenciesModalDialogSimple.webflow.tsx) — core text/link props for clientswf-modal-dialog-for Shadow DOM safetyTesting
npm install && npm run devruns locallynpx webflow library shareimports successfully