Allowing styles and content styles to be passed through

Documentation/CommandDialog/index.md

@@ -99,6 +99,7 @@ function MyComponent() {
 - `onFieldChange`: Callback when field values change
 - `onBeforeExecute`: Transform command values before execution
 - `style`: Custom CSS styles
+- `contentStyle`: Custom CSS styles for the dialog content area
 - `width`: Dialog width
 
 ## Callback Behavior

Documentation/Dialogs/dialog.md

@@ -69,6 +69,7 @@ const MyComponent = () => {
 - `buttons`: Predefined `DialogButtons` or custom footer content
 - `width`: Dialog width
 - `style`: Custom dialog style forwarded to PrimeReact `Dialog`
+- `contentStyle`: Custom content area style forwarded to PrimeReact `Dialog`
 - `resizable`: Enables resize
 - `isValid`: Enables or disables confirm actions
 - `isBusy`: When `true`, disables all buttons and shows a loading spinner on the primary action button

Documentation/StepperCommandDialog/index.md

@@ -87,6 +87,7 @@ function MyComponent() {
 - `width`: Dialog width (default: `'600px'`)
 - `resizable`: Whether the dialog can be resized
 - `style`: Custom CSS styles
+- `contentStyle`: Custom CSS styles for the dialog content area
 - `onFieldValidate`: Custom validation function for fields
 - `onFieldChange`: Callback when field values change
 - `onBeforeExecute`: Transform command values before execution

Source/CommandDialog/CommandDialog.tsx

@@ -24,6 +24,7 @@ const CommandDialogWrapper = <TCommand extends object>({
     visible,
     width,
     style,
+    contentStyle,
     resizable,
     buttons,
     okLabel,
@@ -41,6 +42,7 @@ const CommandDialogWrapper = <TCommand extends object>({
     visible?: boolean;
     width?: string;
     style?: DialogProps['style'];
+    contentStyle?: DialogProps['contentStyle'];
     resizable?: boolean;
     buttons?: DialogProps['buttons'];
     okLabel?: string;
@@ -120,6 +122,7 @@ const CommandDialogWrapper = <TCommand extends object>({
             visible={visible}
             width={width}
             style={style}
+            contentStyle={contentStyle}
             resizable={resizable}
             buttons={buttons}
             onClose={onClose}
@@ -145,6 +148,7 @@ const CommandDialogComponent = <TCommand extends object = object>(props: Command
         visible,
         width,
         style,
+        contentStyle,
         resizable,
         buttons = DialogButtons.OkCancel,
         okLabel,
@@ -166,6 +170,7 @@ const CommandDialogComponent = <TCommand extends object = object>(props: Command
                 visible={visible}
                 width={width}
                 style={style}
+                contentStyle={contentStyle}
                 resizable={resizable}
                 buttons={buttons}
                 okLabel={okLabel}

Source/CommandDialog/StepperCommandDialog.tsx

@@ -3,7 +3,7 @@
 
 import { ICommandResult } from '@cratis/arc/commands';
 import { DialogResult, useDialogContext } from '@cratis/arc.react/dialogs';
-import { Dialog as PrimeDialog } from 'primereact/dialog';
+import { Dialog as PrimeDialog, type DialogProps as PrimeDialogProps } from 'primereact/dialog';
 import { Stepper as PrimeStepper, type StepperProps } from 'primereact/stepper';
 import { Button } from 'primereact/button';
 import React, { useMemo, useState } from 'react';
@@ -15,7 +15,6 @@ import {
     type CommandFormProps
 } from '@cratis/arc.react/commands';
 import type { CloseDialog, ConfirmCallback, CancelCallback } from '../Dialogs/Dialog';
-import { CSSProperties } from 'react';
 import './StepperCommandDialog.css';
 
 /** Extracts the property name from an accessor function like `c => c.name`. */
@@ -63,7 +62,9 @@ export interface StepperCommandDialogProps<TCommand extends object>
     /** Dialog width. */
     width?: string;
     /** Custom CSS styles applied to the dialog. */
-    style?: CSSProperties;
+    style?: PrimeDialogProps['style'];
+    /** Custom CSS styles applied to the dialog content area. */
+    contentStyle?: PrimeDialogProps['contentStyle'];
     /** Whether the dialog can be resized. Defaults to `false`. */
     resizable?: boolean;
     /** Additional validity gate combined with command form validity. */
@@ -89,6 +90,7 @@ const StepperCommandDialogWrapper = <TCommand extends object>({
     visible = true,
     width = '600px',
     style,
+    contentStyle,
     resizable = false,
     isValid,
     onClose,
@@ -112,7 +114,8 @@ const StepperCommandDialogWrapper = <TCommand extends object>({
     title: string;
     visible?: boolean;
     width?: string;
-    style?: CSSProperties;
+    style?: PrimeDialogProps['style'];
+    contentStyle?: PrimeDialogProps['contentStyle'];
     resizable?: boolean;
     isValid?: boolean;
     onClose?: CloseDialog;
@@ -324,6 +327,7 @@ const StepperCommandDialogWrapper = <TCommand extends object>({
             onHide={() => handleClose(DialogResult.Cancelled)}
             visible={visible}
             style={{ width, ...style }}
+            contentStyle={contentStyle}
             resizable={resizable}
             closable
         >
@@ -353,6 +357,7 @@ const StepperCommandDialogComponent = <TCommand extends object = object>(
         visible,
         width,
         style,
+        contentStyle,
         resizable,
         isValid,
         onClose,
@@ -381,6 +386,7 @@ const StepperCommandDialogComponent = <TCommand extends object = object>(
                 visible={visible}
                 width={width}
                 style={style}
+                contentStyle={contentStyle}
                 resizable={resizable}
                 isValid={isValid}
                 onClose={onClose}

Source/Dialogs/Dialog.tsx

@@ -1,10 +1,10 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import { Dialog as PrimeDialog } from 'primereact/dialog';
+import { Dialog as PrimeDialog, type DialogProps as PrimeDialogProps } from 'primereact/dialog';
 import { Button } from 'primereact/button';
 import { DialogResult, DialogButtons, useDialogContext } from '@cratis/arc.react/dialogs';
-import { CSSProperties, ReactNode } from 'react';
+import { ReactNode } from 'react';
 
 export type CloseDialog = (result: DialogResult) => boolean | void | Promise<boolean> | Promise<void>;
 export type ConfirmCallback = () => boolean | void | Promise<boolean> | Promise<void>;
@@ -19,7 +19,8 @@ export interface DialogProps {
     buttons?: DialogButtons | ReactNode;
     children: ReactNode;
     width?: string;
-    style?: CSSProperties;
+    style?: PrimeDialogProps['style'];
+    contentStyle?: PrimeDialogProps['contentStyle'];
     resizable?: boolean;
     isValid?: boolean;
     isBusy?: boolean;
@@ -39,6 +40,7 @@ export const Dialog = ({
     children, 
     width = '450px', 
     style,
+    contentStyle,
     resizable = false, 
     isValid,
     isBusy = false,
@@ -154,6 +156,7 @@ export const Dialog = ({
             onHide={typeof buttons === 'number' ? () => handleClose(DialogResult.Cancelled) : () => {}}
             visible={visible}
             style={{ width, ...style }}
+            contentStyle={contentStyle}
             resizable={resizable}
             closable={typeof buttons === 'number'}>
             {children}