feat(diagnostics): add padding when using different background colors (#594)

* feat(diagnostics): add padding when using different background colors

When each "sub-section" of the diagnostics components have a different background the rendering is off when
multiple more than one of them is shown.

* chore: fix typo and spelling

lua/lualine/components/diagnostics/init.lua

@@ -104,13 +104,17 @@ function M:update_status()
 
   -- format the counts with symbols and highlights
   if self.options.colored then
-    local colors = {}
+    local colors, bgs = {}, {}
     for name, hl in pairs(self.highlight_groups) do
       colors[name] = modules.highlight.component_format_highlight(hl)
+      bgs[name] = modules.utils.extract_highlight_colors(colors[name]:match('%%#(.-)#'), 'bg')
     end
+    local previous_section, padding
     for _, section in ipairs(self.options.sections) do
       if diagnostics_count[section] ~= nil and (always_visible or diagnostics_count[section] > 0) then
-        table.insert(result, colors[section] .. self.symbols[section] .. diagnostics_count[section])
+        padding = previous_section and (bgs[previous_section] ~= bgs[section]) and ' ' or ''
+        previous_section = section
+        table.insert(result, colors[section] .. padding .. self.symbols[section] .. diagnostics_count[section])
       end
     end
   else

lua/tests/spec/lualine_spec.lua

@@ -752,4 +752,103 @@ describe('Lualine', function()
       end)
     end)
   end)
+
+  describe('diagnostics', function()
+    local diagnostics_conf = vim.deepcopy(config)
+    diagnostics_conf.sections = {
+      lualine_a = { {
+        'diagnostics',
+        symbols = { error = 'E:', warn = 'W:', info = 'I:', hint = 'H:' },
+        diagnostics_color = {
+          error = { bg = "#a89984", fg = "#ff0000" },
+          warn = { bg = "#a89984", fg = "#ffa500" },
+          info = { bg = "#a89984", fg = "#add8e6" },
+          hint = { bg = "#a89984", fg = "#d3d3d3" },
+        },
+        sources = { function() return {} end },
+      } },
+      lualine_b = {},
+      lualine_c = {},
+      lualine_x = {},
+      lualine_y = {},
+      lualine_z = {},
+    }
+
+    it('does not show without diagnostics', function()
+      local conf = vim.deepcopy(diagnostics_conf)
+      require('lualine').setup(conf)
+      statusline:expect([===[
+      highlights = {
+          1: lualine_c_normal = { bg = "#3c3836", fg = "#a89984" }
+      }
+      |{1:                                                                                                                        }|
+      ]===])
+    end)
+
+    it('shows only positive diagnostics', function()
+      local conf = vim.deepcopy(diagnostics_conf)
+      conf.sections.lualine_a[1].sources[1] = function() return { error = 0, warn = 0, info = 1, hint = 0 } end
+      require('lualine').setup(conf)
+      statusline:expect([===[
+      highlights = {
+          1: lualine_a_diagnostics_info = { bg = "#a89984", fg = "#add8e6" }
+          2: lualine_transitional_lualine_a_diagnostics_info_to_lualine_c_normal = { bg = "#3c3836", fg = "#a89984" }
+          3: lualine_c_normal = { bg = "#3c3836", fg = "#a89984" }
+      }
+      |{1: I:1 }
+      {2:}
+      {3:                                                                                                                  }|
+      ]===])
+    end)
+
+    it('shows all diagnostics with same background', function()
+      local conf = vim.deepcopy(diagnostics_conf)
+      conf.sections.lualine_a[1].sources[1] = function() return { error = 1, warn = 2, info = 3, hint = 4 } end
+      require('lualine').setup(conf)
+      statusline:expect([===[
+      highlights = {
+          1: lualine_a_diagnostics_error = { bg = "#a89984", fg = "#ff0000" }
+          2: lualine_a_diagnostics_warn = { bg = "#a89984", fg = "#ffa500" }
+          3: lualine_a_diagnostics_info = { bg = "#a89984", fg = "#add8e6" }
+          4: lualine_a_diagnostics_hint = { bg = "#a89984", fg = "#d3d3d3" }
+          5: lualine_transitional_lualine_a_diagnostics_hint_to_lualine_c_normal = { bg = "#3c3836", fg = "#a89984" }
+          6: lualine_c_normal = { bg = "#3c3836", fg = "#a89984" }
+      }
+      |{1: E:1 }
+      {2:W:2 }
+      {3:I:3 }
+      {4:H:4 }
+      {5:}
+      {6:                                                                                                      }|
+      ]===])
+    end)
+
+    it('shows all diagnostics with padding when background changes', function()
+      local conf = vim.deepcopy(diagnostics_conf)
+      conf.sections.lualine_a[1].sources[1] = function() return { error = 1, warn = 2, info = 3, hint = 4 } end
+      conf.sections.lualine_a[1].diagnostics_color = {
+        error = { bg = "#ff0000", fg = "#a89984" },
+        warn = { bg = "#ffa500", fg = "#a89984" },
+        info = { bg = "#add8e6", fg = "#a89984" },
+        hint = { bg = "#add8e6", fg = "#a89984" },
+      }
+      require('lualine').setup(conf)
+      statusline:expect([===[
+      highlights = {
+          1: lualine_a_diagnostics_error = { bg = "#ff0000", fg = "#a89984" }
+          2: lualine_a_diagnostics_warn = { bg = "#ffa500", fg = "#a89984" }
+          3: lualine_a_diagnostics_info = { bg = "#add8e6", fg = "#a89984" }
+          4: lualine_a_diagnostics_hint = { bg = "#add8e6", fg = "#a89984" }
+          5: lualine_transitional_lualine_a_diagnostics_hint_to_lualine_c_normal = { bg = "#3c3836", fg = "#add8e6" }
+          6: lualine_c_normal = { bg = "#3c3836", fg = "#a89984" }
+      }
+      |{1: E:1 }
+      {2: W:2 }
+      {3: I:3 }
+      {4:H:4 }
+      {5:}
+      {6:                                                                                                    }|
+      ]===])
+    end)
+  end)
 end)

lua/tests/statusline.lua

@@ -5,23 +5,23 @@
 ---
 --- ###Uses:
 ---
---- Create a new instence with status width 120 & for active statusline
+--- Create a new instance with status width 120 & for active statusline
 --- like following.
 ---
 --- ``lua
 --- local statusline = require('tests.statusline').new(120, 'active')
 --- ```
 ---
---- To create a new instence with status width 80 & for inactive statusline use following.
+--- To create a new instance with status width 80 & for inactive statusline use following.
 ---
 --- ``lua
 --- local statusline = require('tests.statusline').new(120, 'inactive')
 --- ```
 ---
 --- Now setup the state you want to test.
---- To test you'll call `expect` pmethod on statusline for example.
+--- To test you'll call `expect` method on statusline for example.
 ---
---- To create a new instence with status width 80 & tabline
+--- To create a new instance with status width 80 & tabline
 ---
 --- ``lua
 --- local statusline = require('tests.statusline').new(120, 'tabline')