From e964c8def3068be3d2749e8a5d0756dc31d20511 Mon Sep 17 00:00:00 2001 From: Austin Sullivan Date: Thu, 23 Mar 2023 15:18:10 -0400 Subject: [PATCH 1/3] fix(Modal): updated position prop to have 'default' option --- packages/react-core/src/components/Modal/Modal.tsx | 7 +++++-- packages/react-core/src/components/Modal/ModalBox.tsx | 2 +- packages/react-core/src/components/Modal/ModalContent.tsx | 2 +- 3 files changed, 7 insertions(+), 4 deletions(-) diff --git a/packages/react-core/src/components/Modal/Modal.tsx b/packages/react-core/src/components/Modal/Modal.tsx index 24013b3fa22..8d5e54fe50b 100644 --- a/packages/react-core/src/components/Modal/Modal.tsx +++ b/packages/react-core/src/components/Modal/Modal.tsx @@ -55,7 +55,7 @@ export interface ModalProps extends React.HTMLProps, OUIAProps { * this yourself you can use this callback function. */ onEscapePress?: (event: KeyboardEvent) => void; /** Alternate position of the modal. */ - position?: 'top'; + 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..f187778ae0d 100644 --- a/packages/react-core/src/components/Modal/ModalBox.tsx +++ b/packages/react-core/src/components/Modal/ModalBox.tsx @@ -15,7 +15,7 @@ export interface ModalBoxProps extends React.HTMLProps { /** Additional classes added to the modal box. */ className?: string; /** Alternate position of the modal. */ - position?: 'top'; + 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..1624d262b9e 100644 --- a/packages/react-core/src/components/Modal/ModalContent.tsx +++ b/packages/react-core/src/components/Modal/ModalContent.tsx @@ -62,7 +62,7 @@ export interface ModalContentProps extends OUIAProps { /** A callback for when the close button is clicked. */ onClose?: () => void; /** Alternate position of the modal. */ - position?: 'top'; + 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. */ From 019ac0c830a7f0aec642867c7ab7485313efab90 Mon Sep 17 00:00:00 2001 From: Austin Sullivan Date: Fri, 24 Mar 2023 09:04:18 -0400 Subject: [PATCH 2/3] chore(Modal): updated position prop description --- packages/react-core/src/components/Modal/Modal.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-core/src/components/Modal/Modal.tsx b/packages/react-core/src/components/Modal/Modal.tsx index 8d5e54fe50b..51e65b173a0 100644 --- a/packages/react-core/src/components/Modal/Modal.tsx +++ b/packages/react-core/src/components/Modal/Modal.tsx @@ -54,7 +54,7 @@ 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 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; From bf96f512ac810d595967ec5e3cfe4a6d0e31752b Mon Sep 17 00:00:00 2001 From: Austin Sullivan Date: Fri, 24 Mar 2023 10:10:18 -0400 Subject: [PATCH 3/3] chore(Modal): updated position prop description in other locations --- packages/react-core/src/components/Modal/ModalBox.tsx | 2 +- packages/react-core/src/components/Modal/ModalContent.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-core/src/components/Modal/ModalBox.tsx b/packages/react-core/src/components/Modal/ModalBox.tsx index f187778ae0d..8f9158876d0 100644 --- a/packages/react-core/src/components/Modal/ModalBox.tsx +++ b/packages/react-core/src/components/Modal/ModalBox.tsx @@ -14,7 +14,7 @@ export interface ModalBoxProps extends React.HTMLProps { children: React.ReactNode; /** Additional classes added to the modal box. */ className?: string; - /** Alternate position of the modal. */ + /** 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; diff --git a/packages/react-core/src/components/Modal/ModalContent.tsx b/packages/react-core/src/components/Modal/ModalContent.tsx index 1624d262b9e..2a8c948fd0e 100644 --- a/packages/react-core/src/components/Modal/ModalContent.tsx +++ b/packages/react-core/src/components/Modal/ModalContent.tsx @@ -61,7 +61,7 @@ export interface ModalContentProps extends OUIAProps { labelId: string; /** A callback for when the close button is clicked. */ onClose?: () => void; - /** Alternate position of the modal. */ + /** 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;