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 ...@@ -115,13 +115,7 @@ module LabelsHelper
end end
def text_color_class_for_bg(bg_color) def text_color_class_for_bg(bg_color)
if bg_color.length == 4 if light_color?(bg_color)
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
'gl-label-text-dark' 'gl-label-text-dark'
else else
'gl-label-text-light' 'gl-label-text-light'
...@@ -129,17 +123,21 @@ module LabelsHelper ...@@ -129,17 +123,21 @@ module LabelsHelper
end end
def text_color_for_bg(bg_color) def text_color_for_bg(bg_color)
if bg_color.length == 4 if light_color?(bg_color)
r, g, b = bg_color[1, 4].scan(/./).map { |v| (v * 2).hex } '#333333'
else else
r, g, b = bg_color[1, 7].scan(/.{2}/).map(&:hex) '#FFFFFF'
end end
end
if (r + g + b) > 500 def light_color?(color)
'#333333' if color.length == 4
r, g, b = color[1, 4].scan(/./).map { |v| (v * 2).hex }
else else
'#FFFFFF' r, g, b = color[1, 7].scan(/.{2}/).map(&:hex)
end end
(r + g + b) > 500
end end
def labels_filter_path_with_defaults(only_group_labels: false, include_ancestor_groups: true, include_descendant_groups: false) def labels_filter_path_with_defaults(only_group_labels: false, include_ancestor_groups: true, include_descendant_groups: false)
......
...@@ -17,6 +17,7 @@ module EE ...@@ -17,6 +17,7 @@ module EE
bg_color: label.color bg_color: label.color
) + render_label_text( ) + render_label_text(
label.scoped_label_value, label.scoped_label_value,
css_class: ('gl-label-text-dark' if light_color?(label.color)),
suffix: suffix suffix: suffix
) )
end end
......
---
title: Fix scoped label text color when background is light
merge_request: 26037
author:
type: fixed
...@@ -5,7 +5,8 @@ require 'spec_helper' ...@@ -5,7 +5,8 @@ require 'spec_helper'
describe LabelsHelper do describe LabelsHelper do
let(:project) { create(:project) } let(:project) { create(:project) }
let(:label) { build_stubbed(:label, project: project).present(issuable_subject: nil) } 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 describe '#render_label' do
context 'with scoped labels enabled' do context 'with scoped labels enabled' do
...@@ -20,6 +21,14 @@ describe LabelsHelper do ...@@ -20,6 +21,14 @@ describe LabelsHelper do
it 'does not include link to scoped label documentation for common labels' 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) expect(render_label(label)).to match(%r(<span.+><span.+>#{label.name}</span></span>$)m)
end 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 end
context 'with scoped labels disabled' do 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