Merge pull request #709 from strapi/enh/add-popover-placement

Add placement props to Popover component

Author: HichamELBSI

packages/strapi-design-system/src/Popover/Popover.js

@@ -8,6 +8,21 @@ import { Portal } from '../Portal';
 
 import { useIntersection } from '../helpers/useIntersection';
 
+export const POPOVER_PLACEMENTS = [
+  'top',
+  'top-start',
+  'top-end',
+  'right',
+  'right-start',
+  'right-end',
+  'bottom',
+  'bottom-start',
+  'bottom-end',
+  'left',
+  'left-start',
+  'left-end',
+];
+
 const PopoverWrapper = styled(Box)`
   box-shadow: ${({ theme }) => theme.shadows.filterShadow};
   z-index: 4;
@@ -37,12 +52,22 @@ const PopoverScrollable = styled(Box)`
   }
 `;
 
-const PopoverContent = ({ source, children, spacing, fullWidth, onReachEnd, intersectionId, centered, ...props }) => {
+const PopoverContent = ({
+  source,
+  children,
+  spacing,
+  fullWidth,
+  placement,
+  onReachEnd,
+  intersectionId,
+  centered,
+  ...props
+}) => {
   const popoverRef = React.useRef(null);
   const [width, setWidth] = React.useState(undefined);
   const { x, y, reference, floating, strategy } = useFloating({
     strategy: 'fixed',
-    placement: centered ? 'bottom' : 'bottom-start',
+    placement: centered ? 'bottom' : placement,
     middleware: [
       offset({
         mainAxis: spacing,
@@ -102,6 +127,7 @@ const popoverDefaultProps = {
   intersectionId: undefined,
   onReachEnd: undefined,
   centered: false,
+  placement: 'bottom-start',
 };
 
 const popoverProps = {
@@ -122,6 +148,10 @@ const popoverProps = {
    * The callback invoked after a scroll to the bottom of the popover content.
    */
   onReachEnd: PropTypes.func,
+  /**
+   * The popover position
+   */
+  placement: PropTypes.oneOf(POPOVER_PLACEMENTS),
   /**
    * A React ref. Used to defined the position of the popover.
    */

packages/strapi-design-system/src/SimpleMenu/SimpleMenu.js

@@ -7,7 +7,7 @@ import { Typography } from '../Typography';
 import { Box } from '../Box';
 import { Flex } from '../Flex';
 import { Button } from '../Button';
-import { Popover } from '../Popover';
+import { Popover, POPOVER_PLACEMENTS } from '../Popover';
 import { getOptionStyle } from './utils';
 import { useId } from '../helpers/useId';
 import { KeyboardKeys } from '../helpers/keyboardKeys';
@@ -97,6 +97,7 @@ export const SimpleMenu = ({
   onOpen = () => {},
   onClose = () => {},
   size,
+  popoverPlacement,
   ...props
 }) => {
   const menuButtonRef = useRef();
@@ -211,7 +212,7 @@ export const SimpleMenu = ({
         {label}
       </Component>
       {visible && (
-        <Popover onBlur={handleBlur} source={menuButtonRef} spacing={4}>
+        <Popover onBlur={handleBlur} placement={popoverPlacement} source={menuButtonRef} spacing={4}>
           <Box role="menu" as="ul" padding={1} id={menuId}>
             {childrenClone}
           </Box>
@@ -228,6 +229,7 @@ SimpleMenu.defaultProps = {
 SimpleMenu.displayName = 'SimpleMenu';
 
 SimpleMenu.defaultProps = {
+  popoverPlacement: 'bottom-start',
   size: 'M',
 };
 
@@ -238,6 +240,7 @@ SimpleMenu.propTypes = {
   label: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.element]).isRequired,
   onClose: PropTypes.func,
   onOpen: PropTypes.func,
+  popoverPlacement: PropTypes.oneOf(POPOVER_PLACEMENTS),
 
   /**
    * Size of the trigger button.

packages/strapi-design-system/src/v2/SimpleMenu/SimpleMenu.js

@@ -7,7 +7,7 @@ import { Box } from '../../Box';
 import { Flex } from '../../Flex';
 import { Button } from '../../Button';
 import { BaseLink } from '../../BaseLink';
-import { Popover } from '../../Popover';
+import { Popover, POPOVER_PLACEMENTS } from '../../Popover';
 import { getOptionStyle } from './utils';
 import { useId } from '../../helpers/useId';
 import { KeyboardKeys } from '../../helpers/keyboardKeys';
@@ -97,6 +97,7 @@ export const SimpleMenu = ({
   onOpen = () => {},
   onClose = () => {},
   size,
+  popoverPlacement,
   ...props
 }) => {
   const menuButtonRef = useRef();
@@ -211,7 +212,7 @@ export const SimpleMenu = ({
         {label}
       </Component>
       {visible && (
-        <Popover onBlur={handleBlur} source={menuButtonRef} spacing={4}>
+        <Popover onBlur={handleBlur} placement={popoverPlacement} source={menuButtonRef} spacing={4}>
           <Box role="menu" as="ul" padding={1} id={menuId}>
             {childrenClone}
           </Box>
@@ -228,6 +229,7 @@ SimpleMenu.defaultProps = {
 SimpleMenu.displayName = 'SimpleMenu';
 
 SimpleMenu.defaultProps = {
+  popoverPlacement: 'bottom-start',
   size: 'M',
 };
 
@@ -238,6 +240,7 @@ SimpleMenu.propTypes = {
   label: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.element]).isRequired,
   onClose: PropTypes.func,
   onOpen: PropTypes.func,
+  popoverPlacement: PropTypes.oneOf(POPOVER_PLACEMENTS),
 
   /**
    * Size of the trigger button.