[color-transformers > Hsbl] Increase precision of hue, saturation, lightness, and alpha

UNRELEASED.md

@@ -28,6 +28,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 - Fixed `Filters` duplicated `ConnectedFilter` ids ([#3651](https://github.com/Shopify/polaris-react/pull/3651))
 - Fixed `Banner` `secondaryAction` only rendering if `action` is set ([#2949](https://github.com/Shopify/polaris-react/pull/2949))
 - Added a `alwaysRenderCustomProperties` to `ThemeProvider` for elements that render outside of the DOM tree to their parent context ([#3652](https://github.com/Shopify/polaris-react/pull/3652))
+- Increased precision of hue, saturation, lightness, and alpha in HSBLA `color-transformers` (https://github.com/Shopify/polaris-react/pull/3640)
 
 ### Documentation
 

src/components/ThemeProvider/tests/ThemeProvider.test.tsx

@@ -92,7 +92,7 @@ describe('<ThemeProvider />', () => {
     expect(themeProvider.find('div')).toHaveReactProps({
       style: expect.objectContaining({
         '--top-bar-background': '#108043',
-        '--top-bar-background-lighter': 'hsla(147, 63%, 43%, 1)',
+        '--top-bar-background-lighter': 'hsla(147.32, 62.78%, 43.24%, 1)',
         '--top-bar-color': 'rgb(255, 255, 255)',
         '--top-bar-border': 'rgb(196, 205, 213)',
       }),
@@ -127,7 +127,7 @@ describe('<ThemeProvider />', () => {
     expect(themeProvider.find('div')).toHaveReactProps({
       style: expect.objectContaining({
         '--top-bar-background': '#021123',
-        '--top-bar-background-lighter': 'hsla(213, 74%, 22%, 1)',
+        '--top-bar-background-lighter': 'hsla(212.73, 74.19%, 22.25%, 1)',
         '--top-bar-color': 'rgb(255, 255, 255)',
         '--top-bar-border': 'rgb(196, 205, 213)',
       }),

src/utilities/color-transformers.ts

@@ -8,6 +8,7 @@ import type {
   HSLAColor,
   HSBLAColor,
 } from './color-types';
+import {roundNumberToDecimalPlaces} from './roundNumberToDecimalPlaces';
 
 export function rgbString(color: RGBColor | RGBAColor) {
   const {red, green, blue} = color;
@@ -165,14 +166,15 @@ function rgbToHsbl(color: RGBAColor, type: 'b' | 'l' = 'b'): HSBLAColor {
       huePercentage = (red - green) / delta + 4;
   }
 
-  const hue = Math.round((huePercentage / 6) * 360);
+  const hue = (huePercentage / 6) * 360;
+  const clampedHue = clamp(hue, 0, 360);
 
   return {
-    hue: clamp(hue, 0, 360) || 0,
-    saturation: parseFloat(clamp(saturation, 0, 1).toFixed(2)),
-    brightness: parseFloat(clamp(largestComponent, 0, 1).toFixed(4)),
-    lightness: parseFloat(lightness.toFixed(2)),
-    alpha: parseFloat(alpha.toFixed(2)),
+    hue: clampedHue ? roundNumberToDecimalPlaces(clampedHue, 2) : 0,
+    saturation: roundNumberToDecimalPlaces(clamp(saturation, 0, 1), 4),
+    brightness: roundNumberToDecimalPlaces(clamp(largestComponent, 0, 1), 4),
+    lightness: roundNumberToDecimalPlaces(lightness, 4),
+    alpha: roundNumberToDecimalPlaces(alpha, 4),
   };
 }
 
@@ -190,8 +192,10 @@ export function rgbToHsl(color: RGBAColor): HSLAColor {
     lightness: rawLightness,
     alpha = 1,
   } = rgbToHsbl(color, 'l');
-  const saturation = rawSaturation * 100;
-  const lightness = rawLightness * 100;
+
+  const saturation = roundNumberToDecimalPlaces(rawSaturation * 100, 2);
+  const lightness = roundNumberToDecimalPlaces(rawLightness * 100, 2);
+
   return {hue, saturation, lightness, alpha};
 }
 
@@ -242,7 +246,16 @@ export function hslToString(hslColor: HSLColor | HSLAColor | string) {
 
   const alpha = 'alpha' in hslColor ? hslColor.alpha : 1;
   const {hue, lightness, saturation} = hslColor;
-  return `hsla(${hue}, ${saturation}%, ${lightness}%, ${alpha})`;
+  return `hsla(${roundNumberToDecimalPlaces(
+    hue,
+    2,
+  )}, ${roundNumberToDecimalPlaces(
+    saturation,
+    2,
+  )}%, ${roundNumberToDecimalPlaces(
+    lightness,
+    2,
+  )}%, ${roundNumberToDecimalPlaces(alpha, 2)})`;
 }
 
 function rgbToObject(color: string): RGBAColor {
@@ -281,10 +294,10 @@ function hslToObject(color: string): HSLAColor {
 
   const [hue, saturation, lightness, alpha] = colorMatch[1].split(',');
   const objColor = {
-    hue: parseInt(hue, 10),
-    saturation: parseInt(saturation, 10),
-    lightness: parseInt(lightness, 10),
-    alpha: parseFloat(alpha) || 1,
+    hue: roundNumberToDecimalPlaces(parseFloat(hue), 2),
+    saturation: roundNumberToDecimalPlaces(parseFloat(saturation), 2),
+    lightness: roundNumberToDecimalPlaces(parseFloat(lightness), 2),
+    alpha: roundNumberToDecimalPlaces(parseFloat(alpha), 2) || 1,
   };
   return objColor;
 }

src/utilities/roundNumberToDecimalPlaces.ts

@@ -0,0 +1,13 @@
+// Because everything is a float in JS, Number.toFixed sometimes rounds in the
+// "wrong" direction because of float imprecision. For instance:
+// `(1.005).toFixed(2)` is `1.00`, NOT `1.01` because 1.005 in floating point is
+// actually 1.004999995. By using exponentiation tricks here we can work around
+// this imprecision, so `roundNumberToDecimalPlaces(1.005)` returns the expected
+// value of `1.01`
+// See https://www.jacklmoore.com/notes/rounding-in-javascript/
+export function roundNumberToDecimalPlaces(value: number, decimals: number) {
+  const exponent = Number(`${value}e${decimals}`);
+  const roundedExponent = Math.round(exponent);
+  const numberWithDecimalPlaces = Number(`${roundedExponent}e-${decimals}`);
+  return numberWithDecimalPlaces;
+}

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

@@ -131,24 +131,37 @@ describe('colorUtilities', () => {
       expect(saturation).toBe(0);
       expect(brightness).toBe(0.5294);
     });
+
+    // test for an issue where Hex colours were losing precision, due to hue rounding
+    // https://github.com/Shopify/shopify/issues/265949
+    it('returns 16.5517/0.521/0.6549 hsb value when passed rgb(167, 104, 80)', () => {
+      const {hue, saturation, brightness} = rgbToHsb({
+        red: 167,
+        green: 104,
+        blue: 80,
+      });
+      expect(hue).toBe(16.55);
+      expect(saturation).toBe(0.521);
+      expect(brightness).toBe(0.6549);
+    });
   });
 
   describe('colorToHsla', () => {
     it('returns the hsla color for hex', () => {
       expect(colorToHsla('#dddddd')).toStrictEqual({
         alpha: 1,
         hue: 0,
-        lightness: 87,
+        lightness: 86.67,
         saturation: 0,
       });
     });
 
     it('returns the hsla color for rgb', () => {
       expect(colorToHsla('rgb(132, 11, 2)')).toStrictEqual({
         alpha: 1,
-        hue: 4,
-        lightness: 26,
-        saturation: 97,
+        hue: 4.15,
+        lightness: 26.27,
+        saturation: 97.01,
       });
     });
 
@@ -164,9 +177,9 @@ describe('colorUtilities', () => {
     it('returns the hsla color for rgba', () => {
       expect(colorToHsla('rgb(132, 11, 2, 0.2)')).toStrictEqual({
         alpha: 1,
-        hue: 4,
-        lightness: 26,
-        saturation: 97,
+        hue: 4.15,
+        lightness: 26.27,
+        saturation: 97.01,
       });
     });
 

src/utilities/tests/roundNumberToDecimals.test.ts

@@ -0,0 +1,10 @@
+import {roundNumberToDecimalPlaces} from '../roundNumberToDecimalPlaces';
+
+describe('roundNumberToDecimalPlaces', () => {
+  it('rounds 1.004 to 1.00', () => {
+    expect(roundNumberToDecimalPlaces(1.004, 2)).toBe(1.0);
+  });
+  it('rounds 1.005 to 1.01', () => {
+    expect(roundNumberToDecimalPlaces(1.005, 2)).toBe(1.01);
+  });
+});