Merge pull request #2276 from owncloud/drop-offset

Add offset property to the drop component

changelog/unreleased/enhancement-drop-offset

@@ -0,0 +1,6 @@
+Enhancement: Add offset property to the drop component
+
+We've added an offset property to the drop component to define a custom offset. Also, the max width of drop menus was increased to 400px.
+
+https://github.com/owncloud/web/issues/7335
+https://github.com/owncloud/owncloud-design-system/pull/2276

src/components/atoms/OcDrop/OcDrop.vue

@@ -110,6 +110,14 @@ export default {
         return value.match(/(xsmall|small|medium|large|xlarge|xxlarge|xxxlarge|remove)/)
       },
     },
+    /**
+     * Determines the offset of the drop element. The value can work on both axes by using a string in the form "x, y", such as "50, 20".
+     */
+    offset: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
   },
   data() {
     return { tippy: null }
@@ -158,6 +166,8 @@ export default {
       interactive: true,
       plugins: [hideOnEsc],
       theme: "none",
+      maxWidth: 400,
+      offset: this.offset,
       aria: {
         content: "describedby",
       },

src/components/atoms/OcDrop/__snapshots__/OcDrop.spec.js.snap

@@ -23,7 +23,7 @@ exports[`OcDrop tippy renders tippy 1`] = `
       data-state="visible"
       data-theme="none"
       role="tooltip"
-      style="max-width: 350px; transition-duration: 300ms;"
+      style="max-width: 400px; transition-duration: 300ms;"
       tabindex="-1"
     >
       <div
@@ -69,7 +69,7 @@ exports[`OcDrop tippy renders tippy 2`] = `
       data-state="hidden"
       data-theme="none"
       role="tooltip"
-      style="max-width: 350px; transition-duration: 250ms;"
+      style="max-width: 400px; transition-duration: 250ms;"
       tabindex="-1"
     >
       <div
@@ -116,7 +116,7 @@ exports[`OcDrop tippy renders tippy 3`] = `
       data-state="visible"
       data-theme="none"
       role="tooltip"
-      style="max-width: 350px; transition-duration: 300ms;"
+      style="max-width: 400px; transition-duration: 300ms;"
       tabindex="-1"
     >
       <div