Add latest changes from gitlab-org/gitlab@master

1 files changed, 25 insertions, 15 deletions

diff --git a/app/assets/javascripts/issues/show/components/task_list_item_actions.vue b/app/assets/javascripts/issues/show/components/task_list_item_actions.vue
index 03d298e0ddf..5160903c762 100644
--- a/app/assets/javascripts/issues/show/components/task_list_item_actions.vue
+++ b/app/assets/javascripts/issues/show/components/task_list_item_actions.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
+import { GlDisclosureDropdown, GlDisclosureDropdownItem } from '@gitlab/ui';
 import { __, s__ } from '~/locale';
 import eventHub from '../event_hub';
 
@@ -10,38 +10,48 @@ export default {
     taskActions: s__('WorkItem|Task actions'),
   },
   components: {
-    GlDropdown,
-    GlDropdownItem,
+    GlDisclosureDropdown,
+    GlDisclosureDropdownItem,
   },
   inject: ['canUpdate'],
   methods: {
     convertToTask() {
       eventHub.$emit('convert-task-list-item', this.$el.closest('li').dataset.sourcepos);
+      this.closeDropdown();
     },
     deleteTaskListItem() {
       eventHub.$emit('delete-task-list-item', this.$el.closest('li').dataset.sourcepos);
+      this.closeDropdown();
+    },
+    closeDropdown() {
+      this.$refs.dropdown.close();
     },
   },
 };
 </script>
 
 <template>
-  <gl-dropdown
+  <gl-disclosure-dropdown
+    v-if="canUpdate"
+    ref="dropdown"
     class="task-list-item-actions-wrapper"
     category="tertiary"
     icon="ellipsis_v"
-    lazy
     no-caret
-    right
-    :text="$options.i18n.taskActions"
+    placement="right"
+    :toggle-text="$options.i18n.taskActions"
     text-sr-only
-    toggle-class="task-list-item-actions gl-opacity-0 gl-p-2!"
+    toggle-class="task-list-item-actions gl-opacity-0 gl-p-2! "
   >
-    <gl-dropdown-item v-if="canUpdate" @click="convertToTask">
-      {{ $options.i18n.convertToTask }}
-    </gl-dropdown-item>
-    <gl-dropdown-item v-if="canUpdate" variant="danger" @click="deleteTaskListItem">
-      {{ $options.i18n.delete }}
-    </gl-dropdown-item>
-  </gl-dropdown>
+    <gl-disclosure-dropdown-item class="gl-ml-2!" @action="convertToTask">
+      <template #list-item>
+        {{ $options.i18n.convertToTask }}
+      </template>
+    </gl-disclosure-dropdown-item>
+    <gl-disclosure-dropdown-item class="gl-ml-2!" @action="deleteTaskListItem">
+      <template #list-item>
+        <span class="gl-text-red-500!">{{ $options.i18n.delete }}</span>
+      </template>
+    </gl-disclosure-dropdown-item>
+  </gl-disclosure-dropdown>
 </template>