Commit 69e97f4e authored by Savas Vedova's avatar Savas Vedova

Update split button styling

parent b6afb1c5
<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>
<strong>{{ button.name }}</strong>
<br />
<span>{{ button.tagline }}</span>
</gl-dropdown-item>
</gl-dropdown>
</template>
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);
});
});
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment