@jmruthers/pace-core 0.5.99 → 0.5.101

package/src/components/Dialog/Dialog.test.tsx

@@ -493,7 +493,7 @@ describe('Dialog Component System', () => {
         const title = screen.getByRole('heading', { level: 2 }); // Radix UI uses h2
         expect(title).toBeInTheDocument();
         expect(title).toHaveTextContent('Test Dialog Title');
-        expect(title).toHaveClass('text-lg', 'font-semibold');
+        // Typography classes removed - semantic h2 element styling comes from CSS, not inline classes
       });
     });
 
@@ -571,7 +571,7 @@ describe('Dialog Component System', () => {
       await waitFor(() => {
         const description = screen.getByText('This is a test description');
         expect(description).toBeInTheDocument();
-        expect(description).toHaveClass('text-sm', 'text-muted-foreground');
+        // Typography classes removed - semantic h5 element styling comes from CSS, not inline classes
       });
     });
 
@@ -632,7 +632,8 @@ describe('Dialog Component System', () => {
       await waitFor(() => {
         const body = screen.getByRole('main');
         expect(body).toBeInTheDocument();
-        expect(body).toHaveClass('flex-1', 'overflow-y-auto');
+        // DialogBody has overflow-y-auto for scrolling, but flex-1 is only needed when enableScrolling={true}
+        expect(body).toHaveClass('overflow-y-auto');
         expect(screen.getByText('Content Section')).toBeInTheDocument();
         expect(screen.getByText('This is the main content of the dialog.')).toBeInTheDocument();
       });

package/src/components/Dialog/Dialog.tsx

@@ -638,10 +638,13 @@ const DialogBody = ({
     return result.html;
   }, [htmlContent, allowHtml, strictSanitization, logWarnings]);
 
+  // Determine if htmlContent was provided (even if processing failed)
+  const hasHtmlContent = Boolean(htmlContent && allowHtml);
+
   return (
     <main
       className={cn(
-        'flex-1 overflow-y-auto px-6 py-2',
+        'overflow-y-auto px-6 py-2',
         className
       )}
       style={mergedStyle}
@@ -655,12 +658,14 @@ const DialogBody = ({
           className="prose prose-sm max-w-none"
         />
       ) : (
-        <div>
-          <div className="text-red-500 mb-2">
-            No HTML content processed. Showing children instead.
-          </div>
+        <>
+          {hasHtmlContent && !processedHtmlContent && (
+            <div className="text-red-500 mb-2">
+              No HTML content processed. Showing children instead.
+            </div>
+          )}
           {children}
-        </div>
+        </>
       )}
     </main>
   );
@@ -719,7 +724,6 @@ const DialogTitle = React.forwardRef<
     <DialogPrimitive.Title
       ref={ref}
       className={cn(
-        'text-lg font-semibold leading-none tracking-tight',
         className
       )}
       {...props}
@@ -735,7 +739,7 @@ const DialogTitle = React.forwardRef<
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
 
 const DialogDescription = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Description>,
+  HTMLHeadingElement,
   DialogDescriptionProps
 >(({ className, htmlContent, allowHtml = true, children, ...props }, ref) => {
   const processedHtmlContent = React.useMemo(() => {
@@ -752,16 +756,18 @@ const DialogDescription = React.forwardRef<
   }, [htmlContent, allowHtml]);
 
   return (
-    <DialogPrimitive.Description
-      ref={ref}
-      className={cn('text-sm text-muted-foreground', className)}
-      {...props}
-    >
-      {processedHtmlContent ? (
-        <span dangerouslySetInnerHTML={{ __html: processedHtmlContent }} />
-      ) : (
-        children
-      )}
+    <DialogPrimitive.Description asChild>
+      <h5
+        ref={ref}
+        className={cn(className)}
+        {...props}
+      >
+        {processedHtmlContent ? (
+          <span dangerouslySetInnerHTML={{ __html: processedHtmlContent }} />
+        ) : (
+          children
+        )}
+      </h5>
     </DialogPrimitive.Description>
   );
 });

package/src/components/Dialog/examples/ScrollableDialogExample.tsx

@@ -0,0 +1,290 @@
+/**
+ * @file Scrollable Dialog Example with Height and Width Constraints
+ * @package @jmruthers/pace-core
+ * @module Components/Dialog/Examples
+ * @since 0.1.0
+ * 
+ * Complete example demonstrating Dialog component with:
+ * - Scrolling enabled
+ * - Height constraints (percentage and fixed)
+ * - Width constraints (percentage and fixed)
+ * - Sticky headers and footers
+ */
+
+import React from 'react';
+import {
+  Dialog,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogBody,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+  Button,
+  Card,
+} from '../../../index';
+
+/**
+ * Example demonstrating Dialog with scrolling, height, and width constraints
+ */
+export function ScrollableDialogExample() {
+  // Generate long content for scrolling demonstration
+  const generateLongContent = (count: number) => {
+    return Array.from({ length: count }, (_, i) => (
+      <Card key={i} className="p-4">
+        <h4>Content Section {i + 1}</h4>
+        <p>
+          This is content section {i + 1}. In a real application, this could be form fields,
+          data displays, tables, or any other content that might make the dialog tall.
+          The dialog will automatically show a scrollbar when content exceeds the height constraints.
+        </p>
+        <p>
+          You can scroll through all the content while the header and footer remain visible
+          at the top and bottom of the dialog.
+        </p>
+      </Card>
+    ));
+  };
+
+  return (
+    <div className="p-6 space-y-6">
+      <div>
+        <h2>Scrollable Dialog with Constraints</h2>
+        <p>Examples demonstrating dialogs with scrolling, height, and width constraints.</p>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        {/* Example 1: Percentage-based constraints */}
+        <Dialog>
+          <DialogTrigger asChild>
+            <Button variant="outline" className="w-full">
+              Percentage Constraints
+            </Button>
+          </DialogTrigger>
+          <DialogContent
+            enableScrolling={true}
+            maxHeightPercent={80}
+            maxWidthPercent={90}
+          >
+            <DialogHeader sticky={true}>
+              <DialogTitle>Percentage-Based Constraints</DialogTitle>
+              <DialogDescription>
+                This dialog uses 90% of viewport width and 80% of viewport height.
+                Content will scroll when it exceeds these constraints.
+              </DialogDescription>
+            </DialogHeader>
+            <DialogBody>
+              <div className="space-y-4">
+                {generateLongContent(25)}
+              </div>
+            </DialogBody>
+            <DialogFooter sticky={true}>
+              <Button variant="outline">Cancel</Button>
+              <Button>Save Changes</Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+
+        {/* Example 2: Fixed pixel constraints */}
+        <Dialog>
+          <DialogTrigger asChild>
+            <Button variant="outline" className="w-full">
+              Fixed Pixel Constraints
+            </Button>
+          </DialogTrigger>
+          <DialogContent
+            enableScrolling={true}
+            maxHeight="600px"
+            maxWidth="800px"
+          >
+            <DialogHeader sticky={true}>
+              <DialogTitle>Fixed Pixel Constraints</DialogTitle>
+              <DialogDescription>
+                This dialog has a fixed maximum height of 600px and width of 800px.
+                Perfect for consistent sizing regardless of viewport size.
+              </DialogDescription>
+            </DialogHeader>
+            <DialogBody>
+              <div className="space-y-4">
+                {generateLongContent(20)}
+              </div>
+            </DialogBody>
+            <DialogFooter sticky={true}>
+              <Button variant="outline">Cancel</Button>
+              <Button>Confirm</Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+
+        {/* Example 3: Mixed constraints (percentage height, fixed width) */}
+        <Dialog>
+          <DialogTrigger asChild>
+            <Button variant="outline" className="w-full">
+              Mixed Constraints
+            </Button>
+          </DialogTrigger>
+          <DialogContent
+            enableScrolling={true}
+            maxHeightPercent={75}
+            maxWidth="700px"
+          >
+            <DialogHeader sticky={true}>
+              <DialogTitle>Mixed Constraints</DialogTitle>
+              <DialogDescription>
+                This dialog uses 75% of viewport height but has a fixed width of 700px.
+                You can mix percentage and fixed constraints as needed.
+              </DialogDescription>
+            </DialogHeader>
+            <DialogBody>
+              <div className="space-y-4">
+                {generateLongContent(30)}
+              </div>
+            </DialogBody>
+            <DialogFooter sticky={true}>
+              <Button variant="outline">Close</Button>
+              <Button>Apply</Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+
+        {/* Example 4: Minimum and maximum constraints */}
+        <Dialog>
+          <DialogTrigger asChild>
+            <Button variant="outline" className="w-full">
+              Min/Max Constraints
+            </Button>
+          </DialogTrigger>
+          <DialogContent
+            enableScrolling={true}
+            maxHeightPercent={85}
+            maxWidthPercent={80}
+            minHeight="400px"
+            minWidth="500px"
+          >
+            <DialogHeader sticky={true}>
+              <DialogTitle>Min/Max Constraints</DialogTitle>
+              <DialogDescription>
+                This dialog has both minimum (400px height, 500px width) and maximum
+                (85% height, 80% width) constraints. It will never be smaller than
+                the minimums or larger than the maximums.
+              </DialogDescription>
+            </DialogHeader>
+            <DialogBody>
+              <div className="space-y-4">
+                {generateLongContent(15)}
+              </div>
+            </DialogBody>
+            <DialogFooter sticky={true}>
+              <Button variant="outline">Cancel</Button>
+              <Button>Save</Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+
+        {/* Example 5: Narrow dialog with tall content */}
+        <Dialog>
+          <DialogTrigger asChild>
+            <Button variant="outline" className="w-full">
+              Narrow & Tall
+            </Button>
+          </DialogTrigger>
+          <DialogContent
+            enableScrolling={true}
+            maxHeightPercent={90}
+            maxWidth="500px"
+          >
+            <DialogHeader sticky={true}>
+              <DialogTitle>Narrow Dialog with Tall Content</DialogTitle>
+              <DialogDescription>
+                A narrow dialog (500px) that uses 90% of viewport height.
+                Great for side panels or detail views.
+              </DialogDescription>
+            </DialogHeader>
+            <DialogBody>
+              <div className="space-y-4">
+                {generateLongContent(40)}
+              </div>
+            </DialogBody>
+            <DialogFooter sticky={true}>
+              <Button variant="outline">Close</Button>
+              <Button>Done</Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+
+        {/* Example 6: Wide dialog with moderate height */}
+        <Dialog>
+          <DialogTrigger asChild>
+            <Button variant="outline" className="w-full">
+              Wide & Moderate Height
+            </Button>
+          </DialogTrigger>
+          <DialogContent
+            enableScrolling={true}
+            maxHeight="500px"
+            maxWidthPercent={95}
+          >
+            <DialogHeader sticky={true}>
+              <DialogTitle>Wide Dialog with Moderate Height</DialogTitle>
+              <DialogDescription>
+                A wide dialog (95% width) with a fixed height of 500px.
+                Perfect for data tables or wide forms.
+              </DialogDescription>
+            </DialogHeader>
+            <DialogBody>
+              <div className="space-y-4">
+                {generateLongContent(18)}
+              </div>
+            </DialogBody>
+            <DialogFooter sticky={true}>
+              <Button variant="outline">Cancel</Button>
+              <Button>Submit</Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      </div>
+
+      <Card className="p-6">
+        <h3>Key Features Demonstrated:</h3>
+        <ul className="list-disc list-inside space-y-2">
+          <li>
+            <strong>enableScrolling={true}:</strong> Enables the flex layout and scrolling
+            functionality. Required for proper scroll behavior.
+          </li>
+          <li>
+            <strong>maxHeightPercent:</strong> Maximum height as a percentage of viewport
+            height (0-100). Automatically capped at 95% to ensure margins.
+          </li>
+          <li>
+            <strong>maxWidthPercent:</strong> Maximum width as a percentage of viewport
+            width (0-100). Automatically capped at 95% to ensure margins.
+          </li>
+          <li>
+            <strong>maxHeight:</strong> Fixed maximum height in CSS units (e.g., "600px",
+            "50vh", "20rem"). Overrides maxHeightPercent if both are provided.
+          </li>
+          <li>
+            <strong>maxWidth:</strong> Fixed maximum width in CSS units. Overrides
+            maxWidthPercent and size prop if provided.
+          </li>
+          <li>
+            <strong>minHeight:</strong> Minimum height in CSS units. Ensures dialog
+            never gets smaller than this value.
+          </li>
+          <li>
+            <strong>minWidth:</strong> Minimum width in CSS units. Ensures dialog
+            never gets smaller than this value.
+          </li>
+          <li>
+            <strong>sticky={true}:</strong> On DialogHeader and DialogFooter, keeps
+            these elements visible while scrolling through content.
+          </li>
+        </ul>
+      </Card>
+    </div>
+  );
+}
+
+export default ScrollableDialogExample;
+