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 ;
+}