diff --git a/packages/react-core/src/components/Modal/Modal.tsx b/packages/react-core/src/components/Modal/Modal.tsx index 24013b3fa22..51e65b173a0 100644 --- a/packages/react-core/src/components/Modal/Modal.tsx +++ b/packages/react-core/src/components/Modal/Modal.tsx @@ -54,8 +54,8 @@ export interface ModalProps extends React.HTMLProps, OUIAProps { /** Modal handles pressing of the escape key and closes the modal. If you want to handle * this yourself you can use this callback function. */ onEscapePress?: (event: KeyboardEvent) => void; - /** Alternate position of the modal. */ - position?: 'top'; + /** Position of the modal. By default a modal will be positioned vertically and horizontally centered. */ + position?: 'default' | 'top'; /** Offset from alternate position. Can be any valid CSS length/percentage. */ positionOffset?: string; /** Flag to show the close button in the header area of the modal. */ @@ -113,7 +113,8 @@ export class Modal extends React.Component { variant: 'default', hasNoBodyWrapper: false, appendTo: () => document.body, - ouiaSafe: true + ouiaSafe: true, + position: 'default' }; constructor(props: ModalProps) { @@ -230,6 +231,7 @@ export class Modal extends React.Component { titleLabel, ouiaId, ouiaSafe, + position, ...props } = this.props; const { container } = this.state; @@ -254,6 +256,7 @@ export class Modal extends React.Component { bodyAriaRole={bodyAriaRole} ouiaId={ouiaId !== undefined ? ouiaId : this.state.ouiaStateId} ouiaSafe={ouiaSafe} + position={position} />, container ) as React.ReactElement; diff --git a/packages/react-core/src/components/Modal/ModalBox.tsx b/packages/react-core/src/components/Modal/ModalBox.tsx index e59a3b173bb..8f9158876d0 100644 --- a/packages/react-core/src/components/Modal/ModalBox.tsx +++ b/packages/react-core/src/components/Modal/ModalBox.tsx @@ -14,8 +14,8 @@ export interface ModalBoxProps extends React.HTMLProps { children: React.ReactNode; /** Additional classes added to the modal box. */ className?: string; - /** Alternate position of the modal. */ - position?: 'top'; + /** Position of the modal. By default a modal will be positioned vertically and horizontally centered. */ + position?: 'default' | 'top'; /** Offset from alternate position. Can be any valid CSS length/percentage. */ positionOffset?: string; /** Variant of the modal. */ diff --git a/packages/react-core/src/components/Modal/ModalContent.tsx b/packages/react-core/src/components/Modal/ModalContent.tsx index 800f55eed53..2a8c948fd0e 100644 --- a/packages/react-core/src/components/Modal/ModalContent.tsx +++ b/packages/react-core/src/components/Modal/ModalContent.tsx @@ -61,8 +61,8 @@ export interface ModalContentProps extends OUIAProps { labelId: string; /** A callback for when the close button is clicked. */ onClose?: () => void; - /** Alternate position of the modal. */ - position?: 'top'; + /** Position of the modal. By default a modal will be positioned vertically and horizontally centered. */ + position?: 'default' | 'top'; /** Offset from alternate position. Can be any valid CSS length/percentage. */ positionOffset?: string; /** Flag to show the close button in the header area of the modal. */