diff --git a/Documentation/CommandDialog/index.md b/Documentation/CommandDialog/index.md index 20eb36f..1095e89 100644 --- a/Documentation/CommandDialog/index.md +++ b/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 diff --git a/Documentation/Dialogs/dialog.md b/Documentation/Dialogs/dialog.md index 8fac4d3..8719c04 100644 --- a/Documentation/Dialogs/dialog.md +++ b/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 diff --git a/Documentation/StepperCommandDialog/index.md b/Documentation/StepperCommandDialog/index.md index b3d1429..a53597a 100644 --- a/Documentation/StepperCommandDialog/index.md +++ b/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 diff --git a/Source/CommandDialog/CommandDialog.tsx b/Source/CommandDialog/CommandDialog.tsx index 137dc6f..486f223 100644 --- a/Source/CommandDialog/CommandDialog.tsx +++ b/Source/CommandDialog/CommandDialog.tsx @@ -24,6 +24,7 @@ const CommandDialogWrapper = ({ visible, width, style, + contentStyle, resizable, buttons, okLabel, @@ -41,6 +42,7 @@ const CommandDialogWrapper = ({ visible?: boolean; width?: string; style?: DialogProps['style']; + contentStyle?: DialogProps['contentStyle']; resizable?: boolean; buttons?: DialogProps['buttons']; okLabel?: string; @@ -120,6 +122,7 @@ const CommandDialogWrapper = ({ visible={visible} width={width} style={style} + contentStyle={contentStyle} resizable={resizable} buttons={buttons} onClose={onClose} @@ -145,6 +148,7 @@ const CommandDialogComponent = (props: Command visible, width, style, + contentStyle, resizable, buttons = DialogButtons.OkCancel, okLabel, @@ -166,6 +170,7 @@ const CommandDialogComponent = (props: Command visible={visible} width={width} style={style} + contentStyle={contentStyle} resizable={resizable} buttons={buttons} okLabel={okLabel} diff --git a/Source/CommandDialog/StepperCommandDialog.tsx b/Source/CommandDialog/StepperCommandDialog.tsx index 158bd71..13f6d5b 100644 --- a/Source/CommandDialog/StepperCommandDialog.tsx +++ b/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 /** 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 = ({ visible = true, width = '600px', style, + contentStyle, resizable = false, isValid, onClose, @@ -112,7 +114,8 @@ const StepperCommandDialogWrapper = ({ 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 = ({ onHide={() => handleClose(DialogResult.Cancelled)} visible={visible} style={{ width, ...style }} + contentStyle={contentStyle} resizable={resizable} closable > @@ -353,6 +357,7 @@ const StepperCommandDialogComponent = ( visible, width, style, + contentStyle, resizable, isValid, onClose, @@ -381,6 +386,7 @@ const StepperCommandDialogComponent = ( visible={visible} width={width} style={style} + contentStyle={contentStyle} resizable={resizable} isValid={isValid} onClose={onClose} diff --git a/Source/Dialogs/Dialog.tsx b/Source/Dialogs/Dialog.tsx index fb8c0ab..3e5abfb 100644 --- a/Source/Dialogs/Dialog.tsx +++ b/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 | Promise; export type ConfirmCallback = () => boolean | void | Promise | Promise; @@ -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}