kotovalexarian-likes-gitlab/gitlab-org--gitlab-foss
1
0
Fork 0
Code Releases Activity

Updates clipboard button with gitlab-ui

Browse source 
Updates clipboard button component to use
the new glTooltipDirective and the new glButton
component from gitlab-ui
This commit is contained in:
Filipa Lacerda 2018-11-08 18:09:18 +00:00
parent ab61bee378
commit 9d45332fd2
No known key found for this signature in database
GPG key ID: 569522463C8A0CC7
2 changed files with 6 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
app/assets/javascripts/vue_shared/components/clipboard_button.vue
View file

@ -12,20 +12,18 @@
* css-class="btn-transparent" * css-class="btn-transparent"
* /> * />
*/ */
import tooltip from '../directives/tooltip'; import { GlButton, GlTooltipDirective } from '@gitlab-org/gitlab-ui';
import Icon from '../components/icon.vue'; import Icon from '../components/icon.vue';
export default { export default {
name: 'ClipboardButton', name: 'ClipboardButton',
directives: { directives: {
tooltip, GlTooltip: GlTooltipDirective,
}, },
components: { components: {
GlButton,
Icon, Icon,
}, },
props: { props: {
text: { text: {
type: String, type: String,
@ -68,16 +66,12 @@ export default {
</script> </script>
<template> <template>
<button <gl-button
v-tooltip v-gl-tooltip="{ placement: tooltipPlacement, container: tooltipContainer }"
:class="cssClass" :class="cssClass"
:title="title" :title="title"
:data-clipboard-text="clipboardText" :data-clipboard-text="clipboardText"
:data-container="tooltipContainer"
:data-placement="tooltipPlacement"
type="button"
class="btn"
> >
<icon name="duplicate" /> <icon name="duplicate" />
</button> </gl-button>
</template> </template>

2
spec/javascripts/vue_shared/components/clipboard_button_spec.js
View file

@ -27,8 +27,6 @@ describe('clipboard button', () => {
it('should have a tooltip with default values', () => { it('should have a tooltip with default values', () => {
expect(vm.$el.getAttribute('data-original-title')).toEqual('Copy this value into Clipboard!'); expect(vm.$el.getAttribute('data-original-title')).toEqual('Copy this value into Clipboard!');
expect(vm.$el.getAttribute('data-placement')).toEqual('top');
expect(vm.$el.getAttribute('data-container')).toEqual(null);
}); });
it('should render provided classname', () => { it('should render provided classname', () => {