feat: scroll onboarding step target into view when step is executed

vaadin-component-factory · Jan 7, 2024 · 2c5722a · 2c5722a
1 parent f99b54e
commit 2c5722a
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 0 deletions.
diff --git a/popup-demo/src/main/java/com/vaadin/componentfactory/popup/demo/views/OnboardingView.java b/popup-demo/src/main/java/com/vaadin/componentfactory/popup/demo/views/OnboardingView.java
@@ -6,6 +6,7 @@
 import com.vaadin.componentfactory.popup.demo.MainLayout;
 import com.vaadin.flow.component.button.Button;
 import com.vaadin.flow.component.button.ButtonVariant;
+import com.vaadin.flow.component.html.Div;
 import com.vaadin.flow.component.html.H3;
 import com.vaadin.flow.component.html.Image;
 import com.vaadin.flow.component.html.Paragraph;
@@ -17,6 +18,7 @@
 public class OnboardingView extends VerticalLayout {
 
     private Paragraph topParagraph;
+    private Paragraph outOfViewportParagraph;
     private Button actionButton;
     private Button startOnboardingButton;
     private H3 header;
@@ -45,19 +47,36 @@ private void createUI() {
         startOnboardingButton = new Button("Start onboarding");
         startOnboardingButton.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
         add(startOnboardingButton);
+
+        final Div spacer = new Div();
+        spacer.getStyle().set("height", "900px");
+        add(spacer);
+
+        outOfViewportParagraph = new Paragraph("You have to scroll to see this text.");
+        add(outOfViewportParagraph);
     }
 
     private Onboarding createOnboarding() {
         Onboarding onboarding = new Onboarding();
 
         onboarding.addStep(createStepHeader());
         onboarding.addStep(createStepTopParagraph());
+        onboarding.addStep(createStepOutOfViewParagraph());
         onboarding.addStep(createStepActionButton());
         onboarding.addStep(createStepNoTarget());
 
         return onboarding;
     }
 
+    private OnboardingStep createStepOutOfViewParagraph() {
+        final OnboardingStep step = new OnboardingStep(outOfViewportParagraph);
+        step.setHeader("Scroll to popup target");
+        step.setContent("When a target of the onboarding step is not visible, the screen " +
+                "will be scrolled to make it visible before the popup opens.");
+        step.setPosition(PopupPosition.BOTTOM);
+        return step;
+    }
+
     private OnboardingStep createStepNoTarget() {
         final OnboardingStep step = new OnboardingStep(null);
         step.setHeader("No target");

diff --git a/popup/src/main/java/com/vaadin/componentfactory/onboarding/Onboarding.java b/popup/src/main/java/com/vaadin/componentfactory/onboarding/Onboarding.java
@@ -111,6 +111,9 @@ protected Popup createPopup(OnboardingStep onboardingStep) {
         popup.setPosition(onboardingStep.getPosition());
         popup.setAlignment(onboardingStep.getAlignment());
         popup.setIgnoreTargetClick(true);
+        popup.setScrollTargetIntoView(true);
+        popup.setCloseOnScroll(false);
+        popup.setRestoreFocusOnClose(false);
         if (onboardingStep.getTargetElement() != null) {
             popup.setTarget(onboardingStep.getTargetElement().getElement());
         }