fix comment and css classes of component

Author: haschek

src/components/DecoupledOverlay/DecoupledOverlay.tsx

@@ -6,12 +6,6 @@ import { createPopper } from "@popperjs/core";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import { ContextOverlayProps, TestableComponent, TooltipSize } from "../../index";
 
-/**
- * Overlay without the necessity to use a target that need to be rendered in place.
- * The target is referenced by a selector string or element object.
- * It can exist somewhere in the DOM, but it must exist when the overlay is rendered.
- * It is always displayed, close it by removement.
- */
 export interface DecoupledOverlayProps
     extends React.HTMLAttributes<HTMLDivElement>,
         TestableComponent,
@@ -26,7 +20,12 @@ export interface DecoupledOverlayProps
     size?: TooltipSize;
 }
 
-/** Popover that is displayed and points at the highlighted element. */
+/**
+ * Use an overlay popover without the necessity to use a target that need to be rendered in place.
+ * The target is referenced by a selector string or element object.
+ * It can exist somewhere in the DOM, but it must exist when the overlay is rendered.
+ * It is always displayed, close it by removement.
+ */
 export const DecoupledOverlay = ({
     targetSelectorOrElement,
     usePortal = true,
@@ -62,8 +61,8 @@ export const DecoupledOverlay = ({
     const overlay = (
         <div
             className={
-                `${eccgui}-visual-tour__overlay` +
-                ` ${eccgui}-visual-tour__overlay--${size}` +
+                `${eccgui}-decoupled-overlay` +
+                ` ${eccgui}-decoupled-overlay--${size}` +
                 ` ${BlueprintClasses.POPOVER}` +
                 (minimal ? ` ${BlueprintClasses.MINIMAL}` : "")
             }
@@ -72,14 +71,12 @@ export const DecoupledOverlay = ({
         >
             {!minimal && (
                 <div
-                    className={`${eccgui}-visual-tour__arrow ${BlueprintClasses.POPOVER_ARROW}`}
+                    className={`${eccgui}-decoupled-overlay__arrow ${BlueprintClasses.POPOVER_ARROW}`}
                     data-popper-arrow
                     aria-hidden
                 />
             )}
-            <div className={`${BlueprintClasses.POPOVER_CONTENT} ${eccgui}-visual-tour__overlay__content`}>
-                {children}
-            </div>
+            <div className={`${BlueprintClasses.POPOVER_CONTENT} ${eccgui}-decoupled-overlay__content`}>{children}</div>
         </div>
     );
 

src/components/DecoupledOverlay/_decoupledoverlay.scss

@@ -1,23 +1,23 @@
-.#{$eccgui}-visual-tour__arrow {
+.#{$eccgui}-decoupled-overlay__arrow {
     &::before {
         background: $card-background-color;
     }
 
-    .#{$eccgui}-visual-tour__overlay[data-popper-placement="top"] & {
+    .#{$eccgui}-decoupled-overlay[data-popper-placement="top"] & {
         bottom: -0.5 * $eccgui-size-block-whitespace;
     }
-    .#{$eccgui}-visual-tour__overlay[data-popper-placement="right"] & {
+    .#{$eccgui}-decoupled-overlay[data-popper-placement="right"] & {
         left: -0.5 * $eccgui-size-block-whitespace;
     }
-    .#{$eccgui}-visual-tour__overlay[data-popper-placement="bottom"] & {
+    .#{$eccgui}-decoupled-overlay[data-popper-placement="bottom"] & {
         top: -0.5 * $eccgui-size-block-whitespace;
     }
-    .#{$eccgui}-visual-tour__overlay[data-popper-placement="left"] & {
+    .#{$eccgui}-decoupled-overlay[data-popper-placement="left"] & {
         right: -0.5 * $eccgui-size-block-whitespace;
     }
 }
 
-.#{$eccgui}-visual-tour__overlay {
+.#{$eccgui}-decoupled-overlay {
     &.#{$prefix-blueprintjs}-popover {
         z-index: 8002; // 2 over application header
     }
@@ -34,13 +34,13 @@
         @extend .#{$eccgui}-tooltip--large;
     }
 
-    &:has(.#{$eccgui}-visual-tour__arrow) {
-        .#{$eccgui}-visual-tour__overlay__content {
+    &:has(.#{$eccgui}-decoupled-overlay__arrow) {
+        .#{$eccgui}-decoupled-overlay__content {
             min-height: 30px; // height of blueprint arrow
         }
     }
 }
 
-.#{$eccgui}-visual-tour__overlay__content {
+.#{$eccgui}-decoupled-overlay__content {
     padding: 0.1px; // force margins of children to stay inside
 }