Document Popover component

content/modules/flow-ui/examples/onboarding/src/main/java/com/company/onboarding/view/component/popover/PopoverView.java

@@ -0,0 +1,94 @@
+package com.company.onboarding.view.component.popover;
+
+import com.company.onboarding.view.main.MainView;
+import com.vaadin.flow.component.ClickEvent;
+import com.vaadin.flow.component.button.ButtonVariant;
+import com.vaadin.flow.component.html.H3;
+import com.vaadin.flow.component.icon.VaadinIcon;
+import com.vaadin.flow.component.popover.Popover;
+import com.vaadin.flow.router.Route;
+import io.jmix.flowui.UiComponents;
+import io.jmix.flowui.component.textfield.TypedTextField;
+import io.jmix.flowui.kit.component.button.JmixButton;
+import io.jmix.flowui.view.*;
+import org.springframework.beans.factory.annotation.Autowired;
+
+@Route(value = "popover-view", layout = MainView.class)
+@ViewController("PopoverView")
+@ViewDescriptor("popover-view.xml")
+public class PopoverView extends StandardView {
+
+    // tag::basics[]
+    @ViewComponent
+    private Popover infoPopover;
+
+    // end::basics[]
+    // tag::runtimeTarget[]
+    @ViewComponent
+    private Popover emailHelpPopover;
+    @ViewComponent
+    private TypedTextField<String> emailField;
+    @Autowired
+    private UiComponents uiComponents;
+
+    // end::runtimeTarget[]
+    // tag::programmatic[]
+    @ViewComponent
+    private Popover promoCodePopover;
+
+    // end::programmatic[]
+    // tag::modal[]
+    @ViewComponent
+    private Popover renamePopover;
+    @ViewComponent
+    private H3 reportTitle;
+    @ViewComponent
+    private TypedTextField<String> titleField;
+
+    // end::modal[]
+    // tag::basics[]
+    @Subscribe(id = "closeButton", subject = "clickListener")
+    public void onCloseButtonClick(final ClickEvent<JmixButton> event) {
+        infoPopover.close();
+    }
+    // end::basics[]
+
+    // tag::runtimeTarget[]
+    @Subscribe
+    public void onInit(final InitEvent event) {
+        JmixButton helpButton = uiComponents.create(JmixButton.class);
+        helpButton.setIcon(VaadinIcon.QUESTION_CIRCLE.create());
+        helpButton.addThemeVariants(ButtonVariant.TERTIARY);
+        emailField.setSuffixComponent(helpButton);
+
+        emailHelpPopover.setTarget(helpButton);
+    }
+    // end::runtimeTarget[]
+
+    // tag::programmatic[]
+    @Subscribe(id = "promoCodeHelpButton", subject = "clickListener")
+    public void onPromoCodeHelpButtonClick(final ClickEvent<JmixButton> event) {
+        promoCodePopover.open();
+    }
+    // end::programmatic[]
+
+    // tag::modal[]
+    @Subscribe("renamePopover")
+    public void onRenamePopoverOpenedChange(final Popover.OpenedChangeEvent event) {
+        if (event.isOpened()) {
+            titleField.setValue(reportTitle.getText());
+        }
+    }
+
+    @Subscribe(id = "saveButton", subject = "clickListener")
+    public void onSaveButtonClick(final ClickEvent<JmixButton> event) {
+        reportTitle.setText(titleField.getValue());
+        renamePopover.close();
+    }
+
+    @Subscribe(id = "cancelButton", subject = "clickListener")
+    public void onCancelButtonClick(final ClickEvent<JmixButton> event) {
+        renamePopover.close();
+    }
+    // end::modal[]
+}

content/modules/flow-ui/examples/onboarding/src/main/resources/com/company/onboarding/menu.xml

@@ -68,6 +68,7 @@
               title="msg://com.company.onboarding.view.component.multiselectcomboboxpicker/multiSelectComboBoxPickerView.title"/>
         <item view="MultiSelectListBoxView"
               title="msg://com.company.onboarding.view.component.multiselectlistbox/multiSelectListBoxView.title"/>
+        <item view="PopoverView" title="msg://com.company.onboarding.view.component.popover/popoverView.title"/>
         <item view="ProgressBarView" title="msg://com.company.onboarding.view.component.progressbar/progressBarView.title"/>
         <item view="PropertyFilterView"
               title="msg://com.company.onboarding.view.component.propertyfilter/propertyFilterView.title"/>

content/modules/flow-ui/examples/onboarding/src/main/resources/com/company/onboarding/messages_en.properties

@@ -198,6 +198,8 @@ com.company.onboarding.view.component.validator/validatorView.title=Validators
 com.company.onboarding.view.component.valuepicker/valuePickerView.title=valuePicker
 com.company.onboarding.view.component.progressbar/progressBarView.title=progressBar
 
+com.company.onboarding.view.component.popover/popoverView.title=popover
+
 com.company.onboarding.view.component.tooltip/tooltipView.title=tooltip
 
 com.company.onboarding.view.component.treedatagrid/treeDataGridView.title=treeDataGrid

content/modules/flow-ui/examples/onboarding/src/main/resources/com/company/onboarding/view/component/popover/popover-view.xml

@@ -0,0 +1,87 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<view xmlns="http://jmix.io/schema/flowui/view"
+      title="msg://popoverView.title">
+    <layout>
+        <!-- tag::basics[] -->
+        <button id="infoButton" text="About" icon="INFO_CIRCLE_O"/>
+        <popover id="infoPopover" target="infoButton" width="20em">
+            <vbox padding="false">
+                <h4 text="Onboarding"/>
+                <span text="New employees complete the onboarding steps during their first weeks."/>
+                <button id="closeButton" text="Close"/>
+            </vbox>
+        </popover>
+        <!-- end::basics[] -->
+
+        <!-- tag::runtimeTarget[] -->
+        <textField id="emailField" label="Email"/>
+        <popover id="emailHelpPopover" width="16em">
+            <span text="Use your corporate address."/>
+        </popover>
+        <!-- end::runtimeTarget[] -->
+
+        <!-- tag::hover[] -->
+        <avatar id="userAvatar" name="Alice Brown"/>
+        <popover target="userAvatar"
+                 openOnClick="false"
+                 openOnHover="true"
+                 hoverDelay="300"
+                 hideDelay="300">
+            <vbox padding="false" spacing="false">
+                <h5 text="Alice Brown"/>
+                <span text="HR manager"/>
+                <anchor href="mailto:alice@company.com" text="alice@company.com"/>
+            </vbox>
+        </popover>
+        <!-- end::hover[] -->
+
+        <!-- tag::focus[] -->
+        <passwordField id="passwordField" label="Password"/>
+        <popover target="passwordField"
+                 openOnClick="false"
+                 openOnFocus="true"
+                 position="END">
+            <span text="Use at least 8 characters, including a letter and a digit."/>
+        </popover>
+        <!-- end::focus[] -->
+
+        <!-- tag::programmatic[] -->
+        <hbox alignItems="BASELINE">
+            <textField id="promoCodeField" label="Promo code"/>
+            <button id="promoCodeHelpButton" text="Where do I find it?" themeNames="tertiary"/>
+        </hbox>
+        <popover id="promoCodePopover"
+                 target="promoCodeField"
+                 openOnClick="false"
+                 width="16em">
+            <span text="The promo code is printed on the back of your loyalty card."/>
+        </popover>
+        <!-- end::programmatic[] -->
+
+        <!-- tag::position[] -->
+        <button id="statusButton" text="Status"/>
+        <popover target="statusButton" position="END" themeNames="arrow">
+            <span text="3 of 5 steps completed"/>
+        </popover>
+        <!-- end::position[] -->
+
+        <!-- tag::modal[] -->
+        <h3 id="reportTitle" text="Quarterly report"/>
+        <button id="renameButton" text="Rename"/>
+        <popover id="renamePopover"
+                 target="renameButton"
+                 modal="true"
+                 backdropVisible="true"
+                 closeOnOutsideClick="false"
+                 width="18em">
+            <vbox padding="false">
+                <textField id="titleField" label="Title" width="100%"/>
+                <hbox>
+                    <button id="saveButton" text="Save" themeNames="primary"/>
+                    <button id="cancelButton" text="Cancel"/>
+                </hbox>
+            </vbox>
+        </popover>
+        <!-- end::modal[] -->
+    </layout>
+</view>