Support configuring z-index for popover (#231)

* Support configuring z-index for popover

* bump version

CHANGELOG.md

@@ -1,19 +1,33 @@
 ## Changelog
 
+## 2.15.0
+
+- [feature] support configuring z-index for Popover component
+- [fix] change default z-index value of Modal component to auto
+
+## 2.14.0
+
+- [feature] support configuring z-index for Modal component
+
 ## 2.13.0
+
 - [feature] add prop exitOnUnderlayClicked to Modal component
 
 ## 2.12.0
+
 - [feature] add possibility to pass onCopy to Copiable component
 
 ## 2.11.0
+
 - [feature] support onOpenChange handler for contextMenu
 
 ## 2.10.2
+
 - [feature] upgrade @mapbox/mbx-assembly to 1.6.0
 
 ## 2.10.0
-- [feature] upgrade to react 18 
+
+- [feature] upgrade to react 18
 
 ## 2.9.0
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mapbox/mr-ui",
-  "version": "2.14.0",
+  "version": "2.15.0",
   "description": "UI components for Mapbox projects",
   "main": "index.js",
   "homepage": "./",

src/components/modal/modal.tsx

@@ -14,7 +14,7 @@ interface Props {
   size?: 'small' | 'large' | 'auto';
   padding?: 'large' | 'none';
   margin?: 'large' | 'default';
-  zIndex?: number;
+  zIndex?: number | string;
   onExit?: () => void;
   exitOnUnderlayClicked?: boolean;
   allowEventBubbling?: boolean;
@@ -54,7 +54,7 @@ export default function Modal({
   size = 'large',
   padding = 'large',
   margin = 'default',
-  zIndex = 0,
+  zIndex = 'auto',
   allowEventBubbling = false,
   exitOnUnderlayClicked = true,
   initialFocus,

src/components/popover/examples/popover-a.tsx

@@ -7,11 +7,7 @@ import Popover from '../popover';
 export default function Example(): ReactElement {
   const [open, setOpen] = useState(false);
 
-  const renderPopover = (
-    <div>
-      This is a popover.
-    </div>
-  );
+  const renderPopover = <div>This is a popover.</div>;
 
   return (
     <Popover

src/components/popover/popover.tsx

@@ -13,6 +13,7 @@ interface Props {
   coloring?: 'light' | 'dark' | 'warning' | 'error';
   placement?: 'top' | 'bottom' | 'left' | 'right';
   alignment?: 'center' | 'start' | 'end';
+  zIndex?: number | string;
   hasPointer?: boolean;
   offsetFromAnchor?: number;
   passthroughProps?: {
@@ -24,7 +25,7 @@ interface Props {
   escapeCloses?: boolean;
   hideWhenAnchorIsOffscreen?: boolean;
   allowPlacementAxisChange?: boolean;
-};
+}
 
 /**
  * Display a popover. The popover is positioned relative to an anchor element
@@ -36,6 +37,7 @@ export default function Popover({
   padding = 'medium',
   active = false,
   hasPointer = true,
+  zIndex = 'auto',
   hideWhenAnchorIsOffscreen = false,
   allowPlacementAxisChange = true,
   clickOutsideCloses = true,
@@ -59,16 +61,19 @@ export default function Popover({
     }
   );
 
+  const bodyStyle = {
+    zIndex
+  };
+
   const getContent = () => {
     if (typeof content === 'function') {
       return content();
     }
 
     return content;
-  }
+  };
 
   const onDown = (e: Event) => {
-
     // Don't call onExit if it wasn't provided.
     if (!onExit) {
       return;
@@ -87,19 +92,18 @@ export default function Popover({
     }
 
     onExit();
-  }
+  };
 
   return (
     <PopoverPrimitive.Root open={active}>
       <span ref={triggerRef} style={{ display: 'contents' }}>
-        <PopoverPrimitive.Trigger asChild>
-          {children}
-        </PopoverPrimitive.Trigger>
+        <PopoverPrimitive.Trigger asChild>{children}</PopoverPrimitive.Trigger>
       </span>
       <PopoverPrimitive.Portal>
         <PopoverPrimitive.Content
-          sideOffset={offsetFromAnchor} 
+          sideOffset={offsetFromAnchor}
           className={bodyClasses}
+          style={bodyStyle}
           onEscapeKeyDown={escapeCloses && onExit}
           onPointerDownOutside={clickOutsideCloses && onDown}
           onOpenAutoFocus={getInitialFocus}
@@ -111,7 +115,14 @@ export default function Popover({
           {...passthroughProps}
         >
           {getContent()}
-          {hasPointer && <PopoverPrimitive.Arrow width={12} height={6} offset={6} fill={fill} />}
+          {hasPointer && (
+            <PopoverPrimitive.Arrow
+              width={12}
+              height={6}
+              offset={6}
+              fill={fill}
+            />
+          )}
         </PopoverPrimitive.Content>
       </PopoverPrimitive.Portal>
     </PopoverPrimitive.Root>
@@ -149,6 +160,10 @@ Popover.propTypes = {
    * `'medium'`, `'small'`, or `'none'`.
    */
   padding: PropTypes.oneOf(['medium', 'small', 'none']),
+  /**
+   * z-index of the popover.
+   */
+  zIndex: PropTypes.number,
   /**
    * Whether or not the popover has a triangle pointer.
    */
@@ -195,5 +210,5 @@ Popover.propTypes = {
   /**
    * Props to pass directly to popover content options from `@radix-ui/react-popover`.
    */
-  passthroughProps: PropTypes.object,
+  passthroughProps: PropTypes.object
 };