From d1004277c6f5eb092054333a8c86f5aa978fca5f Mon Sep 17 00:00:00 2001
From: Christian Kienle <christian.kienle@sap.com>
Date: Tue, 18 Jun 2019 16:05:56 +0200
Subject: [PATCH] feat: scrollable product menu

---
 .../Layout/ShellBar/ShellBarProductMenu.vue   | 27 +++++-------
 src/components/MenuPopover/MenuPopover.vue    | 18 ++++++++
 src/docs/components/d-markdown.vue            | 19 +++++++-
 src/docs/components/doc/prop-doc.vue          |  4 +-
 src/docs/pages/Shell Bar/3-products.vue       | 43 ++++++++++++++++---
 src/docs/pages/Table/index.js                 |  2 +-
 6 files changed, 86 insertions(+), 27 deletions(-)

diff --git a/src/components/Layout/ShellBar/ShellBarProductMenu.vue b/src/components/Layout/ShellBar/ShellBarProductMenu.vue
index 32e814f8..bf5292c6 100644
--- a/src/components/Layout/ShellBar/ShellBarProductMenu.vue
+++ b/src/components/Layout/ShellBar/ShellBarProductMenu.vue
@@ -1,6 +1,12 @@
 <template>
   <div class="fd-product-menu">
-    <fd-popover
+    <fd-menu-popover
+      :flips="false"
+      :body-styles="{
+        overflowY: 'scroll',
+        maxHeight: 'calc(100vh - 65px)'
+      }"
+      discard-highlight
       :offset="10"
       body-size-mode="at-least-trigger"
       placement="bottom-start"
@@ -13,29 +19,18 @@
         </button>
       </template>
       <template #default="bodyProps">
-        <!--
-          This seems strange but is for backward compatibility:
-          Currently, consumers use the menu-slot to render a custom menu.
-          Now they can use the default slot instead which renders a menu
-          on their behalf and additionally hides the popover body when clicked.
-        -->
-        <slot name="menu">
-          <fd-menu @select="bodyProps.hide">
-            <slot v-bind="bodyProps" />
-          </fd-menu>
-        </slot>
+        <slot v-bind="bodyProps" />
       </template>
-    </fd-popover>
+    </fd-menu-popover>
   </div>
 </template>
 
 <script>
-import FdMenu from "./../../Menu/Menu.vue";
-import FdPopover from "./../../Popover/Popover.vue";
+import FdMenuPopover from "./../../MenuPopover/MenuPopover.vue";
 import FdShellBarProductTitle from "./ShellBarProductTitle.vue";
 
 export default {
   name: "FdShellBarProductMenu",
-  components: { FdPopover, FdMenu, FdShellBarProductTitle }
+  components: { FdMenuPopover, FdShellBarProductTitle }
 };
 </script>
diff --git a/src/components/MenuPopover/MenuPopover.vue b/src/components/MenuPopover/MenuPopover.vue
index 584d26ed..40e7d94a 100644
--- a/src/components/MenuPopover/MenuPopover.vue
+++ b/src/components/MenuPopover/MenuPopover.vue
@@ -28,6 +28,21 @@ import FdPopover from "./../Popover/Popover.vue";
 export default {
   name: "FdMenuPopover",
   components: { FdPopover, FdMenu },
+  props: {
+    // Imagine the following scenario:
+    // 1. A user clicks on the control – a menu is displayed.
+    // 2. Now the user is using arrow.down to highlight the first
+    //    menu item.
+    // 3. Now the user clicks outside of the menu.
+    // 4. User opens the menu again.
+    // Sometimes you want the highlighted (but not selected item)
+    // to remaing highlighted. Sometimes not (product menu).
+    // This prop can be used to adjust exactly that.
+    discardHighlight: {
+      type: Boolean,
+      default: false
+    }
+  },
   methods: {
     getPopover() {
       return this.$refs.popover;
@@ -52,6 +67,9 @@ export default {
     // Misc
     updateVisible(visible) {
       this.visible_ = visible;
+      if (this.discardHighlight) {
+        this.highlightedId = null;
+      }
     },
     handleMenuSelect(item) {
       this.$emit("select", item);
diff --git a/src/docs/components/d-markdown.vue b/src/docs/components/d-markdown.vue
index bf833d13..0aa92624 100644
--- a/src/docs/components/d-markdown.vue
+++ b/src/docs/components/d-markdown.vue
@@ -1,5 +1,5 @@
 <template>
-  <markdown-it-vue :content="content" class="md-body" />
+  <markdown-it-vue data-fdv-markdown :content="content" class="md-body" />
 </template>
 
 <script>
@@ -26,3 +26,20 @@ export default {
   }
 };
 </script>
+
+<style lang="scss">
+div[data-fdv-markdown].md-body {
+  ol {
+    margin-left: 15px;
+    li {
+      margin-left: 15px;
+    }
+  }
+  ul {
+    margin-left: 15px;
+    li {
+      margin-left: 15px;
+    }
+  }
+}
+</style>
diff --git a/src/docs/components/doc/prop-doc.vue b/src/docs/components/doc/prop-doc.vue
index 5d92ce46..4c8b0f43 100644
--- a/src/docs/components/doc/prop-doc.vue
+++ b/src/docs/components/doc/prop-doc.vue
@@ -36,13 +36,13 @@ export default {
       return this.typeDesc.length > 0;
     },
     renderedTypeDescription() {
-      return this.typeDesc.join("\n\n");
+      return this.typeDesc.join("\n");
     },
     defaultValue_() {
       return this.defaultValue != null ? this.defaultValue : "–";
     },
     renderedDescription() {
-      return this.describe.join("\n\n");
+      return this.describe.join("\n");
     }
   },
   props: {
diff --git a/src/docs/pages/Shell Bar/3-products.vue b/src/docs/pages/Shell Bar/3-products.vue
index 704dbb26..b3a822fc 100644
--- a/src/docs/pages/Shell Bar/3-products.vue	
+++ b/src/docs/pages/Shell Bar/3-products.vue	
@@ -22,13 +22,42 @@
                 <FdMenuItem @click="itemClicked('a')">
                   Application A
                 </FdMenuItem>
-                <FdMenuItem>
-                  Application B
-                </FdMenuItem>
-                <FdMenuItem>
-                  A very long application name - even longer than the product
-                  title.
-                </FdMenuItem>
+                <FdMenuItem>Sample Application No 1</FdMenuItem>
+                <FdMenuItem>Sample Application No 1</FdMenuItem>
+                <FdMenuItem>Sample Application No 1</FdMenuItem>
+                <FdMenuItem>Sample Application No 2</FdMenuItem>
+                <FdMenuItem>Sample Application No 2</FdMenuItem>
+                <FdMenuItem>Sample Application No 2</FdMenuItem>
+                <FdMenuItem>Sample Application No 3</FdMenuItem>
+                <FdMenuItem>Sample Application No 3</FdMenuItem>
+                <FdMenuItem>Sample Application No 3</FdMenuItem>
+                <FdMenuItem>Sample Application No 4</FdMenuItem>
+                <FdMenuItem>Sample Application No 4</FdMenuItem>
+                <FdMenuItem>Sample Application No 4</FdMenuItem>
+                <FdMenuItem>Sample Application No 5</FdMenuItem>
+                <FdMenuItem>Sample Application No 5</FdMenuItem>
+                <FdMenuItem>Sample Application No 5</FdMenuItem>
+                <FdMenuItem>Sample Application No 6</FdMenuItem>
+                <FdMenuItem>Sample Application No 6</FdMenuItem>
+                <FdMenuItem>Sample Application No 6</FdMenuItem>
+                <FdMenuItem>Sample Application No 7</FdMenuItem>
+                <FdMenuItem>Sample Application No 7</FdMenuItem>
+                <FdMenuItem>Sample Application No 7</FdMenuItem>
+                <FdMenuItem>Sample Application No 8</FdMenuItem>
+                <FdMenuItem>Sample Application No 8</FdMenuItem>
+                <FdMenuItem>Sample Application No 8</FdMenuItem>
+                <FdMenuItem>Sample Application No 9</FdMenuItem>
+                <FdMenuItem>Sample Application No 9</FdMenuItem>
+                <FdMenuItem>Sample Application No 9</FdMenuItem>
+                <FdMenuItem>Sample Application No 10</FdMenuItem>
+                <FdMenuItem>Sample Application No 10</FdMenuItem>
+                <FdMenuItem>Sample Application No 10</FdMenuItem>
+                <FdMenuItem>Sample Application No 11</FdMenuItem>
+                <FdMenuItem>Sample Application No 11</FdMenuItem>
+                <FdMenuItem>Sample Application No 11</FdMenuItem>
+                <FdMenuItem>Sample Application No 12</FdMenuItem>
+                <FdMenuItem>Sample Application No 12</FdMenuItem>
+                <FdMenuItem>Sample Application No 12</FdMenuItem>
               </FdMenuList>
             </template>
           </FdShellBarProductMenu>
diff --git a/src/docs/pages/Table/index.js b/src/docs/pages/Table/index.js
index 6f0ba1c4..05b3ac02 100644
--- a/src/docs/pages/Table/index.js
+++ b/src/docs/pages/Table/index.js
@@ -1,3 +1,3 @@
 export default {
-  relatedComponents: ["fd-table-cell", "fd-table-row", "fd-table-cell"]
+  relatedComponents: ["fd-table", "fd-table-cell", "fd-table-row"]
 };