@instructure/ui-grid 11.7.4-snapshot-52 → 11.7.4-snapshot-80

package/CHANGELOG.md

@@ -3,9 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [11.7.4-snapshot-52](https://github.com/instructure/instructure-ui/compare/v11.7.3...v11.7.4-snapshot-52) (2026-06-19)
+## [11.7.4-snapshot-80](https://github.com/instructure/instructure-ui/compare/v11.7.3...v11.7.4-snapshot-80) (2026-07-07)
 
-**Note:** Version bump only for package @instructure/ui-grid
+
+### Bug Fixes
+
+* **ui-grid:** drop removed Grid component type from v2 props ([d7510c8](https://github.com/instructure/instructure-ui/commit/d7510c819471f3bb0c783250234273412b38e8de))
+
+
+### Features
+
+* **ui-grid,ui-form-field:** breakpoints are set from sharedTokens ([3ac1e64](https://github.com/instructure/instructure-ui/commit/3ac1e64e00c5cb29c342879fd596b34f1b1fbb35))
 
 
 

package/es/Grid/v2/styles.js

@@ -27,12 +27,12 @@
  * 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, props) => {
+const generateStyle = (_componentTheme, props, sharedTokens) => {
   const {
     startAt,
     visualDebug
@@ -45,13 +45,13 @@ const generateStyle = (componentTheme, props) => {
       label: 'grid',
       display: 'block',
       ...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')
       },
       ...(visualDebug && {

package/es/GridCol/v2/styles.js

@@ -27,12 +27,12 @@
  * 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, props) => {
+const generateStyle = (componentTheme, props, sharedTokens) => {
   const {
     vAlign,
     textAlign,
@@ -199,13 +199,13 @@ const generateStyle = (componentTheme, props) => {
         marginBottom: 0
       }),
       ...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')
       },
       ...(visualDebug && {

package/es/GridRow/v2/styles.js

@@ -27,12 +27,12 @@
  * 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, props) => {
+const generateStyle = (componentTheme, props, sharedTokens) => {
   const {
     hAlign,
     vAlign,
@@ -121,13 +121,13 @@ const generateStyle = (componentTheme, props) => {
       display: 'block',
       boxSizing: 'border-box',
       ...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')
       },
       ...(visualDebug && {

package/lib/Grid/v2/styles.js

@@ -33,12 +33,12 @@ exports.default = void 0;
  * 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, props) => {
+const generateStyle = (_componentTheme, props, sharedTokens) => {
   const {
     startAt,
     visualDebug
@@ -51,13 +51,13 @@ const generateStyle = (componentTheme, props) => {
       label: 'grid',
       display: 'block',
       ...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')
       },
       ...(visualDebug && {

package/lib/GridCol/v2/styles.js

@@ -33,12 +33,12 @@ exports.default = void 0;
  * 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, props) => {
+const generateStyle = (componentTheme, props, sharedTokens) => {
   const {
     vAlign,
     textAlign,
@@ -205,13 +205,13 @@ const generateStyle = (componentTheme, props) => {
         marginBottom: 0
       }),
       ...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')
       },
       ...(visualDebug && {

package/lib/GridRow/v2/styles.js

@@ -33,12 +33,12 @@ exports.default = void 0;
  * 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, props) => {
+const generateStyle = (componentTheme, props, sharedTokens) => {
   const {
     hAlign,
     vAlign,
@@ -127,13 +127,13 @@ const generateStyle = (componentTheme, props) => {
       display: 'block',
       boxSizing: 'border-box',
       ...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')
       },
       ...(visualDebug && {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-grid",
-  "version": "11.7.4-snapshot-52",
+  "version": "11.7.4-snapshot-80",
   "description": "A Grid component.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -14,21 +14,21 @@
   "bugs": "https://github.com/instructure/instructure-ui/issues",
   "license": "MIT",
   "dependencies": {
-    "@babel/runtime": "^7.29.2",
-    "@instructure/console": "11.7.4-snapshot-52",
-    "@instructure/ui-react-utils": "11.7.4-snapshot-52",
-    "@instructure/ui-a11y-content": "11.7.4-snapshot-52",
-    "@instructure/emotion": "11.7.4-snapshot-52",
-    "@instructure/shared-types": "11.7.4-snapshot-52",
-    "@instructure/ui-themes": "11.7.4-snapshot-52",
-    "@instructure/ui-utils": "11.7.4-snapshot-52"
+    "@babel/runtime": "^7.29.7",
+    "@instructure/console": "11.7.4-snapshot-80",
+    "@instructure/emotion": "11.7.4-snapshot-80",
+    "@instructure/shared-types": "11.7.4-snapshot-80",
+    "@instructure/ui-a11y-content": "11.7.4-snapshot-80",
+    "@instructure/ui-react-utils": "11.7.4-snapshot-80",
+    "@instructure/ui-themes": "11.7.4-snapshot-80",
+    "@instructure/ui-utils": "11.7.4-snapshot-80"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "15.0.7",
-    "vitest": "^3.2.2",
-    "@instructure/ui-babel-preset": "11.7.4-snapshot-52",
-    "@instructure/ui-color-utils": "11.7.4-snapshot-52"
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "16.3.2",
+    "vitest": "^4.1.9",
+    "@instructure/ui-babel-preset": "11.7.4-snapshot-80",
+    "@instructure/ui-color-utils": "11.7.4-snapshot-80"
   },
   "peerDependencies": {
     "react": ">=18 <=19"

package/src/Grid/v2/props.ts

@@ -24,7 +24,6 @@
 
 import type { OtherHTMLAttributes } from '@instructure/shared-types'
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
-import type { NewComponentTypes } from '@instructure/ui-themes'
 import type { GridBreakpoints } from '../../utils/v1/GridTypes'
 
 type GridOwnProps = {
@@ -45,7 +44,7 @@ type PropKeys = keyof GridOwnProps
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type GridProps = GridOwnProps &
-  WithStyleProps<ReturnType<NewComponentTypes['Grid']>, GridStyle> &
+  WithStyleProps<null, GridStyle> &
   OtherHTMLAttributes<GridOwnProps>
 
 type GridStyle = ComponentStyle<'grid'>

package/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')
       },
 

package/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')
       },
 

package/src/GridRow/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 { GridRowProps, GridRowStyle } from './props'
 
@@ -31,14 +31,15 @@ import type { GridRowProps, GridRowStyle } 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 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['GridRow']>,
-  props: GridRowProps
+  props: GridRowProps,
+  sharedTokens: SharedTokens
 ): GridRowStyle => {
   const {
     hAlign,
@@ -102,13 +103,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')
       },