Commit fcffcf1b authored by Natalia Tepluhina's avatar Natalia Tepluhina

Merge branch '608-button-migration-deprecated-button-gitlab-ui-integration-test' into 'master'

GitLab UI: rename GlButton to GlDeprecatedButton

See merge request gitlab-org/gitlab!27835
parents b9768f3f 4b71b24f
......@@ -2,7 +2,7 @@ import { shallowMount } from '@vue/test-utils';
import Popover from '~/blob/suggest_gitlab_ci_yml/components/popover.vue';
import { mockTracking, unmockTracking, triggerEvent } from 'helpers/tracking_helper';
import * as utils from '~/lib/utils/common_utils';
import { GlButton } from '@gitlab/ui';
import { GlDeprecatedButton } from '@gitlab/ui';
jest.mock('~/lib/utils/common_utils', () => ({
...jest.requireActual('~/lib/utils/common_utils'),
......@@ -29,11 +29,11 @@ describe('Suggest gitlab-ci.yml Popover', () => {
humanAccess,
},
stubs: {
GlButton,
GlDeprecatedButton,
GlIcon
}
slots: {
title: '<gl-button><gl-icon /> </gl-button>',
title: '<gl-deprecated-button><gl-icon /> </gl-deprecated-button>',
}
});
}
......@@ -101,7 +101,7 @@ describe('Suggest gitlab-ci.yml Popover', () => {
const expectedLabel = commitTrackLabel;
const expectedProperty = 'owner';
const expectedValue = '10';
const dismissButton = wrapper.find(GlButton);
const dismissButton = wrapper.find(GlDeprecatedButton);
console.log(wrapper.html());
......
<script>
import { GlButton, GlFormGroup, GlFormInput, GlModal, GlModalDirective } from '@gitlab/ui';
import {
GlDeprecatedButton,
GlFormGroup,
GlFormInput,
GlModal,
GlModalDirective,
} from '@gitlab/ui';
import _ from 'underscore';
import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
import ToggleButton from '~/vue_shared/components/toggle_button.vue';
......@@ -11,7 +17,7 @@ export default {
COPY_TO_CLIPBOARD: __('Copy'),
RESET_KEY: __('Reset key'),
components: {
GlButton,
GlDeprecatedButton,
GlFormGroup,
GlFormInput,
GlModal,
......@@ -149,7 +155,9 @@ export default {
<clipboard-button :text="authorizationKey" :title="$options.COPY_TO_CLIPBOARD" />
</span>
</div>
<gl-button v-gl-modal.authKeyModal class="mt-2">{{ $options.RESET_KEY }}</gl-button>
<gl-deprecated-button v-gl-modal.authKeyModal class="mt-2">{{
$options.RESET_KEY
}}</gl-deprecated-button>
<gl-modal
modal-id="authKeyModal"
:title="$options.RESET_KEY"
......
<script>
import { GlFormInputGroup, GlButton, GlIcon } from '@gitlab/ui';
import { GlFormInputGroup, GlDeprecatedButton, GlIcon } from '@gitlab/ui';
import { __ } from '~/locale';
export default {
components: {
GlFormInputGroup,
GlButton,
GlDeprecatedButton,
GlIcon,
},
props: {
......@@ -33,9 +33,9 @@ export default {
select-on-click
>
<template #append>
<gl-button new-style data-clipboard-target="#embeddable-text">
<gl-deprecated-button new-style data-clipboard-target="#embeddable-text">
<gl-icon name="copy-to-clipboard" :title="__('Copy')" />
</gl-button>
</gl-deprecated-button>
</template>
</gl-form-input-group>
</template>
<script>
import { GlButton, GlButtonGroup, GlIcon, GlTooltipDirective } from '@gitlab/ui';
import { GlDeprecatedButton, GlButtonGroup, GlIcon, GlTooltipDirective } from '@gitlab/ui';
import {
BTN_COPY_CONTENTS_TITLE,
BTN_DOWNLOAD_TITLE,
......@@ -12,7 +12,7 @@ export default {
components: {
GlIcon,
GlButtonGroup,
GlButton,
GlDeprecatedButton,
},
directives: {
GlTooltip: GlTooltipDirective,
......@@ -43,7 +43,7 @@ export default {
</script>
<template>
<gl-button-group>
<gl-button
<gl-deprecated-button
v-gl-tooltip.hover
:aria-label="$options.BTN_COPY_CONTENTS_TITLE"
:title="$options.BTN_COPY_CONTENTS_TITLE"
......@@ -51,8 +51,8 @@ export default {
data-clipboard-target="#blob-code-content"
>
<gl-icon name="copy-to-clipboard" :size="14" />
</gl-button>
<gl-button
</gl-deprecated-button>
<gl-deprecated-button
v-gl-tooltip.hover
:aria-label="$options.BTN_RAW_TITLE"
:title="$options.BTN_RAW_TITLE"
......@@ -60,8 +60,8 @@ export default {
target="_blank"
>
<gl-icon name="doc-code" :size="14" />
</gl-button>
<gl-button
</gl-deprecated-button>
<gl-deprecated-button
v-gl-tooltip.hover
:aria-label="$options.BTN_DOWNLOAD_TITLE"
:title="$options.BTN_DOWNLOAD_TITLE"
......@@ -69,6 +69,6 @@ export default {
target="_blank"
>
<gl-icon name="download" :size="14" />
</gl-button>
</gl-deprecated-button>
</gl-button-group>
</template>
<script>
import { GlButton, GlButtonGroup, GlIcon, GlTooltipDirective } from '@gitlab/ui';
import { GlDeprecatedButton, GlButtonGroup, GlIcon, GlTooltipDirective } from '@gitlab/ui';
import {
RICH_BLOB_VIEWER,
RICH_BLOB_VIEWER_TITLE,
......@@ -11,7 +11,7 @@ export default {
components: {
GlIcon,
GlButtonGroup,
GlButton,
GlDeprecatedButton,
},
directives: {
GlTooltip: GlTooltipDirective,
......@@ -46,7 +46,7 @@ export default {
</script>
<template>
<gl-button-group class="js-blob-viewer-switcher ml-2">
<gl-button
<gl-deprecated-button
v-gl-tooltip.hover
:aria-label="$options.SIMPLE_BLOB_VIEWER_TITLE"
:title="$options.SIMPLE_BLOB_VIEWER_TITLE"
......@@ -55,8 +55,8 @@ export default {
@click="switchToViewer($options.SIMPLE_BLOB_VIEWER)"
>
<gl-icon name="code" :size="14" />
</gl-button>
<gl-button
</gl-deprecated-button>
<gl-deprecated-button
v-gl-tooltip.hover
:aria-label="$options.RICH_BLOB_VIEWER_TITLE"
:title="$options.RICH_BLOB_VIEWER_TITLE"
......@@ -65,6 +65,6 @@ export default {
@click="switchToViewer($options.RICH_BLOB_VIEWER)"
>
<gl-icon name="document" :size="14" />
</gl-button>
</gl-deprecated-button>
</gl-button-group>
</template>
<script>
import { GlPopover, GlSprintf, GlButton, GlIcon } from '@gitlab/ui';
import { GlPopover, GlSprintf, GlDeprecatedButton, GlIcon } from '@gitlab/ui';
import { parseBoolean, scrollToElement, setCookie, getCookie } from '~/lib/utils/common_utils';
import { s__ } from '~/locale';
import { glEmojiTag } from '~/emoji';
......@@ -27,7 +27,7 @@ export default {
GlPopover,
GlSprintf,
GlIcon,
GlButton,
GlDeprecatedButton,
},
mixins: [trackingMixin],
props: {
......@@ -109,9 +109,9 @@ export default {
<template #title>
<span v-html="suggestTitle"></span>
<span class="ml-auto">
<gl-button :aria-label="__('Close')" class="btn-blank" @click="onDismiss">
<gl-deprecated-button :aria-label="__('Close')" class="btn-blank" @click="onDismiss">
<gl-icon name="close" aria-hidden="true" />
</gl-button>
</gl-deprecated-button>
</span>
</template>
......
import $ from 'jquery';
import Sortable from 'sortablejs';
import Vue from 'vue';
import { GlButtonGroup, GlButton, GlLabel, GlTooltip } from '@gitlab/ui';
import { GlButtonGroup, GlDeprecatedButton, GlLabel, GlTooltip } from '@gitlab/ui';
import isWipLimitsOn from 'ee_else_ce/boards/mixins/is_wip_limits';
import { s__, __, sprintf } from '~/locale';
import Icon from '~/vue_shared/components/icon.vue';
......@@ -32,7 +32,7 @@ export default Vue.extend({
Icon,
GlButtonGroup,
IssueCount,
GlButton,
GlDeprecatedButton,
GlLabel,
GlTooltip,
},
......
<script>
import $ from 'jquery';
import Sortable from 'sortablejs';
import { GlButtonGroup, GlButton, GlLabel, GlTooltip, GlIcon } from '@gitlab/ui';
import { GlButtonGroup, GlDeprecatedButton, GlLabel, GlTooltip, GlIcon } from '@gitlab/ui';
import isWipLimitsOn from 'ee_else_ce/boards/mixins/is_wip_limits';
import { s__, __, sprintf } from '~/locale';
import Tooltip from '~/vue_shared/directives/tooltip';
......@@ -24,7 +24,7 @@ export default {
BoardList,
GlButtonGroup,
IssueCount,
GlButton,
GlDeprecatedButton,
GlLabel,
GlTooltip,
GlIcon,
......@@ -333,7 +333,7 @@ export default {
v-if="isNewIssueShown || isSettingsShown"
class="board-list-button-group pl-2"
>
<gl-button
<gl-deprecated-button
v-if="isNewIssueShown"
ref="newIssueBtn"
:class="{
......@@ -346,10 +346,10 @@ export default {
@click="showNewIssueForm"
>
<i aria-hidden="true" data-hidden="true" class="fa fa-plus"></i>
</gl-button>
</gl-deprecated-button>
<gl-tooltip :target="() => $refs.newIssueBtn">{{ __('New Issue') }}</gl-tooltip>
<gl-button
<gl-deprecated-button
v-if="isSettingsShown"
ref="settingsBtn"
:aria-label="__(`List settings`)"
......@@ -359,7 +359,7 @@ export default {
@click="openSidebarSettings"
>
<gl-icon name="settings" />
</gl-button>
</gl-deprecated-button>
<gl-tooltip :target="() => $refs.settingsBtn">{{ __('List settings') }}</gl-tooltip>
</gl-button-group>
</h3>
......
<script>
import $ from 'jquery';
import { GlButton } from '@gitlab/ui';
import { GlDeprecatedButton } from '@gitlab/ui';
import { getMilestone } from 'ee_else_ce/boards/boards_util';
import ListIssue from 'ee_else_ce/boards/models/issue';
import eventHub from '../eventhub';
......@@ -11,7 +11,7 @@ export default {
name: 'BoardNewIssue',
components: {
ProjectSelect,
GlButton,
GlDeprecatedButton,
},
props: {
groupId: {
......@@ -120,17 +120,21 @@ export default {
/>
<project-select v-if="groupId" :group-id="groupId" :list="list" />
<div class="clearfix prepend-top-10">
<gl-button
<gl-deprecated-button
ref="submit-button"
:disabled="disabled"
class="float-left"
variant="success"
type="submit"
>{{ __('Submit issue') }}</gl-button
>{{ __('Submit issue') }}</gl-deprecated-button
>
<gl-deprecated-button
class="float-right"
type="button"
variant="default"
@click="cancel"
>{{ __('Cancel') }}</gl-deprecated-button
>
<gl-button class="float-right" type="button" variant="default" @click="cancel">{{
__('Cancel')
}}</gl-button>
</div>
</form>
</div>
......
......@@ -4,7 +4,7 @@ import { mapActions, mapState } from 'vuex';
import { ADD_CI_VARIABLE_MODAL_ID } from '../constants';
import CiEnvironmentsDropdown from './ci_environments_dropdown.vue';
import {
GlButton,
GlDeprecatedButton,
GlModal,
GlFormSelect,
GlFormGroup,
......@@ -19,7 +19,7 @@ export default {
modalId: ADD_CI_VARIABLE_MODAL_ID,
components: {
CiEnvironmentsDropdown,
GlButton,
GlDeprecatedButton,
GlModal,
GlFormSelect,
GlFormGroup,
......@@ -212,22 +212,22 @@ export default {
</gl-form-group>
</form>
<template #modal-footer>
<gl-button @click="hideModal">{{ __('Cancel') }}</gl-button>
<gl-button
<gl-deprecated-button @click="hideModal">{{ __('Cancel') }}</gl-deprecated-button>
<gl-deprecated-button
v-if="variableBeingEdited"
ref="deleteCiVariable"
category="secondary"
variant="danger"
@click="deleteVarAndClose"
>{{ __('Delete variable') }}</gl-button
>{{ __('Delete variable') }}</gl-deprecated-button
>
<gl-button
<gl-deprecated-button
ref="updateOrAddVariable"
:disabled="!canSubmit"
variant="success"
@click="updateOrAddVariable"
>{{ modalActionText }}
</gl-button>
</gl-deprecated-button>
</template>
</gl-modal>
</template>
<script>
import { GlPopover, GlIcon, GlButton, GlTooltipDirective } from '@gitlab/ui';
import { GlPopover, GlIcon, GlDeprecatedButton, GlTooltipDirective } from '@gitlab/ui';
export default {
maxTextLength: 95,
components: {
GlPopover,
GlIcon,
GlButton,
GlDeprecatedButton,
},
directives: {
GlTooltip: GlTooltipDirective,
......@@ -41,14 +41,14 @@ export default {
<gl-popover :target="target" triggers="hover" placement="top" container="popover-container">
<div class="d-flex justify-content-between position-relative">
<div class="pr-5 w-100 ci-popover-value">{{ displayValue }}</div>
<gl-button
<gl-deprecated-button
v-gl-tooltip
class="btn-transparent btn-clipboard position-absolute position-top-0 position-right-0"
:title="tooltipText"
:data-clipboard-text="value"
>
<gl-icon name="copy-to-clipboard" />
</gl-button>
</gl-deprecated-button>
</div>
</gl-popover>
</div>
......
<script>
import { GlTable, GlButton, GlModalDirective, GlIcon } from '@gitlab/ui';
import { GlTable, GlDeprecatedButton, GlModalDirective, GlIcon } from '@gitlab/ui';
import { s__, __ } from '~/locale';
import { mapState, mapActions } from 'vuex';
import { ADD_CI_VARIABLE_MODAL_ID } from '../constants';
......@@ -52,7 +52,7 @@ export default {
],
components: {
GlTable,
GlButton,
GlDeprecatedButton,
GlIcon,
CiVariablePopover,
},
......@@ -147,13 +147,13 @@ export default {
</div>
</template>
<template #cell(actions)="{ item }">
<gl-button
<gl-deprecated-button
ref="edit-ci-variable"
v-gl-modal-directive="$options.modalId"
@click="editVariable(item)"
>
<gl-icon :size="$options.iconSize" name="pencil" />
</gl-button>
</gl-deprecated-button>
</template>
<template #empty>
<p ref="empty-variables" class="text-center empty-variables text-plain">
......@@ -165,20 +165,20 @@ export default {
class="ci-variable-actions d-flex justify-content-end"
:class="{ 'justify-content-center': !tableIsNotEmpty }"
>
<gl-button
<gl-deprecated-button
v-if="tableIsNotEmpty"
ref="secret-value-reveal-button"
data-qa-selector="reveal_ci_variable_value"
class="append-right-8"
@click="toggleValues(!valuesHidden)"
>{{ valuesButtonText }}</gl-button
>{{ valuesButtonText }}</gl-deprecated-button
>
<gl-button
<gl-deprecated-button
ref="add-ci-variable"
v-gl-modal-directive="$options.modalId"
data-qa-selector="add_ci_variable"
variant="success"
>{{ __('Add Variable') }}</gl-button
>{{ __('Add Variable') }}</gl-deprecated-button
>
</div>
</div>
......
......@@ -7,7 +7,7 @@ import {
GlSprintf,
GlLink,
GlToggle,
GlButton,
GlDeprecatedButton,
GlDropdown,
GlDropdownItem,
GlIcon,
......@@ -25,7 +25,7 @@ export default {
GlSprintf,
GlLink,
GlToggle,
GlButton,
GlDeprecatedButton,
GlDropdown,
GlDropdownItem,
GlIcon,
......@@ -235,17 +235,17 @@ export default {
</div>
</div>
<div v-if="showButtons" class="mt-3">
<gl-button
<gl-deprecated-button
class="btn-success inline mr-1"
:loading="saving"
:disabled="saveButtonDisabled"
@click="updateApplication"
>
{{ saveButtonLabel }}
</gl-button>
<gl-button :disabled="saveButtonDisabled" @click="resetStatus">
</gl-deprecated-button>
<gl-deprecated-button :disabled="saveButtonDisabled" @click="resetStatus">
{{ __('Cancel') }}
</gl-button>
</gl-deprecated-button>
</div>
</div>
</div>
......
<script>
import { escape as esc } from 'lodash';
import SplitButton from '~/vue_shared/components/split_button.vue';
import { GlModal, GlButton, GlFormInput } from '@gitlab/ui';
import { GlModal, GlDeprecatedButton, GlFormInput } from '@gitlab/ui';
import { s__, sprintf } from '~/locale';
import csrf from '~/lib/utils/csrf';
......@@ -27,7 +27,7 @@ export default {
components: {
SplitButton,
GlModal,
GlButton,
GlDeprecatedButton,
GlFormInput,
},
props: {
......@@ -148,19 +148,24 @@ export default {
}}</span>
</template>
<template slot="modal-footer">
<gl-button variant="secondary" @click="handleCancel">{{ s__('Cancel') }}</gl-button>
<gl-deprecated-button variant="secondary" @click="handleCancel">{{
s__('Cancel')
}}</gl-deprecated-button>
<template v-if="confirmCleanup">
<gl-button :disabled="!canSubmit" variant="warning" @click="handleSubmit">{{
<gl-deprecated-button :disabled="!canSubmit" variant="warning" @click="handleSubmit">{{
s__('ClusterIntegration|Remove integration')
}}</gl-button>
<gl-button :disabled="!canSubmit" variant="danger" @click="handleSubmit(true)">{{
s__('ClusterIntegration|Remove integration and resources')
}}</gl-button>
}}</gl-deprecated-button>
<gl-deprecated-button
:disabled="!canSubmit"
variant="danger"
@click="handleSubmit(true)"
>{{ s__('ClusterIntegration|Remove integration and resources') }}</gl-deprecated-button
>
</template>
<template v-else>
<gl-button :disabled="!canSubmit" variant="danger" @click="handleSubmit">{{
<gl-deprecated-button :disabled="!canSubmit" variant="danger" @click="handleSubmit">{{
s__('ClusterIntegration|Remove integration')
}}</gl-button>
}}</gl-deprecated-button>
</template>
</template>
</gl-modal>
......
<script>
import { GlButton } from '@gitlab/ui';
import { GlDeprecatedButton } from '@gitlab/ui';
export default {
components: {
GlButton,
GlDeprecatedButton,
},
props: {
position: {
......@@ -77,9 +77,9 @@ export default {
</p>
</div>
<div v-if="definitionPath" class="popover-body">
<gl-button :href="definitionPath" target="_blank" class="w-100" variant="default">
<gl-deprecated-button :href="definitionPath" target="_blank" class="w-100" variant="default">
{{ __('Go to definition') }}
</gl-button>
</gl-deprecated-button>
</div>
</div>
</template>
<script>
import { GlButton, GlLoadingIcon } from '@gitlab/ui';
import { GlDeprecatedButton, GlLoadingIcon } from '@gitlab/ui';
import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils';
import PipelinesService from '~/pipelines/services/pipelines_service';
import PipelineStore from '~/pipelines/stores/pipelines_store';
......@@ -12,7 +12,7 @@ import CIPaginationMixin from '~/vue_shared/mixins/ci_pagination_api_mixin';
export default {
components: {
TablePagination,
GlButton,
GlDeprecatedButton,
GlLoadingIcon,
},
mixins: [pipelinesMixin, CIPaginationMixin],
......@@ -171,7 +171,7 @@ export default {
<div v-else-if="shouldRenderTable" class="table-holder">
<div v-if="canRenderPipelineButton" class="nav justify-content-end">
<gl-button
<gl-deprecated-button
v-if="canRenderPipelineButton"
variant="success"
class="js-run-mr-pipeline prepend-top-10 btn-wide-on-xs"
......@@ -180,7 +180,7 @@ export default {
>
<gl-loading-icon v-if="state.isRunningMergeRequestPipeline" inline />
{{ s__('Pipelines|Run Pipeline') }}
</gl-button>
</gl-deprecated-button>
</div>
<pipelines-table-component
......
<script>
import { mapActions, mapGetters, mapState } from 'vuex';
import { GlTooltipDirective, GlLink, GlButton, GlSprintf } from '@gitlab/ui';
import { GlTooltipDirective, GlLink, GlDeprecatedButton, GlSprintf } from '@gitlab/ui';
import { __ } from '~/locale';
import { polyfillSticky } from '~/lib/utils/sticky';
import Icon from '~/vue_shared/components/icon.vue';
......@@ -14,7 +14,7 @@ export default {
CompareVersionsDropdown,
Icon,
GlLink,
GlButton,
GlDeprecatedButton,
GlSprintf,
SettingsDropdown,
DiffStats,
......@@ -140,16 +140,20 @@ export default {
:added-lines="addedLines"
:removed-lines="removedLines"
/>
<gl-button
<gl-deprecated-button
v-if="commit || startVersion"
:href="latestVersionPath"
class="append-right-8 js-latest-version"
>
{{ __('Show latest version') }}
</gl-button>
<gl-button v-show="hasCollapsedFile" class="append-right-8" @click="expandAllFiles">
</gl-deprecated-button>
<gl-deprecated-button
v-show="hasCollapsedFile"
class="append-right-8"
@click="expandAllFiles"
>
{{ __('Expand all') }}
</gl-button>
</gl-deprecated-button>
<settings-dropdown />
</div>
</div>
......
<script>
import { escape as esc } from 'lodash';
import { mapActions, mapGetters } from 'vuex';
import { GlButton, GlTooltipDirective, GlLoadingIcon } from '@gitlab/ui';
import { GlDeprecatedButton, GlTooltipDirective, GlLoadingIcon } from '@gitlab/ui';
import { polyfillSticky } from '~/lib/utils/sticky';
import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
import Icon from '~/vue_shared/components/icon.vue';
......@@ -16,7 +16,7 @@ import { scrollToElement } from '~/lib/utils/common_utils';
export default {
components: {
GlLoadingIcon,
GlButton,
GlDeprecatedButton,
ClipboardButton,
EditButton,
Icon,
......@@ -229,7 +229,7 @@ export default {
<div class="btn-group" role="group">
<template v-if="diffFile.blob && diffFile.blob.readable_text">
<span v-gl-tooltip.hover :title="s__('MergeRequests|Toggle comments for this file')">
<gl-button
<gl-deprecated-button
ref="toggleDiscussionsButton"
:disabled="!diffHasDiscussions(diffFile)"
:class="{ active: diffHasExpandedDiscussions(diffFile) }"
......@@ -242,7 +242,7 @@ export default {
@click="toggleFileDiscussionWrappers(diffFile)"
>
<icon name="comment" />
</gl-button>
</gl-deprecated-button>
</span>
<edit-button
......@@ -265,7 +265,7 @@ export default {
v-html="viewReplacedFileButtonText"
>
</a>
<gl-button
<gl-deprecated-button
v-if="!diffFile.is_fully_expanded"
ref="expandDiffToFullFileButton"
v-gl-tooltip.hover
......@@ -279,8 +279,8 @@ export default {
<gl-loading-icon v-if="diffFile.isLoadingFullFile" color="dark" inline />
<icon v-else-if="diffFile.isShowingFullFile" name="doc-changes" />
<icon v-else name="doc-expand" />
</gl-button>
<gl-button
</gl-deprecated-button>
<gl-deprecated-button
ref="viewButton"
v-gl-tooltip.hover
:href="diffFile.view_path"
......@@ -292,7 +292,7 @@ export default {
:title="viewFileButtonText"
>
<icon name="doc-text" />
</gl-button>
</gl-deprecated-button>
<a
v-if="diffFile.external_url"
......
<script>
import { GlTooltipDirective, GlButton } from '@gitlab/ui';
import { GlTooltipDirective, GlDeprecatedButton } from '@gitlab/ui';
import Icon from '~/vue_shared/components/icon.vue';
export default {
components: {
GlButton,
GlDeprecatedButton,
Icon,
},
directives: {
......@@ -37,7 +37,7 @@ export default {
</script>
<template>
<gl-button
<gl-deprecated-button
v-gl-tooltip.top
:href="editPath"
:title="__('Edit file')"
......@@ -45,5 +45,5 @@ export default {
@click.native="handleEditClick"
>
<icon name="pencil" />
</gl-button>
</gl-deprecated-button>
</template>
<script>
import { mapGetters } from 'vuex';
import { escape as esc } from 'lodash';
import { GlButton } from '@gitlab/ui';
import { GlDeprecatedButton } from '@gitlab/ui';
import { __, sprintf } from '~/locale';
export default {
components: {
GlButton,
GlDeprecatedButton,
},
props: {
changesEmptyStateIllustration: {
......@@ -43,9 +43,9 @@ export default {
<div class="text-content text-center">
<span v-html="emptyStateText"></span>
<div class="text-center">
<gl-button :href="getNoteableData.new_blob_path" variant="success">{{
<gl-deprecated-button :href="getNoteableData.new_blob_path" variant="success">{{
__('Create commit')
}}</gl-button>
}}</gl-deprecated-button>
</div>
</div>
</div>
......
<script>
import { mapActions, mapGetters, mapState } from 'vuex';
import { GlButton } from '@gitlab/ui';
import { GlDeprecatedButton } from '@gitlab/ui';
import Icon from '~/vue_shared/components/icon.vue';
export default {
components: {
GlButton,
GlDeprecatedButton,
Icon,
},
computed: {
......@@ -37,26 +37,26 @@ export default {
<div>
<span class="bold d-block mb-1">{{ __('File browser') }}</span>
<div class="btn-group d-flex">
<gl-button
<gl-deprecated-button
:class="{ active: !renderTreeList }"
class="w-100 js-list-view"
@click="setRenderTreeList(false)"
>
{{ __('List view') }}
</gl-button>
<gl-button
</gl-deprecated-button>
<gl-deprecated-button
:class="{ active: renderTreeList }"
class="w-100 js-tree-view"
@click="setRenderTreeList(true)"
>
{{ __('Tree view') }}
</gl-button>
</gl-deprecated-button>
</div>
</div>
<div class="mt-2">
<span class="bold d-block mb-1">{{ __('Compare changes') }}</span>
<div class="btn-group d-flex js-diff-view-buttons">
<gl-button
<gl-deprecated-button
id="inline-diff-btn"
:class="{ active: isInlineView }"
class="w-100 js-inline-diff-button"
......@@ -64,8 +64,8 @@ export default {
@click="setInlineDiffViewType"
>
{{ __('Inline') }}
</gl-button>
<gl-button
</gl-deprecated-button>
<gl-deprecated-button
id="parallel-diff-btn"
:class="{ active: isParallelView }"
class="w-100 js-parallel-diff-button"
......@@ -73,7 +73,7 @@ export default {
@click="setParallelDiffViewType"
>
{{ __('Side-by-side') }}
</gl-button>
</gl-deprecated-button>
</div>
</div>
<div class="mt-2">
......
<script>
import { GlButton, GlModal, GlModalDirective, GlLink, GlSprintf } from '@gitlab/ui';
import { GlDeprecatedButton, GlModal, GlModalDirective, GlLink, GlSprintf } from '@gitlab/ui';
import ModalCopyButton from '~/vue_shared/components/modal_copy_button.vue';
import { s__ } from '~/locale';
export default {
components: {
GlButton,
GlDeprecatedButton,
GlLink,
GlModal,
GlSprintf,
......@@ -44,7 +44,7 @@ export default {
</script>
<template>
<div>
<gl-button
<gl-deprecated-button
v-gl-modal="$options.modalInfo.id"
variant="info"
category="secondary"
......@@ -52,7 +52,7 @@ export default {
class="js-enable-review-app-button"
>
{{ s__('Environments|Enable review app') }}
</gl-button>
</gl-deprecated-button>
<gl-modal
:modal-id="$options.modalInfo.id"
:title="$options.modalInfo.title"
......
<script>
import { GlButton, GlTooltipDirective } from '@gitlab/ui';
import { GlDeprecatedButton, GlTooltipDirective } from '@gitlab/ui';
import { __ } from '~/locale';
/**
* Renders the Monitoring (Metrics) link in environments table.
......@@ -9,7 +9,7 @@ import Icon from '~/vue_shared/components/icon.vue';
export default {
components: {
Icon,
GlButton,
GlDeprecatedButton,
},
directives: {
GlTooltip: GlTooltipDirective,
......@@ -28,7 +28,7 @@ export default {
};
</script>
<template>
<gl-button
<gl-deprecated-button
v-gl-tooltip
:href="monitoringUrl"
:title="title"
......@@ -38,5 +38,5 @@ export default {
variant="default"
>
<icon name="chart" />
</gl-button>
</gl-deprecated-button>
</template>
......@@ -3,7 +3,7 @@
* Renders a prevent auto-stop button.
* Used in environments table.
*/
import { GlButton, GlTooltipDirective } from '@gitlab/ui';
import { GlDeprecatedButton, GlTooltipDirective } from '@gitlab/ui';
import Icon from '~/vue_shared/components/icon.vue';
import { __ } from '~/locale';
import eventHub from '../event_hub';
......@@ -11,7 +11,7 @@ import eventHub from '../event_hub';
export default {
components: {
Icon,
GlButton,
GlDeprecatedButton,
},
directives: {
GlTooltip: GlTooltipDirective,
......@@ -31,7 +31,12 @@ export default {
};
</script>
<template>
<gl-button v-gl-tooltip :title="$options.title" :aria-label="$options.title" @click="onPinClick">
<gl-deprecated-button
v-gl-tooltip
:title="$options.title"
:aria-label="$options.title"
@click="onPinClick"
>
<icon name="thumbtack" />
</gl-button>
</gl-deprecated-button>
</template>
......@@ -5,7 +5,12 @@
*
* Makes a post request when the button is clicked.
*/
import { GlTooltipDirective, GlLoadingIcon, GlModalDirective, GlButton } from '@gitlab/ui';
import {
GlTooltipDirective,
GlLoadingIcon,
GlModalDirective,
GlDeprecatedButton,
} from '@gitlab/ui';
import { s__ } from '~/locale';
import Icon from '~/vue_shared/components/icon.vue';
import eventHub from '../event_hub';
......@@ -14,7 +19,7 @@ export default {
components: {
Icon,
GlLoadingIcon,
GlButton,
GlDeprecatedButton,
},
directives: {
GlTooltip: GlTooltipDirective,
......@@ -68,7 +73,7 @@ export default {
};
</script>
<template>
<gl-button
<gl-deprecated-button
v-gl-tooltip
v-gl-modal.confirm-rollback-modal
:disabled="isLoading"
......@@ -78,5 +83,5 @@ export default {
>
<icon v-if="isLastDeployment" name="repeat" /> <icon v-else name="redo" />
<gl-loading-icon v-if="isLoading" />
</gl-button>
</gl-deprecated-button>
</template>
<script>
import { GlButton } from '@gitlab/ui';
import { GlDeprecatedButton } from '@gitlab/ui';
import envrionmentsAppMixin from 'ee_else_ce/environments/mixins/environments_app_mixin';
import Flash from '~/flash';
import { s__ } from '~/locale';
......@@ -17,7 +17,7 @@ export default {
ConfirmRollbackModal,
emptyState,
EnableReviewAppButton,
GlButton,
GlDeprecatedButton,
StopEnvironmentModal,
DeleteEnvironmentModal,
},
......@@ -105,14 +105,14 @@ export default {
<div class="nav-controls">
<enable-review-app-button v-if="state.reviewAppDetails.can_setup_review_app" class="mr-2" />
<gl-button
<gl-deprecated-button
v-if="canCreateEnvironment && !isLoading"
:href="newEnvironmentPath"
category="primary"
variant="success"
>
{{ s__('Environments|New environment') }}
</gl-button>
</gl-deprecated-button>
</div>
</div>
......
......@@ -3,7 +3,7 @@ import { mapActions, mapGetters, mapState } from 'vuex';
import dateFormat from 'dateformat';
import createFlash from '~/flash';
import {
GlButton,
GlDeprecatedButton,
GlFormInput,
GlLink,
GlLoadingIcon,
......@@ -29,7 +29,7 @@ const SENTRY_TIMEOUT = 10000;
export default {
components: {
GlButton,
GlDeprecatedButton,
GlFormInput,
GlLink,
GlLoadingIcon,
......@@ -257,22 +257,22 @@ export default {
</div>
<div class="error-details-actions">
<div class="d-inline-flex bv-d-sm-down-none">
<gl-button
<gl-deprecated-button
:loading="updatingIgnoreStatus"
data-qa-selector="update_ignore_status_button"
@click="onIgnoreStatusUpdate"
>
{{ ignoreBtnLabel }}
</gl-button>
<gl-button
</gl-deprecated-button>
<gl-deprecated-button
class="btn-outline-info ml-2"
:loading="updatingResolveStatus"
data-qa-selector="update_resolve_status_button"
@click="onResolveStatusUpdate"
>
{{ resolveBtnLabel }}
</gl-button>
<gl-button
</gl-deprecated-button>
<gl-deprecated-button
v-if="error.gitlabIssuePath"
class="ml-2"
data-qa-selector="view_issue_button"
......@@ -280,7 +280,7 @@ export default {
variant="success"
>
{{ __('View issue') }}
</gl-button>
</gl-deprecated-button>
<form
ref="sentryIssueForm"
:action="projectIssuesPath"
......@@ -295,7 +295,7 @@ export default {
name="issue[sentry_issue_attributes][sentry_issue_identifier]"
/>
<gl-form-input :value="csrfToken" class="hidden" name="authenticity_token" />
<gl-button
<gl-deprecated-button
v-if="!error.gitlabIssuePath"
class="btn-success"
:loading="issueCreationInProgress"
......@@ -303,7 +303,7 @@ export default {
@click="createIssue"
>
{{ __('Create issue') }}
</gl-button>
</gl-deprecated-button>
</form>
</div>
<gl-dropdown
......
<script>
import { GlButton, GlIcon, GlButtonGroup, GlTooltipDirective } from '@gitlab/ui';
import { GlDeprecatedButton, GlIcon, GlButtonGroup, GlTooltipDirective } from '@gitlab/ui';
import { __ } from '~/locale';
const IGNORED = 'ignored';
......@@ -10,7 +10,7 @@ const statusValidation = [IGNORED, RESOLVED, UNRESOLVED];
export default {
components: {
GlButton,
GlDeprecatedButton,
GlIcon,
GlButtonGroup,
},
......@@ -45,7 +45,7 @@ export default {
<template>
<div>
<gl-button-group class="flex-column flex-md-row ml-0 ml-md-n4">
<gl-button
<gl-deprecated-button
:key="ignoreBtn.status"
:ref="`${ignoreBtn.title.toLowerCase()}Error`"
v-gl-tooltip.hover
......@@ -55,8 +55,8 @@ export default {
>
<gl-icon class="d-none d-md-inline m-0" :name="ignoreBtn.icon" :size="12" />
<span class="d-md-none">{{ ignoreBtn.title }}</span>
</gl-button>
<gl-button
</gl-deprecated-button>
<gl-deprecated-button
:key="resolveBtn.status"
:ref="`${resolveBtn.title.toLowerCase()}Error`"
v-gl-tooltip.hover
......@@ -66,15 +66,15 @@ export default {
>
<gl-icon class="d-none d-md-inline m-0" :name="resolveBtn.icon" :size="12" />
<span class="d-md-none">{{ resolveBtn.title }}</span>
</gl-button>
</gl-deprecated-button>
</gl-button-group>
<gl-button
<gl-deprecated-button
:href="detailsLink"
category="secondary"
variant="info"
class="d-block d-md-none mb-2 mb-md-0"
>
{{ __('More details') }}
</gl-button>
</gl-deprecated-button>
</div>
</template>
......@@ -2,7 +2,7 @@
import { mapActions, mapState } from 'vuex';
import {
GlEmptyState,
GlButton,
GlDeprecatedButton,
GlIcon,
GlLink,
GlLoadingIcon,
......@@ -69,7 +69,7 @@ export default {
},
components: {
GlEmptyState,
GlButton,
GlDeprecatedButton,
GlDropdown,
GlDropdownItem,
GlDropdownDivider,
......@@ -250,7 +250,7 @@ export default {
/>
</div>
<div class="gl-search-box-by-type-right-icons">
<gl-button
<gl-deprecated-button
v-if="errorSearchQuery.length > 0"
v-gl-tooltip.hover
:title="__('Clear')"
......@@ -259,7 +259,7 @@ export default {
@click="errorSearchQuery = ''"
>
<gl-icon name="close" :size="12" />
</gl-button>
</gl-deprecated-button>
</div>
</div>
</div>
......
<script>
import { mapActions, mapGetters, mapState } from 'vuex';
import { GlButton } from '@gitlab/ui';
import { GlDeprecatedButton } from '@gitlab/ui';
import ProjectDropdown from './project_dropdown.vue';
import ErrorTrackingForm from './error_tracking_form.vue';
export default {
components: { ProjectDropdown, ErrorTrackingForm, GlButton },
components: { ProjectDropdown, ErrorTrackingForm, GlDeprecatedButton },
props: {
initialApiHost: {
type: String,
......@@ -92,13 +92,13 @@ export default {
@select-project="updateSelectedProject"
/>
</div>
<gl-button
<gl-deprecated-button
:disabled="settingsLoading"
class="js-error-tracking-button"
variant="success"
@click="handleSubmit"
>
{{ __('Save changes') }}
</gl-button>
</gl-deprecated-button>
</div>
</template>
<script>
import { GlButton, GlFormGroup, GlFormInput, GlFormCheckbox } from '@gitlab/ui';
import { GlDeprecatedButton, GlFormGroup, GlFormInput, GlFormCheckbox } from '@gitlab/ui';
import { mapState, mapActions } from 'vuex';
import Icon from '~/vue_shared/components/icon.vue';
export default {
components: {
GlButton,
GlDeprecatedButton,
GlFormCheckbox,
GlFormGroup,
GlFormInput,
......@@ -58,7 +58,7 @@ export default {
<h3 class="js-section-header h4">
{{ s__('GrafanaIntegration|Grafana Authentication') }}
</h3>
<gl-button class="js-settings-toggle">{{ __('Expand') }}</gl-button>
<gl-deprecated-button class="js-settings-toggle">{{ __('Expand') }}</gl-deprecated-button>
<p class="js-section-sub-header">
{{ s__('GrafanaIntegration|Embed Grafana charts in GitLab issues.') }}
</p>
......@@ -93,9 +93,9 @@ export default {
</a>
</p>
</gl-form-group>
<gl-button variant="success" @click="updateGrafanaIntegration">
<gl-deprecated-button variant="success" @click="updateGrafanaIntegration">
{{ __('Save Changes') }}
</gl-button>
</gl-deprecated-button>
</form>
</div>
</section>
......
<script>
import Vue from 'vue';
import { mapActions, mapGetters, mapState } from 'vuex';
import { GlButton, GlLoadingIcon } from '@gitlab/ui';
import { GlDeprecatedButton, GlLoadingIcon } from '@gitlab/ui';
import { __ } from '~/locale';
import FindFile from '~/vue_shared/components/file_finder/index.vue';
import NewModal from './new_dropdown/modal.vue';
......@@ -23,7 +23,7 @@ export default {
FindFile,
ErrorMessage,
CommitEditorHeader,
GlButton,
GlDeprecatedButton,
GlLoadingIcon,
},
props: {
......@@ -121,14 +121,14 @@ export default {
)
}}
</p>
<gl-button
<gl-deprecated-button
variant="success"
:title="__('New file')"
:aria-label="__('New file')"
@click="openNewEntryModal({ type: 'blob' })"
>
{{ __('New file') }}
</gl-button>
</gl-deprecated-button>
</template>
<gl-loading-icon v-else-if="!currentTree || currentTree.loading" size="md" />
<p v-else>
......
<script>
import { GlTooltipDirective, GlLink, GlButton } from '@gitlab/ui';
import { GlTooltipDirective, GlLink, GlDeprecatedButton } from '@gitlab/ui';
import { polyfillSticky } from '~/lib/utils/sticky';
import Icon from '~/vue_shared/components/icon.vue';
import { numberToHumanSize } from '~/lib/utils/number_utils';
......@@ -10,7 +10,7 @@ export default {
components: {
Icon,
GlLink,
GlButton,
GlDeprecatedButton,
},
directives: {
GlTooltip: GlTooltipDirective,
......@@ -111,18 +111,18 @@ export default {
<!-- scroll buttons -->
<div v-gl-tooltip :title="s__('Job|Scroll to top')" class="controllers-buttons">
<gl-button
<gl-deprecated-button
:disabled="isScrollTopDisabled"
type="button"
class="js-scroll-top btn-scroll btn-transparent btn-blank"
@click="handleScrollToTop"
>
<icon name="scroll_up" />
</gl-button>
</gl-deprecated-button>
</div>
<div v-gl-tooltip :title="s__('Job|Scroll to bottom')" class="controllers-buttons">
<gl-button
<gl-deprecated-button
:disabled="isScrollBottomDisabled"
class="js-scroll-bottom btn-scroll btn-transparent btn-blank"
:class="{ animate: isScrollingDown }"
......
<script>
import { uniqueId } from 'lodash';
import { mapActions } from 'vuex';
import { GlButton } from '@gitlab/ui';
import { GlDeprecatedButton } from '@gitlab/ui';
import { s__, sprintf } from '~/locale';
import Icon from '~/vue_shared/components/icon.vue';
export default {
name: 'ManualVariablesForm',
components: {
GlButton,
GlDeprecatedButton,
Icon,
},
props: {
......@@ -137,9 +137,12 @@ export default {
<div class="table-section section-10">
<div class="table-mobile-header" role="rowheader"></div>
<div class="table-mobile-content justify-content-end">
<gl-button class="btn-transparent btn-blank w-25" @click="deleteVariable(variable.id)">
<gl-deprecated-button
class="btn-transparent btn-blank w-25"
@click="deleteVariable(variable.id)"
>
<icon name="clear" />
</gl-button>
</gl-deprecated-button>
</div>
</div>
</div>
......@@ -173,9 +176,9 @@ export default {
<p class="text-muted" v-html="helpText"></p>
</div>
<div class="d-flex justify-content-center">
<gl-button variant="primary" @click="triggerManualJob(variables)">
<gl-deprecated-button variant="primary" @click="triggerManualJob(variables)">
{{ action.button_title }}
</gl-button>
</gl-deprecated-button>
</div>
</div>
</template>
<script>
import { isEmpty } from 'lodash';
import { mapActions, mapState } from 'vuex';
import { GlLink, GlButton } from '@gitlab/ui';
import { GlLink, GlDeprecatedButton } from '@gitlab/ui';
import { __, sprintf } from '~/locale';
import timeagoMixin from '~/vue_shared/mixins/timeago';
import { timeIntervalInWords } from '~/lib/utils/datetime_utility';
......@@ -24,7 +24,7 @@ export default {
StagesDropdown,
JobsContainer,
GlLink,
GlButton,
GlDeprecatedButton,
},
mixins: [timeagoMixin],
props: {
......@@ -133,14 +133,14 @@ export default {
>
</div>
<gl-button
<gl-deprecated-button
:aria-label="__('Toggle Sidebar')"
type="button"
class="btn btn-blank gutter-toggle float-right d-block d-md-none js-sidebar-build-toggle"
@click="toggleSidebar"
>
<i aria-hidden="true" data-hidden="true" class="fa fa-angle-double-right"></i>
</gl-button>
</gl-deprecated-button>
</div>
<div v-if="job.terminal_path || job.new_issue_path" class="block retry-link">
......
<script>
import { GlButton } from '@gitlab/ui';
import { GlDeprecatedButton } from '@gitlab/ui';
import { __ } from '~/locale';
const HIDDEN_VALUE = '••••••';
export default {
components: {
GlButton,
GlDeprecatedButton,
},
props: {
trigger: {
......@@ -55,11 +55,11 @@ export default {
<p class="trigger-variables-btn-container d-flex">
<span class="font-weight-bold">{{ __('Trigger variables:') }}</span>
<gl-button
<gl-deprecated-button
v-if="hasValues"
class="btn-sm group js-reveal-variables trigger-variables-btn"
@click="toggleValues"
>{{ getToggleButtonText }}</gl-button
>{{ getToggleButtonText }}</gl-deprecated-button
>
</p>
......
<script>
import { GlButton, GlTooltipDirective } from '@gitlab/ui';
import { GlDeprecatedButton, GlTooltipDirective } from '@gitlab/ui';
import Icon from '~/vue_shared/components/icon.vue';
export default {
components: {
Icon,
GlButton,
GlDeprecatedButton,
},
directives: {
GlTooltip: GlTooltipDirective,
......@@ -51,14 +51,14 @@ export default {
:title="__('Scroll to top')"
aria-labelledby="scroll-to-top"
>
<gl-button
<gl-deprecated-button
id="scroll-to-top"
class="btn-blank js-scroll-to-top"
:aria-label="__('Scroll to top')"
:disabled="scrollUpButtonDisabled"
@click="handleScrollUp()"
><icon name="scroll_up"
/></gl-button>
/></gl-deprecated-button>
</div>
<div
v-if="scrollDownAvailable"
......@@ -68,7 +68,7 @@ export default {
:title="__('Scroll to bottom')"
aria-labelledby="scroll-to-bottom"
>
<gl-button
<gl-deprecated-button
id="scroll-to-bottom"
class="btn-blank js-scroll-to-bottom"
:aria-label="__('Scroll to bottom')"
......@@ -76,9 +76,9 @@ export default {
:disabled="scrollDownButtonDisabled"
@click="handleScrollDown()"
><icon name="scroll_down"
/></gl-button>
/></gl-deprecated-button>
</div>
<gl-button
<gl-deprecated-button
id="refresh-log"
v-gl-tooltip
class="ml-1 px-2 js-refresh-log"
......@@ -87,6 +87,6 @@ export default {
@click="handleRefreshClick"
>
<icon name="retry" />
</gl-button>
</gl-deprecated-button>
</div>
</template>
<script>
import { GlToggle, GlFormGroup, GlFormTextarea, GlButton } from '@gitlab/ui';
import { GlToggle, GlFormGroup, GlFormTextarea, GlDeprecatedButton } from '@gitlab/ui';
export default {
name: 'MaintenanceModeSettingsApp',
......@@ -7,7 +7,7 @@ export default {
GlToggle,
GlFormGroup,
GlFormTextarea,
GlButton,
GlDeprecatedButton,
},
data() {
return {
......@@ -38,7 +38,7 @@ export default {
/>
</gl-form-group>
<div class="mt-4">
<gl-button variant="success">{{ __('Save changes') }}</gl-button>
<gl-deprecated-button variant="success">{{ __('Save changes') }}</gl-deprecated-button>
</div>
</article>
</template>
<script>
import { omit, throttle } from 'lodash';
import { GlLink, GlButton, GlTooltip, GlResizeObserverDirective } from '@gitlab/ui';
import { GlLink, GlDeprecatedButton, GlTooltip, GlResizeObserverDirective } from '@gitlab/ui';
import { GlAreaChart, GlLineChart, GlChartSeriesLabel } from '@gitlab/ui/dist/charts';
import dateFormat from 'dateformat';
import { s__, __ } from '~/locale';
......@@ -41,7 +41,7 @@ export default {
GlAreaChart,
GlLineChart,
GlTooltip,
GlButton,
GlDeprecatedButton,
GlChartSeriesLabel,
GlLink,
Icon,
......
......@@ -3,7 +3,7 @@ import { debounce, pickBy } from 'lodash';
import { mapActions, mapState, mapGetters } from 'vuex';
import VueDraggable from 'vuedraggable';
import {
GlButton,
GlDeprecatedButton,
GlDropdown,
GlDropdownItem,
GlDropdownHeader,
......@@ -44,7 +44,7 @@ export default {
VueDraggable,
PanelType,
Icon,
GlButton,
GlDeprecatedButton,
GlDropdown,
GlLoadingIcon,
GlDropdownItem,
......@@ -471,7 +471,7 @@ export default {
</gl-form-group>
<gl-form-group class="col-sm-2 col-md-2 col-lg-1 refresh-dashboard-button">
<gl-button
<gl-deprecated-button
ref="refreshDashboardBtn"
v-gl-tooltip
variant="default"
......@@ -479,7 +479,7 @@ export default {
@click="refreshDashboard"
>
<icon name="repeat" />
</gl-button>
</gl-deprecated-button>
</gl-form-group>
<gl-form-group
......@@ -488,22 +488,22 @@ export default {
class="dropdown-buttons col-md d-md-flex col-lg d-lg-flex align-items-end"
>
<div id="prometheus-graphs-dropdown-buttons">
<gl-button
<gl-deprecated-button
v-if="showRearrangePanelsBtn"
:pressed="isRearrangingPanels"
variant="default"
class="mr-2 mt-1 js-rearrange-button"
@click="toggleRearrangingPanels"
>{{ __('Arrange charts') }}</gl-button
>{{ __('Arrange charts') }}</gl-deprecated-button
>
<gl-button
<gl-deprecated-button
v-if="addingMetricsAvailable"
ref="addMetricBtn"
v-gl-modal="$options.addMetric.modalId"
variant="outline-success"
data-qa-selector="add_metric_button"
class="mr-2 mt-1"
>{{ $options.addMetric.title }}</gl-button
>{{ $options.addMetric.title }}</gl-deprecated-button
>
<gl-modal
v-if="addingMetricsAvailable"
......@@ -519,27 +519,29 @@ export default {
/>
</form>
<div slot="modal-footer">
<gl-button @click="hideAddMetricModal">{{ __('Cancel') }}</gl-button>
<gl-button
<gl-deprecated-button @click="hideAddMetricModal">{{
__('Cancel')
}}</gl-deprecated-button>
<gl-deprecated-button
ref="submitCustomMetricsFormBtn"
v-track-event="getAddMetricTrackingOptions()"
:disabled="!formIsValid"
variant="success"
@click="submitCustomMetricsForm"
>{{ __('Save changes') }}</gl-button
>{{ __('Save changes') }}</gl-deprecated-button
>
</div>
</gl-modal>
<gl-button
<gl-deprecated-button
v-if="selectedDashboard.can_edit"
class="mt-1 js-edit-link"
:href="selectedDashboard.project_blob_path"
data-qa-selector="edit_dashboard_button"
>{{ __('Edit dashboard') }}</gl-button
>{{ __('Edit dashboard') }}</gl-deprecated-button
>
<gl-button
<gl-deprecated-button
v-if="externalDashboardUrl.length"
class="mt-1 js-external-dashboard-link"
variant="primary"
......@@ -549,7 +551,7 @@ export default {
>
{{ __('View full dashboard') }}
<icon name="external-link" />
</gl-button>
</gl-deprecated-button>
</div>
</gl-form-group>
</div>
......
<script>
import { mapState, mapActions, mapGetters } from 'vuex';
import sum from 'lodash/sum';
import { GlButton, GlCard, GlIcon } from '@gitlab/ui';
import { GlDeprecatedButton, GlCard, GlIcon } from '@gitlab/ui';
import { n__ } from '~/locale';
import { monitoringDashboard } from '~/monitoring/stores';
import MetricEmbed from './metric_embed.vue';
export default {
components: {
GlButton,
GlDeprecatedButton,
GlCard,
GlIcon,
MetricEmbed,
......@@ -78,7 +78,7 @@ export default {
:body-class="bodyClass"
>
<template #header>
<gl-button
<gl-deprecated-button
class="collapsible-card-btn d-flex text-decoration-none"
:aria-label="buttonLabel"
variant="link"
......@@ -86,7 +86,7 @@ export default {
>
<gl-icon class="mr-1" :name="arrowIconName" />
{{ buttonLabel }}
</gl-button>
</gl-deprecated-button>
</template>
<div class="d-flex flex-wrap">
<metric-embed
......
<script>
import { GlPopover, GlButton, GlLink } from '@gitlab/ui';
import { GlPopover, GlDeprecatedButton, GlLink } from '@gitlab/ui';
import Icon from '~/vue_shared/components/icon.vue';
import axios from '~/lib/utils/axios_utils';
export default {
components: {
GlPopover,
GlButton,
GlDeprecatedButton,
GlLink,
Icon,
},
......@@ -57,13 +57,13 @@ export default {
<icon name="external-link" :size="10" />
</gl-link>
</p>
<gl-button
<gl-deprecated-button
variant="primary"
size="sm"
data-qa-selector="dismiss_popover_button"
@click="onDismiss"
>
{{ __('Got it') }}
</gl-button>
</gl-deprecated-button>
</gl-popover>
</template>
<script>
import { GlButton } from '@gitlab/ui';
import { GlDeprecatedButton } from '@gitlab/ui';
import Icon from '~/vue_shared/components/icon.vue';
import { __, sprintf } from '~/locale';
......@@ -7,7 +7,7 @@ import notesEventHub from '../event_hub';
export default {
components: {
GlButton,
GlDeprecatedButton,
Icon,
},
computed: {
......@@ -40,12 +40,12 @@ export default {
<div class="timeline-content">
<div ref="timelineContent" v-html="timelineContent"></div>
<div class="discussion-filter-actions mt-2">
<gl-button ref="showAllActivity" variant="default" @click="selectFilter(0)">
<gl-deprecated-button ref="showAllActivity" variant="default" @click="selectFilter(0)">
{{ __('Show all activity') }}
</gl-button>
<gl-button ref="showComments" variant="default" @click="selectFilter(1)">
</gl-deprecated-button>
<gl-deprecated-button ref="showComments" variant="default" @click="selectFilter(1)">
{{ __('Show comments only') }}
</gl-button>
</gl-deprecated-button>
</div>
</div>
</li>
......
<script>
import { GlTooltipDirective, GlButton } from '@gitlab/ui';
import { GlTooltipDirective, GlDeprecatedButton } from '@gitlab/ui';
import Icon from '~/vue_shared/components/icon.vue';
export default {
name: 'ResolveWithIssueButton',
components: {
Icon,
GlButton,
GlDeprecatedButton,
},
directives: {
GlTooltip: GlTooltipDirective,
......@@ -22,13 +22,13 @@ export default {
<template>
<div class="btn-group" role="group">
<gl-button
<gl-deprecated-button
v-gl-tooltip
:href="url"
:title="s__('MergeRequests|Resolve this thread in a new issue')"
class="new-issue-for-discussion discussion-create-issue-btn"
>
<icon name="issue-new" />
</gl-button>
</gl-deprecated-button>
</div>
</template>
<script>
import { GlTooltipDirective, GlButton } from '@gitlab/ui';
import { GlTooltipDirective, GlDeprecatedButton } from '@gitlab/ui';
import Icon from '~/vue_shared/components/icon.vue';
export default {
name: 'ReplyButton',
components: {
Icon,
GlButton,
GlDeprecatedButton,
},
directives: {
GlTooltip: GlTooltipDirective,
......@@ -16,7 +16,7 @@ export default {
<template>
<div class="note-actions-item">
<gl-button
<gl-deprecated-button
ref="button"
v-gl-tooltip
class="note-action-button"
......@@ -27,6 +27,6 @@ export default {
@click="$emit('startReplying')"
>
<icon name="comment" class="link-highlight" />
</gl-button>
</gl-deprecated-button>
</div>
</template>
<script>
import { mapState, mapActions } from 'vuex';
import { GlButton, GlFormGroup, GlFormInput, GlLink } from '@gitlab/ui';
import { GlDeprecatedButton, GlFormGroup, GlFormInput, GlLink } from '@gitlab/ui';
export default {
components: {
GlButton,
GlDeprecatedButton,
GlFormGroup,
GlFormInput,
GlLink,
......@@ -36,7 +36,7 @@ export default {
<h3 class="js-section-header h4">
{{ s__('ExternalMetrics|External Dashboard') }}
</h3>
<gl-button class="js-settings-toggle">{{ __('Expand') }}</gl-button>
<gl-deprecated-button class="js-settings-toggle">{{ __('Expand') }}</gl-deprecated-button>
<p class="js-section-sub-header">
{{
s__(
......@@ -63,9 +63,9 @@ export default {
/>
<!-- eslint-enable @gitlab/vue-require-i18n-attribute-strings -->
</gl-form-group>
<gl-button variant="success" @click="updateExternalDashboardUrl">
<gl-deprecated-button variant="success" @click="updateExternalDashboardUrl">
{{ __('Save Changes') }}
</gl-button>
</gl-deprecated-button>
</form>
</div>
</section>
......
<script>
import { escape as esc } from 'lodash';
import { GlModal, GlButton, GlFormInput } from '@gitlab/ui';
import { GlModal, GlDeprecatedButton, GlFormInput } from '@gitlab/ui';
import { s__, sprintf } from '~/locale';
export default {
components: {
GlModal,
GlButton,
GlDeprecatedButton,
GlFormInput,
},
props: {
......@@ -122,11 +122,15 @@ export default {
</form>
</template>
<template slot="modal-footer">
<gl-button variant="secondary" @click="onCancel">{{ s__('Cancel') }}</gl-button>
<gl-button :disabled="!canSubmit" variant="warning" @click="onSecondaryAction">
<gl-deprecated-button variant="secondary" @click="onCancel">{{
s__('Cancel')
}}</gl-deprecated-button>
<gl-deprecated-button :disabled="!canSubmit" variant="warning" @click="onSecondaryAction">
{{ secondaryAction }}
</gl-button>
<gl-button :disabled="!canSubmit" variant="danger" @click="onSubmit">{{ action }}</gl-button>
</gl-deprecated-button>
<gl-deprecated-button :disabled="!canSubmit" variant="danger" @click="onSubmit">{{
action
}}</gl-deprecated-button>
</template>
</gl-modal>
</template>
<script>
import { GlButton } from '@gitlab/ui';
import { GlDeprecatedButton } from '@gitlab/ui';
export default {
name: 'PipelinesEmptyState',
components: {
GlButton,
GlDeprecatedButton,
},
props: {
helpPagePath: {
......@@ -43,9 +43,13 @@ export default {
</p>
<div class="text-center">
<gl-button :href="helpPagePath" variant="primary" class="js-get-started-pipelines">
<gl-deprecated-button
:href="helpPagePath"
variant="primary"
class="js-get-started-pipelines"
>
{{ s__('Pipelines|Get started with Pipelines') }}
</gl-button>
</gl-deprecated-button>
</div>
</template>
......
<script>
import { GlTooltipDirective, GlButton, GlLoadingIcon } from '@gitlab/ui';
import { GlTooltipDirective, GlDeprecatedButton, 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,
GlButton,
GlDeprecatedButton,
GlLoadingIcon,
},
directives: {
......@@ -82,7 +82,7 @@ export default {
};
</script>
<template>
<gl-button
<gl-deprecated-button
:id="`js-ci-action-${link}`"
v-gl-tooltip="{ boundary: 'viewport' }"
:title="tooltipText"
......@@ -93,5 +93,5 @@ export default {
>
<gl-loading-icon v-if="isLoading" class="js-action-icon-loading" />
<icon v-else :name="actionIcon" />
</gl-button>
</gl-deprecated-button>
</template>
<script>
import { GlLoadingIcon, GlTooltipDirective, GlButton } from '@gitlab/ui';
import { GlLoadingIcon, GlTooltipDirective, GlDeprecatedButton } from '@gitlab/ui';
import CiStatus from '~/vue_shared/components/ci_icon.vue';
import { __ } from '~/locale';
......@@ -10,7 +10,7 @@ export default {
components: {
CiStatus,
GlLoadingIcon,
GlButton,
GlDeprecatedButton,
},
props: {
pipeline: {
......@@ -78,7 +78,7 @@ export default {
class="linked-pipeline build"
:class="{ 'child-pipeline': childPipeline }"
>
<gl-button
<gl-deprecated-button
:id="buttonId"
v-gl-tooltip
:title="tooltipText"
......@@ -104,6 +104,6 @@ export default {
>{{ label }}</span
>
</div>
</gl-button>
</gl-deprecated-button>
</li>
</template>
<script>
import { GlButton } from '@gitlab/ui';
import { GlDeprecatedButton } from '@gitlab/ui';
import LoadingButton from '../../vue_shared/components/loading_button.vue';
export default {
name: 'PipelineNavControls',
components: {
LoadingButton,
GlButton,
GlDeprecatedButton,
},
props: {
newPipelinePath: {
......@@ -42,14 +42,14 @@ export default {
</script>
<template>
<div class="nav-controls">
<gl-button
<gl-deprecated-button
v-if="newPipelinePath"
:href="newPipelinePath"
variant="success"
class="js-run-pipeline"
>
{{ s__('Pipelines|Run Pipeline') }}
</gl-button>
</gl-deprecated-button>
<loading-button
v-if="resetCachePath"
......@@ -59,8 +59,8 @@ export default {
@click="onClickResetCache"
/>
<gl-button v-if="ciLintPath" :href="ciLintPath" class="js-ci-lint">
<gl-deprecated-button v-if="ciLintPath" :href="ciLintPath" class="js-ci-lint">
{{ s__('Pipelines|CI Lint') }}
</gl-button>
</gl-deprecated-button>
</div>
</template>
<script>
import { GlButton, GlTooltipDirective, GlLoadingIcon } from '@gitlab/ui';
import { GlDeprecatedButton, GlTooltipDirective, GlLoadingIcon } from '@gitlab/ui';
import axios from '~/lib/utils/axios_utils';
import flash from '~/flash';
import { s__, __, sprintf } from '~/locale';
......@@ -14,7 +14,7 @@ export default {
components: {
Icon,
GlCountdown,
GlButton,
GlDeprecatedButton,
GlLoadingIcon,
},
props: {
......@@ -94,7 +94,7 @@ export default {
<ul class="dropdown-menu dropdown-menu-right">
<li v-for="action in actions" :key="action.path">
<gl-button
<gl-deprecated-button
:class="{ disabled: isActionDisabled(action) }"
:disabled="isActionDisabled(action)"
class="js-pipeline-action-link no-btn btn d-flex align-items-center justify-content-between flex-wrap"
......@@ -105,7 +105,7 @@ export default {
<icon name="clock" />
<gl-countdown :end-date-string="action.scheduled_at" />
</span>
</gl-button>
</gl-deprecated-button>
</li>
</ul>
</div>
......
<script>
import { GlButton, GlProgressBar } from '@gitlab/ui';
import { GlDeprecatedButton, GlProgressBar } from '@gitlab/ui';
import { __ } from '~/locale';
import { formatTime, secondsToMilliseconds } from '~/lib/utils/datetime_utility';
import Icon from '~/vue_shared/components/icon.vue';
......@@ -7,7 +7,7 @@ import Icon from '~/vue_shared/components/icon.vue';
export default {
name: 'TestSummary',
components: {
GlButton,
GlDeprecatedButton,
GlProgressBar,
Icon,
},
......@@ -62,14 +62,14 @@ export default {
<div>
<div class="row">
<div class="col-12 d-flex prepend-top-8 align-items-center">
<gl-button
<gl-deprecated-button
v-if="showBack"
size="sm"
class="append-right-default js-back-button"
@click="onBackClick"
>
<icon name="angle-left" />
</gl-button>
</gl-deprecated-button>
<h4>{{ heading }}</h4>
</div>
......
<script>
import { GlButton, GlFormGroup, GlFormInput, GlModal, GlModalDirective } from '@gitlab/ui';
import {
GlDeprecatedButton,
GlFormGroup,
GlFormInput,
GlModal,
GlModalDirective,
} from '@gitlab/ui';
import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
import axios from '~/lib/utils/axios_utils';
import { __, sprintf } from '~/locale';
......@@ -8,7 +14,7 @@ import createFlash from '~/flash';
export default {
copyToClipboard: __('Copy'),
components: {
GlButton,
GlDeprecatedButton,
GlFormGroup,
GlFormInput,
GlModal,
......@@ -112,13 +118,13 @@ export default {
)
}}
</gl-modal>
<gl-button v-gl-modal.authKeyModal class="js-reset-auth-key">{{
<gl-deprecated-button v-gl-modal.authKeyModal class="js-reset-auth-key">{{
__('Reset key')
}}</gl-button>
}}</gl-deprecated-button>
</template>
<gl-button v-else class="js-reset-auth-key" @click="resetKey">{{
<gl-deprecated-button v-else class="js-reset-auth-key" @click="resetKey">{{
__('Generate key')
}}</gl-button>
}}</gl-deprecated-button>
</div>
</div>
</template>
......@@ -3,7 +3,7 @@ import { mapState, mapActions, mapGetters } from 'vuex';
import {
GlTable,
GlFormCheckbox,
GlButton,
GlDeprecatedButton,
GlIcon,
GlTooltipDirective,
GlPagination,
......@@ -41,7 +41,7 @@ export default {
components: {
GlTable,
GlFormCheckbox,
GlButton,
GlDeprecatedButton,
GlIcon,
ClipboardButton,
GlPagination,
......@@ -250,7 +250,7 @@ export default {
/>
</template>
<template #head(actions)>
<gl-button
<gl-deprecated-button
ref="bulkDeleteButton"
v-gl-tooltip
:disabled="!selectedItems || selectedItems.length === 0"
......@@ -261,7 +261,7 @@ export default {
@click="deleteMultipleItems()"
>
<gl-icon name="remove" />
</gl-button>
</gl-deprecated-button>
</template>
<template #cell(checkbox)="{index}">
......@@ -304,7 +304,7 @@ export default {
</span>
</template>
<template #cell(actions)="{index, item}">
<gl-button
<gl-deprecated-button
ref="singleDeleteButton"
:title="s__('ContainerRegistry|Remove tag')"
:aria-label="s__('ContainerRegistry|Remove tag')"
......@@ -314,7 +314,7 @@ export default {
@click="deleteSingleItem(index)"
>
<gl-icon name="remove" />
</gl-button>
</gl-deprecated-button>
</template>
<template #empty>
......
......@@ -4,7 +4,7 @@ import {
GlEmptyState,
GlPagination,
GlTooltipDirective,
GlButton,
GlDeprecatedButton,
GlIcon,
GlModal,
GlSprintf,
......@@ -30,7 +30,7 @@ export default {
ProjectPolicyAlert,
ClipboardButton,
QuickstartDropdown,
GlButton,
GlDeprecatedButton,
GlIcon,
GlModal,
GlSprintf,
......@@ -201,7 +201,7 @@ export default {
class="d-none d-sm-block"
:title="$options.i18n.deleteButtonDisabled"
>
<gl-button
<gl-deprecated-button
ref="deleteImageButton"
v-gl-tooltip
:disabled="!listItem.destroy_path"
......@@ -212,7 +212,7 @@ export default {
@click="deleteImage(listItem)"
>
<gl-icon name="remove" />
</gl-button>
</gl-deprecated-button>
</div>
</div>
<gl-pagination
......
<script>
import { mapActions, mapState, mapGetters } from 'vuex';
import { GlCard, GlButton, GlLoadingIcon } from '@gitlab/ui';
import { GlCard, GlDeprecatedButton, GlLoadingIcon } from '@gitlab/ui';
import Tracking from '~/tracking';
import {
UPDATE_SETTINGS_ERROR_MESSAGE,
......@@ -12,7 +12,7 @@ import ExpirationPolicyFields from '../../shared/components/expiration_policy_fi
export default {
components: {
GlCard,
GlButton,
GlDeprecatedButton,
GlLoadingIcon,
ExpirationPolicyFields,
},
......@@ -73,15 +73,15 @@ export default {
</template>
<template #footer>
<div class="d-flex justify-content-end">
<gl-button
<gl-deprecated-button
ref="cancel-button"
type="reset"
class="mr-2 d-block"
:disabled="isCancelButtonDisabled"
>
{{ __('Cancel') }}
</gl-button>
<gl-button
</gl-deprecated-button>
<gl-deprecated-button
ref="save-button"
type="submit"
:disabled="isSubmitButtonDisabled"
......@@ -90,7 +90,7 @@ export default {
>
{{ __('Save expiration policy') }}
<gl-loading-icon v-if="isLoading" class="ml-2" />
</gl-button>
</gl-deprecated-button>
</div>
</template>
</gl-card>
......
<script>
import { mapState, mapActions } from 'vuex';
import { GlButton, GlLink, GlFormInput, GlFormGroup } from '@gitlab/ui';
import { GlDeprecatedButton, GlLink, GlFormInput, GlFormGroup } from '@gitlab/ui';
import { escape as esc } from 'lodash';
import { __, sprintf } from '~/locale';
import MarkdownField from '~/vue_shared/components/markdown/field.vue';
......@@ -15,7 +15,7 @@ export default {
components: {
GlFormInput,
GlFormGroup,
GlButton,
GlDeprecatedButton,
GlLink,
MarkdownField,
AssetLinksForm,
......@@ -163,14 +163,14 @@ export default {
<asset-links-form v-if="showAssetLinksForm" />
<div class="d-flex pt-3">
<gl-button
<gl-deprecated-button
class="mr-auto js-submit-button"
variant="success"
type="submit"
:aria-label="__('Save changes')"
>
{{ __('Save changes') }}
</gl-button>
</gl-deprecated-button>
<gl-link :href="cancelPath" class="js-cancel-button btn btn-default">
{{ __('Cancel') }}
</gl-link>
......
......@@ -4,7 +4,7 @@ import {
GlSprintf,
GlLink,
GlFormGroup,
GlButton,
GlDeprecatedButton,
GlIcon,
GlTooltipDirective,
GlFormInput,
......@@ -12,7 +12,7 @@ import {
export default {
name: 'AssetLinksForm',
components: { GlSprintf, GlLink, GlFormGroup, GlButton, GlIcon, GlFormInput },
components: { GlSprintf, GlLink, GlFormGroup, GlDeprecatedButton, GlIcon, GlFormInput },
directives: { GlTooltip: GlTooltipDirective },
computed: {
...mapState('detail', ['release', 'releaseAssetsDocsPath']),
......@@ -106,7 +106,7 @@ export default {
/>
</gl-form-group>
<gl-button
<gl-deprecated-button
v-gl-tooltip
class="mb-5 mb-sm-3 flex-grow-0 flex-shrink-0 remove-button"
:aria-label="__('Remove asset link')"
......@@ -115,10 +115,14 @@ export default {
>
<gl-icon class="m-0" name="remove" />
<span class="d-inline d-sm-none">{{ __('Remove asset link') }}</span>
</gl-button>
</gl-deprecated-button>
</div>
<gl-button variant="link" class="align-self-end mb-5 mb-sm-0" @click="onAddAnotherClicked">
<gl-deprecated-button
variant="link"
class="align-self-end mb-5 mb-sm-0"
@click="onAddAnotherClicked"
>
{{ __('Add another link') }}
</gl-button>
</gl-deprecated-button>
</div>
</template>
......@@ -3,7 +3,7 @@ import {
GlProgressBar,
GlLink,
GlBadge,
GlButton,
GlDeprecatedButton,
GlTooltipDirective,
GlSprintf,
} from '@gitlab/ui';
......@@ -17,7 +17,7 @@ export default {
GlProgressBar,
GlLink,
GlBadge,
GlButton,
GlDeprecatedButton,
GlSprintf,
},
directives: {
......@@ -134,9 +134,13 @@ export default {
<span :key="'bullet-' + milestone.id" class="append-right-4">&bull;</span>
</template>
<template v-if="shouldRenderShowMoreLink(index)">
<gl-button :key="'more-button-' + milestone.id" variant="link" @click="toggleShowAll">
<gl-deprecated-button
:key="'more-button-' + milestone.id"
variant="link"
@click="toggleShowAll"
>
{{ moreText }}
</gl-button>
</gl-deprecated-button>
</template>
</template>
</div>
......
<script>
import { GlTooltipDirective, GlLink, GlButton, GlLoadingIcon } from '@gitlab/ui';
import { GlTooltipDirective, GlLink, GlDeprecatedButton, GlLoadingIcon } from '@gitlab/ui';
import defaultAvatarUrl from 'images/no_avatar.png';
import { sprintf, s__ } from '~/locale';
import Icon from '../../vue_shared/components/icon.vue';
......@@ -19,7 +19,7 @@ export default {
ClipboardButton,
CiIcon,
GlLink,
GlButton,
GlDeprecatedButton,
GlLoadingIcon,
},
directives: {
......@@ -124,7 +124,7 @@ export default {
>
{{ commit.title }}
</gl-link>
<gl-button
<gl-deprecated-button
v-if="commit.description"
:class="{ open: showDescription }"
:aria-label="__('Show commit description')"
......@@ -132,7 +132,7 @@ export default {
@click="toggleShowDescription"
>
<icon name="ellipsis_h" :size="10" />
</gl-button>
</gl-deprecated-button>
<div class="committer">
<gl-link
v-if="commit.author"
......
<script>
import Vue from 'vue';
import { GlFormGroup, GlButton, GlModal, GlToast, GlToggle } from '@gitlab/ui';
import { GlFormGroup, GlDeprecatedButton, GlModal, GlToast, GlToggle } from '@gitlab/ui';
import { mapState, mapActions } from 'vuex';
import { __, s__, sprintf } from '~/locale';
import { visitUrl, getBaseURL } from '~/lib/utils/url_utility';
......@@ -10,7 +10,7 @@ Vue.use(GlToast);
export default {
components: {
GlFormGroup,
GlButton,
GlDeprecatedButton,
GlModal,
GlToggle,
},
......@@ -122,7 +122,7 @@ export default {
<h4 class="js-section-header">
{{ s__('SelfMonitoring|Self monitoring') }}
</h4>
<gl-button class="js-settings-toggle">{{ __('Expand') }}</gl-button>
<gl-deprecated-button class="js-settings-toggle">{{ __('Expand') }}</gl-deprecated-button>
<p class="js-section-sub-header">
{{ s__('SelfMonitoring|Enable or disable instance self monitoring') }}
</p>
......
<script>
import { GlButton, GlLink } from '@gitlab/ui';
import { GlDeprecatedButton, GlLink } from '@gitlab/ui';
import { s__ } from '../../locale';
export default {
components: {
GlButton,
GlDeprecatedButton,
GlLink,
},
props: {
......@@ -53,9 +53,9 @@ export default {
</p>
<div v-if="!missingData" class="text-left">
<gl-button :href="clustersPath" variant="success">
<gl-deprecated-button :href="clustersPath" variant="success">
{{ s__('ServerlessDetails|Install Prometheus') }}
</gl-button>
</gl-deprecated-button>
</div>
</div>
</div>
......
......@@ -4,7 +4,7 @@ import {
GlAvatar,
GlIcon,
GlSprintf,
GlButton,
GlDeprecatedButton,
GlModal,
GlAlert,
GlLoadingIcon,
......@@ -22,7 +22,7 @@ export default {
GlAvatar,
GlIcon,
GlSprintf,
GlButton,
GlDeprecatedButton,
GlModal,
GlAlert,
GlLoadingIcon,
......@@ -189,7 +189,7 @@ export default {
<div class="detail-page-header-actions">
<div class="d-none d-sm-block">
<template v-for="(action, index) in personalSnippetActions">
<gl-button
<gl-deprecated-button
v-if="action.condition"
:key="index"
:variant="action.variant"
......@@ -198,7 +198,7 @@ export default {
@click="action.click ? action.click() : undefined"
>
{{ action.text }}
</gl-button>
</gl-deprecated-button>
</template>
</div>
<div class="d-block d-sm-none dropdown">
......@@ -228,8 +228,8 @@ export default {
</gl-sprintf>
<template #modal-footer>
<gl-button @click="closeDeleteModal">{{ __('Cancel') }}</gl-button>
<gl-button
<gl-deprecated-button @click="closeDeleteModal">{{ __('Cancel') }}</gl-deprecated-button>
<gl-deprecated-button
variant="danger"
:disabled="isDeleting"
data-qa-selector="delete_snippet_button"
......@@ -237,7 +237,7 @@ export default {
>
<gl-loading-icon v-if="isDeleting" inline />
{{ __('Delete snippet') }}
</gl-button>
</gl-deprecated-button>
</template>
</gl-modal>
</div>
......
<script>
import { GlTooltipDirective, GlButton } from '@gitlab/ui';
import { GlTooltipDirective, GlDeprecatedButton } from '@gitlab/ui';
import { __ } from '~/locale';
import { RUNNING } from './constants';
export default {
name: 'DeploymentActionButton',
components: {
GlButton,
GlDeprecatedButton,
},
directives: {
GlTooltip: GlTooltipDirective,
......@@ -59,7 +59,7 @@ export default {
<template>
<span v-gl-tooltip :title="actionInProgressTooltip" class="d-inline-block" tabindex="0">
<gl-button
<gl-deprecated-button
v-gl-tooltip
:title="buttonTitle"
:loading="isLoading"
......@@ -70,6 +70,6 @@ export default {
<span class="d-inline-flex align-items-baseline">
<slot> </slot>
</span>
</gl-button>
</gl-deprecated-button>
</span>
</template>
<script>
import { GlButton, GlLoadingIcon } from '@gitlab/ui';
import { GlDeprecatedButton, GlLoadingIcon } from '@gitlab/ui';
import { __ } from '~/locale';
import Icon from '~/vue_shared/components/icon.vue';
export default {
components: {
GlButton,
GlDeprecatedButton,
GlLoadingIcon,
Icon,
},
......@@ -58,7 +58,7 @@ export default {
</div>
<template v-else>
<gl-button
<gl-deprecated-button
class="btn-blank btn s32 square append-right-default"
:aria-label="ariaLabel"
:disabled="isLoading"
......@@ -66,8 +66,8 @@ export default {
>
<gl-loading-icon v-if="isLoading" />
<icon v-else :name="arrowIconName" class="js-icon" />
</gl-button>
<gl-button
</gl-deprecated-button>
<gl-deprecated-button
variant="link"
class="js-title"
:disabled="isLoading"
......@@ -76,7 +76,7 @@ export default {
>
<template v-if="isCollapsed">{{ title }}</template>
<template v-else>{{ __('Collapse') }}</template>
</gl-button>
</gl-deprecated-button>
</template>
</div>
......
<script>
import { GlButton } from '@gitlab/ui';
import { GlDeprecatedButton } from '@gitlab/ui';
import { escape as esc } from 'lodash';
import { __, n__, sprintf, s__ } from '~/locale';
import Icon from '~/vue_shared/components/icon.vue';
......@@ -7,7 +7,7 @@ import Icon from '~/vue_shared/components/icon.vue';
export default {
components: {
Icon,
GlButton,
GlDeprecatedButton,
},
props: {
isSquashEnabled: {
......@@ -80,20 +80,20 @@ export default {
class="js-mr-widget-commits-count mr-widget-extension clickable d-flex align-items-center px-3 py-2"
@click="toggle()"
>
<gl-button
<gl-deprecated-button
:aria-label="ariaLabel"
variant="blank"
class="commit-edit-toggle square s24 append-right-default"
@click.stop="toggle()"
>
<icon :name="collapseIcon" :size="16" />
</gl-button>
</gl-deprecated-button>
<span v-if="expanded">{{ __('Collapse') }}</span>
<span v-else>
<span class="vertical-align-middle" v-html="message"></span>
<gl-button variant="link" class="modify-message-button">
<gl-deprecated-button variant="link" class="modify-message-button">
{{ modifyLinkMessage }}
</gl-button>
</gl-deprecated-button>
</span>
</div>
<div v-show="expanded"><slot></slot></div>
......
<script>
import { s__, sprintf } from '~/locale';
import { GlPopover, GlButton } from '@gitlab/ui';
import { GlPopover, GlDeprecatedButton } from '@gitlab/ui';
import Icon from '~/vue_shared/components/icon.vue';
import Cookies from 'js-cookie';
import { parseBoolean } from '~/lib/utils/common_utils';
......@@ -29,7 +29,7 @@ export default {
),
components: {
GlPopover,
GlButton,
GlDeprecatedButton,
Icon,
},
mixins: [trackingMixin],
......@@ -111,7 +111,7 @@ export default {
<img :src="pipelineSvgPath" />
</div>
<p v-html="$options.popoverContent"></p>
<gl-button
<gl-deprecated-button
ref="ok"
category="primary"
class="mt-2 mb-0"
......@@ -124,8 +124,8 @@ export default {
:data-track-label="trackLabel"
>
{{ __('Show me how') }}
</gl-button>
<gl-button
</gl-deprecated-button>
<gl-deprecated-button
ref="no-thanks"
category="secondary"
class="mt-2 mb-0"
......@@ -138,6 +138,6 @@ export default {
@click="dismissPopover"
>
{{ __("No thanks, don't show this again") }}
</gl-button>
</gl-deprecated-button>
</gl-popover>
</template>
<script>
import { isEmpty } from 'lodash';
import { GlIcon, GlButton } from '@gitlab/ui';
import { GlIcon, GlDeprecatedButton } from '@gitlab/ui';
import successSvg from 'icons/_icon_status_success.svg';
import warningSvg from 'icons/_icon_status_warning.svg';
import readyToMergeMixin from 'ee_else_ce/vue_merge_request_widget/mixins/ready_to_merge';
......@@ -26,7 +26,7 @@ export default {
CommitEdit,
CommitMessageDropdown,
GlIcon,
GlButton,
GlDeprecatedButton,
MergeImmediatelyConfirmationDialog: () =>
import(
'ee_component/vue_merge_request_widget/components/merge_immediately_confirmation_dialog.vue'
......@@ -263,7 +263,7 @@ export default {
<div class="media-body">
<div class="mr-widget-body-controls media space-children">
<span class="btn-group">
<gl-button
<gl-deprecated-button
size="sm"
class="qa-merge-button accept-merge-request"
:variant="mergeButtonVariant"
......@@ -272,7 +272,7 @@ export default {
@click="handleMergeButtonClick(isAutoMergeAvailable)"
>
{{ mergeButtonText }}
</gl-button>
</gl-deprecated-button>
<button
v-if="shouldShowMergeImmediatelyDropdown"
:disabled="isMergeButtonDisabled"
......
<script>
import $ from 'jquery';
import { GlButton } from '@gitlab/ui';
import { GlDeprecatedButton } from '@gitlab/ui';
import { __, s__ } from '~/locale';
import createFlash from '~/flash';
import StatusIcon from '../mr_widget_status_icon.vue';
......@@ -11,7 +11,7 @@ export default {
name: 'WorkInProgress',
components: {
StatusIcon,
GlButton,
GlDeprecatedButton,
},
directives: {
tooltip,
......@@ -66,7 +66,7 @@ export default {
>
</i>
</span>
<gl-button
<gl-deprecated-button
v-if="mr.removeWIPPath"
size="sm"
variant="default"
......@@ -76,7 +76,7 @@ export default {
@click="handleRemoveWIP"
>
{{ s__('mrWidget|Resolve WIP status') }}
</gl-button>
</gl-deprecated-button>
</div>
</div>
</template>
......@@ -12,7 +12,7 @@
* css-class="btn-transparent"
* />
*/
import { GlButton, GlTooltipDirective, GlIcon } from '@gitlab/ui';
import { GlDeprecatedButton, GlTooltipDirective, GlIcon } from '@gitlab/ui';
export default {
name: 'ClipboardButton',
......@@ -20,7 +20,7 @@ export default {
GlTooltip: GlTooltipDirective,
},
components: {
GlButton,
GlDeprecatedButton,
GlIcon,
},
props: {
......@@ -65,12 +65,12 @@ export default {
</script>
<template>
<gl-button
<gl-deprecated-button
v-gl-tooltip="{ placement: tooltipPlacement, container: tooltipContainer }"
:class="cssClass"
:title="title"
:data-clipboard-text="clipboardText"
>
<gl-icon name="copy-to-clipboard" />
</gl-button>
</gl-deprecated-button>
</template>
<script>
import { GlButton, GlDropdown, GlDropdownItem, GlFormGroup } from '@gitlab/ui';
import { GlDeprecatedButton, GlDropdown, GlDropdownItem, GlFormGroup } from '@gitlab/ui';
import { __, sprintf } from '~/locale';
import { convertToFixedRange, isEqualTimeRanges, findTimeRange } from '~/lib/utils/datetime_range';
......@@ -28,7 +28,7 @@ export default {
TooltipOnTruncate,
DateTimePickerInput,
GlFormGroup,
GlButton,
GlDeprecatedButton,
GlDropdown,
GlDropdownItem,
},
......@@ -192,10 +192,10 @@ export default {
/>
</div>
<gl-form-group>
<gl-button @click="closeDropdown">{{ __('Cancel') }}</gl-button>
<gl-button variant="success" :disabled="!isValid" @click="setFixedRange()">
<gl-deprecated-button @click="closeDropdown">{{ __('Cancel') }}</gl-deprecated-button>
<gl-deprecated-button variant="success" :disabled="!isValid" @click="setFixedRange()">
{{ __('Apply') }}
</gl-button>
</gl-deprecated-button>
</gl-form-group>
</gl-form-group>
<gl-form-group label-for="group-id-dropdown" class="col-md-5 gl-pl-1 gl-pr-1 m-0">
......
<script>
import { GlButton } from '@gitlab/ui';
import { GlDeprecatedButton } from '@gitlab/ui';
import Icon from './icon.vue';
export default {
components: {
Icon,
GlButton,
GlDeprecatedButton,
},
props: {
size: {
......@@ -59,9 +59,13 @@ export default {
<template>
<div class="btn-group droplab-dropdown comment-type-dropdown">
<gl-button :class="primaryButtonClass" :size="size" @click.prevent="handlePrimaryActionClick">
<gl-deprecated-button
:class="primaryButtonClass"
:size="size"
@click.prevent="handlePrimaryActionClick"
>
{{ selectedActionTitle }}
</gl-button>
</gl-deprecated-button>
<button
:class="buttonSizeClass"
type="button"
......@@ -74,13 +78,13 @@ export default {
<ul :class="dropdownClass" class="dropdown-menu dropdown-open-top">
<template v-for="(action, index) in actions">
<li :key="index" :class="{ 'droplab-item-selected': selectedAction === index }">
<gl-button class="btn-transparent" @click.prevent="handleActionClick(index)">
<gl-deprecated-button class="btn-transparent" @click.prevent="handleActionClick(index)">
<i aria-hidden="true" class="fa fa-check icon"> </i>
<div class="description">
<strong>{{ action.title }}</strong>
<p>{{ action.description }}</p>
</div>
</gl-button>
</gl-deprecated-button>
</li>
<li v-if="index === 0" :key="`${index}-separator`" class="divider droplab-item-ignore"></li>
</template>
......
<script>
import { GlButton } from '@gitlab/ui';
import { GlDeprecatedButton } from '@gitlab/ui';
import { __ } from '~/locale';
import Icon from '~/vue_shared/components/icon.vue';
......@@ -16,7 +16,7 @@ import Icon from '~/vue_shared/components/icon.vue';
export default {
name: 'ExpandButton',
components: {
GlButton,
GlDeprecatedButton,
Icon,
},
data() {
......@@ -41,7 +41,7 @@ export default {
</script>
<template>
<span>
<gl-button
<gl-deprecated-button
v-show="isCollapsed"
:aria-label="ariaLabel"
type="button"
......@@ -49,10 +49,10 @@ export default {
@click="onClick"
>
<icon :size="12" name="ellipsis_h" />
</gl-button>
</gl-deprecated-button>
<span v-if="isCollapsed"> <slot name="short"></slot> </span>
<span v-if="!isCollapsed"> <slot name="expanded"></slot> </span>
<gl-button
<gl-deprecated-button
v-show="!isCollapsed"
:aria-label="ariaLabel"
type="button"
......@@ -60,6 +60,6 @@ export default {
@click="onClick"
>
<icon :size="12" name="ellipsis_h" />
</gl-button>
</gl-deprecated-button>
</span>
</template>
<script>
import $ from 'jquery';
import { GlButton } from '@gitlab/ui';
import { GlDeprecatedButton } from '@gitlab/ui';
import { __ } from '~/locale';
import Icon from '~/vue_shared/components/icon.vue';
/**
......@@ -15,7 +15,7 @@ export default {
name: 'FilteredSearchDropdown',
components: {
Icon,
GlButton,
GlDeprecatedButton,
},
props: {
title: {
......@@ -141,10 +141,10 @@ export default {
<div v-if="shouldRenderCreateButton" class="dropdown-footer">
<slot name="footer" :filter="filter">
<gl-button
<gl-deprecated-button
class="js-dropdown-create-button btn-transparent"
@click="$emit('createItem', filter)"
>{{ computedCreateButtonText }}</gl-button
>{{ computedCreateButtonText }}</gl-deprecated-button
>
</slot>
</div>
......
<script>
import { GlTooltipDirective, GlLink, GlButton } from '@gitlab/ui';
import { GlTooltipDirective, GlLink, GlDeprecatedButton } from '@gitlab/ui';
import { __, sprintf } from '~/locale';
import CiIconBadge from './ci_badge_link.vue';
import TimeagoTooltip from './time_ago_tooltip.vue';
......@@ -18,7 +18,7 @@ export default {
TimeagoTooltip,
UserAvatarImage,
GlLink,
GlButton,
GlDeprecatedButton,
},
directives: {
GlTooltip: GlTooltipDirective,
......@@ -108,7 +108,7 @@ export default {
<section v-if="$slots.default" class="header-action-buttons">
<slot></slot>
</section>
<gl-button
<gl-deprecated-button
v-if="hasSidebarButton"
id="toggleSidebar"
class="d-block d-sm-none
......@@ -116,6 +116,6 @@ sidebar-toggle-btn js-sidebar-build-toggle js-sidebar-build-toggle-header"
@click="onClickSidebarButton"
>
<i class="fa fa-angle-double-left" aria-hidden="true" aria-labelledby="toggleSidebar"> </i>
</gl-button>
</gl-deprecated-button>
</header>
</template>
......@@ -2,7 +2,7 @@
import { GlLoadingIcon } from '@gitlab/ui';
/* eslint-disable vue/require-default-prop */
/*
This component will be deprecated in favor of gl-button.
This component will be deprecated in favor of gl-deprecated-button.
https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-button--loading-button
https://gitlab.com/gitlab-org/gitlab/issues/207412
*/
......
<script>
import $ from 'jquery';
import { GlPopover, GlButton, GlTooltipDirective } from '@gitlab/ui';
import { GlPopover, GlDeprecatedButton, GlTooltipDirective } from '@gitlab/ui';
import ToolbarButton from './toolbar_button.vue';
import Icon from '../icon.vue';
......@@ -9,7 +9,7 @@ export default {
ToolbarButton,
Icon,
GlPopover,
GlButton,
GlDeprecatedButton,
},
directives: {
GlTooltip: GlTooltipDirective,
......@@ -142,9 +142,9 @@ export default {
)
}}
</p>
<gl-button variant="primary" size="sm" @click="handleSuggestDismissed">
<gl-deprecated-button variant="primary" size="sm" @click="handleSuggestDismissed">
{{ __('Got it') }}
</gl-button>
</gl-deprecated-button>
</gl-popover>
</template>
<toolbar-button tag="`" tag-block="```" :button-title="__('Insert code')" icon="code" />
......
<script>
import { GlButton, GlLoadingIcon, GlTooltipDirective } from '@gitlab/ui';
import { GlDeprecatedButton, GlLoadingIcon, GlTooltipDirective } from '@gitlab/ui';
import Icon from '~/vue_shared/components/icon.vue';
export default {
components: { Icon, GlButton, GlLoadingIcon },
components: { Icon, GlDeprecatedButton, GlLoadingIcon },
directives: { 'gl-tooltip': GlTooltipDirective },
props: {
canApply: {
......@@ -52,7 +52,7 @@ export default {
<gl-loading-icon class="d-flex-center mr-2" />
<span>{{ __('Applying suggestion') }}</span>
</div>
<gl-button
<gl-deprecated-button
v-else-if="canApply"
v-gl-tooltip.viewport="__('This also resolves the discussion')"
class="btn-inverted js-apply-btn"
......@@ -61,6 +61,6 @@ export default {
@click="applySuggestion"
>
{{ __('Apply suggestion') }}
</gl-button>
</gl-deprecated-button>
</div>
</template>
<script>
import $ from 'jquery';
import { GlButton, GlTooltipDirective } from '@gitlab/ui';
import { GlDeprecatedButton, GlTooltipDirective } from '@gitlab/ui';
import Clipboard from 'clipboard';
import { __ } from '~/locale';
import Icon from '~/vue_shared/components/icon.vue';
export default {
components: {
GlButton,
GlDeprecatedButton,
Icon,
},
......@@ -113,7 +113,7 @@ export default {
};
</script>
<template>
<gl-button
<gl-deprecated-button
v-gl-tooltip="{ placement: tooltipPlacement, container: tooltipContainer }"
:class="cssClasses"
:data-clipboard-target="target"
......@@ -123,5 +123,5 @@ export default {
<slot>
<icon name="copy-to-clipboard" />
</slot>
</gl-button>
</gl-deprecated-button>
</template>
......@@ -18,7 +18,7 @@
*/
import $ from 'jquery';
import { mapGetters, mapActions, mapState } from 'vuex';
import { GlButton, GlSkeletonLoading, GlTooltipDirective } from '@gitlab/ui';
import { GlDeprecatedButton, GlSkeletonLoading, GlTooltipDirective } from '@gitlab/ui';
import descriptionVersionHistoryMixin from 'ee_else_ce/notes/mixins/description_version_history';
import noteHeader from '~/notes/components/note_header.vue';
import Icon from '~/vue_shared/components/icon.vue';
......@@ -35,7 +35,7 @@ export default {
Icon,
noteHeader,
TimelineEntryItem,
GlButton,
GlDeprecatedButton,
GlSkeletonLoading,
},
directives: {
......@@ -131,7 +131,7 @@ export default {
<gl-skeleton-loading />
</pre>
<pre v-else class="wrapper mt-2" v-html="descriptionVersion"></pre>
<gl-button
<gl-deprecated-button
v-if="canDeleteDescriptionVersion"
ref="deleteDescriptionVersionButton"
v-gl-tooltip
......@@ -140,7 +140,7 @@ export default {
@click="deleteDescriptionVersion"
>
<icon name="remove" />
</gl-button>
</gl-deprecated-button>
</div>
</div>
</div>
......
<script>
import { GlButton } from '@gitlab/ui';
import { GlDeprecatedButton } from '@gitlab/ui';
import { isString } from 'lodash';
import Icon from '~/vue_shared/components/icon.vue';
import ProjectAvatar from '~/vue_shared/components/project_avatar/default.vue';
......@@ -11,7 +11,7 @@ export default {
components: {
Icon,
ProjectAvatar,
GlButton,
GlDeprecatedButton,
},
props: {
project: {
......@@ -45,7 +45,7 @@ export default {
};
</script>
<template>
<gl-button
<gl-deprecated-button
class="d-flex align-items-center btn pt-1 pb-1 border-0 project-list-item"
@click="onClick"
>
......@@ -70,5 +70,5 @@ export default {
v-html="highlightedProjectName"
></div>
</div>
</gl-button>
</gl-deprecated-button>
</template>
<script>
import { mapGetters } from 'vuex';
import { GlButton, GlIcon } from '@gitlab/ui';
import { GlDeprecatedButton, GlIcon } from '@gitlab/ui';
export default {
components: {
GlButton,
GlDeprecatedButton,
GlIcon,
},
computed: {
......@@ -14,8 +14,8 @@ export default {
</script>
<template>
<gl-button class="labels-select-dropdown-button w-100 text-left">
<gl-deprecated-button class="labels-select-dropdown-button w-100 text-left">
<span class="dropdown-toggle-text">{{ dropdownButtonText }}</span>
<gl-icon name="chevron-down" class="pull-right" />
</gl-button>
</gl-deprecated-button>
</template>
......@@ -2,7 +2,7 @@
import { mapState, mapActions } from 'vuex';
import {
GlTooltipDirective,
GlButton,
GlDeprecatedButton,
GlIcon,
GlFormInput,
GlLink,
......@@ -11,7 +11,7 @@ import {
export default {
components: {
GlButton,
GlDeprecatedButton,
GlIcon,
GlFormInput,
GlLink,
......@@ -60,7 +60,7 @@ export default {
<template>
<div class="labels-select-contents-create js-labels-create">
<div class="dropdown-title d-flex align-items-center pt-0 pb-2">
<gl-button
<gl-deprecated-button
:aria-label="__('Go back')"
variant="link"
size="sm"
......@@ -68,9 +68,9 @@ export default {
@click="toggleDropdownContentsCreateView"
>
<gl-icon name="arrow-left" />
</gl-button>
</gl-deprecated-button>
<span class="flex-grow-1">{{ labelsCreateTitle }}</span>
<gl-button
<gl-deprecated-button
:aria-label="__('Close')"
variant="link"
size="sm"
......@@ -78,7 +78,7 @@ export default {
@click="toggleDropdownContents"
>
<gl-icon name="close" />
</gl-button>
</gl-deprecated-button>
</div>
<div class="dropdown-input">
<gl-form-input
......@@ -107,7 +107,7 @@ export default {
</div>
</div>
<div class="dropdown-actions clearfix pt-2 px-2">
<gl-button
<gl-deprecated-button
:disabled="disableCreate"
variant="primary"
class="pull-left d-flex align-items-center"
......@@ -115,10 +115,13 @@ export default {
>
<gl-loading-icon v-show="labelCreateInProgress" :inline="true" class="mr-1" />
{{ __('Create') }}
</gl-button>
<gl-button class="pull-right js-btn-cancel-create" @click="toggleDropdownContentsCreateView">
</gl-deprecated-button>
<gl-deprecated-button
class="pull-right js-btn-cancel-create"
@click="toggleDropdownContentsCreateView"
>
{{ __('Cancel') }}
</gl-button>
</gl-deprecated-button>
</div>
</div>
</template>
<script>
import { mapState, mapGetters, mapActions } from 'vuex';
import { GlLoadingIcon, GlButton, GlIcon, GlSearchBoxByType, GlLink } from '@gitlab/ui';
import { GlLoadingIcon, GlDeprecatedButton, GlIcon, GlSearchBoxByType, GlLink } from '@gitlab/ui';
import { UP_KEY_CODE, DOWN_KEY_CODE, ENTER_KEY_CODE, ESC_KEY_CODE } from '~/lib/utils/keycodes';
export default {
components: {
GlLoadingIcon,
GlButton,
GlDeprecatedButton,
GlIcon,
GlSearchBoxByType,
GlLink,
......@@ -125,7 +125,7 @@ export default {
/>
<div class="dropdown-title d-flex align-items-center pt-0 pb-2">
<span class="flex-grow-1">{{ labelsListTitle }}</span>
<gl-button
<gl-deprecated-button
:aria-label="__('Close')"
variant="link"
size="sm"
......@@ -133,7 +133,7 @@ export default {
@click="toggleDropdownContents"
>
<gl-icon name="close" />
</gl-button>
</gl-deprecated-button>
</div>
<div class="dropdown-input">
<gl-search-box-by-type v-model="searchKey" :autofocus="true" />
......@@ -160,11 +160,11 @@ export default {
<div class="dropdown-footer">
<ul class="list-unstyled">
<li>
<gl-button
<gl-deprecated-button
variant="link"
class="d-flex w-100 flex-row text-break-word label-item"
@click="toggleDropdownContentsCreateView"
>{{ footerCreateLabelTitle }}</gl-button
>{{ footerCreateLabelTitle }}</gl-deprecated-button
>
</li>
<li>
......
<script>
import { mapState, mapActions } from 'vuex';
import { GlButton, GlLoadingIcon } from '@gitlab/ui';
import { GlDeprecatedButton, GlLoadingIcon } from '@gitlab/ui';
export default {
components: {
GlButton,
GlDeprecatedButton,
GlLoadingIcon,
},
props: {
......@@ -27,12 +27,12 @@ export default {
{{ __('Labels') }}
<template v-if="allowLabelEdit">
<gl-loading-icon v-show="labelsSelectInProgress" inline />
<gl-button
<gl-deprecated-button
variant="link"
class="pull-right js-sidebar-dropdown-toggle"
data-qa-selector="labels_edit_button"
@click="toggleDropdownContents"
>{{ __('Edit') }}</gl-button
>{{ __('Edit') }}</gl-deprecated-button
>
</template>
</div>
......
<script>
import { GlButton } from '@gitlab/ui';
import { GlDeprecatedButton } from '@gitlab/ui';
import { sprintf, __ } from '~/locale';
import UserAvatarLink from './user_avatar_link.vue';
export default {
components: {
UserAvatarLink,
GlButton,
GlDeprecatedButton,
},
props: {
items: {
......@@ -82,8 +82,12 @@ export default {
:img-size="imgSize"
/>
<template v-if="hasBreakpoint">
<gl-button v-if="hasHiddenItems" variant="link" @click="expand"> {{ expandText }} </gl-button>
<gl-button v-else variant="link" @click="collapse"> {{ __('show less') }} </gl-button>
<gl-deprecated-button v-if="hasHiddenItems" variant="link" @click="expand">
{{ expandText }}
</gl-deprecated-button>
<gl-deprecated-button v-else variant="link" @click="collapse">
{{ __('show less') }}
</gl-deprecated-button>
</template>
</div>
</template>
......@@ -58,7 +58,7 @@
= render_if_exists "shared/boards/components/list_weight"
%gl-button-group.board-list-button-group.pl-2{ "v-if" => "isNewIssueShown || isSettingsShown" }
%gl-button.issue-count-badge-add-button.no-drag{ type: "button",
%gl-deprecated-button.issue-count-badge-add-button.no-drag{ type: "button",
"@click" => "showNewIssueForm",
"v-if" => "isNewIssueShown",
":class": "{ 'd-none': !list.isExpanded, 'rounded-right': isNewIssueShown && !isSettingsShown }",
......
<script>
import $ from 'jquery';
import { escape as esc } from 'lodash';
import { GlButton } from '@gitlab/ui';
import { GlDeprecatedButton } from '@gitlab/ui';
import { sprintf, s__ } from '~/locale';
import Icon from '~/vue_shared/components/icon.vue';
......@@ -9,7 +9,7 @@ export default {
name: 'StageDropdownFilter',
components: {
Icon,
GlButton,
GlDeprecatedButton,
},
props: {
stages: {
......@@ -86,7 +86,7 @@ export default {
<template>
<div>
<div ref="stagesDropdown" class="dropdown dropdown-stages">
<gl-button
<gl-deprecated-button
class="dropdown-menu-toggle wide shadow-none bg-white"
type="button"
data-toggle="dropdown"
......@@ -95,7 +95,7 @@ export default {
>
{{ selectedStagesLabel }}
<icon name="chevron-down" />
</gl-button>
</gl-deprecated-button>
<div
class="dropdown-menu dropdown-menu-selectable dropdown-menu-full-width dropdown-menu-right"
>
......
<script>
import { GlButton, GlIcon, GlTooltip } from '@gitlab/ui';
import { GlDeprecatedButton, GlIcon, GlTooltip } from '@gitlab/ui';
import { approximateDuration } from '~/lib/utils/datetime_utility';
import StageCardListItem from './stage_card_list_item.vue';
......@@ -8,7 +8,7 @@ export default {
components: {
StageCardListItem,
GlIcon,
GlButton,
GlDeprecatedButton,
GlTooltip,
},
props: {
......@@ -121,31 +121,31 @@ export default {
<span v-else class="stage-empty">{{ __('Not enough data') }}</span>
</div>
<div v-show="menuOpen" ref="dropdown" :class="[openMenuClasses]" class="dropdown w-25">
<gl-button
<gl-deprecated-button
:title="__('More actions')"
class="more-actions-toggle btn btn-transparent p-0"
data-toggle="dropdown"
>
<gl-icon class="icon" name="ellipsis_v" />
</gl-button>
</gl-deprecated-button>
<ul class="more-actions-dropdown dropdown-menu dropdown-open-left">
<template v-if="isDefaultStage">
<li>
<gl-button @click="handleDropdownAction('hide', $event)">
<gl-deprecated-button @click="handleDropdownAction('hide', $event)">
{{ __('Hide stage') }}
</gl-button>
</gl-deprecated-button>
</li>
</template>
<template v-else>
<li>
<gl-button @click="handleDropdownAction('edit', $event)">
<gl-deprecated-button @click="handleDropdownAction('edit', $event)">
{{ __('Edit stage') }}
</gl-button>
</gl-deprecated-button>
</li>
<li>
<gl-button @click="handleDropdownAction('remove', $event)">
<gl-deprecated-button @click="handleDropdownAction('remove', $event)">
{{ __('Remove stage') }}
</gl-button>
</gl-deprecated-button>
</li>
</template>
</ul>
......
......@@ -5,7 +5,7 @@ import {
GlLoadingIcon,
GlDropdown,
GlDropdownItem,
GlButton,
GlDeprecatedButton,
GlTooltipDirective,
} from '@gitlab/ui';
import dateFormat from 'dateformat';
......@@ -27,7 +27,7 @@ export default {
GlDropdown,
GlDropdownItem,
GlColumnChart,
GlButton,
GlDeprecatedButton,
Icon,
MetricChart,
Scatterplot,
......@@ -181,14 +181,14 @@ export default {
<template v-if="showAppContent">
<div class="d-flex justify-content-between">
<h4>{{ s__('ProductivityAnalytics|Merge Requests') }}</h4>
<gl-button
<gl-deprecated-button
v-if="isFilteringByDaysToMerge"
ref="clearChartFiltersBtn"
class="btn-link float-right"
type="button"
variant="default"
@click="resetMainChartSelection()"
>{{ __('Clear chart filters') }}</gl-button
>{{ __('Clear chart filters') }}</gl-deprecated-button
>
</div>
<metric-chart
......@@ -322,9 +322,13 @@ export default {
</span>
</gl-dropdown-item>
</gl-dropdown>
<gl-button v-gl-tooltip.hover :title="sortTooltipTitle" @click="toggleSortOrder">
<gl-deprecated-button
v-gl-tooltip.hover
:title="sortTooltipTitle"
@click="toggleSortOrder"
>
<icon :name="sortIcon" />
</gl-button>
</gl-deprecated-button>
</div>
</div>
</div>
......
<script>
import $ from 'jquery';
import { escape as esc } from 'lodash';
import { GlLoadingIcon, GlButton, GlAvatar } from '@gitlab/ui';
import { GlLoadingIcon, GlDeprecatedButton, GlAvatar } from '@gitlab/ui';
import Icon from '~/vue_shared/components/icon.vue';
import { s__, __ } from '~/locale';
import Api from '~/api';
......@@ -12,7 +12,7 @@ export default {
components: {
Icon,
GlLoadingIcon,
GlButton,
GlDeprecatedButton,
GlAvatar,
},
props: {
......@@ -117,7 +117,7 @@ export default {
<template>
<div>
<div ref="groupsDropdown" class="dropdown dropdown-groups">
<gl-button
<gl-deprecated-button
class="dropdown-menu-toggle wide shadow-none bg-white"
type="button"
data-toggle="dropdown"
......@@ -136,7 +136,7 @@ export default {
/>
{{ selectedGroupName }}
<icon name="chevron-down" />
</gl-button>
</gl-deprecated-button>
<div class="dropdown-menu dropdown-menu-selectable dropdown-menu-full-width">
<div class="dropdown-title">{{ __('Groups') }}</div>
<div class="dropdown-input">
......
<script>
import $ from 'jquery';
import { escape as esc } from 'lodash';
import { GlLoadingIcon, GlButton, GlAvatar } from '@gitlab/ui';
import { GlLoadingIcon, GlDeprecatedButton, GlAvatar } from '@gitlab/ui';
import Icon from '~/vue_shared/components/icon.vue';
import { n__, s__, __ } from '~/locale';
import Api from '~/api';
......@@ -12,7 +12,7 @@ export default {
components: {
Icon,
GlLoadingIcon,
GlButton,
GlDeprecatedButton,
GlAvatar,
},
props: {
......@@ -140,7 +140,7 @@ export default {
<template>
<div>
<div ref="projectsDropdown" class="dropdown dropdown-projects">
<gl-button
<gl-deprecated-button
class="dropdown-menu-toggle wide shadow-none bg-white"
type="button"
data-toggle="dropdown"
......@@ -159,7 +159,7 @@ export default {
/>
{{ selectedProjectsLabel }}
<icon name="chevron-down" />
</gl-button>
</gl-deprecated-button>
<div class="dropdown-menu dropdown-menu-selectable dropdown-menu-full-width">
<div class="dropdown-title">{{ __('Projects') }}</div>
<div class="dropdown-input">
......
<script>
import { mapState, mapActions } from 'vuex';
import { GlLoadingIcon, GlButton } from '@gitlab/ui';
import { GlLoadingIcon, GlDeprecatedButton } from '@gitlab/ui';
import ModalRuleCreate from './modal_rule_create.vue';
import ModalRuleRemove from './modal_rule_remove.vue';
......@@ -8,7 +8,7 @@ export default {
components: {
ModalRuleCreate,
ModalRuleRemove,
GlButton,
GlDeprecatedButton,
GlLoadingIcon,
},
props: {
......@@ -49,13 +49,13 @@ export default {
</div>
<div v-if="settings.canEdit && settings.allowMultiRule" class="border-bottom py-3 px-2">
<div v-if="settings.allowMultiRule" class="d-flex">
<gl-button
<gl-deprecated-button
class="ml-auto btn-info btn-inverted"
data-qa-selector="add_approvers_button"
@click="openCreateModal(null)"
>
{{ __('Add approval rule') }}
</gl-button>
</gl-deprecated-button>
</div>
</div>
<slot name="footer"></slot>
......
<script>
import { GlButton } from '@gitlab/ui';
import { GlDeprecatedButton } from '@gitlab/ui';
import Icon from '~/vue_shared/components/icon.vue';
import Avatar from '~/vue_shared/components/project_avatar/default.vue';
import HiddenGroupsItem from './hidden_groups_item.vue';
......@@ -9,7 +9,7 @@ const types = [TYPE_USER, TYPE_GROUP, TYPE_HIDDEN_GROUPS];
export default {
components: {
GlButton,
GlDeprecatedButton,
Icon,
Avatar,
HiddenGroupsItem,
......@@ -42,9 +42,9 @@ export default {
<template v-else>
<avatar :project="approver" :size="24" /><span>{{ displayName }}</span>
</template>
<gl-button variant="none" class="ml-auto" @click="$emit('remove', approver)">
<gl-deprecated-button variant="none" class="ml-auto" @click="$emit('remove', approver)">
<icon name="remove" :aria-label="__('Remove')" />
</gl-button>
</gl-deprecated-button>
</li>
</transition>
</template>
<script>
import { GlTooltipDirective, GlButton } from '@gitlab/ui';
import { GlTooltipDirective, GlDeprecatedButton } from '@gitlab/ui';
import Icon from '~/vue_shared/components/icon.vue';
export default {
components: {
GlButton,
GlDeprecatedButton,
Icon,
},
directives: {
......@@ -19,13 +19,13 @@ export default {
<icon name="folder-o" :size="16" />
</div>
<span>{{ __('Private group(s)') }}</span>
<gl-button
<gl-deprecated-button
v-gl-tooltip
:title="__('One or more groups that you don\'t have access to.')"
variant="blank"
class="ml-1 text-secondary"
>
<icon name="question-o" :size="16" />
</gl-button>
</gl-deprecated-button>
</div>
</template>
<script>
import { mapActions } from 'vuex';
import { GlButton } from '@gitlab/ui';
import { GlDeprecatedButton } from '@gitlab/ui';
import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
import RuleInput from './rule_input.vue';
import EmptyRuleName from '../empty_rule_name.vue';
......@@ -11,7 +11,7 @@ export default {
RuleInput,
EmptyRuleName,
RuleBranches,
GlButton,
GlDeprecatedButton,
},
mixins: [glFeatureFlagsMixin()],
props: {
......@@ -61,14 +61,14 @@ export default {
<rule-input :rule="rule" :is-mr-edit="isMrEdit" />
</td>
<td>
<gl-button
<gl-deprecated-button
v-if="!allowMultiRule && canEdit"
class="ml-auto btn-info btn-inverted"
data-qa-selector="add_approvers_button"
@click="openCreateModal(null)"
>
{{ __('Add approval rule') }}
</gl-button>
</gl-deprecated-button>
</td>
</tr>
</template>
<script>
import { mapState, mapActions } from 'vuex';
import { GlButton } from '@gitlab/ui';
import { GlDeprecatedButton } from '@gitlab/ui';
import Icon from '~/vue_shared/components/icon.vue';
export default {
components: {
GlButton,
GlDeprecatedButton,
Icon,
},
props: {
......@@ -25,15 +25,15 @@ export default {
<template>
<div>
<gl-button variant="none" @click="requestEditRule(rule)">
<gl-deprecated-button variant="none" @click="requestEditRule(rule)">
<span>{{ __('Edit') }}</span>
</gl-button>
<gl-button
</gl-deprecated-button>
<gl-deprecated-button
class="prepend-left-8 btn btn-inverted"
variant="danger"
@click="requestDeleteRule(rule)"
>
<icon name="remove" :aria-label="__('Remove')" />
</gl-button>
</gl-deprecated-button>
</div>
</template>
......@@ -2,7 +2,7 @@
import {
GlDrawer,
GlLabel,
GlButton,
GlDeprecatedButton,
GlFormInput,
GlAvatarLink,
GlAvatarLabeled,
......@@ -33,7 +33,7 @@ export default {
components: {
GlDrawer,
GlLabel,
GlButton,
GlDeprecatedButton,
GlFormInput,
GlAvatarLink,
GlAvatarLabeled,
......@@ -205,11 +205,11 @@ export default {
<div class="d-flex justify-content-between flex-column">
<div class="d-flex justify-content-between align-items-center mb-2">
<label class="m-0">{{ $options.wipLimitText }}</label>
<gl-button
<gl-deprecated-button
class="js-edit-button h-100 border-0 gl-line-height-14 text-dark"
variant="link"
@click="showInput"
>{{ $options.editLinkText }}</gl-button
>{{ $options.editLinkText }}</gl-deprecated-button
>
</div>
<gl-form-input
......@@ -230,11 +230,11 @@ export default {
<p class="js-wip-limit bold m-0 text-secondary">{{ activeListWipLimit }}</p>
<template v-if="wipLimitIsSet">
<span class="m-1">-</span>
<gl-button
<gl-deprecated-button
class="js-remove-limit h-100 border-0 gl-line-height-14 text-secondary"
variant="link"
@click="clearWipLimit"
>{{ $options.removeLimitText }}</gl-button
>{{ $options.removeLimitText }}</gl-deprecated-button
>
</template>
</div>
......
<script>
import { GlButton, GlDropdown, GlDropdownItem } from '@gitlab/ui';
import { GlDeprecatedButton, GlDropdown, GlDropdownItem } from '@gitlab/ui';
const ANY_WEIGHT = 'Any Weight';
const NO_WEIGHT = 'No Weight';
export default {
components: {
GlButton,
GlDeprecatedButton,
GlDropdown,
GlDropdownItem,
},
......@@ -70,9 +70,14 @@ export default {
<div class="block weight">
<div class="title append-bottom-10">
{{ __('Weight') }}
<gl-button v-if="canEdit" variant="blank" class="float-right" @click="showDropdown">
<gl-deprecated-button
v-if="canEdit"
variant="blank"
class="float-right"
@click="showDropdown"
>
{{ __('Edit') }}
</gl-button>
</gl-deprecated-button>
</div>
<div :class="valueClass" :hidden="!dropdownHidden" class="value">{{ valueText }}</div>
......
This diff is collapsed.
This diff is collapsed.
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