Skip to content

Commit

Permalink
fix(utils): reduce gaps in media queries for breakpoints (#6744)
Browse files Browse the repository at this point in the history 
Co-authored-by: Segun Adebayo <joseshegs@gmail.com>
Closes #6743
  • Loading branch information
@joseph082
joseph082 committed Dec 21, 2022
1 parent b374879 commit 0eedc15
Show file tree
Hide file tree
Showing 8 changed files with 72 additions and 57 deletions.
10 changes: 10 additions & 0 deletions .changeset/sour-experts-pump.md
View file
@@ -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
12 changes: 6 additions & 6 deletions packages/components/media-query/tests/test-data.ts
View file
Expand Up @@ -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)",
}
10 changes: 5 additions & 5 deletions packages/components/skeleton/tests/test-data.ts
View file
Expand Up @@ -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)",
}
10 changes: 5 additions & 5 deletions packages/core/styled-system/tests/style-config.test.ts
View file
Expand Up @@ -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,
Expand All @@ -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,
Expand All @@ -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,
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand Down
6 changes: 3 additions & 3 deletions packages/legacy/utils/src/breakpoint.ts
View file
Expand Up @@ -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}`)
Expand Down
68 changes: 34 additions & 34 deletions packages/legacy/utils/tests/responsive.test.ts
View file
Expand Up @@ -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",
Expand All @@ -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",
Expand Down
11 changes: 7 additions & 4 deletions packages/utilities/breakpoint-utils/src/breakpoint.ts
View file
Expand Up @@ -33,13 +33,16 @@ function keys(breakpoints: Record<string, any>) {
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}`)
Expand Down
2 changes: 2 additions & 0 deletions scripts/setup-test.ts
View file
Expand Up @@ -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", {
Expand Down

1 comment on commit 0eedc15

@vercel
Copy link

@vercel vercel bot commented on 0eedc15 Dec 21, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

chakra-ui-storybook – ./

storybook.chakra-ui.com
chakra-ui-storybook-chakra-ui.vercel.app
chakra-ui-storybook-git-main-chakra-ui.vercel.app
chakra-ui-storybook.vercel.app

Please sign in to comment.