Breakpoints are set from sharedTokens

docs/upgrading/upgrade-guide.md

@@ -696,6 +696,7 @@ type: embed
     {name:"spacing",note:""},
     {name:"inlinePadding",note:""},
     {name:"asteriskColor",note:""}
+    {name:"stackedOrInlineBreakpoint",note:"uses now sharedTokens.breakpoints.md"}
   ]}
   changed={[
     {oldName:"color",newName:"textColor",note:""}
@@ -746,10 +747,10 @@ type: embed
 type: embed
 ---
 <V12ChangelogTable
-  changed={[
-    {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."},
-    {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."},
-    {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."}
+  removed={[
+    {name:"mediumMin",note:"value is read from sharedTokens.breakpoints.md"},
+    {name:"largeMin",note:"value is read from sharedTokens.breakpoints.lg"},
+    {name:"xLargeMin",note:"value is read from sharedTokens.breakpoints.xl"}
   ]}
 />
 
@@ -762,10 +763,10 @@ type: embed
 type: embed
 ---
 <V12ChangelogTable
-  changed={[
-    {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."},
-    {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."},
-    {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."}
+  removed={[
+    {name:"mediumMin",note:"value is read from sharedTokens.breakpoints.md"},
+    {name:"largeMin",note:"value is read from sharedTokens.breakpoints.lg"},
+    {name:"xLargeMin",note:"value is read from sharedTokens.breakpoints.xl"}
   ]}
 />
 
@@ -778,10 +779,10 @@ type: embed
 type: embed
 ---
 <V12ChangelogTable
-  changed={[
-    {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."},
-    {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."},
-    {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."}
+  removed={[
+    {name:"mediumMin",note:"value is read from sharedTokens.breakpoints.md"},
+    {name:"largeMin",note:"value is read from sharedTokens.breakpoints.lg"},
+    {name:"xLargeMin",note:"value is read from sharedTokens.breakpoints.xl"}
   ]}
 />
 

packages/__docs__/src/App/index.tsx

@@ -82,7 +82,6 @@ import { LoadingScreen } from '../LoadingScreen'
 import { getComponentsForVersion } from '../../versioned-components'
 import { updateGlobalsForVersion } from '../../globals'
 import type { AppProps, AppState, DocData, LayoutSize } from './props'
-import { allowedProps } from './props'
 import type { ParsedDocSummary } from '../../buildScripts/DataTypes.mjs'
 import { logError } from '@instructure/console'
 import type { Spacing } from '@instructure/emotion'
@@ -97,16 +96,12 @@ import { AppContext } from '../appContext'
 @withStyleForDocs(generateStyle, generateComponentTheme)
 class App extends Component<AppProps, AppState> {
   static displayName = 'App'
-  static allowedProps = allowedProps
   static contextType = AppContext
   declare context: React.ContextType<typeof AppContext>
 
   private navRef = createRef<HTMLElement>()
   private navFocusRegion: FocusRegion | null = null
 
-  static defaultProps = {
-    trayWidth: 300
-  }
   _content?: HTMLDivElement | null
   _menuTrigger?: HTMLButtonElement
   _mediaQueryListener?: ReturnType<typeof addMediaQueryMatchListener>
@@ -122,10 +117,8 @@ class App extends Component<AppProps, AppState> {
     // determine what page we're loading
     const [page] = this.getPathInfo()
 
-    // if there's room for the tray + 700px, load with the tray open (unless it's the homepage)
-    const smallerScreen = window.matchMedia(
-      `(max-width: ${props.trayWidth + 700}px)`
-    ).matches
+    // if there's room for the tray + 724px, load with the tray open (unless it's the homepage)
+    const smallerScreen = window.matchMedia(`(max-width: 1024px)`).matches
     const isHomepage = page === 'index' || typeof page === 'undefined'
     const showTrayOnPageLoad = !smallerScreen && !isHomepage
 
@@ -269,11 +262,11 @@ class App extends Component<AppProps, AppState> {
 
     // TODO: Replace with the Responsive component later
     // Using this method directly for now instead to avoid a call to findDOMNode
+    // em values match the ones in SharedTokens.breakpoints
     this._mediaQueryListener = addMediaQueryMatchListener(
       {
-        medium: { minWidth: 700 },
-        large: { minWidth: 1100 },
-        'x-large': { minWidth: 1300 }
+        medium: { minWidth: '48em' }, // 768px usually
+        large: { minWidth: '64em' } // 1024px
       },
       this._content!,
       this.updateLayout
@@ -471,8 +464,6 @@ class App extends Component<AppProps, AppState> {
         layout = 'medium'
       } else if (matches.includes('large') && matches.length === 2) {
         layout = 'large'
-      } else if (matches.includes('x-large')) {
-        layout = 'x-large'
       }
     }
     this.setState({ layout })

packages/__docs__/src/App/props.ts

@@ -33,15 +33,7 @@ import type { DocDataType } from '../Document/props'
 import type { Theme } from '@instructure/ui-themes'
 import type { ThemeVariables } from '@instructure/shared-types'
 
-type AppOwnProps = {
-  trayWidth: number
-}
-
-type PropKeys = keyof AppOwnProps
-type AllowedPropKeys = Readonly<Array<PropKeys>>
-type AppProps = AppOwnProps & WithStyleProps<AppTheme, AppStyle>
-
-const allowedProps: AllowedPropKeys = ['trayWidth']
+type AppProps = WithStyleProps<AppTheme, AppStyle>
 
 type AppStyle = ComponentStyle<
   | 'app'
@@ -73,7 +65,7 @@ type AppTheme = {
   navBorderWidth: string | 0
 }
 
-type LayoutSize = 'small' | 'medium' | 'large' | 'x-large'
+type LayoutSize = 'small' | 'medium' | 'large'
 
 type AppState = {
   themeKey?: string
@@ -112,4 +104,3 @@ type DocData = ProcessedFile & {
 }
 
 export type { AppProps, AppState, DocData, LayoutSize, AppStyle, AppTheme }
-export { allowedProps }

packages/__docs__/src/App/styles.ts

@@ -94,17 +94,7 @@ const generateStyle = (componentTheme: AppTheme): AppStyle => {
     globalStyles: {
       html: {
         height: '100%',
-        fontSize: '85%'
-      },
-      '@media screen and (min-width: 600px)': {
-        html: {
-          fontSize: '92%'
-        }
-      },
-      '@media screen and (min-width: 900px)': {
-        html: {
-          fontSize: '100%'
-        }
+        fontSize: '100%'
       },
       body: {
         height: '100%',

packages/__docs__/src/ContentWrap/index.tsx

@@ -33,7 +33,7 @@ class ContentWrap extends Component<ContentWrapProps> {
   static allowedProps = allowedProps
   static defaultProps = {
     children: null,
-    maxWidth: '64rem',
+    maxWidth: '80rem',
     padding: 'none medium'
   }
 

packages/__docs__/src/Document/props.ts

@@ -24,7 +24,7 @@
 
 import { ComponentStyle, WithStyleProps } from '@instructure/emotion'
 import type { ThemeVariables } from '@instructure/shared-types'
-import { DocData } from '../App/props'
+import type { DocData, LayoutSize } from '../App/props'
 import type { Theme, NewBaseTheme } from '@instructure/ui-themes'
 
 type DocDataType = DocData & { legacyGitBranch?: string }
@@ -34,7 +34,7 @@ type DocumentOwnProps = {
   description: string
   themeVariables?: Theme
   repository?: string
-  layout?: 'small' | 'medium' | 'large' | 'x-large'
+  layout?: LayoutSize
   selectedMinorVersion?: string
 }
 

packages/__docs__/src/Hero/index.tsx

@@ -177,7 +177,7 @@ class Hero extends Component<HeroProps> {
       </InlineSVG>
     )
 
-    const bigScreen = layout === 'large' || layout === 'x-large'
+    const bigScreen = layout === 'large'
     const contentMaxWidth = '84rem'
     const checkmark = <IconCheckMarkSolid inline={false} color="success" />
 

packages/__docs__/src/Hero/props.ts

@@ -23,11 +23,12 @@
  */
 import type { ComponentStyle, WithStyleProps } from '@instructure/emotion'
 import type { ParsedDocSummary } from '../../buildScripts/DataTypes.mjs'
+import type { LayoutSize } from '../App/props'
 
 type HeroOwnProps = {
   repository: string
   version: string
-  layout: 'small' | 'medium' | 'large' | 'x-large'
+  layout: LayoutSize
   docs: ParsedDocSummary
 }
 

packages/__docs__/src/Params/props.ts

@@ -22,11 +22,12 @@
  * SOFTWARE.
  */
 import type { DocDataType } from '../Document/props'
+import type { LayoutSize } from '../App/props'
 
 type ParamsOwnProp = {
   params: DocDataType['params']
   genericParameters: DocDataType['genericParameters']
-  layout?: 'small' | 'medium' | 'large' | 'x-large'
+  layout?: LayoutSize
 }
 type PropKeys = keyof ParamsOwnProp
 type AllowedPropKeys = Readonly<Array<PropKeys>>

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

@@ -127,10 +127,9 @@ const generateStyle = (
       // when inline add a small padding between the label and the control
       paddingRight: componentTheme.gapPrimitives,
       // and use the horizontal alignment prop
-      [`@media screen and (width >= ${componentTheme.stackedOrInlineBreakpoint})`]:
-        {
-          textAlign: labelAlign
-        }
+      [`@media screen and (width >= ${sharedTokens.breakpoints.md})`]: {
+        textAlign: labelAlign
+      }
     })
   }
 
@@ -158,17 +157,16 @@ const generateStyle = (
       verticalAlign: 'middle', // removes margin in inline layouts
       gridTemplateColumns: gridTemplateColumns,
       gridTemplateAreas: gridTemplateAreas,
-      [`@media screen and (width < ${componentTheme.stackedOrInlineBreakpoint})`]:
-        {
-          // for small screens use the stacked layout
-          gridTemplateColumns: '100%',
-          gridTemplateAreas: generateGridLayout(
-            false,
-            hasErrorMsgAndIsGroup,
-            hasVisibleLabel,
-            hasMessages
-          )
-        },
+      [`@media screen and (width < ${sharedTokens.breakpoints.md})`]: {
+        // for small screens use the stacked layout
+        gridTemplateColumns: '100%',
+        gridTemplateAreas: generateGridLayout(
+          false,
+          hasErrorMsgAndIsGroup,
+          hasVisibleLabel,
+          hasMessages
+        )
+      },
       columnGap: '0.375rem',
       rowGap: hasNonEmptyMessages ? componentTheme.gapPrimitives : '0',
       width: '100%',
@@ -193,10 +191,9 @@ const generateStyle = (
       ...(hasMessages && hasErrorMsgAndIsGroup && { marginTop: '0.375rem' }),
       ...(isInlineLayout &&
         inline && {
-          [`@media screen and (width >= ${componentTheme.stackedOrInlineBreakpoint})`]:
-            {
-              justifySelf: 'start'
-            }
+          [`@media screen and (width >= ${sharedTokens.breakpoints.md})`]: {
+            justifySelf: 'start'
+          }
         })
     },
     requiredAsterisk: {

packages/ui-grid/src/Grid/v2/styles.ts

@@ -22,7 +22,7 @@
  * SOFTWARE.
  */
 
-import type { NewComponentTypes } from '@instructure/ui-themes'
+import type { SharedTokens } from '@instructure/ui-themes'
 import type { GridBreakpoints } from '../../utils/v1/GridTypes'
 import type { GridProps, GridStyle } from './props'
 
@@ -31,14 +31,15 @@ import type { GridProps, GridStyle } from './props'
  * private: true
  * ---
  * Generates the style object from the theme and provided additional information
- * @param  {Object} componentTheme The theme variable object.
- * @param  {Object} props the props of the component, the style is applied to
- * @param  {Object} state the state of the component, the style is applied to
- * @return {Object} The final style object, which will be used in the component
+ * @param _componentTheme unused.
+ * @param props the props of the component, the style is applied to
+ * @param sharedTokens Shared token object that stores common values for the theme.
+ * @return The final style object, which will be used in the component
  */
 const generateStyle = (
-  componentTheme: ReturnType<NewComponentTypes['Grid']>,
-  props: GridProps
+  _componentTheme: never,
+  props: GridProps,
+  sharedTokens: SharedTokens
 ): GridStyle => {
   const { startAt, visualDebug } = props
 
@@ -52,13 +53,13 @@ const generateStyle = (
 
       ...getStartAtVariants('small'),
 
-      [`@media screen and (min-width: ${componentTheme.mediumMin})`]: {
+      [`@media screen and (min-width: ${sharedTokens.breakpoints.md})`]: {
         ...getStartAtVariants('medium')
       },
-      [`@media screen and (min-width: ${componentTheme.largeMin})`]: {
+      [`@media screen and (min-width: ${sharedTokens.breakpoints.lg})`]: {
         ...getStartAtVariants('large')
       },
-      [`@media screen and (min-width: ${componentTheme.xLargeMin})`]: {
+      [`@media screen and (min-width: ${sharedTokens.breakpoints.xl})`]: {
         ...getStartAtVariants('x-large')
       },
 

packages/ui-grid/src/GridCol/v2/styles.ts

@@ -22,7 +22,7 @@
  * SOFTWARE.
  */
 
-import type { NewComponentTypes } from '@instructure/ui-themes'
+import type { NewComponentTypes, SharedTokens } from '@instructure/ui-themes'
 import type { GridBreakpoints } from '../../utils/v1/GridTypes'
 import type { GridColProps, GridColStyle } from './props'
 
@@ -33,14 +33,15 @@ type BreakPoints = NonNullable<GridBreakpoints>
  * private: true
  * ---
  * Generates the style object from the theme and provided additional information
- * @param  {Object} componentTheme The theme variable object.
- * @param  {Object} props the props of the component, the style is applied to
- * @param  {Object} state the state of the component, the style is applied to
- * @return {Object} The final style object, which will be used in the component
+ * @param componentTheme The theme variable object.
+ * @param props the props of the component, the style is applied to
+ * @param sharedTokens Shared token object that stores common values for the theme.
+ * @return The final style object, which will be used in the component
  */
 const generateStyle = (
   componentTheme: ReturnType<NewComponentTypes['GridCol']>,
-  props: GridColProps
+  props: GridColProps,
+  sharedTokens: SharedTokens
 ): GridColStyle => {
   const {
     vAlign,
@@ -203,13 +204,13 @@ const generateStyle = (
 
       ...getBreakpointStyles('small'),
 
-      [`@media screen and (min-width: ${componentTheme.mediumMin})`]: {
+      [`@media screen and (min-width: ${sharedTokens.breakpoints.md})`]: {
         ...getBreakpointStyles('medium')
       },
-      [`@media screen and (min-width: ${componentTheme.largeMin})`]: {
+      [`@media screen and (min-width: ${sharedTokens.breakpoints.lg})`]: {
         ...getBreakpointStyles('large')
       },
-      [`@media screen and (min-width: ${componentTheme.xLargeMin})`]: {
+      [`@media screen and (min-width: ${sharedTokens.breakpoints.xl})`]: {
         ...getBreakpointStyles('x-large')
       },