From 0eedc151caec8dbdb53e4e5e8354e2310553c19f Mon Sep 17 00:00:00 2001 From: Joseph Yu <39754176+joseph082@users.noreply.github.com> Date: Wed, 21 Dec 2022 02:51:01 -0800 Subject: [PATCH] fix(utils): reduce gaps in media queries for breakpoints (#6744) Co-authored-by: Segun Adebayo Closes https://github.com/chakra-ui/chakra-ui/issues/6743 --- .changeset/sour-experts-pump.md | 10 +++ .../components/media-query/tests/test-data.ts | 12 ++-- .../components/skeleton/tests/test-data.ts | 10 +-- .../styled-system/tests/style-config.test.ts | 10 +-- packages/legacy/utils/src/breakpoint.ts | 6 +- .../legacy/utils/tests/responsive.test.ts | 68 +++++++++---------- .../breakpoint-utils/src/breakpoint.ts | 11 +-- scripts/setup-test.ts | 2 + 8 files changed, 72 insertions(+), 57 deletions(-) create mode 100644 .changeset/sour-experts-pump.md diff --git a/.changeset/sour-experts-pump.md b/.changeset/sour-experts-pump.md new file mode 100644 index 00000000000..c0080cabfbc --- /dev/null +++ b/.changeset/sour-experts-pump.md @@ -0,0 +1,10 @@ +--- +"@chakra-ui/media-query": patch +"@chakra-ui/skeleton": patch +"@chakra-ui/styled-system": patch +"@chakra-ui/utils": patch +"@chakra-ui/breakpoint-utils": patch +--- + +Reduce gaps in media queries for breakpoints which excluded some viewport widths +from media query coverage diff --git a/packages/components/media-query/tests/test-data.ts b/packages/components/media-query/tests/test-data.ts index 69887e88e29..7fc3ead0384 100644 --- a/packages/components/media-query/tests/test-data.ts +++ b/packages/components/media-query/tests/test-data.ts @@ -13,11 +13,11 @@ export const breakpoints = { export const theme = { ...baseTheme, breakpoints } export const queries = { - base: "(min-width: 0px) and (max-width: 99px)", - sm: "(min-width: 100px) and (max-width: 199px)", - md: "(min-width: 200px) and (max-width: 299px)", - lg: "(min-width: 300px) and (max-width: 399px)", - xl: "(min-width: 400px) and (max-width: 499px)", - "2xl": "(min-width: 500px) and (max-width: 599px)", + base: "(min-width: 0px) and (max-width: 99.98px)", + sm: "(min-width: 100px) and (max-width: 199.98px)", + md: "(min-width: 200px) and (max-width: 299.98px)", + lg: "(min-width: 300px) and (max-width: 399.98px)", + xl: "(min-width: 400px) and (max-width: 499.98px)", + "2xl": "(min-width: 500px) and (max-width: 599.98px)", customBreakpoint: "(min-width: 600px)", } diff --git a/packages/components/skeleton/tests/test-data.ts b/packages/components/skeleton/tests/test-data.ts index 327e4f01552..0113066ff53 100644 --- a/packages/components/skeleton/tests/test-data.ts +++ b/packages/components/skeleton/tests/test-data.ts @@ -13,10 +13,10 @@ export const breakpoints = { export const theme = { ...baseTheme, breakpoints } export const queries = { - base: "(min-width: 0px) and (max-width: 99px)", - sm: "(min-width: 100px) and (max-width: 199px)", - md: "(min-width: 200px) and (max-width: 299px)", - lg: "(min-width: 300px) and (max-width: 399px)", - xl: "(min-width: 400px) and (max-width: 499px)", + base: "(min-width: 0px) and (max-width: 99.98px)", + sm: "(min-width: 100px) and (max-width: 199.98px)", + md: "(min-width: 200px) and (max-width: 299.98px)", + lg: "(min-width: 300px) and (max-width: 399.98px)", + xl: "(min-width: 400px) and (max-width: 499.98px)", customBreakpoint: "(min-width: 500px)", } diff --git a/packages/core/styled-system/tests/style-config.test.ts b/packages/core/styled-system/tests/style-config.test.ts index c9026f44e69..f5cb612b31c 100644 --- a/packages/core/styled-system/tests/style-config.test.ts +++ b/packages/core/styled-system/tests/style-config.test.ts @@ -4,7 +4,7 @@ test("should handle single variant", () => { expect(recipe({ theme, variant: "solid", size: ["sm", "md"] })) .toMatchInlineSnapshot(` Object { - "@media screen and (min-width: 0px) and (max-width: 39.9375em)": Object { + "@media screen and (min-width: 0px) and (max-width: 39.99875em)": Object { "fontSize": "sm", "h": 8, "minW": 8, @@ -27,7 +27,7 @@ test("should handle single variant", () => { expect(recipe({ theme, variant: "solid", size: { base: "sm", sm: "md" } })) .toMatchInlineSnapshot(` Object { - "@media screen and (min-width: 0px) and (max-width: 39.9375em)": Object { + "@media screen and (min-width: 0px) and (max-width: 39.99875em)": Object { "fontSize": "sm", "h": 8, "minW": 8, @@ -50,7 +50,7 @@ test("should handle single variant", () => { expect(recipe({ theme, variant: "solid", size: { base: "sm", lg: "md" } })) .toMatchInlineSnapshot(` Object { - "@media screen and (min-width: 0px) and (max-width: 63.9375em)": Object { + "@media screen and (min-width: 0px) and (max-width: 63.99875em)": Object { "fontSize": "sm", "h": 8, "minW": 8, @@ -80,7 +80,7 @@ test("should work with distant breakpoint", () => { }), ).toMatchInlineSnapshot(` Object { - "@media screen and (min-width: 0px) and (max-width: 63.9375em)": Object { + "@media screen and (min-width: 0px) and (max-width: 63.99875em)": Object { "fontSize": "sm", "h": 8, "minW": 8, @@ -108,7 +108,7 @@ test("should work with distant breakpoint", () => { }), ).toMatchInlineSnapshot(` Object { - "@media screen and (min-width: 0px) and (max-width: 63.9375em)": Object { + "@media screen and (min-width: 0px) and (max-width: 63.99875em)": Object { "fontSize": "sm", "h": 8, "minW": 8, diff --git a/packages/legacy/utils/src/breakpoint.ts b/packages/legacy/utils/src/breakpoint.ts index eefd466e761..dde93cd0f5d 100644 --- a/packages/legacy/utils/src/breakpoint.ts +++ b/packages/legacy/utils/src/breakpoint.ts @@ -35,9 +35,9 @@ function subtract(value: string) { if (!value) return value value = px(value) ?? value const factor = value.endsWith("px") - ? -1 - : // the equivalent of 1px in em using a 16px base - -0.0625 + ? -0.02 + : // the equivalent of 0.02px in em using a 2px base + -0.01 return isNumber(value) ? `${value + factor}` : value.replace(/(\d+\.?\d*)/u, (m) => `${parseFloat(m) + factor}`) diff --git a/packages/legacy/utils/tests/responsive.test.ts b/packages/legacy/utils/tests/responsive.test.ts index 1a4eb248c22..bc9791279c5 100644 --- a/packages/legacy/utils/tests/responsive.test.ts +++ b/packages/legacy/utils/tests/responsive.test.ts @@ -79,43 +79,43 @@ test("should work correctly", () => { ).toMatchInlineSnapshot(` Array [ Object { - "_minW": "-1px", + "_minW": "-0.02px", "breakpoint": "base", - "maxW": "319px", - "maxWQuery": "@media screen and (max-width: 319px)", - "minMaxQuery": "@media screen and (min-width: 0px) and (max-width: 319px)", + "maxW": "319.98px", + "maxWQuery": "@media screen and (max-width: 319.98px)", + "minMaxQuery": "@media screen and (min-width: 0px) and (max-width: 319.98px)", "minW": "0px", "minWQuery": "@media screen and (min-width: 0px)", }, Object { - "_minW": "319px", + "_minW": "319.98px", "breakpoint": "sm", - "maxW": "639px", - "maxWQuery": "@media screen and (max-width: 639px)", - "minMaxQuery": "@media screen and (min-width: 320px) and (max-width: 639px)", + "maxW": "639.98px", + "maxWQuery": "@media screen and (max-width: 639.98px)", + "minMaxQuery": "@media screen and (min-width: 320px) and (max-width: 639.98px)", "minW": "320px", "minWQuery": "@media screen and (min-width: 320px)", }, Object { - "_minW": "639px", + "_minW": "639.98px", "breakpoint": "md", - "maxW": "999px", - "maxWQuery": "@media screen and (max-width: 999px)", - "minMaxQuery": "@media screen and (min-width: 640px) and (max-width: 999px)", + "maxW": "999.98px", + "maxWQuery": "@media screen and (max-width: 999.98px)", + "minMaxQuery": "@media screen and (min-width: 640px) and (max-width: 999.98px)", "minW": "640px", "minWQuery": "@media screen and (min-width: 640px)", }, Object { - "_minW": "999px", + "_minW": "999.98px", "breakpoint": "lg", - "maxW": "3999px", - "maxWQuery": "@media screen and (max-width: 3999px)", - "minMaxQuery": "@media screen and (min-width: 1000px) and (max-width: 3999px)", + "maxW": "3999.98px", + "maxWQuery": "@media screen and (max-width: 3999.98px)", + "minMaxQuery": "@media screen and (min-width: 1000px) and (max-width: 3999.98px)", "minW": "1000px", "minWQuery": "@media screen and (min-width: 1000px)", }, Object { - "_minW": "3999px", + "_minW": "3999.98px", "breakpoint": "xl", "maxW": undefined, "maxWQuery": "@media screen", @@ -140,43 +140,43 @@ test("should work with createBreakpoint output", () => { ).toMatchInlineSnapshot(` Array [ Object { - "_minW": "-0.0625em", + "_minW": "-0.01em", "breakpoint": "base", - "maxW": "319px", - "maxWQuery": "@media screen and (max-width: 319px)", - "minMaxQuery": "@media screen and (min-width: 0em) and (max-width: 319px)", + "maxW": "319.98px", + "maxWQuery": "@media screen and (max-width: 319.98px)", + "minMaxQuery": "@media screen and (min-width: 0em) and (max-width: 319.98px)", "minW": "0em", "minWQuery": "@media screen and (min-width: 0em)", }, Object { - "_minW": "319px", + "_minW": "319.98px", "breakpoint": "sm", - "maxW": "639px", - "maxWQuery": "@media screen and (max-width: 639px)", - "minMaxQuery": "@media screen and (min-width: 320px) and (max-width: 639px)", + "maxW": "639.98px", + "maxWQuery": "@media screen and (max-width: 639.98px)", + "minMaxQuery": "@media screen and (min-width: 320px) and (max-width: 639.98px)", "minW": "320px", "minWQuery": "@media screen and (min-width: 320px)", }, Object { - "_minW": "639px", + "_minW": "639.98px", "breakpoint": "md", - "maxW": "999px", - "maxWQuery": "@media screen and (max-width: 999px)", - "minMaxQuery": "@media screen and (min-width: 640px) and (max-width: 999px)", + "maxW": "999.98px", + "maxWQuery": "@media screen and (max-width: 999.98px)", + "minMaxQuery": "@media screen and (min-width: 640px) and (max-width: 999.98px)", "minW": "640px", "minWQuery": "@media screen and (min-width: 640px)", }, Object { - "_minW": "999px", + "_minW": "999.98px", "breakpoint": "lg", - "maxW": "3999px", - "maxWQuery": "@media screen and (max-width: 3999px)", - "minMaxQuery": "@media screen and (min-width: 1000px) and (max-width: 3999px)", + "maxW": "3999.98px", + "maxWQuery": "@media screen and (max-width: 3999.98px)", + "minMaxQuery": "@media screen and (min-width: 1000px) and (max-width: 3999.98px)", "minW": "1000px", "minWQuery": "@media screen and (min-width: 1000px)", }, Object { - "_minW": "3999px", + "_minW": "3999.98px", "breakpoint": "xl", "maxW": undefined, "maxWQuery": "@media screen", diff --git a/packages/utilities/breakpoint-utils/src/breakpoint.ts b/packages/utilities/breakpoint-utils/src/breakpoint.ts index e8f9a4f80d6..ee70fa14c3d 100644 --- a/packages/utilities/breakpoint-utils/src/breakpoint.ts +++ b/packages/utilities/breakpoint-utils/src/breakpoint.ts @@ -33,13 +33,16 @@ function keys(breakpoints: Record) { return new Set(value) } +const OFFSET = 0.02 + function subtract(value: string) { if (!value) return value + value = px(value) ?? value - const factor = value.endsWith("px") - ? -1 - : // the equivalent of 1px in em using a 16px base - -0.0625 + + // offset by 0.02px or equivalent (in em) + const factor = value.endsWith("px") ? -OFFSET : -(OFFSET / 16) + return typeof value === "number" ? `${value + factor}` : value.replace(/(\d+\.?\d*)/u, (m) => `${parseFloat(m) + factor}`) diff --git a/scripts/setup-test.ts b/scripts/setup-test.ts index 39c8d3be6a6..4babf9a8f6c 100644 --- a/scripts/setup-test.ts +++ b/scripts/setup-test.ts @@ -2,6 +2,8 @@ import "@testing-library/jest-dom/extend-expect" const { getComputedStyle } = window window.getComputedStyle = (elt) => getComputedStyle(elt) +window.Element.prototype.scrollTo = () => {} +window.scrollTo = () => {} if (typeof window.matchMedia !== "function") { Object.defineProperty(window, "matchMedia", {