Add latest changes from gitlab-org/gitlab@master

2 files changed, 78 insertions, 1 deletions

diff --git a/app/assets/javascripts/vue_shared/components/split_button.vue b/app/assets/javascripts/vue_shared/components/split_button.vue
new file mode 100644
index 00000000000..f7dc00a345c
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/split_button.vue
@@ -0,0 +1,76 @@
+<script>
+import _ from 'underscore';
+
+import { GlDropdown, GlDropdownDivider, GlDropdownItem } from '@gitlab/ui';
+
+const isValidItem = item =>
+  _.isString(item.eventName) && _.isString(item.title) && _.isString(item.description);
+
+export default {
+  components: {
+    GlDropdown,
+    GlDropdownDivider,
+    GlDropdownItem,
+  },
+
+  props: {
+    actionItems: {
+      type: Array,
+      required: true,
+      validator(value) {
+        return value.length > 1 && value.every(isValidItem);
+      },
+    },
+    menuClass: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+
+  data() {
+    return {
+      selectedItem: this.actionItems[0],
+    };
+  },
+
+  computed: {
+    dropdownToggleText() {
+      return this.selectedItem.title;
+    },
+  },
+
+  methods: {
+    triggerEvent() {
+      this.$emit(this.selectedItem.eventName);
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-dropdown
+    :menu-class="`dropdown-menu-selectable ${menuClass}`"
+    split
+    :text="dropdownToggleText"
+    v-bind="$attrs"
+    @click="triggerEvent"
+  >
+    <template v-for="(item, itemIndex) in actionItems">
+      <gl-dropdown-item
+        :key="item.eventName"
+        :active="selectedItem === item"
+        active-class="is-active"
+        @click="selectedItem = item"
+      >
+        <strong>{{ item.title }}</strong>
+        <div>{{ item.description }}</div>
+      </gl-dropdown-item>
+
+      <gl-dropdown-divider
+        v-if="itemIndex < actionItems.length - 1"
+        :key="`${item.eventName}-divider`"
+      />
+    </template>
+  </gl-dropdown>
+</template>
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index ce74aa6ed02..d53a4c1286c 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -506,7 +506,8 @@
 .dropdown-menu-selectable {
   li {
     a,
-    button {
+    button,
+    .dropdown-item {
       padding: 8px 40px;
       position: relative;