From ad7dbedb71be24ad5f354455951cdd26d53a564e Mon Sep 17 00:00:00 2001 From: Manish Phatak Date: Wed, 11 Oct 2023 17:34:21 -0700 Subject: [PATCH] Allow spotlight styles to be updated from outside When is used as third party lib in host react applications, there are several instances where you might need a more finer control on how things are displayed. This change allows developers to manipulate spotlight style if they want according to their needs. In our case, we are using with react-pdf to create highlighted section in the pdf. So we need finer control over the spotlight CSS being displayed in our app. --- src/components/Overlay.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Overlay.tsx b/src/components/Overlay.tsx index cb922281..e744d758 100644 --- a/src/components/Overlay.tsx +++ b/src/components/Overlay.tsx @@ -109,7 +109,6 @@ export default class JoyrideOverlay extends React.Component const top = getElementPosition(element, spotlightPadding, disableScrollParentFix); return { - ...(isLegacy() ? styles.spotlightLegacy : styles.spotlight), height: Math.round((elementRect?.height ?? 0) + spotlightPadding * 2), left: Math.round((elementRect?.left ?? 0) - spotlightPadding), opacity: showSpotlight ? 1 : 0, @@ -118,6 +117,7 @@ export default class JoyrideOverlay extends React.Component top, transition: 'opacity 0.2s', width: Math.round((elementRect?.width ?? 0) + spotlightPadding * 2), + ...(isLegacy() ? styles.spotlightLegacy : styles.spotlight), } satisfies React.CSSProperties; }