Merge pull request #1786 from owncloud/17112021_last-breadcrumb-conte…

…xtmenu

Add breadcrumb contextmenu

changelog/unreleased/enhancement-breadcrumb-contextmenu

@@ -0,0 +1,7 @@
+Enhancement: Breadcrumb contextmenu
+
+We've added a button to the last item of the OcBreadcrumb component 
+that triggers a dropdown which can be customizably filled.
+
+https://github.com/owncloud/web/issues/6030
+https://github.com/owncloud/owncloud-design-system/pull/1786

src/components/molecules/OcBreadcrumb/OcBreadcrumb.spec.js

@@ -20,15 +20,36 @@ describe("OcBreadcrumb", () => {
     expect(wrapper.props().variation).toMatch("lead")
     expect(wrapper.classes()).toContain("oc-breadcrumb-lead")
     expect(wrapper).toMatchSnapshot()
-  }),
-    it("displays all items", () => {
-      const wrapper = shallowMount(Breadcrumb, {
-        propsData: {
-          items,
-        },
-      })
+  })
+  it("displays all items", () => {
+    const wrapper = shallowMount(Breadcrumb, {
+      propsData: {
+        items,
+      },
+    })
+
+    expect(wrapper.findAll(".oc-breadcrumb-list-item").length).toBe(items.length)
+    expect(wrapper).toMatchSnapshot()
+  })
+  it("displays context menu trigger when a slot is given", () => {
+    const wrapper = shallowMount(Breadcrumb, {
+      propsData: {
+        items,
+      },
+      slots: {
+        contextMenu: "Example item",
+      },
+    })
 
-      expect(wrapper.findAll(".oc-breadcrumb-list-item").length).toBe(4)
-      expect(wrapper).toMatchSnapshot()
+    expect(wrapper.find("#oc-breadcrumb-contextmenu-trigger").exists()).toBe(true)
+  })
+  it("does not display context menu trigger when no slot given", () => {
+    const wrapper = shallowMount(Breadcrumb, {
+      propsData: {
+        items,
+      },
     })
+
+    expect(wrapper.find("#oc-breadcrumb-contextmenu-trigger").exists()).toBe(false)
+  })
 })

src/components/molecules/OcBreadcrumb/OcBreadcrumb.vue

@@ -14,6 +14,27 @@
           {{ item.text }}
         </oc-button>
         <span v-else :aria-current="getAriaCurrent(index)" tabindex="-1" v-text="item.text" />
+        <template v-if="showContextMenu && index == items.length - 1">
+          <oc-button
+            id="oc-breadcrumb-contextmenu-trigger"
+            v-oc-tooltip="contextMenuLabel"
+            :aria-label="contextMenuLabel"
+            appearance="raw"
+            :variation="primary"
+          >
+            <oc-icon name="more_vert" />
+          </oc-button>
+          <oc-drop
+            drop-id="oc-breadcrumb-contextmenu"
+            toggle="#oc-breadcrumb-contextmenu-trigger"
+            mode="click"
+            close-on-click
+            @click.native.stop.prevent
+          >
+            <!-- @slot Add context actions that open in a dropdown when clicking on the "three dots" button -->
+            <slot name="contextMenu" />
+          </oc-drop>
+        </template>
       </li>
     </ol>
     <div class="oc-breadcrumb-drop">
@@ -110,6 +131,12 @@ export default {
 
       return [...this.items].reverse()[0]
     },
+    contextMenuLabel() {
+      return this.$gettext("Show actions for current folder")
+    },
+    showContextMenu() {
+      return !!this.$slots.contextMenu
+    },
   },
   methods: {
     getAriaCurrent(index) {
@@ -128,6 +155,14 @@ export default {
     @extend .uk-breadcrumb;
     @extend .oc-m-rm;
 
+    #oc-breadcrumb-contextmenu-trigger > span {
+      vertical-align: middle;
+    }
+
+    #oc-breadcrumb-contextmenu li button {
+      display: inline-flex;
+    }
+
     > li button {
       display: inline;
     }
@@ -220,6 +255,11 @@ export default {
   <div>
     <oc-breadcrumb :items="items" class="oc-mb" />
     <oc-breadcrumb :items="items" variation="lead" />
+    <oc-breadcrumb :items="items" class="oc-mt-l">
+      <template v-slot:contextMenu>
+        <p>I'm an example item</p>
+      </template>
+    </oc-breadcrumb>
   </div>
 </template>
 <script>

src/components/molecules/OcBreadcrumb/__snapshots__/OcBreadcrumb.spec.js.snap

@@ -7,18 +7,23 @@ exports[`OcBreadcrumb displays all items 1`] = `
       <router-link-stub tag="a" to="[object Object]">
         First folder
       </router-link-stub>
+      <!---->
     </li>
     <li class="oc-breadcrumb-list-item">
       <oc-button-stub type="button" size="medium" variation="passive" appearance="raw" justifycontent="center" gapsize="medium">
         Subfolder
       </oc-button-stub>
+      <!---->
     </li>
     <li class="oc-breadcrumb-list-item">
       <router-link-stub tag="a" to="[object Object]">
         Deep
       </router-link-stub>
+      <!---->
+    </li>
+    <li class="oc-breadcrumb-list-item"><span aria-current="page" tabindex="-1">Deeper ellipsize in responsive mode</span>
+      <!---->
     </li>
-    <li class="oc-breadcrumb-list-item"><span aria-current="page" tabindex="-1">Deeper ellipsize in responsive mode</span></li>
   </ol>
   <div class="oc-breadcrumb-drop"><label tabindex="0" class="oc-breadcrumb-drop-label"><span aria-current="page" class="oc-breadcrumb-drop-label-text">Deeper ellipsize in responsive mode</span>
       <oc-icon-stub name="expand_more" accessiblelabel="Expand more" type="span" size="medium" variation="passive" class="oc-breadcrumb-drop-label-icon"></oc-icon-stub>
@@ -53,18 +58,23 @@ exports[`OcBreadcrumb sets correct variation 1`] = `
       <router-link-stub tag="a" to="[object Object]">
         First folder
       </router-link-stub>
+      <!---->
     </li>
     <li class="oc-breadcrumb-list-item">
       <oc-button-stub type="button" size="medium" variation="passive" appearance="raw" justifycontent="center" gapsize="medium">
         Subfolder
       </oc-button-stub>
+      <!---->
     </li>
     <li class="oc-breadcrumb-list-item">
       <router-link-stub tag="a" to="[object Object]">
         Deep
       </router-link-stub>
+      <!---->
+    </li>
+    <li class="oc-breadcrumb-list-item"><span aria-current="page" tabindex="-1">Deeper ellipsize in responsive mode</span>
+      <!---->
     </li>
-    <li class="oc-breadcrumb-list-item"><span aria-current="page" tabindex="-1">Deeper ellipsize in responsive mode</span></li>
   </ol>
   <div class="oc-breadcrumb-drop"><label tabindex="0" class="oc-breadcrumb-drop-label"><span aria-current="page" class="oc-breadcrumb-drop-label-text">Deeper ellipsize in responsive mode</span>
       <oc-icon-stub name="expand_more" accessiblelabel="Expand more" type="span" size="medium" variation="passive" class="oc-breadcrumb-drop-label-icon"></oc-icon-stub>