You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
packages/components/src/components/Modal/Modal.quanta.tsx hardcodes w-full max-w-[90vw] on the modal box and ignores any className passed by the caller: the tailwind-variants result is placed after the {...props} spread on both the ModalOverlay and the inner RACModal, so a caller-provided className is always overwritten.
Its sibling Dialog.quanta.tsx handles this correctly (it merges props.className via twMerge), so the two components behave inconsistently.
The Figma design ("Volto UI – Quanta") shows much narrower confirmation modals, e.g. for the delete confirmation — so every confirmation dialog currently deviates from the design.
There is no way to fix this from the outside, since className is silently dropped.
Proposal
Merge the caller's className like Dialog.quanta does (e.g. composeRenderProps(props.className, (className, renderProps) => twMerge(modalStyles(renderProps), className))), for both the overlay and the modal element.
Callers (DeleteModal, UploadModal, revert dialog) then pass an appropriate width, e.g. max-w-md, to match the design.
Optionally discuss a narrower default width — that changes all consumers at once (bigger blast radius), so it should be a deliberate follow-up.
Acceptance criteria
Given a Quanta Modal with className="max-w-md", when it renders, then the modal box is constrained to that width.
Given a Quanta Modal without a className, the current default rendering is unchanged.
Problem
packages/components/src/components/Modal/Modal.quanta.tsxhardcodesw-full max-w-[90vw]on the modal box and ignores anyclassNamepassed by the caller: the tailwind-variants result is placed after the{...props}spread on both theModalOverlayand the innerRACModal, so a caller-providedclassNameis always overwritten.Its sibling
Dialog.quanta.tsxhandles this correctly (it mergesprops.classNameviatwMerge), so the two components behave inconsistently.Impact
@plone/contents'DeleteModalandUploadModal, and the History revert dialog from [CMSUI] - History route #30/Add History route (#30) #120.classNameis silently dropped.Proposal
classNamelikeDialog.quantadoes (e.g.composeRenderProps(props.className, (className, renderProps) => twMerge(modalStyles(renderProps), className))), for both the overlay and the modal element.max-w-md, to match the design.Acceptance criteria
ModalwithclassName="max-w-md", when it renders, then the modal box is constrained to that width.Modalwithout aclassName, the current default rendering is unchanged.