Skip to content
This repository was archived by the owner on Jun 20, 2022. It is now read-only.

Commit 86f642b

Browse files
gregbergegregberge
committed
fix: fix down & between behaviour
1 parent 12f09bf commit 86f642b

File tree

4 files changed

+111
-31
lines changed

4 files changed

+111
-31
lines changed

‎packages/shared/core/Grid.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ const styleBreakpoints = p => {
1111
const maxWidths = gridMaxWidths(p)
1212
const style = breakpoint => {
1313
const width = bk[breakpoint]
14-
const media = s => (width === 0 ? s : { [mediaMinWidth(width)]: s })
14+
const media = s => (width === 0 ? null : { [mediaMinWidth(width)]: s })
1515
return media({ maxWidth: maxWidths[breakpoint] })
1616
}
1717
return Object.keys(bk).reduce(

‎packages/shared/core/theming/responsive.js‎

Lines changed: 6 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -15,27 +15,6 @@ export const breakpoints = thd('breakpoints', {
1515
xl: 1200,
1616
})
1717

18-
const getBreakpointsEntries = p => {
19-
const bks = breakpoints(p)
20-
const entries = Object.keys(bks).reduce(
21-
(entries, key) => [...entries, [key, bks[key]]],
22-
[],
23-
)
24-
return entries.sort((a, b) => a[1] > b[1])
25-
}
26-
27-
const getNextBreakpoint = (name, p) => {
28-
const entries = getBreakpointsEntries(p)
29-
const index = entries.findIndex(([key]) => key === name)
30-
return index < entries.length - 1 ? entries[index + 1][0] : null
31-
}
32-
33-
const getPreviousBreakpoint = (name, p) => {
34-
const entries = getBreakpointsEntries(p)
35-
const index = entries.findIndex(([key]) => key === name)
36-
return index >= 1 ? entries[index - 1][0] : null
37-
}
38-
3918
/**
4019
* Minimum breakpoint width.
4120
* Null for the smallest breakpoint.
@@ -55,8 +34,9 @@ const getBreakpointMin = (name, p) => {
5534
* See https://bugs.webkit.org/show_bug.cgi?id=178261
5635
*/
5736
const getBreakpointMax = (name, p) => {
58-
const next = getNextBreakpoint(name, p)
59-
return next ? getBreakpointMin(next, p) - 0.02 : null
37+
const bks = breakpoints(p)
38+
const breakPoint = bks[name]
39+
return breakPoint !== 0 ? breakPoint - 0.02 : null
6040
}
6141

6242
export const up = mixin('up', (name, code) => p => {
@@ -70,10 +50,8 @@ export const up = mixin('up', (name, code) => p => {
7050
})
7151

7252
export const down = mixin('down', (name, code) => p => {
73-
const next = getNextBreakpoint(name, p)
74-
const previous = getPreviousBreakpoint(name, p)
75-
const value = getBreakpointMax(previous, p)
76-
if (next === null) return code
53+
const value = getBreakpointMax(name, p)
54+
if (value === null) return null
7755
return css`
7856
${mediaMaxWidth(value)} {
7957
${code};
@@ -84,12 +62,10 @@ export const down = mixin('down', (name, code) => p => {
8462
export const between = mixin('between', (lower, upper, code) => p => {
8563
const min = getBreakpointMin(lower, p)
8664
const max = getBreakpointMax(upper, p)
87-
const upperPrevious = getPreviousBreakpoint(upper, p)
88-
const previousMax = getBreakpointMax(upperPrevious, p)
8965

9066
if (min !== null && max !== null) {
9167
return css`
92-
${mediaBetweenWidth(min, previousMax)} {
68+
${mediaBetweenWidth(min, max)} {
9369
${code};
9470
}
9571
`

‎packages/shared/core/theming/responsive.test.js‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
import { up, down, between } from './responsive'
2+
3+
describe('responsive', () => {
4+
describe('#up', () => {
5+
it('should return style', () => {
6+
function upX(breakpoint, code) {
7+
const value = up(breakpoint, code)({})
8+
if (!value) return value
9+
if (typeof value === 'string') return value
10+
return value
11+
.join('')
12+
.replace(/\r?\n|\r/g, '')
13+
.replace(/\s+/g, ' ')
14+
.trim()
15+
}
16+
17+
expect(upX('xs', 'xs')).toBe('xs')
18+
expect(upX('sm', 'sm')).toBe(`@media (min-width: 576px) { sm; }`)
19+
expect(upX('md', 'md')).toBe(`@media (min-width: 768px) { md; }`)
20+
expect(upX('lg', 'lg')).toBe(`@media (min-width: 992px) { lg; }`)
21+
expect(upX('xl', 'xl')).toBe(`@media (min-width: 1200px) { xl; }`)
22+
})
23+
})
24+
25+
describe('#down', () => {
26+
it('should return style', () => {
27+
function downX(breakpoint, code) {
28+
const value = down(breakpoint, code)({})
29+
if (!value) return value
30+
if (typeof value === 'string') return value
31+
return value
32+
.join('')
33+
.replace(/\r?\n|\r/g, '')
34+
.replace(/\s+/g, ' ')
35+
.trim()
36+
}
37+
38+
expect(downX('xl', 'xl')).toBe(`@media (max-width: 1199.98px) { xl; }`)
39+
expect(downX('lg', 'lg')).toBe(`@media (max-width: 991.98px) { lg; }`)
40+
expect(downX('md', 'md')).toBe(`@media (max-width: 767.98px) { md; }`)
41+
expect(downX('sm', 'sm')).toBe(`@media (max-width: 575.98px) { sm; }`)
42+
expect(downX('xs', 'xs')).toBe(null)
43+
})
44+
})
45+
46+
describe('#between', () => {
47+
it('should return style', () => {
48+
function betweenX(min, max) {
49+
const value = between(min, max, `${min}-${max}`)({})
50+
if (!value) return value
51+
if (typeof value === 'string') return value
52+
return value
53+
.join('')
54+
.replace(/\r?\n|\r/g, '')
55+
.replace(/\s+/g, ' ')
56+
.trim()
57+
}
58+
59+
expect(betweenX('xs', 'sm')).toBe(
60+
`@media (max-width: 575.98px) { xs-sm; }`,
61+
)
62+
expect(betweenX('xs', 'md')).toBe(
63+
`@media (max-width: 767.98px) { xs-md; }`,
64+
)
65+
expect(betweenX('xs', 'lg')).toBe(
66+
`@media (max-width: 991.98px) { xs-lg; }`,
67+
)
68+
expect(betweenX('xs', 'xl')).toBe(
69+
`@media (max-width: 1199.98px) { xs-xl; }`,
70+
)
71+
72+
expect(betweenX('sm', 'md')).toBe(
73+
`@media (min-width: 576px) and (max-width: 767.98px) { sm-md; }`,
74+
)
75+
expect(betweenX('sm', 'lg')).toBe(
76+
`@media (min-width: 576px) and (max-width: 991.98px) { sm-lg; }`,
77+
)
78+
expect(betweenX('sm', 'xl')).toBe(
79+
`@media (min-width: 576px) and (max-width: 1199.98px) { sm-xl; }`,
80+
)
81+
82+
expect(betweenX('md', 'lg')).toBe(
83+
`@media (min-width: 768px) and (max-width: 991.98px) { md-lg; }`,
84+
)
85+
expect(betweenX('md', 'xl')).toBe(
86+
`@media (min-width: 768px) and (max-width: 1199.98px) { md-xl; }`,
87+
)
88+
89+
expect(betweenX('lg', 'xl')).toBe(
90+
`@media (min-width: 992px) and (max-width: 1199.98px) { lg-xl; }`,
91+
)
92+
})
93+
})
94+
})

‎packages/system/src/style.test.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -139,6 +139,16 @@ describe('#style', () => {
139139
fontFamily: 'title',
140140
color: 'blue',
141141
})
142+
143+
expect(
144+
system({
145+
fontFamily: { md: 'title', lg: 'body' },
146+
color: { md: 'blue', lg: 'red' },
147+
})(),
148+
).toEqual({
149+
'@media (min-width: 768px)': { fontFamily: 'title', color: 'blue' },
150+
'@media (min-width: 992px)': { fontFamily: 'body', color: 'red' },
151+
})
142152
})
143153

144154
it('should work with custom breakpoints', () => {

0 commit comments

Comments
 (0)