From 384eaae6c137bbf2834afd55515bb33a56757485 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 3 Dec 2025 23:12:35 +0000
Subject: [PATCH] Fix valueOnly to apply highlighting to value only, not hide
 label

Co-authored-by: shamoon <4887959+shamoon@users.noreply.github.com>
---
 docs/configs/services.md                 |  4 ++--
 src/components/services/widget/block.jsx | 10 ++++++----
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/docs/configs/services.md b/docs/configs/services.md
index c81ece7cd..71c24da06 100644
--- a/docs/configs/services.md
+++ b/docs/configs/services.md
@@ -159,9 +159,9 @@ Widgets can tint their metric block text automatically based on rules defined al
 
 Supported numeric operators for the `when` property are `gt`, `gte`, `lt`, `lte`, `eq`, `ne`, `between`, and `outside`. String rules support `equals`, `includes`, `startsWith`, `endsWith`, and `regex`. Each rule can be inverted with `negate: true`, and string rules may pass `caseSensitive: true` or custom regex `flags`. The highlight engine does its best to coerce formatted values, but you will get the most reliable results when you pass plain numbers or strings into `<Block>`.
 
-#### Value Only Display
+#### Value Only Highlighting
 
-You can optionally hide the label and show only the value when a block is highlighted by setting `valueOnly: true` on the field configuration. This is useful when you want the highlighted value to stand out without the label text.
+You can optionally apply highlighting only to the value portion of a block (not the label) by setting `valueOnly: true` on the field configuration. This keeps the label visible while highlighting only the metric value itself.
 
 ```yaml
 - Sonarr:
diff --git a/src/components/services/widget/block.jsx b/src/components/services/widget/block.jsx
index 51ee10c75..ab0b8e799 100644
--- a/src/components/services/widget/block.jsx
+++ b/src/components/services/widget/block.jsx
@@ -32,21 +32,23 @@ export default function Block({ value, label, field }) {
     return getHighlightClass(highlight.level, highlightConfig);
   }, [highlight, highlightConfig]);
 
-  const showLabel = !highlight?.valueOnly;
+  const applyToValueOnly = highlight?.valueOnly === true;
 
   return (
     <div
       className={classNames(
         "bg-theme-200/50 dark:bg-theme-900/20 rounded-sm m-1 flex-1 flex flex-col items-center justify-center text-center p-1",
         value === undefined ? "animate-pulse" : "",
-        highlightClass,
+        !applyToValueOnly && highlightClass,
         "service-block",
       )}
       data-highlight-level={highlight?.level}
       data-highlight-source={highlight?.source}
     >
-      <div className="font-thin text-sm">{value === undefined || value === null ? "-" : value}</div>
-      {showLabel && <div className="font-bold text-xs uppercase">{t(label)}</div>}
+      <div className={classNames("font-thin text-sm", applyToValueOnly && highlightClass)}>
+        {value === undefined || value === null ? "-" : value}
+      </div>
+      <div className="font-bold text-xs uppercase">{t(label)}</div>
     </div>
   );
 }