diff options
Diffstat (limited to 'app/assets/javascripts/vue_shared/components/ci_icon.vue')
-rw-r--r-- | app/assets/javascripts/vue_shared/components/ci_icon.vue | 15 |
1 files changed, 12 insertions, 3 deletions
diff --git a/app/assets/javascripts/vue_shared/components/ci_icon.vue b/app/assets/javascripts/vue_shared/components/ci_icon.vue index 9bccc49e894..8bffc2479a1 100644 --- a/app/assets/javascripts/vue_shared/components/ci_icon.vue +++ b/app/assets/javascripts/vue_shared/components/ci_icon.vue @@ -45,7 +45,12 @@ export default { return validSizes.includes(value); }, }, - borderless: { + isActive: { + type: Boolean, + required: false, + default: false, + }, + isBorderless: { type: Boolean, required: false, default: false, @@ -67,15 +72,19 @@ export default { return `ci-status-icon ci-status-icon-${status} js-ci-status-icon-${status} gl-rounded-full gl-justify-content-center`; }, icon() { - return this.borderless ? `${this.status.icon}_borderless` : this.status.icon; + return this.isBorderless ? `${this.status.icon}_borderless` : this.status.icon; }, }, }; </script> <template> <span - :class="[wrapperStyleClasses, { interactive: isInteractive }]" + :class="[ + wrapperStyleClasses, + { interactive: isInteractive, active: isActive, borderless: isBorderless }, + ]" :style="{ height: `${size}px`, width: `${size}px` }" + data-testid="ci-icon-wrapper" > <gl-icon :name="icon" :size="size" :class="cssClasses" :aria-label="status.icon" /> </span> |