feat: scrollable product menu

SAP-archive · Jul 1, 2019 · d100427 · d100427
1 parent 6e9921e
commit d100427
Show file tree

Hide file tree

Showing 6 changed files with 86 additions and 27 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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"]
 };