@xh/hoist 67.0.0-SNAPSHOT.1725049253748 → 67.0.0-SNAPSHOT.1725050289733

package/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## 67.0.0-SNAPSHOT - unreleased
 
+### 💥 Breaking Changes
+
+* Requires `hoist-core >= 21.0`.
+
 ### 🎁 New Features
 
 * Added support for Correlation IDs across fetch requests and error / activity tracking:
@@ -33,9 +37,9 @@
 * Fixed bug where a role with a dot in its name could not be deleted.
 * Fixed `SelectEditor` to ensure new value is flushed before editing stops.
 
-### 💥 Breaking Changes
+### ✨ Styles
 
-* Requires `hoist-core >= 21.0`.
+* Added CSS variables to support customization of `Badge` component styling.
 
 ### ⚙️ Technical
 

package/cmp/badge/Badge.scss

@@ -10,16 +10,16 @@
   justify-content: center;
   align-items: center;
   align-self: center;
-  font-size: 0.75em;
+  font-size: var(--xh-badge-font-size);
   font-weight: bold;
-  border-radius: 4px;
+  border-radius: var(--xh-badge-border-radius);
   margin-left: 5px;
-  padding: 0 4px;
-  height: 1.6em;
+  padding: var(--xh-badge-padding);
+  height: var(--xh-badge-height);
   width: fit-content;
-  min-width: 15px;
-  background-color: var(--xh-blue-gray);
-  color: white;
+  min-width: var(--xh-badge-min-width);
+  background-color: var(--xh-badge-bg);
+  color: var(--xh-badge-text-color);
 
   &--compact {
     font-size: 0.5em;

package/format/FormatNumber.ts

@@ -13,7 +13,8 @@ import {
     isInteger,
     isNil,
     isNumber,
-    isString
+    isString,
+    round
 } from 'lodash';
 import Numbro from 'numbro';
 import numbro from 'numbro';
@@ -498,14 +499,11 @@ function buildFormatConfig(
 
     // Calculate numbro mantissa and trimMantissa options based on precision and zeroPad settings.
     if (isNumber(zeroPad)) {
-        // Specific zeroPad set - need to read actual precision of number to determine exact
-        // mantissa, as we cannot use trimMantissa (since we do want to allow some trailing zeroes).
-        const actualPrecision = countDecimalPlaces(absVal);
-
-        // How much precision do we actually want/need? Lower of actual vs. precision set above.
-        // Ensures we respect a deliberately low precision spec, but otherwise include only as
-        // much precision as we need to show the value.
-        const requiredPrecision = Math.min(actualPrecision, precision);
+        // Specific zeroPad set - we want to show at least this much precision, but not more unless
+        // the value actually has more precision. Note, we round to requested *max* precision first,
+        // then determine the value's actual precision. This avoids issues where values resulting
+        // from floating point operations have spurious precision that would defeat this routine.
+        const requiredPrecision = countDecimalPlaces(round(absVal, precision));
 
         // Then set mantissa to higher of required precision vs. requested zeroPad.
         // Ensures we display all of the requested/available precision + extra zeros if needed.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xh/hoist",
-  "version": "67.0.0-SNAPSHOT.1725049253748",
+  "version": "67.0.0-SNAPSHOT.1725050289733",
   "description": "Hoist add-on for building and deploying React Applications.",
   "repository": "github:xh/hoist-react",
   "homepage": "https://xh.io",

package/styles/vars.scss

@@ -254,6 +254,16 @@ body {
     --xh-bg-highlight: var(--bg-highlight, hsl(200, 50%, 27%));
   }
 
+  //-----------------------------------------
+  // Badges
+  //-----------------------------------------
+  --xh-badge-bg: var(--badge-bg, var(--xh-blue-gray));
+  --xh-badge-border-radius: var(--badge-border-radius, var(--xh-border-radius-px));
+  --xh-badge-font-size: var(--badge-font-size, 0.75em);
+  --xh-badge-height: var(--badge-height, 1.6em);
+  --xh-badge-min-width: var(--badge-min-width, 15px);
+  --xh-badge-padding: var(--badge-padding, #{0 4px});
+  --xh-badge-text-color: var(--badge-text-color, white);
 
   //------------------------
   // Borders