Commit 0c0c3c69 authored by Kushal Pandya's avatar Kushal Pandya

Merge branch '219774-legacy-dropdown-edit' into 'master'

Replace depreciated button in jobs item

Closes #219774

See merge request gitlab-org/gitlab!38923
parents 22b5c365 361eda43
<script>
import { GlTooltipDirective, GlDeprecatedButton, GlLoadingIcon } from '@gitlab/ui';
import { GlTooltipDirective, GlButton, GlLoadingIcon } from '@gitlab/ui';
import axios from '~/lib/utils/axios_utils';
import { dasherize } from '~/lib/utils/text_utility';
import { __ } from '~/locale';
......@@ -19,7 +19,7 @@ import Icon from '~/vue_shared/components/icon.vue';
export default {
components: {
Icon,
GlDeprecatedButton,
GlButton,
GlLoadingIcon,
},
directives: {
......@@ -82,16 +82,16 @@ export default {
};
</script>
<template>
<gl-deprecated-button
<gl-button
:id="`js-ci-action-${link}`"
v-gl-tooltip="{ boundary: 'viewport' }"
:title="tooltipText"
:class="cssClass"
:disabled="isDisabled"
class="js-ci-action btn btn-blank btn-transparent ci-action-icon-container ci-action-icon-wrapper d-flex align-items-center justify-content-center"
class="js-ci-action ci-action-icon-container ci-action-icon-wrapper gl-display-flex gl-align-items-center gl-justify-content-center"
@click="onClickAction"
>
<gl-loading-icon v-if="isLoading" class="js-action-icon-loading" />
<icon v-else :name="actionIcon" />
</gl-deprecated-button>
</gl-button>
</template>
......@@ -670,24 +670,14 @@
&.ci-action-icon-wrapper {
height: 30px;
width: 30px;
background: $white;
border: 1px solid $border-color;
border-radius: 100%;
display: block;
&:hover {
background-color: $gray-darker;
border: 1px solid $dropdown-toggle-active-border-color;
svg {
fill: $gl-text-color;
}
}
padding: 0;
line-height: initial;
svg {
fill: $gl-text-color-secondary;
position: relative;
top: -1px;
vertical-align: initial;
}
.spinner {
......@@ -696,7 +686,8 @@
&.play {
svg {
left: 2px;
left: 1px;
top: 1px;
}
}
}
......@@ -846,15 +837,12 @@ button.mini-pipeline-graph-dropdown-toggle {
&.ci-action-icon-wrapper {
height: $ci-action-dropdown-button-size;
width: $ci-action-dropdown-button-size;
background: $white;
border: 1px solid $border-color;
border-radius: 50%;
display: block;
&:hover {
box-shadow: inset 0 0 0 0.0625rem $dropdown-toggle-active-border-color;
background-color: $gray-darker;
border: 1px solid $dropdown-toggle-active-border-color;
svg {
fill: $gl-text-color;
......@@ -867,7 +855,7 @@ button.mini-pipeline-graph-dropdown-toggle {
height: $ci-action-dropdown-svg-size;
fill: $gl-text-color-secondary;
position: relative;
top: auto;
top: 1px;
vertical-align: initial;
}
}
......@@ -875,7 +863,7 @@ button.mini-pipeline-graph-dropdown-toggle {
// SVGs in the commit widget and mr widget
a.ci-action-icon-container.ci-action-icon-wrapper svg {
top: 4px;
top: 5px;
}
.scrollable-menu {
......
......@@ -16,5 +16,5 @@
%span.ci-build-text.text-truncate.mw-70p.gl-pl-1-deprecated-no-really-do-not-use-me= subject.name
- if status.has_action?
= link_to status.action_path, class: "ci-action-icon-container ci-action-icon-wrapper js-ci-action-icon", method: status.action_method, data: { toggle: 'tooltip', title: status.action_title, container: 'body' } do
= link_to status.action_path, class: "gl-button ci-action-icon-container ci-action-icon-wrapper js-ci-action-icon", method: status.action_method, data: { toggle: 'tooltip', title: status.action_title, container: 'body' } do
= sprite_icon(status.action_icon, css_class: "icon-action-#{status.action_icon}")
---
title: Replace <gl-deprecated-button> with <gl-button> in app/assets/javascripts/pipelines/components/graph/action_component.vue
merge_request: 38923
author:
type: changed
import { mount } from '@vue/test-utils';
import { GlButton } from '@gitlab/ui';
import MockAdapter from 'axios-mock-adapter';
import waitForPromises from 'helpers/wait_for_promises';
import axios from '~/lib/utils/axios_utils';
......@@ -7,7 +8,7 @@ import ActionComponent from '~/pipelines/components/graph/action_component.vue';
describe('pipeline graph action component', () => {
let wrapper;
let mock;
const findButton = () => wrapper.find('button');
const findButton = () => wrapper.find(GlButton);
beforeEach(() => {
mock = new MockAdapter(axios);
......
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