Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add backdrop container props #540

Merged
merged 2 commits into from
Nov 6, 2024
Merged

Add backdrop container props #540

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
af5f2be
Allow backdrop container to get zIndez by props
kapantzak Nov 6, 2024
2be9727
v4.7.8
kapantzak Nov 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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",
Expand Down
3 changes: 2 additions & 1 deletion src/components/confirmation-dialog/confirmation-dialog.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,65 +8,66 @@
const BodyMessage = ({ children, ...rest }) =>
typeof children === "object" ? children : <Text {...rest}>{children}</Text>

const ConfirmationDialog = ({
confirmLabel = "Yes, remove",
confirmWidth = "128px",
"data-ga": dataGA = "confirmation-dialog",
"data-testid": dataTestId = "confirmationDialog",
declineLabel = "Cancel",
declineWidth = "128px",
handleConfirm,
handleDecline,
hideIcon,
iconName = "warning_triangle_hollow",
isConfirmDisabled,
isConfirmLoading,
isDeclineDisabled,
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}>
{!hideIcon && <TitleIcon data-testid={`${dataTestId}-headerIcon`} name={iconName} />}
<Title data-testid={`${dataTestId}-headerText`}>{title}</Title>
</Flex>
{handleDecline && (
<ModalCloseButton data-testid={`${dataTestId}-headerClose`} onClose={handleDecline} />
)}
</Header>
<Body data-testid={`${dataTestId}-body`}>
<BodyMessage data-testid={`${dataTestId}-bodyMessage`}>{message}</BodyMessage>
</Body>
<Actions data-testid={`${dataTestId}-actions`}>
{handleDecline && (
<Button
data-ga={`${dataGA}-::click-cancel::global-view`}
data-testid={`${dataTestId}-cancelAction`}
flavour="hollow"
disabled={isDeclineDisabled}
label={declineLabel}
onClick={handleDecline}
width={declineWidth}
/>
)}
<Button
data-ga={`${dataGA}-::click-confirm::global-view`}
data-testid={`${dataTestId}-confirmAction`}
danger={!isConfirmPositive && true}
disabled={isConfirmDisabled}
label={confirmLabel}
onClick={handleConfirm}
width={confirmWidth}
isLoading={isConfirmLoading}
/>
</Actions>
</Content>
</Dialog>
)

Check warning on line 70 in src/components/confirmation-dialog/confirmation-dialog.js

View workflow job for this annotation

GitHub Actions / Coverage annotations (🧪 jest-coverage-report-action)

🧾 Statement is not covered 

Warning! Not covered statement
}

Check warning on line 71 in src/components/confirmation-dialog/confirmation-dialog.js

View workflow job for this annotation

GitHub Actions / Coverage annotations (🧪 jest-coverage-report-action)

🧾 Statement is not covered 

Warning! Not covered statement

export default ConfirmationDialog
5 changes: 3 additions & 2 deletions src/components/confirmation-dialog/styled.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,9 +30,10 @@
}
`

export const Dialog = styled(Modal).attrs({
export const Dialog = styled(Modal).attrs(props => ({

Check warning on line 33 in src/components/confirmation-dialog/styled.js

View workflow job for this annotation

GitHub Actions / Coverage annotations (🧪 jest-coverage-report-action)

🕹️ Function is not covered 

Warning! Not covered function
backdropProps: { backdropBlur: 8 },
})`
...props,
}))`

Check warning on line 36 in src/components/confirmation-dialog/styled.js

View workflow job for this annotation

GitHub Actions / Coverage annotations (🧪 jest-coverage-report-action)

🧾 Statement is not covered 

Warning! Not covered statement
box-shadow:
0 11px 15px -7px rgb(0 0 0 / 20%),
0px 24px 38px 3px rgb(0 0 0 / 14%),
Expand Down
6 changes: 3 additions & 3 deletions src/components/templates/layer/backdropContainer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,10 @@
import styled from "styled-components"
import backdropBlur from "@/components/templates/layer/mixins/backdropBlur"

const Container = styled.div`
position: fixed;
inset: 0;
z-index: 35;
z-index: ${({ zIndex }) => zIndex || "35"};

Check warning on line 8 in src/components/templates/layer/backdropContainer.js

View workflow job for this annotation

GitHub Actions / Coverage annotations (🧪 jest-coverage-report-action)

🧾 Statement is not covered 

Warning! Not covered statement

Check warning on line 8 in src/components/templates/layer/backdropContainer.js

View workflow job for this annotation

GitHub Actions / Coverage annotations (🧪 jest-coverage-report-action)

🌿 Branch is not covered 

Warning! Not covered branch

Check warning on line 8 in src/components/templates/layer/backdropContainer.js

View workflow job for this annotation

GitHub Actions / Coverage annotations (🧪 jest-coverage-report-action)

🌿 Branch is not covered 

Warning! Not covered branch

Check warning on line 8 in src/components/templates/layer/backdropContainer.js

View workflow job for this annotation

GitHub Actions / Coverage annotations (🧪 jest-coverage-report-action)

🕹️ Function is not covered 

Warning! Not covered function
pointer-events: none;
outline: none;
`

Check warning on line 11 in src/components/templates/layer/backdropContainer.js

View workflow job for this annotation

GitHub Actions / Coverage annotations (🧪 jest-coverage-report-action)

🧾 Statement is not covered 

Warning! Not covered statement
Expand All @@ -19,11 +19,11 @@
}
`

const BackdropContainer = ({ children, backdropProps, onClick }) => (
<Container data-testid="layer-backdropContainer">
const BackdropContainer = ({ children, backdropContainerProps, backdropProps, onClick }) => (

Check warning on line 22 in src/components/templates/layer/backdropContainer.js

View workflow job for this annotation

GitHub Actions / Coverage annotations (🧪 jest-coverage-report-action)

🕹️ Function is not covered 

Warning! Not covered function
<Container data-testid="layer-backdropContainer" {...backdropContainerProps}>
<Backdrop data-testid="layer-backdrop" {...backdropProps} onClick={onClick} />
{children}
</Container>

Check warning on line 26 in src/components/templates/layer/backdropContainer.js

View workflow job for this annotation

GitHub Actions / Coverage annotations (🧪 jest-coverage-report-action)

🧾 Statement is not covered 

Warning! Not covered statement
)

Check warning on line 27 in src/components/templates/layer/backdropContainer.js

View workflow job for this annotation

GitHub Actions / Coverage annotations (🧪 jest-coverage-report-action)

🧾 Statement is not covered 

Warning! Not covered statement

export default BackdropContainer
8 changes: 7 additions & 1 deletion src/components/templates/layer/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,45 +8,51 @@

const emptyArray = []

const Layer = ({
position = "center",
full = false,
backdrop = true,
margin = emptyArray,
onClickOutside,
onEsc,
borderShadow,
children,
backdropContainerProps,
backdropProps,
...rest
}) => {
const ref = useRef()

useOutsideClick(ref, onClickOutside, null, backdrop)
useKeyboardEsc(onEsc)

const el = useDropElement()

const content = (
<Container
isAbsolute={backdrop}
ref={ref}
full={full}
position={position}
margin={margin}
borderShadow={borderShadow}
data-testid="layer-container"
{...rest}
>
{children}
</Container>
)

return ReactDOM.createPortal(
backdrop ? (
<BackdropContainer backdropProps={backdropProps} {...rest} onClick={onClickOutside}>
<BackdropContainer
backdropContainerProps={backdropContainerProps}
backdropProps={backdropProps}
{...rest}
onClick={onClickOutside}
>
{content}
</BackdropContainer>

Check warning on line 55 in src/components/templates/layer/index.js

View workflow job for this annotation

GitHub Actions / Coverage annotations (🧪 jest-coverage-report-action)

🌿 Branch is not covered 

Warning! Not covered branch
) : (
content
),
Expand Down
Loading