Add support for menu separator or divider with optional label #37

Author: javier-godoy

src/main/java/com/flowingcode/addons/applayout/MenuSeparator.java

@@ -3,11 +3,23 @@
 import com.vaadin.flow.component.Component;
 import com.vaadin.flow.component.Tag;
 import com.vaadin.flow.component.dependency.JsModule;
+import com.vaadin.flow.dom.Element;
 
 @JsModule("./fc-applayout/fc-separator.js")
 @Tag("fc-separator")
 public class MenuSeparator extends Component {
 
 	private static final long serialVersionUID = 1L;
 
+	public MenuSeparator() {}
+	
+	public MenuSeparator(String label) {
+		Element div = new Element("div");
+		div.setText(label);
+		div.setAttribute("slot", "label");
+		getElement().removeAllChildren();
+		getElement().appendChild(div);
+	}
+	
+	
 }

src/main/resources/META-INF/frontend/fc-applayout/fc-separator.js

@@ -3,53 +3,18 @@ import {html} from '@polymer/polymer/lib/utils/html-tag.js';
 
 import {ThemableMixin} from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
-/*
-Styles: 
-	--fc-separator-border-color	
-	--fc-separator-text-padding
- */
+import "@vaadin/flow-frontend/fc-applayout/paper-divider.js";
+
 class MenuSeparator extends ThemableMixin(PolymerElement) {
 	static get is() { return 'fc-separator'; }
 
 	static get template() {
-		//Based on https://stackoverflow.com/a/28434792/1297272
-		//(C) 2015 CC-BY-SA https://stackoverflow.com/users/677418/sleek-geek
+
 		return html`
-		<style>
-			:host {
-			    display: flex;
-    			justify-content: center;
-    			opacity: 0.6;
-    		}
-			:host div {
-				width: 100%;
-				text-align: center;
-				position: relative;
-			}
-			
-			:host div:after {
-				content: '';
-				width: 100%;
-				position: absolute;
-				border-bottom: solid 1px var(--fc-separator-border-color, rgba(0,0,0, 0.6));
-				left: 0;
-				top: 50%;
-				z-index: 1;
-			}
-			
-			:host span {
-				width: auto;
-				display: inline-block;
-				z-index: 3;
-				padding: 0 var(--fc-separator-text-padding, 8px) 0 var(--fc-separator-text-padding, 8px);
-				position: relative;
-			}
-		</style>
-		<div>
-			<span><slot></slot></span>
-		</div>
+		<paper-divider></paper-divider>
+		<div><slot name="label"></slot></div>
 	`;}
 
-}	
+}
 
 customElements.define(MenuSeparator.is, MenuSeparator);

src/main/resources/META-INF/frontend/fc-applayout/paper-divider.js

@@ -0,0 +1,49 @@
+/* The MIT License (MIT)
+Copyright (c) 2015 WebPaperElements
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to 
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
+of the Software, and to permit persons to whom the Software is furnished to do
+so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+*/
+
+import {PolymerElement} from '@polymer/polymer/polymer-element.js';
+import {html} from '@polymer/polymer/lib/utils/html-tag.js';
+
+import {ThemableMixin} from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+
+//Based on https://github.com/WebPaperElements/paper-divider
+class PaperDivider extends ThemableMixin(PolymerElement) {
+	static get is() { return 'paper-divider'; }
+	
+	static get template() {
+
+		return html`
+		<style>
+			:host {
+		        display: block;
+		        height: 1px;
+		        min-height: 1px;
+		        max-height: 1px;
+		        background-color: var(--paper-divider-color, #000);
+		        opacity: 0.12;
+		        @apply(--paper-divider);
+			}
+		</style>
+	`;}
+
+}	
+	
+customElements.define(PaperDivider.is, PaperDivider);

src/test/java/com/flowingcode/addons/applayout/DemoView.java

@@ -232,14 +232,17 @@ private Component[] createMenuItems() {
 							.add(new MenuItem("And Again",()->showContent("And Again!")))
 						),
 
-				new MenuSeparator(),
+				new MenuSeparator("Separator"),
 
 				new MenuItem("Item 1"),
 				new MenuItem("Item 2"),
 				new MenuItem("Item 3"),
 				new MenuItem("Item 4"),
 				new MenuItem("Item 5"),
 				new MenuItem("Item 6"),
+				
+				new MenuSeparator(),
+				
 				new MenuItem("Item 7"),
 				new MenuItem("Item 8"),
 				new MenuItem("Item 9"),