diff options
Diffstat (limited to 'app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/label_item.vue')
-rw-r--r-- | app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/label_item.vue | 83 |
1 files changed, 11 insertions, 72 deletions
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/label_item.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/label_item.vue index e8fdf4bb0c2..f27f0b4e34c 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/label_item.vue +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/label_item.vue @@ -1,82 +1,21 @@ <script> -import { GlLink, GlIcon } from '@gitlab/ui'; - export default { - functional: true, props: { label: { type: Object, required: true, }, - isLabelSet: { - type: Boolean, - required: true, - }, - highlight: { - type: Boolean, - required: false, - default: false, - }, - }, - render(h, { props, listeners }) { - const { label, highlight, isLabelSet } = props; - - const labelColorBox = h('span', { - class: 'dropdown-label-box gl-flex-shrink-0 gl-top-0 gl-mr-3', - style: { - backgroundColor: label.color, - }, - attrs: { - 'data-testid': 'label-color-box', - }, - }); - - const checkedIcon = h(GlIcon, { - class: { - 'gl-mr-3 gl-flex-shrink-0': true, - hidden: !isLabelSet, - }, - props: { - name: 'mobile-issue-close', - }, - }); - - const noIcon = h('span', { - class: { - 'gl-mr-5 gl-pr-3': true, - hidden: isLabelSet, - }, - attrs: { - 'data-testid': 'no-icon', - }, - }); - - const labelTitle = h('span', label.title); - - const labelLink = h( - GlLink, - { - class: 'gl-display-flex gl-align-items-center label-item gl-text-black-normal', - on: { - click: () => { - listeners.clickLabel(label); - }, - }, - }, - [noIcon, checkedIcon, labelColorBox, labelTitle], - ); - - return h( - 'li', - { - class: { - 'gl-display-block': true, - 'gl-text-left': true, - 'is-focused': highlight, - }, - }, - [labelLink], - ); }, }; </script> + +<template> + <div> + <span + class="dropdown-label-box gl-flex-shrink-0 gl-top-0 gl-mr-3" + :style="{ 'background-color': label.color }" + data-testid="label-color-box" + ></span> + <span>{{ label.title }}</span> + </div> +</template> |