Commit 2e8e34bd authored by Florie Guibert's avatar Florie Guibert Committed by Heinrich Lee Yu

Fix scoped label text color for light background

Improve readability for light color scoped labels
parent 4b383fa1
......@@ -115,13 +115,7 @@ module LabelsHelper
end
def text_color_class_for_bg(bg_color)
if bg_color.length == 4
r, g, b = bg_color[1, 4].scan(/./).map { |v| (v * 2).hex }
else
r, g, b = bg_color[1, 7].scan(/.{2}/).map(&:hex)
end
if (r + g + b) > 500
if light_color?(bg_color)
'gl-label-text-dark'
else
'gl-label-text-light'
......@@ -129,17 +123,21 @@ module LabelsHelper
end
def text_color_for_bg(bg_color)
if bg_color.length == 4
r, g, b = bg_color[1, 4].scan(/./).map { |v| (v * 2).hex }
if light_color?(bg_color)
'#333333'
else
r, g, b = bg_color[1, 7].scan(/.{2}/).map(&:hex)
'#FFFFFF'
end
end
if (r + g + b) > 500
'#333333'
def light_color?(color)
if color.length == 4
r, g, b = color[1, 4].scan(/./).map { |v| (v * 2).hex }
else
'#FFFFFF'
r, g, b = color[1, 7].scan(/.{2}/).map(&:hex)
end
(r + g + b) > 500
end
def labels_filter_path_with_defaults(only_group_labels: false, include_ancestor_groups: true, include_descendant_groups: false)
......
......@@ -17,6 +17,7 @@ module EE
bg_color: label.color
) + render_label_text(
label.scoped_label_value,
css_class: ('gl-label-text-dark' if light_color?(label.color)),
suffix: suffix
)
end
......
---
title: Fix scoped label text color when background is light
merge_request: 26037
author:
type: fixed
......@@ -5,7 +5,8 @@ require 'spec_helper'
describe LabelsHelper do
let(:project) { create(:project) }
let(:label) { build_stubbed(:label, project: project).present(issuable_subject: nil) }
let(:scoped_label) { build_stubbed(:label, name: 'key::value', project: project).present(issuable_subject: nil) }
let(:scoped_label) { build_stubbed(:label, name: 'key::value', project: project, color: '#D10069').present(issuable_subject: nil) }
let(:scoped_label2) { build_stubbed(:label, name: 'key::value', project: project, color: '#FFECDB').present(issuable_subject: nil) }
describe '#render_label' do
context 'with scoped labels enabled' do
......@@ -20,6 +21,14 @@ describe LabelsHelper do
it 'does not include link to scoped label documentation for common labels' do
expect(render_label(label)).to match(%r(<span.+><span.+>#{label.name}</span></span>$)m)
end
it 'right text span does not have .gl-label-text-dark class if label color is dark' do
expect(render_label(scoped_label)).not_to include('gl-label-text-dark')
end
it 'right text span has .gl-label-text-dark class if label color is light' do
expect(render_label(scoped_label2)).to include('gl-label-text-dark')
end
end
context 'with scoped labels disabled' do
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment