diff --git a/app/assets/javascripts/boards/components/board_list_header.vue b/app/assets/javascripts/boards/components/board_list_header.vue index 2a00536930d..a4baa375fdf 100644 --- a/app/assets/javascripts/boards/components/board_list_header.vue +++ b/app/assets/javascripts/boards/components/board_list_header.vue @@ -8,6 +8,7 @@ import { GlIcon, GlSprintf, GlTooltipDirective, + GlAnimatedChevronLgRightDownIcon, } from '@gitlab/ui'; import { isListDraggable } from '~/boards/boards_util'; import { isScopedLabel, parseBoolean } from '~/lib/utils/common_utils'; @@ -46,6 +47,7 @@ export default { GlTooltip, GlIcon, GlSprintf, + GlAnimatedChevronLgRightDownIcon, ItemCount, }, directives: { @@ -153,9 +155,6 @@ export default { chevronTooltip() { return this.list.collapsed ? this.$options.i18n.expand : this.$options.i18n.collapse; }, - chevronIcon() { - return this.list.collapsed ? 'chevron-lg-right' : 'chevron-lg-down'; - }, isNewIssueShown() { return (this.listType === ListType.backlog || this.showListHeaderButton) && !this.isEpicBoard; }, @@ -344,8 +343,7 @@ export default { v-gl-tooltip.hover :aria-label="chevronTooltip" :title="chevronTooltip" - :icon="chevronIcon" - class="board-title-caret no-drag gl-cursor-pointer hover:gl-bg-strong" + class="board-title-caret no-drag btn-icon gl-cursor-pointer hover:gl-bg-strong" :class="{ '-gl-mt-1': list.collapsed && isLabelList, 'gl-mb-2': list.collapsed && isLabelList && !isSwimlanesHeader, @@ -356,7 +354,9 @@ export default { size="small" data-testid="board-title-caret" @click="toggleExpanded" - /> + > + + -import { GlButton, GlLink, GlSprintf, GlAvatarLink, GlAvatar, GlAvatarsInline } from '@gitlab/ui'; +import { + GlButton, + GlLink, + GlSprintf, + GlAvatarLink, + GlAvatar, + GlAvatarsInline, + GlAnimatedChevronRightDownIcon, +} from '@gitlab/ui'; import { uniqBy } from 'lodash'; import { s__ } from '~/locale'; import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue'; @@ -17,6 +25,7 @@ export default { GlAvatarLink, GlAvatar, GlAvatarsInline, + GlAnimatedChevronRightDownIcon, TimeAgoTooltip, }, props: { @@ -38,9 +47,6 @@ export default { return uniqBy(authors, 'username'); }, - buttonIcon() { - return this.collapsed ? 'chevron-right' : 'chevron-down'; - }, buttonLabel() { return this.collapsed ? this.$options.i18n.expandReplies : this.$options.i18n.collapseReplies; }, @@ -65,15 +71,16 @@ export default { > + > + +