diff --git a/UNRELEASED.md b/UNRELEASED.md index 94ed837f742..47f937960c3 100644 --- a/UNRELEASED.md +++ b/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 diff --git a/src/utilities/color-transformers.ts b/src/utilities/color-transformers.ts index 69a99b31e99..474bf2467bd 100644 --- a/src/utilities/color-transformers.ts +++ b/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)), }; diff --git a/src/utilities/tests/color-transformers.test.ts b/src/utilities/tests/color-transformers.test.ts index 456641e428a..d03b5555f74 100644 --- a/src/utilities/tests/color-transformers.test.ts +++ b/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', () => {