Skip to content

Commit

Permalink
feat(Popover): update default flip behavior and width (#8191)
Browse files Browse the repository at this point in the history
* feat(Popover): update default flip behavior and width

* fix flip positions for diagonals

* revert default for autoWidth for now

* remove old comment
  • Loading branch information
kmcfaul authored Oct 25, 2022
1 parent dcdcfd2 commit 108503f
Show file tree
Hide file tree
Showing 2 changed files with 46 additions and 6 deletions.
16 changes: 14 additions & 2 deletions packages/react-core/src/components/Popover/Popover.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -260,8 +260,20 @@ export const Popover: React.FunctionComponent<PopoverProps> = ({
closeBtnAriaLabel = 'Close',
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,
Expand Down
36 changes: 32 additions & 4 deletions packages/react-core/src/helpers/Popper/Popper.tsx
Original file line number Diff line number Diff line change
@@ -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-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 =>
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. */
Expand Down

0 comments on commit 108503f

Please sign in to comment.