feat(Popover): add zIndex property (#3919)

kiwicom · Jul 11, 2023 · 36a8d21 · 36a8d21
1 parent 9119426
commit 36a8d21
Show file tree

Hide file tree

Showing 7 changed files with 26 additions and 3 deletions.
diff --git a/packages/orbit-components/src/Popover/Popover.stories.tsx b/packages/orbit-components/src/Popover/Popover.stories.tsx
@@ -426,6 +426,7 @@ ScrollingContent.story = {
 
 export const Playground = () => {
   const renderTimeout = number("renderTimeout", 0);
+  const zIndex = number("zIndex", 710);
   const dataTest = text("dataTest", "test");
   const placement = select("placement", Object.values(PLACEMENTS), PLACEMENTS.BOTTOM_START);
   const width = text("width", "350px");
@@ -442,6 +443,7 @@ export const Playground = () => {
     <Stack justify="center">
       <Popover
         width={width}
+        zIndex={zIndex}
         maxHeight={maxHeight}
         renderTimeout={renderTimeout}
         dataTest={dataTest}

diff --git a/packages/orbit-components/src/Popover/README.md b/packages/orbit-components/src/Popover/README.md
@@ -41,6 +41,7 @@ The table below contains all types of props available in the Popover component.
 | allowOverflow  | `boolean`                | `false`             | Allows the Popover to be cut off instead of moving it while scrolling to keep it visible.                                                        |
 | labelClose     | `React.Node`             | `Close`             | The label for close button.                                                                                                                      |
 | renderTimeout  | `number`                 | `0`                 | The timeout for rendering the Popover.                                                                                                           |
+| zIndex         | `number`                 | `710`               | The zIndex value of the Popover component.                                                                                                       |
 
 ## enum
 

diff --git a/packages/orbit-components/src/Popover/__tests__/index.test.tsx b/packages/orbit-components/src/Popover/__tests__/index.test.tsx
@@ -10,7 +10,7 @@ import Stack from "../../Stack";
 jest.mock("../../hooks/useMediaQuery", () => {
   return () => {
     return {
-      isTablet: false,
+      isTablet: true,
     };
   };
 });

diff --git a/packages/orbit-components/src/Popover/components/ContentWrapper.tsx b/packages/orbit-components/src/Popover/components/ContentWrapper.tsx
@@ -27,6 +27,7 @@ export interface Props extends Common.Globals {
   referenceElement: HTMLElement | null;
   placement: Placement;
   width?: string;
+  zIndex?: number;
   maxHeight?: string;
   noFlip?: boolean;
   allowOverflow?: boolean;
@@ -108,6 +109,7 @@ const StyledPopoverParent = styled.div<{
   width?: string | number;
   shown?: boolean;
   fixed?: boolean;
+  $zIndex?: number;
   transform?: string;
   overlapped?: boolean;
   noPadding?: boolean;
@@ -117,7 +119,19 @@ const StyledPopoverParent = styled.div<{
   right?: string | number;
   position?: string;
 }>`
-  ${({ isInsideModal, width, shown, theme, transform, top, left, bottom, right, position }) => css`
+  ${({
+    isInsideModal,
+    width,
+    shown,
+    theme,
+    transform,
+    top,
+    left,
+    bottom,
+    right,
+    position,
+    $zIndex,
+  }) => css`
     position: fixed;
     bottom: 0;
     left: 0;
@@ -141,7 +155,7 @@ const StyledPopoverParent = styled.div<{
       transform: ${transform};
       transition: ${transition(["opacity"], "fast", "ease-in-out")};
       position: ${position};
-      z-index: ${isInsideModal ? "1000" : "710"};
+      z-index: ${isInsideModal ? "1000" : $zIndex};
       width: ${width ? `${width}` : "auto"};
       border-radius: ${theme.orbit.borderRadiusNormal};
       box-shadow: ${theme.orbit.boxShadowRaised};
@@ -220,6 +234,7 @@ StyledPopoverClose.defaultProps = {
 const PopoverContentWrapper = ({
   children,
   onClose,
+  zIndex = 710,
   labelClose,
   width,
   maxHeight,
@@ -303,6 +318,7 @@ const PopoverContentWrapper = ({
       <StyledPopoverParent
         width={width}
         ref={popoverRef}
+        $zIndex={zIndex}
         tabIndex={0}
         data-test={dataTest}
         id={id}

diff --git a/packages/orbit-components/src/Popover/index.js.flow b/packages/orbit-components/src/Popover/index.js.flow
@@ -34,6 +34,7 @@ export type Props = {|
   +renderInPortal?: boolean,
   +onOpen?: () => void | Promise<any>,
   +onClose?: () => void | Promise<any>,
+  +zIndex?: number,
 |};
 
 declare export default React.ComponentType<Props>;
diff --git a/packages/orbit-components/src/Popover/index.tsx b/packages/orbit-components/src/Popover/index.tsx
@@ -16,6 +16,7 @@ const Popover = ({
   children,
   renderInPortal = true,
   opened,
+  zIndex,
   content,
   onClose,
   id,
@@ -127,6 +128,7 @@ const Popover = ({
       id={id}
       labelClose={labelClose}
       dataTest={dataTest}
+      zIndex={zIndex}
       overlapped={overlapped}
       fixed={fixed}
       noFlip={noFlip}

diff --git a/packages/orbit-components/src/Popover/types.d.ts b/packages/orbit-components/src/Popover/types.d.ts
@@ -31,4 +31,5 @@ export interface Props extends Common.Globals {
   readonly onOpen?: Common.Callback;
   readonly renderInPortal?: boolean;
   readonly onClose?: Common.Callback;
+  readonly zIndex?: number;
 }