[color-transformers > rgbToHsbl] Fix brightness precision of HSB conversions by increasing from 2 decimal digits to 4

UNRELEASED.md

@@ -20,6 +20,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 - Removed `tabIndex=-1` from `Popover` when `preventAutoFocus` is true ([#3595](https://github.com/Shopify/polaris-react/pull/3595))
 - Fixed `Modal` header border color ([#3616](https://github.com/Shopify/polaris-react/pull/3616))
 - Fixed `TopBar` search clear button alignment on iOS ([#3618](https://github.com/Shopify/polaris-react/pull/3618))
+- Fixed HSB brightness conversion by increasing precision from 2 decimals to 4
 
 ### Documentation
 

src/utilities/color-transformers.ts

@@ -170,7 +170,7 @@ function rgbToHsbl(color: RGBAColor, type: 'b' | 'l' = 'b'): HSBLAColor {
   return {
     hue: clamp(hue, 0, 360) || 0,
     saturation: parseFloat(clamp(saturation, 0, 1).toFixed(2)),
-    brightness: parseFloat(clamp(largestComponent, 0, 1).toFixed(2)),
+    brightness: parseFloat(clamp(largestComponent, 0, 1).toFixed(4)),
     lightness: parseFloat(lightness.toFixed(2)),
     alpha: parseFloat(alpha.toFixed(2)),
   };

src/utilities/tests/color-transformers.test.ts

@@ -105,6 +105,32 @@ describe('colorUtilities', () => {
       expect(saturation).toBe(1);
       expect(brightness).toBe(1);
     });
+
+    // test for an issue where Hex colours were losing precision during the conversion because we limit rounding to two decimal places
+    // https://github.com/Shopify/shopify/issues/265949
+    it('returns 0/0/0.5333 hsb value with four decimals of brightness precision when passed rgb(136, 136, 136)', () => {
+      const {hue, saturation, brightness} = rgbToHsb({
+        red: 136,
+        green: 136,
+        blue: 136,
+      });
+      expect(hue).toBe(0);
+      expect(saturation).toBe(0);
+      expect(brightness).toBe(0.5333);
+    });
+
+    // test for an issue where Hex colours were losing precision during the conversion because we limit rounding to two decimal places
+    // https://github.com/Shopify/shopify/issues/265949
+    it('returns 0/0/0.5294 hsb value when passed rgb(135, 135, 135)', () => {
+      const {hue, saturation, brightness} = rgbToHsb({
+        red: 135,
+        green: 135,
+        blue: 135,
+      });
+      expect(hue).toBe(0);
+      expect(saturation).toBe(0);
+      expect(brightness).toBe(0.5294);
+    });
   });
 
   describe('colorToHsla', () => {