From 3da1daec04e0c1f68c9cfdb758e533045356d22e Mon Sep 17 00:00:00 2001 From: Chad Lavimoniere <clavimoniere@gitlab.com> Date: Fri, 6 Sep 2024 13:00:12 -0400 Subject: [PATCH] Fix leading of CiIcon text and make sure it is vertically centered Prevent the text in a CiIcon component from inheriting line height from a parent element, and make sure that it is vertically centered. Changelog: fixed --- app/assets/javascripts/ci/job_details/components/job_header.vue | 2 +- .../javascripts/vue_shared/components/ci_icon/ci_icon.vue | 2 +- app/helpers/ci/status_helper.rb | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/app/assets/javascripts/ci/job_details/components/job_header.vue b/app/assets/javascripts/ci/job_details/components/job_header.vue index 1f6151a8397e78c9..046f4baedb307b0b 100644 --- a/app/assets/javascripts/ci/job_details/components/job_header.vue +++ b/app/assets/javascripts/ci/job_details/components/job_header.vue @@ -110,7 +110,7 @@ export default { </div> </div> <section class="header-main-content gl-mr-3 gl-flex gl-items-center"> - <ci-icon class="gl-mr-3 gl-leading-1" :status="status" show-status-text /> + <ci-icon class="gl-mr-3" :status="status" show-status-text /> <template v-if="shouldRenderTriggeredLabel">{{ __('Started') }}</template> <template v-else>{{ __('Created') }}</template> diff --git a/app/assets/javascripts/vue_shared/components/ci_icon/ci_icon.vue b/app/assets/javascripts/vue_shared/components/ci_icon/ci_icon.vue index 13dcfd88de1263f5..e78c40adf9cbbb7d 100644 --- a/app/assets/javascripts/vue_shared/components/ci_icon/ci_icon.vue +++ b/app/assets/javascripts/vue_shared/components/ci_icon/ci_icon.vue @@ -112,7 +112,7 @@ export default { <span class="ci-icon-gl-icon-wrapper"><gl-icon :name="icon" /></span ><span v-if="showStatusText" - class="gl-ml-2 gl-mr-3 gl-whitespace-nowrap" + class="gl-ml-2 gl-mr-3 gl-self-center gl-whitespace-nowrap gl-leading-1" data-testid="ci-icon-text" >{{ status.text }}</span > diff --git a/app/helpers/ci/status_helper.rb b/app/helpers/ci/status_helper.rb index 96d574b77f5dd932..b5e772fb8ac001ca 100644 --- a/app/helpers/ci/status_helper.rb +++ b/app/helpers/ci/status_helper.rb @@ -81,7 +81,7 @@ def render_ci_icon( content_tag(content_tag_variant, href: path, class: badge_classes, title: title, data: data) do if show_status_text - content_tag(:span, ci_icon_for_status(status), { class: icon_wrapper_class }) + content_tag(:span, status.label, { class: 'gl-mx-2 gl-whitespace-nowrap', data: { testid: 'ci-icon-text' } }) + content_tag(:span, ci_icon_for_status(status), { class: icon_wrapper_class }) + content_tag(:span, status.label, { class: 'gl-mx-2 gl-whitespace-nowrap gl-leading-1 gl-self-center', data: { testid: 'ci-icon-text' } }) else content_tag(:span, ci_icon_for_status(status), { class: icon_wrapper_class }) end -- GitLab