Hide the Beacon for centered steps or disableBeacon

- fix Overlay typo
gilbarbara · May 21, 2024 · 4be7504 · 4be7504
1 parent 11ed650
commit 4be7504
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 3 deletions.
diff --git a/src/components/Overlay.tsx b/src/components/Overlay.tsx
@@ -224,9 +224,9 @@ export default class JoyrideOverlay extends React.Component<OverlayProps, State>
 
     // Hack for Safari bug with mix-blend-mode with z-index
     if (getBrowser() === 'safari') {
-      const { mixBlendMode, zIndex, ...safarOverlay } = overlayStyles;
+      const { mixBlendMode, zIndex, ...safariOverlay } = overlayStyles;
 
-      spotlight = <div style={{ ...safarOverlay }}>{spotlight}</div>;
+      spotlight = <div style={{ ...safariOverlay }}>{spotlight}</div>;
       delete overlayStyles.backgroundColor;
     }
 

diff --git a/src/styles.ts b/src/styles.ts
@@ -37,6 +37,7 @@ export default function getStyles(props: Props, step: StepMerged) {
   const mergedFloaterProps = deepmerge(step?.floaterProps ?? {}, floaterProps ?? {});
   const mergedStyles = deepmerge(styles ?? {}, step?.styles ?? {});
   const options = deepmerge(defaultOptions, mergedStyles.options || {}) satisfies StylesOptions;
+  const hideBeacon = step.placement === 'center' || step.disableBeacon;
   let { width } = options;
 
   if (window.innerWidth > 480) {
@@ -63,7 +64,7 @@ export default function getStyles(props: Props, step: StepMerged) {
   const defaultStyles = {
     beacon: {
       ...buttonBase,
-      display: 'inline-block',
+      display: hideBeacon ? 'none' : 'inline-block',
       height: options.beaconSize,
       position: 'relative',
       width: options.beaconSize,