diff options
Diffstat (limited to 'app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/label_item.vue')
-rw-r--r-- | app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/label_item.vue | 35 |
1 files changed, 31 insertions, 4 deletions
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/label_item.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/label_item.vue index dd40add6376..154e3013acd 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/label_item.vue +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/label_item.vue @@ -1,6 +1,10 @@ <script> import { GlLink, GlIcon } from '@gitlab/ui'; +import { __ } from '~/locale'; +// @deprecated This component should only be used when there is no GraphQL API. +// In most cases you should use +// `app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/label_item.vue` instead. export default { functional: true, props: { @@ -12,6 +16,11 @@ export default { type: Boolean, required: true, }, + isLabelIndeterminate: { + type: Boolean, + required: false, + default: false, + }, highlight: { type: Boolean, required: false, @@ -19,7 +28,7 @@ export default { }, }, render(h, { props, listeners }) { - const { label, highlight, isLabelSet } = props; + const { label, highlight, isLabelSet, isLabelIndeterminate } = props; const labelColorBox = h('span', { class: 'dropdown-label-box gl-flex-shrink-0 gl-top-0 gl-mr-3', @@ -33,18 +42,36 @@ export default { const checkedIcon = h(GlIcon, { class: { - 'gl-mr-3 gl-flex-shrink-0': true, + 'gl-mr-3 gl-flex-shrink-0 has-tooltip': true, hidden: !isLabelSet, }, + attrs: { + title: __('Selected for all items.'), + 'data-testid': 'checked-icon', + }, props: { name: 'mobile-issue-close', }, }); + const indeterminateIcon = h(GlIcon, { + class: { + 'gl-mr-3 gl-flex-shrink-0 has-tooltip': true, + hidden: !isLabelIndeterminate, + }, + attrs: { + title: __('Selected for some items.'), + 'data-testid': 'indeterminate-icon', + }, + props: { + name: 'dash', + }, + }); + const noIcon = h('span', { class: { 'gl-mr-5 gl-pr-3': true, - hidden: isLabelSet, + hidden: isLabelSet || isLabelIndeterminate, }, attrs: { 'data-testid': 'no-icon', @@ -63,7 +90,7 @@ export default { }, }, }, - [noIcon, checkedIcon, labelColorBox, labelTitle], + [noIcon, checkedIcon, indeterminateIcon, labelColorBox, labelTitle], ); return h( |