[QUAR-706] Add custom z-index value for BpkPopover (#3763)

Co-authored-by: James Ronald <[email protected]>

Author: kirstybryce

packages/bpk-component-inset-banner/README.md

@@ -30,6 +30,7 @@ export default () => (
       popoverId: 'popover',
       labelTitle: true,
       closeBtnIcon: false,
+      zIndexCustom: 1200;
     }}
     logo="logo.png"
     subheadline="My subheadline"

packages/bpk-component-inset-banner/src/BpkInsetBanner-test.tsx

@@ -67,7 +67,7 @@ describe('BpkInsetBanner', () => {
       />,
     );
 
-    const ctaButton = screen.getByTestId('adInfoBtn');
+    const ctaButton = screen.getByTestId('ctaBtn');
 
     fireEvent.click(ctaButton);
 

packages/bpk-component-inset-banner/src/BpkInsetBanner.tsx

@@ -51,6 +51,7 @@ export type Props = {
     popoverId?: string;
     labelTitle?: boolean;
     closeBtnIcon?: boolean;
+    zIndexCustom?: number;
   };
   logo?: string;
   subheadline?: string;
@@ -121,11 +122,12 @@ const BpkInsetBanner = ({
               closeButtonText={callToAction?.buttonCloseLabel}
               closeButtonIcon={callToAction?.closeBtnIcon}
               labelAsTitle={callToAction?.labelTitle}
+              zIndexValue={callToAction?.zIndexCustom}
               target={
                 <button
                   aria-label={callToAction?.buttonA11yLabel}
                   className={getClassName('bpk-inset-banner--cta-button')}
-                  data-testid="adInfoBtn"
+                  data-testid="ctaBtn"
                   aria-hidden="false"
                   type="button"
                 >

packages/bpk-component-popover/src/BpkPopover.module.scss

@@ -25,10 +25,6 @@
 
 $arrow-size: tokens.bpk-spacing-lg();
 
-.bpk-popover--container {
-  z-index: tokens.$bpk-zindex-popover;
-}
-
 .bpk-popover {
   transition: opacity tokens.$bpk-duration-sm ease-in-out;
   outline: 0;

packages/bpk-component-popover/src/BpkPopover.tsx

@@ -109,6 +109,7 @@ export type Props = CloseButtonProps & {
   target: ReactElement<any>;
   closeButtonLabel?: string;
   actionText?: string;
+  zIndexValue?: number;
   onAction?: () => void;
   renderTarget?: () => HTMLElement | HTMLElement | undefined;
   [rest: string]: any;
@@ -134,6 +135,7 @@ const BpkPopover = ({
   renderTarget = () => undefined,
   showArrow = true,
   target,
+  zIndexValue = 900,
   ...rest
 }: Props) => {
   const [isOpenState, setIsOpenState] = useState(isOpen);
@@ -208,8 +210,8 @@ const BpkPopover = ({
             <div
               className={getClassName('bpk-popover--container')}
               ref={refs.setFloating}
-              style={floatingStyles}
               {...getFloatingProps()}
+              style={{ ...floatingStyles, zIndex: zIndexValue }}
             >
               <TransitionInitialMount
                 appearClassName={getClassName('bpk-popover--appear')}