Skip to content

Commit a7e99f8

Browse files
jonrohanjonrohan
authored
chore: Remove unused getBreakpointDeclarations function and any related code. (#6100)
1 parent a007808 commit a7e99f8

File tree

4 files changed

+6
-262
lines changed

4 files changed

+6
-262
lines changed

‎.changeset/tangy-facts-guess.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@primer/react': patch
3+
---
4+
5+
Remove unused getBreakpointDeclarations function and any related code.

‎packages/react/src/PageHeader/PageHeader.test.tsx

Lines changed: 1 addition & 99 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,7 @@
11
import {render} from '@testing-library/react'
22
import {PageHeader} from '.'
33
import MatchMediaMock from 'jest-matchmedia-mock'
4-
import {behavesAsComponent, checkExports, renderStyles} from '../utils/testing'
5-
import {IconButton} from '../Button'
6-
import {SidebarExpandIcon} from '@primer/octicons-react'
7-
import {mediaQueries} from '../utils/layout'
4+
import {behavesAsComponent, checkExports} from '../utils/testing'
85

96
let matchmedia: MatchMediaMock
107
describe('PageHeader', () => {
@@ -40,101 +37,6 @@ describe('PageHeader', () => {
4037
default: undefined,
4138
PageHeader,
4239
})
43-
/** These 3 tests below are not following the user behavioural pattern testing paradigm.
44-
* They are testing the internal implementation of the component and checking if the component
45-
* is rendering the correct styles.This approach was necessary due to the impracticality of CSS media queries testing with Jest.
46-
*/
47-
it.skip('respects default visibility of ContextArea and renders CSS media styles correctly', () => {
48-
const expectedStyles = {
49-
'-ms-flex-align': 'center',
50-
'-ms-flex-direction': 'row',
51-
'-webkit-align-items': 'center',
52-
'-webkit-box-align': 'center',
53-
'-webkit-flex-direction': 'row',
54-
[`@media screen and (max-width:calc(768px - 0.02px))`]: {
55-
display: 'flex',
56-
},
57-
[`${mediaQueries.regular.replace(': ', ':')}`]: {
58-
display: 'none',
59-
},
60-
'align-items': 'center',
61-
display: 'flex',
62-
'flex-direction': 'row',
63-
gap: '0.5rem',
64-
'grid-area': 'context-area',
65-
'padding-bottom': '0.5rem',
66-
'grid-row': '1',
67-
}
68-
69-
expect(renderStyles(<PageHeader.ContextArea>ContextArea</PageHeader.ContextArea>)).toEqual(
70-
expect.objectContaining(expectedStyles),
71-
)
72-
})
73-
it.skip('respects the hidden prop of ContextArea and renders CSS media styles correctly', () => {
74-
const expectedStyles = {
75-
'-ms-flex-align': 'center',
76-
'-ms-flex-direction': 'row',
77-
'-webkit-align-items': 'center',
78-
'-webkit-box-align': 'center',
79-
'-webkit-flex-direction': 'row',
80-
[`@media screen and (max-width:calc(768px - 0.02px))`]: {
81-
display: 'flex',
82-
},
83-
[`${mediaQueries.regular.replace(': ', ':')}`]: {
84-
display: 'flex',
85-
},
86-
[`${mediaQueries.wide.replace(': ', ':')}`]: {
87-
display: 'none',
88-
},
89-
'align-items': 'center',
90-
display: 'flex',
91-
'flex-direction': 'row',
92-
gap: '0.5rem',
93-
'grid-area': 'context-area',
94-
'grid-row': '1',
95-
'padding-bottom': '0.5rem',
96-
}
97-
98-
expect(
99-
renderStyles(
100-
<PageHeader.ContextArea
101-
hidden={{
102-
narrow: false,
103-
regular: false,
104-
wide: true,
105-
}}
106-
>
107-
ContextArea
108-
</PageHeader.ContextArea>,
109-
),
110-
).toEqual(expect.objectContaining(expectedStyles))
111-
})
112-
it.skip('respects default visibility of LeadingAction and TrailingAction and renders CSS media styles correctly', () => {
113-
const expectedStyles = {
114-
'-ms-flex-align': 'center',
115-
'-webkit-align-items': 'center',
116-
'-webkit-box-align': 'center',
117-
[`@media screen and (max-width:calc(768px - 0.02px))`]: {
118-
display: 'none',
119-
},
120-
[`${mediaQueries.regular.replace(': ', ':')}`]: {
121-
display: 'flex',
122-
},
123-
'align-items': 'center',
124-
display: 'flex',
125-
'grid-area': 'leading-action',
126-
'grid-row': '2',
127-
'padding-right': '0.5rem',
128-
}
129-
130-
expect(
131-
renderStyles(
132-
<PageHeader.LeadingAction>
133-
<IconButton aria-label="Expand" data-testid="LeadingAction" icon={SidebarExpandIcon} variant="invisible" />
134-
</PageHeader.LeadingAction>,
135-
),
136-
).toEqual(expect.objectContaining(expectedStyles))
137-
})
13840
it('respects the title variant prop', () => {
13941
const {getByText} = render(
14042
<PageHeader role="banner" aria-label="Title">

‎packages/react/src/utils/getBreakpointDeclarations.ts

Lines changed: 0 additions & 148 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,4 @@
11
import type {ResponsiveValue} from '../hooks/useResponsiveValue'
2-
import {isResponsiveValue} from '../hooks/useResponsiveValue'
3-
import type {BetterSystemStyleObject} from '../sx'
4-
import type {Properties as CSSProperties} from 'csstype'
5-
import {mediaQueries} from './layout'
62

73
export function areAllValuesTheSame(responsiveValue: ResponsiveValue<boolean | number | string>): boolean {
84
if ('narrow' in responsiveValue && 'regular' in responsiveValue && 'wide' in responsiveValue) {
@@ -17,147 +13,3 @@ export function haveRegularAndWideSameValue(responsiveValue: ResponsiveValue<boo
1713
}
1814
return false
1915
}
20-
21-
/**
22-
* This function is inspired by the `useResponsiveValue` hook and it's used to render responsive values with CSS.
23-
* @param value - The value that needs to be rendered responsively
24-
* @param cssProperty - The CSS property whoes value needs to be rendered responsively
25-
* @param mapFn - A function that maps the given value to a CSS value
26-
*
27-
* If the value is responsive, it will only return the given viewports' breakpoints as CSS rules
28-
* with the given CSS property and their mapped value. For viewports that are not specified,
29-
* we need to provide a fallback CSS declaration in the component's sx prop along with the styles
30-
* that will return from this function.
31-
*
32-
* @example
33-
* getBreakpointDeclarations({narrow: true, regular: true, wide: false}, 'display', value => {
34-
return value ? 'none' : 'flex'
35-
})
36-
* @returns
37-
* {
38-
* "@media screen and (max-width: 768px)": {
39-
* "display": "none"
40-
* },
41-
* "@media screen and (min-width: 768px)": {
42-
* "display": "none"
43-
* },
44-
* "@media screen and (min-width: 1440px)": {
45-
* "display": "flex"
46-
* }
47-
* }
48-
*
49-
* * @example
50-
* getBreakpointDeclarations({regular: 'border.default', wide: 'canvas.inset'}, 'backgroundColor', (value): string => {
51-
return value
52-
})
53-
* @returns
54-
* {
55-
* "@media screen and (min-width: 768px)": {
56-
* "backgroundColor": "border.default"
57-
* },
58-
* "@media screen and (min-width: 1440px)": {
59-
* "backgroundColor": "canvas.inset"
60-
* }
61-
* }
62-
*
63-
* * @example
64-
* getBreakpointDeclarations({narrow: 'filled', regular: 'line'}, 'height', (value): string => {
65-
return {
66-
filled: 8,
67-
line: 1,
68-
}[value]
69-
})
70-
* @returns
71-
* {
72-
* "@media screen and (max-width: 768px)": {
73-
* "height": 8
74-
* }
75-
* "@media screen and (min-width: 768px)": {
76-
* "height": 1
77-
* },
78-
* }
79-
*
80-
* If multiple CSS properties need to be rendered responsively in the same CSS rule, this function
81-
* can be called multiple times but make sure to deep merge the CSS declaration objects returned from this function.
82-
*
83-
* * @example
84-
* const mediaQueryStyles = merge<BetterSystemStyleObject>(
85-
getBreakpointDeclarations(hidden, 'display', value => {
86-
return value ? 'none' : 'flex'
87-
}),
88-
getBreakpointDeclarations(
89-
{
90-
narrow: 'none',
91-
regular: 'line',
92-
wide: 'filled',
93-
},
94-
'backgroundColor',
95-
(value): string => {
96-
return {
97-
none: 'pink',
98-
line: 'salmon',
99-
filled: 'blue',
100-
}[value]
101-
},
102-
),
103-
)
104-
*/
105-
export function getBreakpointDeclarations<TInput, TOutput>(
106-
value: TInput | ResponsiveValue<TInput>,
107-
cssProperty: keyof CSSProperties,
108-
mapFn: (value: TInput) => TOutput,
109-
): BetterSystemStyleObject {
110-
if (isResponsiveValue(value)) {
111-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
112-
const responsiveValue = value as Extract<TInput, ResponsiveValue<any>>
113-
114-
// Build media queries with the giving cssProperty and mapFn
115-
const narrowMediaQuery =
116-
'narrow' in responsiveValue
117-
? {
118-
[mediaQueries.narrow]: {
119-
[cssProperty]: mapFn(responsiveValue.narrow),
120-
},
121-
}
122-
: {}
123-
124-
const regularMediaQuery =
125-
'regular' in responsiveValue
126-
? {
127-
[mediaQueries.regular]: {
128-
[cssProperty]: mapFn(responsiveValue.regular),
129-
},
130-
}
131-
: {}
132-
133-
const wideMediaQuery =
134-
'wide' in responsiveValue
135-
? {
136-
[mediaQueries.wide]: {
137-
[cssProperty]: mapFn(responsiveValue.wide),
138-
},
139-
}
140-
: {}
141-
142-
// check if all values are the same - this is not a recommended practise but we still should check for it
143-
if (areAllValuesTheSame(responsiveValue)) {
144-
// if all the values are the same, we can just use one of the value to determine the CSS property's value
145-
return {[cssProperty]: mapFn(responsiveValue.narrow)}
146-
// check if regular and wide have the same value, if so we can just return the narrow and regular media queries
147-
} else if (haveRegularAndWideSameValue(responsiveValue)) {
148-
return {
149-
...narrowMediaQuery,
150-
...regularMediaQuery,
151-
}
152-
} else {
153-
return {
154-
...narrowMediaQuery,
155-
...regularMediaQuery,
156-
...wideMediaQuery,
157-
}
158-
}
159-
} else {
160-
// If the given value is not a responsive value
161-
return {[cssProperty]: mapFn(value)}
162-
}
163-
}

‎packages/react/src/utils/layout.ts

Lines changed: 0 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -21,18 +21,3 @@ export const PrimerBreakpoints = {
2121
width: '1400px',
2222
},
2323
}
24-
25-
export function breakpointHigher(width: string): string {
26-
return `@media screen and (min-width: ${width})`
27-
}
28-
29-
export function breakpointLower(width: string): string {
30-
return `@media screen and (max-width: calc(${width} - 0.02px))`
31-
}
32-
33-
// Media queries associated with Primer viewport ranges.
34-
export const mediaQueries = {
35-
narrow: breakpointLower(PrimerBreakpoints.medium.width), // @media screen and (max-width: 768px - 0.02px) // < 768px (max-with is inclusive)
36-
regular: breakpointHigher(PrimerBreakpoints.medium.width), // @media screen and (min-width: 768) // >= 768px
37-
wide: breakpointHigher(PrimerBreakpoints.xxlarge.width), // (min-width: 1400px) // >= 1400px
38-
}

0 commit comments

Comments
 (0)