@instructure/ui-form-field 11.7.4-snapshot-53 → 11.7.4-snapshot-80

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/CHANGELOG.md +2 -1
  2. package/es/FormFieldLayout/v2/styles.js +3 -3
  3. package/lib/FormFieldLayout/v2/styles.js +3 -3
  4. package/package.json +18 -18
  5. package/src/FormFieldLayout/v2/styles.ts +16 -19
  6. package/tsconfig.build.tsbuildinfo +1 -1
  7. package/types/FormFieldLayout/v2/styles.d.ts.map +1 -1
package/CHANGELOG.md CHANGED
@@ -3,7 +3,7 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
- ## [11.7.4-snapshot-53](https://github.com/instructure/instructure-ui/compare/v11.7.3...v11.7.4-snapshot-53) (2026-06-22)
6
+ ## [11.7.4-snapshot-80](https://github.com/instructure/instructure-ui/compare/v11.7.3...v11.7.4-snapshot-80) (2026-07-07)
7
7
 
8
8
 
9
9
  ### Bug Fixes
@@ -14,6 +14,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
14
14
  ### Features
15
15
 
16
16
  * **many:** remove deprecated v2 items ([eaf8876](https://github.com/instructure/instructure-ui/commit/eaf88767c9beb95c4e09ee5705c387dfd79e4cb7))
17
+ * **ui-grid,ui-form-field:** breakpoints are set from sharedTokens ([3ac1e64](https://github.com/instructure/instructure-ui/commit/3ac1e64e00c5cb29c342879fd596b34f1b1fbb35))
17
18
 
18
19
 
19
20
  ### BREAKING CHANGES
package/es/FormFieldLayout/v2/styles.js CHANGED
@@ -102,7 +102,7 @@ const generateStyle = (componentTheme, params, sharedTokens) => {
102
102
  // when inline add a small padding between the label and the control
103
103
  paddingRight: componentTheme.gapPrimitives,
104
104
  // and use the horizontal alignment prop
105
- [`@media screen and (width >= ${componentTheme.stackedOrInlineBreakpoint})`]: {
105
+ [`@media screen and (width >= ${sharedTokens.breakpoints.md})`]: {
106
106
  textAlign: labelAlign
107
107
  }
108
108
  })
@@ -132,7 +132,7 @@ const generateStyle = (componentTheme, params, sharedTokens) => {
132
132
  // removes margin in inline layouts
133
133
  gridTemplateColumns: gridTemplateColumns,
134
134
  gridTemplateAreas: gridTemplateAreas,
135
- [`@media screen and (width < ${componentTheme.stackedOrInlineBreakpoint})`]: {
135
+ [`@media screen and (width < ${sharedTokens.breakpoints.md})`]: {
136
136
  // for small screens use the stacked layout
137
137
  gridTemplateColumns: '100%',
138
138
  gridTemplateAreas: generateGridLayout(false, hasErrorMsgAndIsGroup, hasVisibleLabel, hasMessages)
@@ -161,7 +161,7 @@ const generateStyle = (componentTheme, params, sharedTokens) => {
161
161
  marginTop: '0.375rem'
162
162
  }),
163
163
  ...(isInlineLayout && inline && {
164
- [`@media screen and (width >= ${componentTheme.stackedOrInlineBreakpoint})`]: {
164
+ [`@media screen and (width >= ${sharedTokens.breakpoints.md})`]: {
165
165
  justifySelf: 'start'
166
166
  }
167
167
  })
package/lib/FormFieldLayout/v2/styles.js CHANGED
@@ -108,7 +108,7 @@ const generateStyle = (componentTheme, params, sharedTokens) => {
108
108
  // when inline add a small padding between the label and the control
109
109
  paddingRight: componentTheme.gapPrimitives,
110
110
  // and use the horizontal alignment prop
111
- [`@media screen and (width >= ${componentTheme.stackedOrInlineBreakpoint})`]: {
111
+ [`@media screen and (width >= ${sharedTokens.breakpoints.md})`]: {
112
112
  textAlign: labelAlign
113
113
  }
114
114
  })
@@ -138,7 +138,7 @@ const generateStyle = (componentTheme, params, sharedTokens) => {
138
138
  // removes margin in inline layouts
139
139
  gridTemplateColumns: gridTemplateColumns,
140
140
  gridTemplateAreas: gridTemplateAreas,
141
- [`@media screen and (width < ${componentTheme.stackedOrInlineBreakpoint})`]: {
141
+ [`@media screen and (width < ${sharedTokens.breakpoints.md})`]: {
142
142
  // for small screens use the stacked layout
143
143
  gridTemplateColumns: '100%',
144
144
  gridTemplateAreas: generateGridLayout(false, hasErrorMsgAndIsGroup, hasVisibleLabel, hasMessages)
@@ -167,7 +167,7 @@ const generateStyle = (componentTheme, params, sharedTokens) => {
167
167
  marginTop: '0.375rem'
168
168
  }),
169
169
  ...(isInlineLayout && inline && {
170
- [`@media screen and (width >= ${componentTheme.stackedOrInlineBreakpoint})`]: {
170
+ [`@media screen and (width >= ${sharedTokens.breakpoints.md})`]: {
171
171
  justifySelf: 'start'
172
172
  }
173
173
  })
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-form-field",
3
- "version": "11.7.4-snapshot-53",
3
+ "version": "11.7.4-snapshot-80",
4
4
  "description": "Form layout components.",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "module": "./es/index.js",
@@ -14,25 +14,25 @@
14
14
  "bugs": "https://github.com/instructure/instructure-ui/issues",
15
15
  "license": "MIT",
16
16
  "dependencies": {
17
- "@babel/runtime": "^7.29.2",
18
- "@instructure/console": "11.7.4-snapshot-53",
19
- "@instructure/shared-types": "11.7.4-snapshot-53",
20
- "@instructure/ui-a11y-content": "11.7.4-snapshot-53",
21
- "@instructure/emotion": "11.7.4-snapshot-53",
22
- "@instructure/ui-a11y-utils": "11.7.4-snapshot-53",
23
- "@instructure/ui-grid": "11.7.4-snapshot-53",
24
- "@instructure/ui-icons": "11.7.4-snapshot-53",
25
- "@instructure/ui-react-utils": "11.7.4-snapshot-53",
26
- "@instructure/ui-themes": "11.7.4-snapshot-53",
27
- "@instructure/ui-utils": "11.7.4-snapshot-53",
28
- "@instructure/uid": "11.7.4-snapshot-53"
17
+ "@babel/runtime": "^7.29.7",
18
+ "@instructure/console": "11.7.4-snapshot-80",
19
+ "@instructure/shared-types": "11.7.4-snapshot-80",
20
+ "@instructure/ui-a11y-content": "11.7.4-snapshot-80",
21
+ "@instructure/ui-a11y-utils": "11.7.4-snapshot-80",
22
+ "@instructure/emotion": "11.7.4-snapshot-80",
23
+ "@instructure/ui-grid": "11.7.4-snapshot-80",
24
+ "@instructure/ui-icons": "11.7.4-snapshot-80",
25
+ "@instructure/ui-react-utils": "11.7.4-snapshot-80",
26
+ "@instructure/uid": "11.7.4-snapshot-80",
27
+ "@instructure/ui-utils": "11.7.4-snapshot-80",
28
+ "@instructure/ui-themes": "11.7.4-snapshot-80"
29
29
  },
30
30
  "devDependencies": {
31
- "@testing-library/jest-dom": "^6.6.3",
32
- "@testing-library/react": "15.0.7",
33
- "vitest": "^3.2.2",
34
- "@instructure/ui-axe-check": "11.7.4-snapshot-53",
35
- "@instructure/ui-babel-preset": "11.7.4-snapshot-53"
31
+ "@testing-library/jest-dom": "^6.9.1",
32
+ "@testing-library/react": "16.3.2",
33
+ "vitest": "^4.1.9",
34
+ "@instructure/ui-axe-check": "11.7.4-snapshot-80",
35
+ "@instructure/ui-babel-preset": "11.7.4-snapshot-80"
36
36
  },
37
37
  "peerDependencies": {
38
38
  "react": ">=18 <=19"
package/src/FormFieldLayout/v2/styles.ts CHANGED
@@ -127,10 +127,9 @@ const generateStyle = (
127
127
  // when inline add a small padding between the label and the control
128
128
  paddingRight: componentTheme.gapPrimitives,
129
129
  // 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
+ }
134
133
  })
135
134
  }
136
135
 
@@ -158,17 +157,16 @@ const generateStyle = (
158
157
  verticalAlign: 'middle', // removes margin in inline layouts
159
158
  gridTemplateColumns: gridTemplateColumns,
160
159
  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
+ },
172
170
  columnGap: '0.375rem',
173
171
  rowGap: hasNonEmptyMessages ? componentTheme.gapPrimitives : '0',
174
172
  width: '100%',
@@ -193,10 +191,9 @@ const generateStyle = (
193
191
  ...(hasMessages && hasErrorMsgAndIsGroup && { marginTop: '0.375rem' }),
194
192
  ...(isInlineLayout &&
195
193
  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
+ }
200
197
  })
201
198
  },
202
199
  requiredAsterisk: {