Merge pull request #393 from iCHEF/feature/add_right_placement_strate…

…gy_pt2 [Anchor] Support left / right direction (pt. 4 - add horizontal placement prop on Popover)
iCHEF · Oct 27, 2022 · c22e880 · c22e880
2 parents 2e03919 + 1bd91ac
commit c22e880
Show file tree

Hide file tree

Showing 7 changed files with 79 additions and 4 deletions.
diff --git 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
@@ -50,4 +50,35 @@ describe('Pure <Popover>', () => {
         left: 100,
       });
   });
+
+  describe('container max height', () => {
+    it('compute maxHeight on vertical placement', () => {
+      const wrapper = shallow(
+        <PurePopover
+          placement="top"
+          remainingSpace={50}
+        />
+      );
+      const containerClassName = BEM.container.toString();
+
+      expect(wrapper.find(`.${containerClassName}`).prop('style'))
+        .toMatchObject({
+          maxHeight: 26,
+        });
+    });
+    it('wont compute maxHeight on horizontal placement', () => {
+      const wrapper = shallow(
+        <PurePopover
+          placement="left"
+          remainingSpace={50}
+        />
+      );
+      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
@@ -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(<><div ref={anchorRef} /></>);
+
+  const wrapper = mount(
+    <AnchoredBox
+      defaultPlacement={ANCHORED_PLACEMENT.BOTTOM}
+      anchor={anchorRef.current}
+    />
+  );
+  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
@@ -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
@@ -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
@@ -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
@@ -53,7 +53,7 @@ export function BasicExample() {
   );
 }
 
-export function AnchoredPopover() {
+export function AnchoredPopover(popoverProps) {
   function ButtonRow(props) {
     return (
       <ListRow>
@@ -110,6 +110,7 @@ export function AnchoredPopover() {
           anchor={btn}
           placement="top"
           onClose={handlePopoverClose}
+          {...popoverProps}
         >
           <DemoList />
         </Popover>
@@ -125,3 +126,7 @@ AnchoredPopover.story = {
     },
   },
 };
+
+export function RightPlacementAnchoredPopover() {
+  return <AnchoredPopover defaultPlacement="right" />;
+}