diff --git a/packages/core/src/Popover.js b/packages/core/src/Popover.js index 0297b01c..d2962535 100644 --- a/packages/core/src/Popover.js +++ b/packages/core/src/Popover.js @@ -15,6 +15,7 @@ import closable from './mixins/closable'; import renderToLayer from './mixins/renderToLayer'; import './styles/Popover.scss'; +import { verticalPlacements } from './mixins/anchored/getPositionState'; export const COMPONENT_NAME = prefixClass('popover'); const ROOT_BEM = icBEM(COMPONENT_NAME); @@ -48,7 +49,11 @@ function Popover({ * The `maxHeight` is for `BEM.container`, which doesn't include root class padding. * So we need to minus POPOVER_PADDING here. */ - const maxHeight = remainingSpace ? remainingSpace - POPOVER_PADDING : undefined; + const maxHeight = ( + (remainingSpace && verticalPlacements.includes(placement)) + ? remainingSpace - POPOVER_PADDING + : undefined + ); const handleWrapperClick = (event) => { onInsideClick(event); diff --git a/packages/core/src/__tests__/Popover.test.js b/packages/core/src/__tests__/Popover.test.js index 380511de..d7956c6a 100644 --- a/packages/core/src/__tests__/Popover.test.js +++ b/packages/core/src/__tests__/Popover.test.js @@ -50,4 +50,35 @@ describe('Pure ', () => { left: 100, }); }); + + describe('container max height', () => { + it('compute maxHeight on vertical placement', () => { + const wrapper = shallow( + + ); + const containerClassName = BEM.container.toString(); + + expect(wrapper.find(`.${containerClassName}`).prop('style')) + .toMatchObject({ + maxHeight: 26, + }); + }); + it('wont compute maxHeight on horizontal placement', () => { + const wrapper = shallow( + + ); + const containerClassName = BEM.container.toString(); + + expect(wrapper.find(`.${containerClassName}`).prop('style')) + .toMatchObject({ + maxHeight: undefined, + }); + }); + }); }); diff --git a/packages/core/src/mixins/anchored/__tests__/index.js b/packages/core/src/mixins/anchored/__tests__/index.js index 7d9bce02..b63971f5 100644 --- a/packages/core/src/mixins/anchored/__tests__/index.js +++ b/packages/core/src/mixins/anchored/__tests__/index.js @@ -92,3 +92,21 @@ it('passed anchor and self nodes to getter function for position config', () => 0 ); }); + +it('can pass defaultPlacement through anchored component to getter function for position config', () => { + const anchorRef = React.createRef(); + mount(<>
); + + const wrapper = mount( + + ); + expect(mockedGetterFunc).toHaveBeenCalledWith( + ANCHORED_PLACEMENT.BOTTOM, + anchorRef.current, + wrapper.state().selfNode, + 0 + ); +}); diff --git a/packages/core/src/mixins/anchored/getPositionState.js b/packages/core/src/mixins/anchored/getPositionState.js index 9862c722..87136fb7 100644 --- a/packages/core/src/mixins/anchored/getPositionState.js +++ b/packages/core/src/mixins/anchored/getPositionState.js @@ -5,8 +5,8 @@ import PLACEMENT from './constants/placement'; export { PLACEMENT }; const { TOP, BOTTOM, LEFT, RIGHT } = PLACEMENT; -const verticalPlacements = [TOP, BOTTOM]; -const horizontalPlacements = [LEFT, RIGHT]; +export const verticalPlacements = [TOP, BOTTOM]; +export const horizontalPlacements = [LEFT, RIGHT]; /** * @typedef {typeof TOP| typeof BOTTOM} Placement diff --git a/packages/core/src/mixins/anchored/index.js b/packages/core/src/mixins/anchored/index.js index 86918ac1..da6b80a0 100644 --- a/packages/core/src/mixins/anchored/index.js +++ b/packages/core/src/mixins/anchored/index.js @@ -162,6 +162,7 @@ const anchored = ({ style, distanceFromAnchor, refreshOnWindowResize, + defaultPlacement: omittedDefaultPlacement, ...otherProps } = this.props; diff --git a/packages/core/src/styles/Popover.scss b/packages/core/src/styles/Popover.scss index 68bf9ae1..fd084d37 100644 --- a/packages/core/src/styles/Popover.scss +++ b/packages/core/src/styles/Popover.scss @@ -50,4 +50,19 @@ $component-name: #{$prefix}-popover; border-top-color: $c-popover-background; } } + + &--right { + .#{$component-name}__arrow { + left: -$popover-arrow-size; + border-right-color: $c-popover-background; + } + } + + &--left { + .#{$component-name}__arrow { + left: unset; + right: -$popover-arrow-size * 2; + border-left-color: $c-popover-background; + } + } } diff --git a/packages/storybook/examples/core/Popover.stories.js b/packages/storybook/examples/core/Popover.stories.js index 720b1b5e..f0eddb5c 100644 --- a/packages/storybook/examples/core/Popover.stories.js +++ b/packages/storybook/examples/core/Popover.stories.js @@ -53,7 +53,7 @@ export function BasicExample() { ); } -export function AnchoredPopover() { +export function AnchoredPopover(popoverProps) { function ButtonRow(props) { return ( @@ -110,6 +110,7 @@ export function AnchoredPopover() { anchor={btn} placement="top" onClose={handlePopoverClose} + {...popoverProps} > @@ -125,3 +126,7 @@ AnchoredPopover.story = { }, }, }; + +export function RightPlacementAnchoredPopover() { + return ; +}