Merge branch '218485-improve-styling-of-the-button' into 'master'

Update split button styling

See merge request gitlab-org/gitlab!44399

ee/app/assets/javascripts/vue_shared/security_reports/components/split_button.vue

 <script>
-import { GlDeprecatedDropdown, GlDeprecatedDropdownItem, GlIcon } from '@gitlab/ui';
+import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
 
 export default {
   components: {
-    GlDeprecatedDropdown,
-    GlDeprecatedDropdownItem,
-    GlIcon,
+    GlDropdown,
+    GlDropdownItem,
   },
   props: {
     buttons: {
@@ -36,31 +35,24 @@ export default {
 </script>
 
 <template>
-  <gl-deprecated-dropdown
+  <gl-dropdown
     v-if="selectedButton"
     :disabled="disabled"
-    no-caret
-    right
-    split
     variant="success"
     :text="selectedButton.name"
+    split
     @click="handleClick"
   >
-    <gl-deprecated-dropdown-item
+    <gl-dropdown-item
       v-for="button in buttons"
       :key="button.action"
+      :is-checked="selectedButton === button"
+      is-check-item
       @click="setButton(button)"
     >
-      <div class="media">
-        <div>
-          <gl-icon v-if="selectedButton === button" class="gl-mr-2" name="mobile-issue-close" />
-        </div>
-        <div class="media-body" :class="{ 'prepend-left-20': selectedButton !== button }">
       <strong>{{ button.name }}</strong>
       <br />
       <span>{{ button.tagline }}</span>
-        </div>
-      </div>
-    </gl-deprecated-dropdown-item>
-  </gl-deprecated-dropdown>
+    </gl-dropdown-item>
+  </gl-dropdown>
 </template>

ee/changelogs/unreleased/218485-improve-styling-of-the-button.yml

+---
+title: Use the new dropdown for the split button in vulnerability management
+merge_request: 44399
+author:
+type: other

ee/spec/frontend/vue_shared/security_reports/components/split_button_spec.js

 import { shallowMount } from '@vue/test-utils';
-import { GlDeprecatedDropdown, GlDeprecatedDropdownItem, GlIcon } from '@gitlab/ui';
+import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
 import SplitButton from 'ee/vue_shared/security_reports/components/split_button.vue';
 
 const buttons = [
@@ -20,8 +20,8 @@ const buttons = [
 describe('Split Button', () => {
   let wrapper;
 
-  const findDropdown = () => wrapper.find(GlDeprecatedDropdown);
-  const findDropdownItems = () => wrapper.findAll(GlDeprecatedDropdownItem);
+  const findDropdown = () => wrapper.find(GlDropdown);
+  const findDropdownItems = () => wrapper.findAll(GlDropdownItem);
 
   const createComponent = props => {
     wrapper = shallowMount(SplitButton, {
@@ -80,8 +80,7 @@ describe('Split Button', () => {
     expect(
       findDropdownItems()
         .at(0)
-        .find(GlIcon)
-        .exists(),
+        .props('isChecked'),
     ).toBe(true);
   });
 });