Skip to content

Commit 64b4053

Browse files
maxyingerclaude
andauthored
fix(ui): address review feedback on #9432
Empty the changeset (Mosaic has no consumer-visible surface), match the `[clerk] ` prefix the package's other dev warnings use, and give the stack veil the phone band's `slow` duration so it stays in step with the recede it accompanies. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
1 parent 8b7c0aa commit 64b4053

3 files changed

Lines changed: 8 additions & 5 deletions

File tree

.changeset/dialog-stack-motion.md

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,2 @@
11
---
2-
'@clerk/ui': patch
32
---
4-
5-
Mosaic `Dialog` now distinguishes a stack — successive `prompt` dialogs, such as a confirmation over the form it is confirming — from a dialog opened over a `panel` or `card`. A stacked prompt paints no backdrop of its own, so the page no longer darkens further with every level; the prompt beneath it dims and recedes instead. Dialogs opened over a `panel` or `card` are unchanged. Opening a `panel` or `card` inside another dialog now warns in development.

packages/ui/src/mosaic/components/dialog/dialog.styles.ts

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -180,7 +180,13 @@ export const styles = stylex.create({
180180
opacity: 'var(--_cl-stack-veil, 0)',
181181
pointerEvents: 'none',
182182
position: 'absolute',
183-
transitionDuration: durationVars['--cl-duration-base'],
183+
// Tracks the recede it accompanies rather than standing on its own: the two are halves of
184+
// one gesture, and the phone band runs the transform at `slow`. Pinning the veil at `base`
185+
// there finishes the dim 100ms before the surface stops moving, in both directions.
186+
transitionDuration: {
187+
default: durationVars['--cl-duration-base'],
188+
'@media (max-width: 47.99rem)': durationVars['--cl-duration-slow'],
189+
},
184190
transitionProperty: 'opacity',
185191
transitionTimingFunction: easingVars['--cl-ease-enter'],
186192
zIndex: 1,

packages/ui/src/mosaic/components/dialog/dialog.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -246,7 +246,7 @@ function useNestedSizeWarning(isNestedInDialog: boolean, size: DialogSize) {
246246
return;
247247
}
248248
console.warn(
249-
`Mosaic: a Dialog opened inside another Dialog should be size="prompt", but this one is size="${size}". ` +
249+
`[clerk] a Dialog opened inside another Dialog should be size="prompt", but this one is size="${size}". ` +
250250
'Only prompts are meant to open over another dialog; the rest are root-level surfaces.',
251251
);
252252
}, [isNestedInDialog, size]);

0 commit comments

Comments
 (0)