Add valo-menu-hover stylename to make responsive menu appear w/o adding code (#19019)

Adding the optional "valo-menu-hover" style to the "valo-menu" element
will make the menu appear on hover - i.e when mousing over on desktop,
when tapping on touch devices (which also triggers hover).

Backported from master branch (vaadin 8).

Change-Id: I8344234a20aa93216b0116608d81e30e86d8b309

1 files changed, 23 insertions, 3 deletions

diff --git a/server/src/main/java/com/vaadin/ui/themes/ValoTheme.java b/server/src/main/java/com/vaadin/ui/themes/ValoTheme.java
index 335c9daee8..d26860991e 100644
--- a/server/src/main/java/com/vaadin/ui/themes/ValoTheme.java
+++ b/server/src/main/java/com/vaadin/ui/themes/ValoTheme.java
@@ -1033,15 +1033,13 @@ public class ValoTheme {
      * Set the <em><b>primary</b></em> style name of a Label or a Button to this
      * style name to create an application logo. The logo is designed to be
      * placed inside a {@link #MENU_PART} layout.
-     * </p>
      *
      * <p>
      * The text content of the logo should be very short, since the logo area
      * only shows approximately three letters. Using one of the
      * {@link FontAwesome} icons is a good way to quickly create a logo for your
      * application.
-     * </p>
-     * </p>
+     * <p>
      *
      * <h4>Example</h4>
      *
@@ -1053,4 +1051,26 @@ public class ValoTheme {
      */
     public static final String MENU_LOGO = "valo-menu-logo";
 
+    /**
+     * Add this style name to your {@link #UI_WITH_MENU responsive}
+     * {@link #MENU_ROOT valo menu} element to make it appear automatically on
+     * hover - without adding any code.
+     * <p>
+     * The menu will appear on mouse over on desktop, or when tapping on touch
+     * devices.
+     * <p>
+     * <h4>Example</h4>
+     *
+     * <pre>
+     * HorizontalLayout menu = new HorizontalLayout();
+     * Responsive.makeResponsive(menu);
+     * menu.addStyleName(ValoTheme.UI_WITH_MENU);
+     *
+     * CssLayout menuArea = new CssLayout();
+     * menuArea.setPrimaryStyleName(ValoTheme.MENU_ROOT);
+     * menuArea.addStyleName(ValoTheme.MENU_APPEAR_ON_HOVER);
+     * menu.addComponent(menuArea);
+     * </pre>
+     */
+    public static final String MENU_APPEAR_ON_HOVER = "valo-menu-hover";
 }