@instructure/ui-view 11.7.4-snapshot-103 → 11.7.4-snapshot-106

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/package.json +12 -12
  3. package/src/ContextView/v2/README.md +4 -4
  4. package/src/View/v2/README.md +42 -42
  5. package/src/View/v2/props.ts +1 -1
  6. package/tsconfig.build.tsbuildinfo +1 -1
  7. package/types/View/v2/props.d.ts +1 -1
package/CHANGELOG.md CHANGED
@@ -3,12 +3,13 @@
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-103](https://github.com/instructure/instructure-ui/compare/v11.7.3...v11.7.4-snapshot-103) (2026-07-14)
6
+ ## [11.7.4-snapshot-106](https://github.com/instructure/instructure-ui/compare/v11.7.3...v11.7.4-snapshot-106) (2026-07-16)
7
7
 
8
8
 
9
9
  ### Features
10
10
 
11
11
  * **many:** remove deprecated v2 items ([eaf8876](https://github.com/instructure/instructure-ui/commit/eaf88767c9beb95c4e09ee5705c387dfd79e4cb7))
12
+ * **many:** support current spacing tokens in the margin prop for v2 components ([1b47c5f](https://github.com/instructure/instructure-ui/commit/1b47c5f23eaa60b532cdfd53c39bd71f0cf51aaa))
12
13
 
13
14
 
14
15
  ### BREAKING CHANGES
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-view",
3
- "version": "11.7.4-snapshot-103",
3
+ "version": "11.7.4-snapshot-106",
4
4
  "description": "A component for basic styles including spacing, sizing, borders, display, positioning, and focus states.",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "module": "./es/index.js",
@@ -15,22 +15,22 @@
15
15
  "license": "MIT",
16
16
  "dependencies": {
17
17
  "@babel/runtime": "^7.29.7",
18
- "@instructure/console": "11.7.4-snapshot-103",
19
- "@instructure/shared-types": "11.7.4-snapshot-103",
20
- "@instructure/emotion": "11.7.4-snapshot-103",
21
- "@instructure/ui-color-utils": "11.7.4-snapshot-103",
22
- "@instructure/ui-dom-utils": "11.7.4-snapshot-103",
23
- "@instructure/ui-i18n": "11.7.4-snapshot-103",
24
- "@instructure/ui-position": "11.7.4-snapshot-103",
25
- "@instructure/ui-themes": "11.7.4-snapshot-103",
26
- "@instructure/ui-react-utils": "11.7.4-snapshot-103"
18
+ "@instructure/console": "11.7.4-snapshot-106",
19
+ "@instructure/ui-color-utils": "11.7.4-snapshot-106",
20
+ "@instructure/shared-types": "11.7.4-snapshot-106",
21
+ "@instructure/ui-dom-utils": "11.7.4-snapshot-106",
22
+ "@instructure/emotion": "11.7.4-snapshot-106",
23
+ "@instructure/ui-i18n": "11.7.4-snapshot-106",
24
+ "@instructure/ui-react-utils": "11.7.4-snapshot-106",
25
+ "@instructure/ui-themes": "11.7.4-snapshot-106",
26
+ "@instructure/ui-position": "11.7.4-snapshot-106"
27
27
  },
28
28
  "devDependencies": {
29
29
  "@testing-library/jest-dom": "^6.9.1",
30
30
  "@testing-library/react": "16.3.2",
31
31
  "vitest": "^4.1.9",
32
- "@instructure/ui-axe-check": "11.7.4-snapshot-103",
33
- "@instructure/ui-babel-preset": "11.7.4-snapshot-103"
32
+ "@instructure/ui-axe-check": "11.7.4-snapshot-106",
33
+ "@instructure/ui-babel-preset": "11.7.4-snapshot-106"
34
34
  },
35
35
  "peerDependencies": {
36
36
  "react": ">=18 <=19"
package/src/ContextView/v2/README.md CHANGED
@@ -17,14 +17,14 @@ type: example
17
17
  <div>
18
18
  <ContextView
19
19
  padding="small"
20
- margin="large"
20
+ margin="general.space2xl"
21
21
  placement="end top"
22
22
  shadow="resting"
23
23
  >
24
24
  <Heading level="h3">Hello World</Heading>
25
25
  </ContextView>
26
26
  <ContextView
27
- margin="0 large 0 0"
27
+ margin="0 general.space2xl 0 0"
28
28
  padding="small"
29
29
  placement="top"
30
30
  >
@@ -32,7 +32,7 @@ type: example
32
32
  <Text size="small">Some informational text that is helpful</Text>
33
33
  </ContextView>
34
34
  <ContextView
35
- margin="0 large 0 0"
35
+ margin="0 general.space2xl 0 0"
36
36
  padding="small"
37
37
  textAlign="end"
38
38
  placement="start"
@@ -45,7 +45,7 @@ type: example
45
45
  padding="medium"
46
46
  background="inverse"
47
47
  width="30rem"
48
- margin="x-large 0 0"
48
+ margin="general.space2xl 0 0"
49
49
  >
50
50
  This ContextView uses the inverse background and medium padding. Its width prop is set to `30rem`, which causes long strings like this to wrap. It also has top margin to separate it from the ContextViews above it.
51
51
  </ContextView>
package/src/View/v2/README.md CHANGED
@@ -20,7 +20,7 @@ type: example
20
20
  ---
21
21
  <View
22
22
  as="div"
23
- margin="small"
23
+ margin="general.spaceMd"
24
24
  padding="large"
25
25
  textAlign="center"
26
26
  background="primary"
@@ -42,7 +42,7 @@ type: example
42
42
  as="div"
43
43
  display="inline-block"
44
44
  maxWidth="10rem"
45
- margin="small"
45
+ margin="general.spaceMd"
46
46
  padding="small"
47
47
  background="transparent"
48
48
  >
@@ -52,7 +52,7 @@ type: example
52
52
  as="div"
53
53
  display="inline-block"
54
54
  maxWidth="10rem"
55
- margin="small"
55
+ margin="general.spaceMd"
56
56
  padding="small"
57
57
  background="primary"
58
58
  >
@@ -62,7 +62,7 @@ type: example
62
62
  as="div"
63
63
  display="inline-block"
64
64
  maxWidth="10rem"
65
- margin="small"
65
+ margin="general.spaceMd"
66
66
  padding="small"
67
67
  background="secondary"
68
68
  >
@@ -72,7 +72,7 @@ type: example
72
72
  as="div"
73
73
  display="inline-block"
74
74
  maxWidth="10rem"
75
- margin="small"
75
+ margin="general.spaceMd"
76
76
  padding="small"
77
77
  background="primary-inverse"
78
78
  >
@@ -82,7 +82,7 @@ type: example
82
82
  as="div"
83
83
  display="inline-block"
84
84
  maxWidth="10rem"
85
- margin="small"
85
+ margin="general.spaceMd"
86
86
  padding="small"
87
87
  background="brand"
88
88
  >
@@ -92,7 +92,7 @@ type: example
92
92
  as="div"
93
93
  display="inline-block"
94
94
  maxWidth="10rem"
95
- margin="small"
95
+ margin="general.spaceMd"
96
96
  padding="small"
97
97
  background="alert"
98
98
  >
@@ -102,7 +102,7 @@ type: example
102
102
  as="div"
103
103
  display="inline-block"
104
104
  maxWidth="10rem"
105
- margin="small"
105
+ margin="general.spaceMd"
106
106
  padding="small"
107
107
  background="success"
108
108
  >
@@ -112,7 +112,7 @@ type: example
112
112
  as="div"
113
113
  display="inline-block"
114
114
  maxWidth="10rem"
115
- margin="small"
115
+ margin="general.spaceMd"
116
116
  padding="small"
117
117
  background="danger"
118
118
  >
@@ -122,7 +122,7 @@ type: example
122
122
  as="div"
123
123
  display="inline-block"
124
124
  maxWidth="10rem"
125
- margin="small"
125
+ margin="general.spaceMd"
126
126
  padding="small"
127
127
  background="warning"
128
128
  >
@@ -144,7 +144,7 @@ type: example
144
144
  as="span"
145
145
  display="inline-block"
146
146
  maxWidth="10rem"
147
- margin="small"
147
+ margin="general.spaceMd"
148
148
  padding="large"
149
149
  background="primary"
150
150
  shadow="resting"
@@ -155,7 +155,7 @@ type: example
155
155
  as="span"
156
156
  display="inline-block"
157
157
  maxWidth="10rem"
158
- margin="small"
158
+ margin="general.spaceMd"
159
159
  padding="large"
160
160
  background="primary"
161
161
  shadow="above"
@@ -166,7 +166,7 @@ type: example
166
166
  as="span"
167
167
  display="inline-block"
168
168
  maxWidth="10rem"
169
- margin="small"
169
+ margin="general.spaceMd"
170
170
  padding="large"
171
171
  background="primary"
172
172
  shadow="topmost"
@@ -191,7 +191,7 @@ type: example
191
191
  as="span"
192
192
  display="inline-block"
193
193
  maxWidth="10rem"
194
- margin="small"
194
+ margin="general.spaceMd"
195
195
  padding="small"
196
196
  background="primary"
197
197
  borderWidth="small"
@@ -202,7 +202,7 @@ type: example
202
202
  as="span"
203
203
  display="inline-block"
204
204
  maxWidth="10rem"
205
- margin="small"
205
+ margin="general.spaceMd"
206
206
  padding="small"
207
207
  background="primary"
208
208
  borderWidth="medium"
@@ -213,7 +213,7 @@ type: example
213
213
  as="span"
214
214
  display="inline-block"
215
215
  maxWidth="10rem"
216
- margin="small"
216
+ margin="general.spaceMd"
217
217
  padding="small"
218
218
  background="primary"
219
219
  borderWidth="large none"
@@ -222,7 +222,7 @@ type: example
222
222
  </View>
223
223
  <View
224
224
  as="div"
225
- margin="small"
225
+ margin="general.spaceMd"
226
226
  padding="small"
227
227
  background="primary"
228
228
  borderWidth="none none small none"
@@ -244,7 +244,7 @@ type: example
244
244
  <View
245
245
  as="span"
246
246
  display="inline-block"
247
- margin="small"
247
+ margin="general.spaceMd"
248
248
  padding="small"
249
249
  background="primary"
250
250
  borderWidth="large"
@@ -254,7 +254,7 @@ type: example
254
254
  <View
255
255
  as="span"
256
256
  display="inline-block"
257
- margin="small"
257
+ margin="general.spaceMd"
258
258
  padding="small"
259
259
  background="primary"
260
260
  borderWidth="large"
@@ -265,7 +265,7 @@ type: example
265
265
  <View
266
266
  as="span"
267
267
  display="inline-block"
268
- margin="small"
268
+ margin="general.spaceMd"
269
269
  padding="small"
270
270
  background="primary"
271
271
  borderWidth="large"
@@ -276,7 +276,7 @@ type: example
276
276
  <View
277
277
  as="span"
278
278
  display="inline-block"
279
- margin="small"
279
+ margin="general.spaceMd"
280
280
  padding="small"
281
281
  background="primary"
282
282
  borderWidth="large"
@@ -287,7 +287,7 @@ type: example
287
287
  <View
288
288
  as="span"
289
289
  display="inline-block"
290
- margin="small"
290
+ margin="general.spaceMd"
291
291
  padding="small"
292
292
  background="primary"
293
293
  borderWidth="large"
@@ -298,7 +298,7 @@ type: example
298
298
  <View
299
299
  as="span"
300
300
  display="inline-block"
301
- margin="small"
301
+ margin="general.spaceMd"
302
302
  padding="small"
303
303
  background="primary"
304
304
  borderWidth="large"
@@ -309,7 +309,7 @@ type: example
309
309
  <View
310
310
  as="span"
311
311
  display="inline-block"
312
- margin="small"
312
+ margin="general.spaceMd"
313
313
  padding="small"
314
314
  background="primary"
315
315
  borderWidth="large"
@@ -335,7 +335,7 @@ type: example
335
335
  as="span"
336
336
  display="inline-block"
337
337
  maxWidth="10rem"
338
- margin="small"
338
+ margin="general.spaceMd"
339
339
  padding="medium"
340
340
  background="primary-inverse"
341
341
  borderRadius="medium"
@@ -347,7 +347,7 @@ type: example
347
347
  as="span"
348
348
  display="inline-block"
349
349
  maxWidth="10rem"
350
- margin="small"
350
+ margin="general.spaceMd"
351
351
  padding="medium"
352
352
  background="primary-inverse"
353
353
  borderRadius="large large none none"
@@ -359,7 +359,7 @@ type: example
359
359
  as="span"
360
360
  display="inline-block"
361
361
  maxWidth="10rem"
362
- margin="small"
362
+ margin="general.spaceMd"
363
363
  padding="medium"
364
364
  background="primary-inverse"
365
365
  borderRadius="none none large large"
@@ -371,7 +371,7 @@ type: example
371
371
  display="inline-block"
372
372
  width="6rem"
373
373
  height="6rem"
374
- margin="small"
374
+ margin="general.spaceMd"
375
375
  padding="medium"
376
376
  background="primary-inverse"
377
377
  borderRadius="circle"
@@ -382,7 +382,7 @@ type: example
382
382
  <View
383
383
  display="inline-block"
384
384
  width="10rem"
385
- margin="small"
385
+ margin="general.spaceMd"
386
386
  padding="medium"
387
387
  background="primary-inverse"
388
388
  borderRadius="pill"
@@ -471,7 +471,7 @@ const FocusedExample = () => {
471
471
  as="div"
472
472
  background="primary"
473
473
  padding="small"
474
- margin="0 0 small"
474
+ margin="0 0 general.spaceMd"
475
475
  borderWidth="small"
476
476
  >
477
477
  <FormFieldGroup
@@ -514,7 +514,7 @@ const FocusedExample = () => {
514
514
  <code>borderRadius =</code>
515
515
  <View
516
516
  display="inline-block"
517
- margin="small"
517
+ margin="general.spaceMd"
518
518
  padding="small"
519
519
  background="primary"
520
520
  borderRadius="small"
@@ -528,7 +528,7 @@ const FocusedExample = () => {
528
528
  </View>
529
529
  <View
530
530
  display="inline-block"
531
- margin="small"
531
+ margin="general.spaceMd"
532
532
  padding="small"
533
533
  background="primary"
534
534
  borderRadius="medium"
@@ -542,7 +542,7 @@ const FocusedExample = () => {
542
542
  </View>
543
543
  <View
544
544
  display="inline-block"
545
- margin="small"
545
+ margin="general.spaceMd"
546
546
  padding="small"
547
547
  background="primary"
548
548
  borderRadius="large"
@@ -558,7 +558,7 @@ const FocusedExample = () => {
558
558
  display="inline-block"
559
559
  height="100px"
560
560
  width="100px"
561
- margin="small"
561
+ margin="general.spaceMd"
562
562
  background="primary"
563
563
  borderRadius="circle"
564
564
  borderWidth="small"
@@ -583,7 +583,7 @@ const FocusedExample = () => {
583
583
  >
584
584
  <View
585
585
  display="block"
586
- margin="small"
586
+ margin="general.spaceMd"
587
587
  padding="small"
588
588
  background="primary-inverse"
589
589
  borderRadius="large"
@@ -599,7 +599,7 @@ const FocusedExample = () => {
599
599
  </View>
600
600
  <View
601
601
  display="inline-block"
602
- margin="small"
602
+ margin="general.spaceMd"
603
603
  padding="small"
604
604
  background="primary"
605
605
  borderRadius="pill"
@@ -616,7 +616,7 @@ const FocusedExample = () => {
616
616
  </View>
617
617
  <View
618
618
  display="inline-block"
619
- margin="small"
619
+ margin="general.spaceMd"
620
620
  padding="small"
621
621
  background="primary"
622
622
  borderWidth="small"
@@ -695,7 +695,7 @@ const OverflowExample = () => {
695
695
  as="div"
696
696
  height="7rem"
697
697
  width="20rem"
698
- margin="medium none x-large"
698
+ margin="general.spaceXl none general.space2xl"
699
699
  overflowY={overflowY}
700
700
  overflowX={overflowX}
701
701
  withVisualDebug
@@ -736,7 +736,7 @@ type: example
736
736
  >
737
737
  <View
738
738
  as="div"
739
- margin="small"
739
+ margin="general.spaceMd"
740
740
  padding="small"
741
741
  withVisualDebug
742
742
  >
@@ -744,7 +744,7 @@ type: example
744
744
  </View>
745
745
  <View
746
746
  as="div"
747
- margin="small"
747
+ margin="general.spaceMd"
748
748
  padding="small"
749
749
  withVisualDebug
750
750
  >
@@ -772,7 +772,7 @@ type: example
772
772
  >
773
773
  <View
774
774
  as="header"
775
- margin="0 0 medium"
775
+ margin="0 0 general.spaceXl"
776
776
  withVisualDebug
777
777
  >
778
778
  <Text>
@@ -799,7 +799,7 @@ type: example
799
799
  display="inline-block"
800
800
  withVisualDebug
801
801
  textAlign="end"
802
- margin="large auto"
802
+ margin="general.space2xl auto"
803
803
  padding="0 small 0 0"
804
804
  >
805
805
  <Text>
package/src/View/v2/props.ts CHANGED
@@ -163,7 +163,7 @@ type ViewOwnProps = {
163
163
  /**
164
164
  * Valid values are `0`, `none`, `auto`, and Spacing token values,
165
165
  * see https://instructure.design/layout-spacing. Apply these values via
166
- * familiar CSS-like shorthand. For example, `margin="small auto large"`.
166
+ * familiar CSS-like shorthand. For example, `margin="general.spaceMd auto"`.
167
167
  */
168
168
  margin?: Spacing
169
169
  /**