From 250c2a93ded24b6c68827d56b56e70a1a4b763da Mon Sep 17 00:00:00 2001 From: Katie McFaul Date: Mon, 10 Oct 2022 10:42:45 -0400 Subject: [PATCH 1/4] feat(Popover): update default flip behavior and width --- .../src/components/Popover/Popover.tsx | 17 +++++++-- .../react-core/src/helpers/Popper/Popper.tsx | 36 ++++++++++++++++--- 2 files changed, 47 insertions(+), 6 deletions(-) diff --git a/packages/react-core/src/components/Popover/Popover.tsx b/packages/react-core/src/components/Popover/Popover.tsx index 69254f08406..f1679744f88 100644 --- a/packages/react-core/src/components/Popover/Popover.tsx +++ b/packages/react-core/src/components/Popover/Popover.tsx @@ -261,7 +261,20 @@ export const Popover: React.FunctionComponent = ({ showClose = true, distance = 25, // For every initial starting position, there are 3 escape positions - flipBehavior = ['top', 'right', 'bottom', 'left', 'top', 'right', 'bottom'], + flipBehavior = [ + 'top', + 'bottom', + 'left', + 'right', + 'top-start', + 'top-end', + 'bottom-start', + 'bottom-end', + 'left-start', + 'left-end', + 'right-start', + 'right-end' + ], animationDuration = 300, id, withFocusTrap: propWithFocusTrap, @@ -269,7 +282,7 @@ export const Popover: React.FunctionComponent = ({ tippyProps, reference, hasNoPadding = false, - hasAutoWidth = false, + hasAutoWidth = true, removeFindDomNode = false, ...rest }: PopoverProps) => { diff --git a/packages/react-core/src/helpers/Popper/Popper.tsx b/packages/react-core/src/helpers/Popper/Popper.tsx index 0333f0431aa..ce2ce4a9eef 100644 --- a/packages/react-core/src/helpers/Popper/Popper.tsx +++ b/packages/react-core/src/helpers/Popper/Popper.tsx @@ -1,17 +1,45 @@ import * as React from 'react'; import * as ReactDOM from 'react-dom'; import { usePopper } from './thirdparty/react-popper/usePopper'; -import { Placement, BasePlacement, Modifier } from './thirdparty/popper-core'; +import { Placement, Modifier } from './thirdparty/popper-core'; import { css } from '@patternfly/react-styles'; import { FindRefWrapper } from './FindRefWrapper'; import '@patternfly/react-styles/css/components/Popper/Popper.css'; -const hash = { left: 'right', right: 'left', bottom: 'top', top: 'bottom' }; +const hash = { + left: 'right', + right: 'left', + bottom: 'top', + top: 'bottom', + 'top-start': 'bottom-start', + 'top-end': 'bottom-end', + 'bottom-start': 'top-start', + 'bottom-end': 'top-end', + 'left-start': 'right-start', + 'left-end': 'right-end', + 'right-start': 'left-start', + 'right-end': 'left-end' +}; const getOppositePlacement = (placement: Placement): any => placement.replace( - /left|right|bottom|top/g, - (matched: string) => hash[matched as 'left' | 'right' | 'bottom' | 'top'] as BasePlacement + /left|right|bottom|top|top-start|top-end|bottom-start|bottom-end|right-start|right-end|left-start|left-end/g, + (matched: string) => + hash[ + matched as + | 'left' + | 'right' + | 'bottom' + | 'top' + | 'top-start' + | 'top-end' + | 'bottom-start' + | 'bottom-end' + | 'right-start' + | 'right-end' + | 'left-start' + | 'left-end' + ] as Placement ); /** @deprecated Please use the menuAppendTo prop directly from within the PF component which uses it. */ From ff1fb361ebca0658ccbce5c02bcf4366a065c161 Mon Sep 17 00:00:00 2001 From: Katie McFaul Date: Mon, 10 Oct 2022 10:45:57 -0400 Subject: [PATCH 2/4] fix flip positions for diagonals --- .../react-core/src/helpers/Popper/Popper.tsx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/react-core/src/helpers/Popper/Popper.tsx b/packages/react-core/src/helpers/Popper/Popper.tsx index ce2ce4a9eef..905fd3f9cc4 100644 --- a/packages/react-core/src/helpers/Popper/Popper.tsx +++ b/packages/react-core/src/helpers/Popper/Popper.tsx @@ -11,14 +11,14 @@ const hash = { right: 'left', bottom: 'top', top: 'bottom', - 'top-start': 'bottom-start', - 'top-end': 'bottom-end', - 'bottom-start': 'top-start', - 'bottom-end': 'top-end', - 'left-start': 'right-start', - 'left-end': 'right-end', - 'right-start': 'left-start', - 'right-end': 'left-end' + 'top-start': 'bottom-end', + 'top-end': 'bottom-start', + 'bottom-start': 'top-end', + 'bottom-end': 'top-start', + 'left-start': 'right-end', + 'left-end': 'right-start', + 'right-start': 'left-end', + 'right-end': 'left-start' }; const getOppositePlacement = (placement: Placement): any => From dfa3c1b7ea56194cada7002fa9bd42fec48df722 Mon Sep 17 00:00:00 2001 From: Katie McFaul Date: Mon, 10 Oct 2022 11:13:42 -0400 Subject: [PATCH 3/4] revert default for autoWidth for now --- packages/react-core/src/components/Popover/Popover.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-core/src/components/Popover/Popover.tsx b/packages/react-core/src/components/Popover/Popover.tsx index f1679744f88..6215402ed24 100644 --- a/packages/react-core/src/components/Popover/Popover.tsx +++ b/packages/react-core/src/components/Popover/Popover.tsx @@ -282,7 +282,7 @@ export const Popover: React.FunctionComponent = ({ tippyProps, reference, hasNoPadding = false, - hasAutoWidth = true, + hasAutoWidth = false, removeFindDomNode = false, ...rest }: PopoverProps) => { From f7749c01c5261eb7ea5320a6dbde567cf34ed482 Mon Sep 17 00:00:00 2001 From: Katie McFaul Date: Mon, 24 Oct 2022 10:43:00 -0400 Subject: [PATCH 4/4] remove old comment --- packages/react-core/src/components/Popover/Popover.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/react-core/src/components/Popover/Popover.tsx b/packages/react-core/src/components/Popover/Popover.tsx index 6215402ed24..9ac6e778593 100644 --- a/packages/react-core/src/components/Popover/Popover.tsx +++ b/packages/react-core/src/components/Popover/Popover.tsx @@ -260,7 +260,6 @@ export const Popover: React.FunctionComponent = ({ closeBtnAriaLabel = 'Close', showClose = true, distance = 25, - // For every initial starting position, there are 3 escape positions flipBehavior = [ 'top', 'bottom',