Skip to content

Commit 3ac1e64

Browse files
matyasfmatyasf
committed
feat(ui-grid,ui-form-field): breakpoints are set from sharedTokens
FormFieldLayout and Grid now uses design tokens from sharedTokens to set breakpoint values. Document app has fewer CSS breakpoints and their value are the same as the breakpoints in SharedTokens. update button example in regression test with more valuers INSTUI-5074
1 parent c95ab28 commit 3ac1e64

16 files changed

Lines changed: 387 additions & 423 deletions

File tree

‎docs/upgrading/upgrade-guide.md‎

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -695,7 +695,8 @@ type: embed
695695
removed={[
696696
{name:"spacing",note:""},
697697
{name:"inlinePadding",note:""},
698-
{name:"asteriskColor",note:""}
698+
{name:"asteriskColor",note:""},
699+
{name:"stackedOrInlineBreakpoint",note:"uses now sharedTokens.breakpoints.md"}
699700
]}
700701
changed={[
701702
{oldName:"color",newName:"textColor",note:""}
@@ -746,10 +747,10 @@ type: embed
746747
type: embed
747748
---
748749
<V12ChangelogTable
749-
changed={[
750-
{oldName:"mediumMin",newName:"mediumMin",note:"now only provides the value, not the full media query (e.g., '768px' instead of 'min-width: 768px'). The component now adds the `min-width:` prefix automatically in the generated styles."},
751-
{oldName:"largeMin",newName:"largeMin",note:"now only provides the value, not the full media query (e.g., '1024px' instead of 'min-width: 1024px'). The component now adds the `min-width:` prefix automatically in the generated styles."},
752-
{oldName:"xLargeMin",newName:"xLargeMin",note:"now only provides the value, not the full media query (e.g., '1440px' instead of 'min-width: 1440px'). The component now adds the `min-width:` prefix automatically in the generated styles."}
750+
removed={[
751+
{name:"mediumMin",note:"value is read from sharedTokens.breakpoints.md"},
752+
{name:"largeMin",note:"value is read from sharedTokens.breakpoints.lg. Its value is now 64em instead of 62em."},
753+
{name:"xLargeMin",note:"value is read from sharedTokens.breakpoints.xl. Its value is now 80em instead of 75em."}
753754
]}
754755
/>
755756

@@ -762,10 +763,10 @@ type: embed
762763
type: embed
763764
---
764765
<V12ChangelogTable
765-
changed={[
766-
{oldName:"mediumMin",newName:"mediumMin",note:"now only provides the value, not the full media query (e.g., '768px' instead of 'min-width: 768px'). The component now adds the `min-width:` prefix automatically in the generated styles."},
767-
{oldName:"largeMin",newName:"largeMin",note:"now only provides the value, not the full media query (e.g., '1024px' instead of 'min-width: 1024px'). The component now adds the `min-width:` prefix automatically in the generated styles."},
768-
{oldName:"xLargeMin",newName:"xLargeMin",note:"now only provides the value, not the full media query (e.g., '1440px' instead of 'min-width: 1440px'). The component now adds the `min-width:` prefix automatically in the generated styles."}
766+
removed={[
767+
{name:"mediumMin",note:"value is read from sharedTokens.breakpoints.md"},
768+
{name:"largeMin",note:"value is read from sharedTokens.breakpoints.lg"},
769+
{name:"xLargeMin",note:"value is read from sharedTokens.breakpoints.xl"}
769770
]}
770771
/>
771772

@@ -778,10 +779,10 @@ type: embed
778779
type: embed
779780
---
780781
<V12ChangelogTable
781-
changed={[
782-
{oldName:"mediumMin",newName:"mediumMin",note:"now only provides the value, not the full media query (e.g., '768px' instead of 'min-width: 768px'). The component now adds the `min-width:` prefix automatically in the generated styles."},
783-
{oldName:"largeMin",newName:"largeMin",note:"now only provides the value, not the full media query (e.g., '1024px' instead of 'min-width: 1024px'). The component now adds the `min-width:` prefix automatically in the generated styles."},
784-
{oldName:"xLargeMin",newName:"xLargeMin",note:"now only provides the value, not the full media query (e.g., '1440px' instead of 'min-width: 1440px'). The component now adds the `min-width:` prefix automatically in the generated styles."}
782+
removed={[
783+
{name:"mediumMin",note:"value is read from sharedTokens.breakpoints.md"},
784+
{name:"largeMin",note:"value is read from sharedTokens.breakpoints.lg"},
785+
{name:"xLargeMin",note:"value is read from sharedTokens.breakpoints.xl"}
785786
]}
786787
/>
787788

‎packages/__docs__/src/App/index.tsx‎

Lines changed: 8 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,6 @@ import { LoadingScreen } from '../LoadingScreen'
8282
import { getComponentsForVersion } from '../../versioned-components'
8383
import { updateGlobalsForVersion } from '../../globals'
8484
import type { AppProps, AppState, DocData, LayoutSize } from './props'
85-
import { allowedProps } from './props'
8685
import type { ParsedDocSummary } from '../../buildScripts/DataTypes.mjs'
8786
import { logError } from '@instructure/console'
8887
import type { Spacing } from '@instructure/emotion'
@@ -97,16 +96,12 @@ import { AppContext } from '../appContext'
9796
@withStyleForDocs(generateStyle, generateComponentTheme)
9897
class App extends Component<AppProps, AppState> {
9998
static displayName = 'App'
100-
static allowedProps = allowedProps
10199
static contextType = AppContext
102100
declare context: React.ContextType<typeof AppContext>
103101

104102
private navRef = createRef<HTMLElement>()
105103
private navFocusRegion: FocusRegion | null = null
106104

107-
static defaultProps = {
108-
trayWidth: 300
109-
}
110105
_content?: HTMLDivElement | null
111106
_menuTrigger?: HTMLButtonElement
112107
_mediaQueryListener?: ReturnType<typeof addMediaQueryMatchListener>
@@ -119,18 +114,10 @@ class App extends Component<AppProps, AppState> {
119114

120115
constructor(props: AppProps) {
121116
super(props)
122-
// determine what page we're loading
123-
const [page] = this.getPathInfo()
124-
125-
// if there's room for the tray + 700px, load with the tray open (unless it's the homepage)
126-
const smallerScreen = window.matchMedia(
127-
`(max-width: ${props.trayWidth + 700}px)`
128-
).matches
129-
const isHomepage = page === 'index' || typeof page === 'undefined'
130-
const showTrayOnPageLoad = !smallerScreen && !isHomepage
131-
117+
// Only show the Tray on larger screens
118+
const smallerScreen = window.matchMedia(`(max-width: 1024px)`).matches
132119
this.state = {
133-
showMenu: showTrayOnPageLoad,
120+
showMenu: !smallerScreen,
134121
themeKey: undefined,
135122
layout: 'large',
136123
docsData: null,
@@ -269,11 +256,11 @@ class App extends Component<AppProps, AppState> {
269256

270257
// TODO: Replace with the Responsive component later
271258
// Using this method directly for now instead to avoid a call to findDOMNode
259+
// em values match the ones in SharedTokens.breakpoints
272260
this._mediaQueryListener = addMediaQueryMatchListener(
273261
{
274-
medium: { minWidth: 700 },
275-
large: { minWidth: 1100 },
276-
'x-large': { minWidth: 1300 }
262+
medium: { minWidth: '48em' }, // 768px usually
263+
large: { minWidth: '64em' } // 1024px
277264
},
278265
this._content!,
279266
this.updateLayout
@@ -326,13 +313,6 @@ class App extends Component<AppProps, AppState> {
326313
)
327314
})
328315
.catch(errorHandler)
329-
330-
const [page] = this.getPathInfo()
331-
const isHomepage = page === 'index' || typeof page === 'undefined'
332-
if (isHomepage) {
333-
this.setState({ showMenu: false })
334-
}
335-
336316
document.addEventListener('focusin', this.handleFocusChange)
337317
}
338318

@@ -471,8 +451,6 @@ class App extends Component<AppProps, AppState> {
471451
layout = 'medium'
472452
} else if (matches.includes('large') && matches.length === 2) {
473453
layout = 'large'
474-
} else if (matches.includes('x-large')) {
475-
layout = 'x-large'
476454
}
477455
}
478456
this.setState({ layout })
@@ -520,17 +498,9 @@ class App extends Component<AppProps, AppState> {
520498
})
521499
}
522500

523-
handleShowTrayOnURLChange = (key: string | undefined, showMenu: boolean) => {
524-
const userIsComingFromHomepage =
525-
key === 'index' || typeof key === 'undefined'
526-
527-
const { layout } = this.state
528-
529-
// if the user is coming from the homepage, make the tray show if the layout is large enough
530-
if (layout === 'small') {
501+
handleShowTrayOnURLChange = (_key: string | undefined, showMenu: boolean) => {
502+
if (this.state.layout === 'small') {
531503
return false
532-
} else if (userIsComingFromHomepage) {
533-
return true
534504
} else {
535505
return showMenu
536506
}

‎packages/__docs__/src/App/props.ts‎

Lines changed: 2 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -33,15 +33,7 @@ import type { DocDataType } from '../Document/props'
3333
import type { Theme } from '@instructure/ui-themes'
3434
import type { ThemeVariables } from '@instructure/shared-types'
3535

36-
type AppOwnProps = {
37-
trayWidth: number
38-
}
39-
40-
type PropKeys = keyof AppOwnProps
41-
type AllowedPropKeys = Readonly<Array<PropKeys>>
42-
type AppProps = AppOwnProps & WithStyleProps<AppTheme, AppStyle>
43-
44-
const allowedProps: AllowedPropKeys = ['trayWidth']
36+
type AppProps = WithStyleProps<AppTheme, AppStyle>
4537

4638
type AppStyle = ComponentStyle<
4739
| 'app'
@@ -73,7 +65,7 @@ type AppTheme = {
7365
navBorderWidth: string | 0
7466
}
7567

76-
type LayoutSize = 'small' | 'medium' | 'large' | 'x-large'
68+
type LayoutSize = 'small' | 'medium' | 'large'
7769

7870
type AppState = {
7971
themeKey?: string
@@ -112,4 +104,3 @@ type DocData = ProcessedFile & {
112104
}
113105

114106
export type { AppProps, AppState, DocData, LayoutSize, AppStyle, AppTheme }
115-
export { allowedProps }

‎packages/__docs__/src/App/styles.ts‎

Lines changed: 1 addition & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -94,17 +94,7 @@ const generateStyle = (componentTheme: AppTheme): AppStyle => {
9494
globalStyles: {
9595
html: {
9696
height: '100%',
97-
fontSize: '85%'
98-
},
99-
'@media screen and (min-width: 600px)': {
100-
html: {
101-
fontSize: '92%'
102-
}
103-
},
104-
'@media screen and (min-width: 900px)': {
105-
html: {
106-
fontSize: '100%'
107-
}
97+
fontSize: '100%'
10898
},
10999
body: {
110100
height: '100%',

‎packages/__docs__/src/ContentWrap/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ class ContentWrap extends Component<ContentWrapProps> {
3333
static allowedProps = allowedProps
3434
static defaultProps = {
3535
children: null,
36-
maxWidth: '64rem',
36+
maxWidth: '80rem',
3737
padding: 'none medium'
3838
}
3939

‎packages/__docs__/src/Document/props.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424

2525
import { ComponentStyle, WithStyleProps } from '@instructure/emotion'
2626
import type { ThemeVariables } from '@instructure/shared-types'
27-
import { DocData } from '../App/props'
27+
import type { DocData, LayoutSize } from '../App/props'
2828
import type { Theme, NewBaseTheme } from '@instructure/ui-themes'
2929

3030
type DocDataType = DocData & { legacyGitBranch?: string }
@@ -34,7 +34,7 @@ type DocumentOwnProps = {
3434
description: string
3535
themeVariables?: Theme
3636
repository?: string
37-
layout?: 'small' | 'medium' | 'large' | 'x-large'
37+
layout?: LayoutSize
3838
selectedMinorVersion?: string
3939
}
4040

‎packages/__docs__/src/Hero/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -177,7 +177,7 @@ class Hero extends Component<HeroProps> {
177177
</InlineSVG>
178178
)
179179

180-
const bigScreen = layout === 'large' || layout === 'x-large'
180+
const bigScreen = layout === 'large'
181181
const contentMaxWidth = '84rem'
182182
const checkmark = <IconCheckMarkSolid inline={false} color="success" />
183183

‎packages/__docs__/src/Hero/props.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,11 +23,12 @@
2323
*/
2424
import type { ComponentStyle, WithStyleProps } from '@instructure/emotion'
2525
import type { ParsedDocSummary } from '../../buildScripts/DataTypes.mjs'
26+
import type { LayoutSize } from '../App/props'
2627

2728
type HeroOwnProps = {
2829
repository: string
2930
version: string
30-
layout: 'small' | 'medium' | 'large' | 'x-large'
31+
layout: LayoutSize
3132
docs: ParsedDocSummary
3233
}
3334

‎packages/__docs__/src/Params/props.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,11 +22,12 @@
2222
* SOFTWARE.
2323
*/
2424
import type { DocDataType } from '../Document/props'
25+
import type { LayoutSize } from '../App/props'
2526

2627
type ParamsOwnProp = {
2728
params: DocDataType['params']
2829
genericParameters: DocDataType['genericParameters']
29-
layout?: 'small' | 'medium' | 'large' | 'x-large'
30+
layout?: LayoutSize
3031
}
3132
type PropKeys = keyof ParamsOwnProp
3233
type AllowedPropKeys = Readonly<Array<PropKeys>>

‎packages/ui-form-field/src/FormFieldLayout/v2/styles.ts‎

Lines changed: 16 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -127,10 +127,9 @@ const generateStyle = (
127127
// when inline add a small padding between the label and the control
128128
paddingRight: componentTheme.gapPrimitives,
129129
// and use the horizontal alignment prop
130-
[`@media screen and (width >= ${componentTheme.stackedOrInlineBreakpoint})`]:
131-
{
132-
textAlign: labelAlign
133-
}
130+
[`@media screen and (width >= ${sharedTokens.breakpoints.md})`]: {
131+
textAlign: labelAlign
132+
}
134133
})
135134
}
136135

@@ -158,17 +157,16 @@ const generateStyle = (
158157
verticalAlign: 'middle', // removes margin in inline layouts
159158
gridTemplateColumns: gridTemplateColumns,
160159
gridTemplateAreas: gridTemplateAreas,
161-
[`@media screen and (width < ${componentTheme.stackedOrInlineBreakpoint})`]:
162-
{
163-
// for small screens use the stacked layout
164-
gridTemplateColumns: '100%',
165-
gridTemplateAreas: generateGridLayout(
166-
false,
167-
hasErrorMsgAndIsGroup,
168-
hasVisibleLabel,
169-
hasMessages
170-
)
171-
},
160+
[`@media screen and (width < ${sharedTokens.breakpoints.md})`]: {
161+
// for small screens use the stacked layout
162+
gridTemplateColumns: '100%',
163+
gridTemplateAreas: generateGridLayout(
164+
false,
165+
hasErrorMsgAndIsGroup,
166+
hasVisibleLabel,
167+
hasMessages
168+
)
169+
},
172170
columnGap: '0.375rem',
173171
rowGap: hasNonEmptyMessages ? componentTheme.gapPrimitives : '0',
174172
width: '100%',
@@ -193,10 +191,9 @@ const generateStyle = (
193191
...(hasMessages && hasErrorMsgAndIsGroup && { marginTop: '0.375rem' }),
194192
...(isInlineLayout &&
195193
inline && {
196-
[`@media screen and (width >= ${componentTheme.stackedOrInlineBreakpoint})`]:
197-
{
198-
justifySelf: 'start'
199-
}
194+
[`@media screen and (width >= ${sharedTokens.breakpoints.md})`]: {
195+
justifySelf: 'start'
196+
}
200197
})
201198
},
202199
requiredAsterisk: {

0 commit comments

Comments
 (0)