@ceed/cds 1.28.1 → 1.29.0-next.1

package/dist/components/feedback/Dialog.md

@@ -43,7 +43,9 @@ function ConfirmationDialog({ open, onClose, onConfirm }) {
             <Button variant="plain" color="neutral" onClick={onClose}>
               Cancel
             </Button>
-            <Button onClick={onConfirm}>Confirm</Button>
+            <Button onClick={onConfirm}>
+              Confirm
+            </Button>
           </>
         }
       >
@@ -92,61 +94,6 @@ Dialog Content
 </DialogFrame>
 ```
 
-### Standalone Usage
-
-DialogFrame can be used without a Modal wrapper for embedding dialog-style layouts directly within a page.
-
-> ⚠️ **Important** ⚠️
->
-> When using DialogFrame without Modal, the parent container **must** meet the following requirements:
->
-> - `position: 'relative'` — DialogFrame uses absolute positioning internally
-> - Explicit `width` and `height` — `height` must be an absolute value (e.g., `300`, `'400px'`), not a relative value like `%` or `auto`
->
-> DialogFrame inherits its dimensions from `ModalDialog`, which normally receives sizing from the Modal overlay. Without these constraints, the component will not render with correct dimensions.
-
-```tsx
-<Box sx={{
-  position: 'relative',
-  width: 480,
-  height: 300
-}}>
-<DialogFrame {...args} title="Standalone Dialog" actions={<>
-  <Button variant="plain" color="neutral">
-    Cancel
-  </Button>
-  <Button variant="plain">Confirm</Button>
-</>}>
-DialogFrame used without Modal. The parent container must provide explicit width and height.
-</DialogFrame>
-</Box>
-```
-
-```tsx
-import { DialogFrame, Button, Box } from '@ceed/cds';
-
-// Standalone usage requires explicit container dimensions
-function EmbeddedDialog() {
-  return (
-    <Box sx={{ position: 'relative', width: 480, height: 300 }}>
-      <DialogFrame
-        title="Settings"
-        actions={
-          <>
-            <Button variant="plain" color="neutral">
-              Cancel
-            </Button>
-            <Button>Save</Button>
-          </>
-        }
-      >
-        This dialog is embedded directly in the page layout.
-      </DialogFrame>
-    </Box>
-  );
-}
-```
-
 ## When to Use
 
 ### ✅ Good Use Cases
@@ -230,11 +177,21 @@ function QuickAddDialog({ open, onClose, onSubmit }) {
         <Stack gap={2}>
           <FormControl>
             <FormLabel>Name</FormLabel>
-            <Input value={name} onChange={(e) => setName(e.target.value)} placeholder="Enter name" autoFocus />
+            <Input
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="Enter name"
+              autoFocus
+            />
           </FormControl>
           <FormControl>
             <FormLabel>Email</FormLabel>
-            <Input type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="Enter email" />
+            <Input
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              placeholder="Enter email"
+            />
           </FormControl>
         </Stack>
       </DialogFrame>
@@ -259,11 +216,15 @@ function UnsavedChangesDialog({ open, onClose, onDiscard, onSave }) {
             <Button variant="outlined" color="danger" onClick={onDiscard}>
               Discard
             </Button>
-            <Button onClick={onSave}>Save Changes</Button>
+            <Button onClick={onSave}>
+              Save Changes
+            </Button>
           </>
         }
       >
-        <Typography>You have unsaved changes. Would you like to save them before leaving?</Typography>
+        <Typography>
+          You have unsaved changes. Would you like to save them before leaving?
+        </Typography>
       </DialogFrame>
     </Modal>
   );
@@ -276,7 +237,14 @@ function UnsavedChangesDialog({ open, onClose, onDiscard, onSave }) {
 function InfoDialog({ open, onClose, title, message }) {
   return (
     <Modal open={open} onClose={onClose}>
-      <DialogFrame title={title} actions={<Button onClick={onClose}>Got it</Button>}>
+      <DialogFrame
+        title={title}
+        actions={
+          <Button onClick={onClose}>
+            Got it
+          </Button>
+        }
+      >
         <Typography>{message}</Typography>
       </DialogFrame>
     </Modal>
@@ -333,8 +301,18 @@ function ProcessingDialog({ open, status, onClose }) {
   return (
     <Modal open={open} onClose={isProcessing ? undefined : onClose}>
       <DialogFrame
-        title={isProcessing ? 'Processing...' : isSuccess ? 'Success!' : 'Error'}
-        actions={!isProcessing && <Button onClick={onClose}>{isSuccess ? 'Done' : 'Try Again'}</Button>}
+        title={
+          isProcessing ? 'Processing...' :
+          isSuccess ? 'Success!' :
+          'Error'
+        }
+        actions={
+          !isProcessing && (
+            <Button onClick={onClose}>
+              {isSuccess ? 'Done' : 'Try Again'}
+            </Button>
+          )
+        }
       >
         <Box sx={{ textAlign: 'center', py: 2 }}>
           {isProcessing && <CircularProgress />}
@@ -479,7 +457,9 @@ DialogFrame should be wrapped in Modal for proper behavior:
 // Fullscreen for complex content or mobile
 <Modal open={open} onClose={onClose}>
   <DialogFrame fullscreen title="Edit Profile">
-    <Box sx={{ p: 2 }}>{/* Large form or content */}</Box>
+    <Box sx={{ p: 2 }}>
+      {/* Large form or content */}
+    </Box>
   </DialogFrame>
 </Modal>
 ```
@@ -520,7 +500,9 @@ DialogFrame inherits accessibility features from Modal:
 
 ```tsx
 // Title provides context
-<DialogFrame title="Confirm Deletion">{/* Content is read after title */}</DialogFrame>
+<DialogFrame title="Confirm Deletion">
+  {/* Content is read after title */}
+</DialogFrame>
 ```
 
 ## Best Practices
@@ -548,7 +530,9 @@ DialogFrame inherits accessibility features from Modal:
 ```tsx
 // ✅ Good: Brief, scannable content
 <DialogFrame title="Delete Project">
-  <Typography>This will permanently delete the project and all its data.</Typography>
+  <Typography>
+    This will permanently delete the project and all its data.
+  </Typography>
 </DialogFrame>
 ```
 
@@ -576,7 +560,7 @@ DialogFrame inherits accessibility features from Modal:
 // ❌ Bad: Dialog for simple feedback
 <DialogFrame title="Success">
   <Typography>Item saved!</Typography>
-</DialogFrame>;
+</DialogFrame>
 
 // ✅ Good: Use Toast
 showToast({ message: 'Item saved!' });
@@ -586,7 +570,9 @@ showToast({ message: 'Item saved!' });
 
 ```tsx
 // ❌ Bad: Complex form in dialog
-<DialogFrame title="Create Account">{/* 20+ form fields */}</DialogFrame>
+<DialogFrame title="Create Account">
+  {/* 20+ form fields */}
+</DialogFrame>
 ```
 
 3. **Don't use vague button labels**: Be specific about actions
@@ -613,7 +599,9 @@ For dialogs with heavy content:
 function HeavyDialog({ open, onClose }) {
   return (
     <Modal open={open} onClose={onClose}>
-      <DialogFrame title="Data Preview">{open && <HeavyDataComponent />}</DialogFrame>
+      <DialogFrame title="Data Preview">
+        {open && <HeavyDataComponent />}
+      </DialogFrame>
     </Modal>
   );
 }
@@ -637,13 +625,11 @@ const handleCancel = useCallback(() => {
 Unmount dialog completely when not needed:
 
 ```tsx
-{
-  open && (
-    <Modal open={open} onClose={onClose}>
-      <DialogFrame>...</DialogFrame>
-    </Modal>
-  );
-}
+{open && (
+  <Modal open={open} onClose={onClose}>
+    <DialogFrame>...</DialogFrame>
+  </Modal>
+)}
 ```
 
 DialogFrame provides a consistent structure for dialog content. Combine it with Modal for proper overlay behavior, keep content concise and actionable, and always provide clear options for users to proceed or cancel.