From f9cef6e6ae354b50e7336a26d8036f52e624b8e0 Mon Sep 17 00:00:00 2001 From: Mark Dimitry Date: Wed, 11 Nov 2020 13:52:45 -0500 Subject: [PATCH 1/2] increase HSB brightness precision to 4 decimals --- UNRELEASED.md | 1 + src/utilities/color-transformers.ts | 2 +- .../tests/color-transformers.test.ts | 26 +++++++++++++++++++ 3 files changed, 28 insertions(+), 1 deletion(-) diff --git a/UNRELEASED.md b/UNRELEASED.md index 647a295fde3..a64d9657b8d 100644 --- a/UNRELEASED.md +++ b/UNRELEASED.md @@ -18,6 +18,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f - **`Button`:** `loading` no longer sets the invalid `role="alert"` ([#3590](https://github.com/Shopify/polaris-react/pull/3590)) - 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)) +- Fixes 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', () => { From 118e699925267445393323129bf91d18fbbbde2a Mon Sep 17 00:00:00 2001 From: Mark Dimitry Date: Wed, 11 Nov 2020 14:44:19 -0500 Subject: [PATCH 2/2] use past tense --- UNRELEASED.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/UNRELEASED.md b/UNRELEASED.md index 27ebf9e9e5f..47f937960c3 100644 --- a/UNRELEASED.md +++ b/UNRELEASED.md @@ -20,7 +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)) -- Fixes HSB brightness conversion by increasing precision from 2 decimals to 4 +- Fixed HSB brightness conversion by increasing precision from 2 decimals to 4 ### Documentation