Add backdrop container props (#540)

* Allow backdrop container to get zIndez by props * v4.7.8
netdata · Nov 6, 2024 · e057284 · e057284
1 parent 6ef88d9
commit e057284
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 8 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@netdata/netdata-ui",
-  "version": "4.7.7",
+  "version": "4.7.8",
   "description": "netdata UI kit",
   "main": "dist/index.js",
   "module": "dist/es6/index.js",

diff --git a/src/components/confirmation-dialog/confirmation-dialog.js b/src/components/confirmation-dialog/confirmation-dialog.js
@@ -25,9 +25,10 @@ const ConfirmationDialog = ({
   isConfirmPositive,
   message,
   title,
+  backdropContainerProps,
 }) => {
   return (
-    <Dialog onEsc={handleDecline}>
+    <Dialog onEsc={handleDecline} backdropContainerProps={backdropContainerProps}>
       <Content data-testid={dataTestId}>
         <Header data-testid={`${dataTestId}-headerContainer`}>
           <Flex data-testid={`${dataTestId}-header`} gap={2}>

diff --git a/src/components/confirmation-dialog/styled.js b/src/components/confirmation-dialog/styled.js
@@ -30,9 +30,10 @@ export const Body = styled(ModalBody).attrs({
   }
 `
 
-export const Dialog = styled(Modal).attrs({
+export const Dialog = styled(Modal).attrs(props => ({
   backdropProps: { backdropBlur: 8 },
-})`
+  ...props,
+}))`
   box-shadow:
     0 11px 15px -7px rgb(0 0 0 / 20%),
     0px 24px 38px 3px rgb(0 0 0 / 14%),

diff --git a/src/components/templates/layer/backdropContainer.js b/src/components/templates/layer/backdropContainer.js
@@ -5,7 +5,7 @@ import backdropBlur from "@/components/templates/layer/mixins/backdropBlur"
 const Container = styled.div`
   position: fixed;
   inset: 0;
-  z-index: 35;
+  z-index: ${({ zIndex }) => zIndex || "35"};
   pointer-events: none;
   outline: none;
 `
@@ -19,8 +19,8 @@ const Backdrop = styled.div`
 }
 `
 
-const BackdropContainer = ({ children, backdropProps, onClick }) => (
-  <Container data-testid="layer-backdropContainer">
+const BackdropContainer = ({ children, backdropContainerProps, backdropProps, onClick }) => (
+  <Container data-testid="layer-backdropContainer" {...backdropContainerProps}>
     <Backdrop data-testid="layer-backdrop" {...backdropProps} onClick={onClick} />
     {children}
   </Container>

diff --git a/src/components/templates/layer/index.js b/src/components/templates/layer/index.js
@@ -17,6 +17,7 @@ const Layer = ({
   onEsc,
   borderShadow,
   children,
+  backdropContainerProps,
   backdropProps,
   ...rest
 }) => {
@@ -44,7 +45,12 @@ const Layer = ({
 
   return ReactDOM.createPortal(
     backdrop ? (
-      <BackdropContainer backdropProps={backdropProps} {...rest} onClick={onClickOutside}>
+      <BackdropContainer
+        backdropContainerProps={backdropContainerProps}
+        backdropProps={backdropProps}
+        {...rest}
+        onClick={onClickOutside}
+      >
         {content}
       </BackdropContainer>
     ) : (