fix(value_labels): zero as a valid value for textBorder and borderWid…

…th (#1182)

We recently introduced a readability enhancement that involves dropping a background opaque border around the value labels. The logic is now fixed to allow the user to hide this border using zero as a valid value in the `textBorder` or the `borderWidth` property of the `Theme.barSeriesStyle.displayValue.fill` theme style.

BREAKING CHANGE: the `textBorder` of `ValueFillDefinition` is now optional or a number only

packages/osd-charts/api/charts.api.md

@@ -666,7 +666,7 @@ export type DisplayValueStyle = Omit<TextStyle, 'fill' | 'fontSize'> & {
     } | {
         textInvertible: boolean;
         textContrast?: number | boolean;
-        textBorder?: number | boolean;
+        textBorder?: number;
     };
     alignment?: {
         horizontal: Exclude<HorizontalAlignment, 'far' | 'near'>;

packages/osd-charts/integration/tests/styles.test.ts

@@ -0,0 +1,33 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { common } from '../page_objects/common';
+
+describe('Styles', () => {
+  it('should hide the value label with 0 borderWidth', async () => {
+    await common.expectChartAtUrlToMatchScreenshot(
+      'http://localhost:9001/?path=/story/bar-chart--with-value-label-advanced&knob-show value label=true&knob-alternating value label=&knob-contain value label within bar element=&knob-hide clipped value=&knob-debug=&knob-textInverted=&knob-value color=rgba(0,0,0,1)&knob-value border color=rgba(0,0,0,1)&knob-value border width=0&knob-Fixed font size=10&knob-Use fixed font size=&knob-Max font size=25&knob-Min font size=10&knob-offsetX=0&knob-offsetY=0&knob-data volume size=s&knob-split series=&knob-stacked series=&knob-chartRotation=0',
+    );
+  });
+  it('should hide the value label with 0 textBorder', async () => {
+    await common.expectChartAtUrlToMatchScreenshot(
+      'http://localhost:9001/?path=/story/bar-chart--with-value-label-advanced&knob-show value label=true&knob-alternating value label=&knob-contain value label within bar element=&knob-hide clipped value=&knob-debug=&knob-textInverted=true&knob-value color=rgba(0,0,0,1)&knob-value border color=rgba(0,0,0,1)&knob-value border width=0&knob-Fixed font size=10&knob-Use fixed font size=&knob-Max font size=25&knob-Min font size=10&knob-offsetX=0&knob-offsetY=0&knob-data volume size=s&knob-split series=&knob-stacked series=&knob-chartRotation=0',
+    );
+  });
+});

packages/osd-charts/src/chart_types/xy_chart/renderer/canvas/primitives/text.ts

@@ -56,13 +56,12 @@ export function renderText(
       }
       ctx.translate(origin.x, origin.y);
       ctx.scale(scale, scale);
-      if (font.shadow) {
+      const shadowSize = font.shadowSize ?? 0;
+      if (font.shadow && shadowSize > 0) {
         ctx.lineJoin = 'round';
-        const prevLineWidth = ctx.lineWidth;
-        ctx.lineWidth = font.shadowSize || 1.5;
+        ctx.lineWidth = shadowSize;
         ctx.strokeStyle = font.shadow;
         ctx.strokeText(text, 0, 0);
-        ctx.lineWidth = prevLineWidth;
       }
       ctx.fillText(text, 0, 0);
     });

packages/osd-charts/src/chart_types/xy_chart/renderer/canvas/values/bar.ts

@@ -414,7 +414,7 @@ function getTextBorderSize(fill: ValueFillDefinition): number {
     return DEFAULT_BORDER_WIDTH;
   }
   if ('borderWidth' in fill) {
-    return Math.min(fill.borderWidth || DEFAULT_BORDER_WIDTH, MAX_BORDER_WIDTH);
+    return Math.min(fill.borderWidth ?? DEFAULT_BORDER_WIDTH, MAX_BORDER_WIDTH);
   }
   const borderWidth =
     'textBorder' in fill && typeof fill.textBorder === 'number' ? fill.textBorder : DEFAULT_BORDER_WIDTH;

packages/osd-charts/src/utils/themes/theme.ts

@@ -317,7 +317,7 @@ export type DisplayValueStyle = Omit<TextStyle, 'fill' | 'fontSize'> & {
     | {
         textInvertible: boolean;
         textContrast?: number | boolean;
-        textBorder?: number | boolean;
+        textBorder?: number;
       };
   alignment?: {
     horizontal: Exclude<HorizontalAlignment, 'far' | 'near'>;