@instructure/ui-view 11.7.4-snapshot-130 → 11.7.4-snapshot-134

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 (4) hide show
  1. package/CHANGELOG.md +1 -1
  2. package/package.json +12 -12
  3. package/src/ContextView/v2/README.md +4 -4
  4. package/src/View/v2/README.md +58 -58
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-130](https://github.com/instructure/instructure-ui/compare/v11.7.3...v11.7.4-snapshot-130) (2026-07-23)
6
+ ## [11.7.4-snapshot-134](https://github.com/instructure/instructure-ui/compare/v11.7.3...v11.7.4-snapshot-134) (2026-07-24)
7
7
 
8
8
 
9
9
  ### Features
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-view",
3
- "version": "11.7.4-snapshot-130",
3
+ "version": "11.7.4-snapshot-134",
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-130",
19
- "@instructure/emotion": "11.7.4-snapshot-130",
20
- "@instructure/shared-types": "11.7.4-snapshot-130",
21
- "@instructure/ui-dom-utils": "11.7.4-snapshot-130",
22
- "@instructure/ui-color-utils": "11.7.4-snapshot-130",
23
- "@instructure/ui-i18n": "11.7.4-snapshot-130",
24
- "@instructure/ui-position": "11.7.4-snapshot-130",
25
- "@instructure/ui-themes": "11.7.4-snapshot-130",
26
- "@instructure/ui-react-utils": "11.7.4-snapshot-130"
18
+ "@instructure/console": "11.7.4-snapshot-134",
19
+ "@instructure/shared-types": "11.7.4-snapshot-134",
20
+ "@instructure/ui-color-utils": "11.7.4-snapshot-134",
21
+ "@instructure/emotion": "11.7.4-snapshot-134",
22
+ "@instructure/ui-dom-utils": "11.7.4-snapshot-134",
23
+ "@instructure/ui-i18n": "11.7.4-snapshot-134",
24
+ "@instructure/ui-position": "11.7.4-snapshot-134",
25
+ "@instructure/ui-react-utils": "11.7.4-snapshot-134",
26
+ "@instructure/ui-themes": "11.7.4-snapshot-134"
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-130",
33
- "@instructure/ui-babel-preset": "11.7.4-snapshot-130"
32
+ "@instructure/ui-axe-check": "11.7.4-snapshot-134",
33
+ "@instructure/ui-babel-preset": "11.7.4-snapshot-134"
34
34
  },
35
35
  "peerDependencies": {
36
36
  "react": ">=18 <=19"
package/src/ContextView/v2/README.md CHANGED
@@ -16,7 +16,7 @@ type: example
16
16
  ---
17
17
  <div>
18
18
  <ContextView
19
- padding="small"
19
+ padding="general.spaceMd"
20
20
  margin="general.space2xl"
21
21
  placement="end top"
22
22
  shadow="resting"
@@ -25,7 +25,7 @@ type: example
25
25
  </ContextView>
26
26
  <ContextView
27
27
  margin="0 general.space2xl 0 0"
28
- padding="small"
28
+ padding="general.spaceMd"
29
29
  placement="top"
30
30
  >
31
31
  <Heading level="h3">Hello World</Heading>
@@ -33,7 +33,7 @@ type: example
33
33
  </ContextView>
34
34
  <ContextView
35
35
  margin="0 general.space2xl 0 0"
36
- padding="small"
36
+ padding="general.spaceMd"
37
37
  textAlign="end"
38
38
  placement="start"
39
39
  >
@@ -42,7 +42,7 @@ type: example
42
42
  </ContextView>
43
43
  <ContextView
44
44
  placement="end bottom"
45
- padding="medium"
45
+ padding="general.spaceXl"
46
46
  background="inverse"
47
47
  width="30rem"
48
48
  margin="general.space2xl 0 0"
package/src/View/v2/README.md CHANGED
@@ -21,7 +21,7 @@ type: example
21
21
  <View
22
22
  as="div"
23
23
  margin="general.spaceMd"
24
- padding="large"
24
+ padding="general.space2xl"
25
25
  textAlign="center"
26
26
  background="primary"
27
27
  >
@@ -43,7 +43,7 @@ type: example
43
43
  display="inline-block"
44
44
  maxWidth="10rem"
45
45
  margin="general.spaceMd"
46
- padding="small"
46
+ padding="general.spaceMd"
47
47
  background="transparent"
48
48
  >
49
49
  {lorem.sentence()}
@@ -53,7 +53,7 @@ type: example
53
53
  display="inline-block"
54
54
  maxWidth="10rem"
55
55
  margin="general.spaceMd"
56
- padding="small"
56
+ padding="general.spaceMd"
57
57
  background="primary"
58
58
  >
59
59
  {lorem.sentence()}
@@ -63,7 +63,7 @@ type: example
63
63
  display="inline-block"
64
64
  maxWidth="10rem"
65
65
  margin="general.spaceMd"
66
- padding="small"
66
+ padding="general.spaceMd"
67
67
  background="secondary"
68
68
  >
69
69
  {lorem.sentence()}
@@ -73,7 +73,7 @@ type: example
73
73
  display="inline-block"
74
74
  maxWidth="10rem"
75
75
  margin="general.spaceMd"
76
- padding="small"
76
+ padding="general.spaceMd"
77
77
  background="primary-inverse"
78
78
  >
79
79
  {lorem.sentence()}
@@ -83,7 +83,7 @@ type: example
83
83
  display="inline-block"
84
84
  maxWidth="10rem"
85
85
  margin="general.spaceMd"
86
- padding="small"
86
+ padding="general.spaceMd"
87
87
  background="brand"
88
88
  >
89
89
  {lorem.sentence()}
@@ -93,7 +93,7 @@ type: example
93
93
  display="inline-block"
94
94
  maxWidth="10rem"
95
95
  margin="general.spaceMd"
96
- padding="small"
96
+ padding="general.spaceMd"
97
97
  background="alert"
98
98
  >
99
99
  {lorem.sentence()}
@@ -103,7 +103,7 @@ type: example
103
103
  display="inline-block"
104
104
  maxWidth="10rem"
105
105
  margin="general.spaceMd"
106
- padding="small"
106
+ padding="general.spaceMd"
107
107
  background="success"
108
108
  >
109
109
  {lorem.sentence()}
@@ -113,7 +113,7 @@ type: example
113
113
  display="inline-block"
114
114
  maxWidth="10rem"
115
115
  margin="general.spaceMd"
116
- padding="small"
116
+ padding="general.spaceMd"
117
117
  background="danger"
118
118
  >
119
119
  {lorem.sentence()}
@@ -123,7 +123,7 @@ type: example
123
123
  display="inline-block"
124
124
  maxWidth="10rem"
125
125
  margin="general.spaceMd"
126
- padding="small"
126
+ padding="general.spaceMd"
127
127
  background="warning"
128
128
  >
129
129
  {lorem.sentence()}
@@ -145,7 +145,7 @@ type: example
145
145
  display="inline-block"
146
146
  maxWidth="10rem"
147
147
  margin="general.spaceMd"
148
- padding="large"
148
+ padding="general.space2xl"
149
149
  background="primary"
150
150
  shadow="elevation1"
151
151
  >
@@ -156,7 +156,7 @@ type: example
156
156
  display="inline-block"
157
157
  maxWidth="10rem"
158
158
  margin="general.spaceMd"
159
- padding="large"
159
+ padding="general.space2xl"
160
160
  background="primary"
161
161
  shadow="elevation2"
162
162
  >
@@ -167,7 +167,7 @@ type: example
167
167
  display="inline-block"
168
168
  maxWidth="10rem"
169
169
  margin="general.spaceMd"
170
- padding="large"
170
+ padding="general.space2xl"
171
171
  background="primary"
172
172
  shadow="elevation3"
173
173
  >
@@ -176,8 +176,8 @@ type: example
176
176
  as="span"
177
177
  display="inline-block"
178
178
  maxWidth="10rem"
179
- margin="small"
180
- padding="large"
179
+ margin="general.spaceMd"
180
+ padding="general.space2xl"
181
181
  background="primary"
182
182
  shadow="elevation4"
183
183
  >
@@ -202,7 +202,7 @@ type: example
202
202
  display="inline-block"
203
203
  maxWidth="10rem"
204
204
  margin="general.spaceMd"
205
- padding="small"
205
+ padding="general.spaceMd"
206
206
  background="primary"
207
207
  borderWidth="sm"
208
208
  >
@@ -213,7 +213,7 @@ type: example
213
213
  display="inline-block"
214
214
  maxWidth="10rem"
215
215
  margin="general.spaceMd"
216
- padding="small"
216
+ padding="general.spaceMd"
217
217
  background="primary"
218
218
  borderWidth="md"
219
219
  >
@@ -224,7 +224,7 @@ type: example
224
224
  display="inline-block"
225
225
  maxWidth="10rem"
226
226
  margin="general.spaceMd"
227
- padding="small"
227
+ padding="general.spaceMd"
228
228
  background="primary"
229
229
  borderWidth="lg none"
230
230
  >
@@ -233,7 +233,7 @@ type: example
233
233
  <View
234
234
  as="div"
235
235
  margin="general.spaceMd"
236
- padding="small"
236
+ padding="general.spaceMd"
237
237
  background="primary"
238
238
  borderWidth="none none sm none"
239
239
  >
@@ -261,7 +261,7 @@ type: example
261
261
  as="span"
262
262
  display="inline-block"
263
263
  margin="general.spaceMd"
264
- padding="small"
264
+ padding="general.spaceMd"
265
265
  background="primary"
266
266
  borderWidth="large"
267
267
  >
@@ -271,7 +271,7 @@ type: example
271
271
  as="span"
272
272
  display="inline-block"
273
273
  margin="general.spaceMd"
274
- padding="small"
274
+ padding="general.spaceMd"
275
275
  background="primary"
276
276
  borderWidth="large"
277
277
  borderColor="accentBlue"
@@ -282,7 +282,7 @@ type: example
282
282
  as="span"
283
283
  display="inline-block"
284
284
  margin="general.spaceMd"
285
- padding="small"
285
+ padding="general.spaceMd"
286
286
  background="primary"
287
287
  borderWidth="large"
288
288
  borderColor="accentOrange"
@@ -293,7 +293,7 @@ type: example
293
293
  as="span"
294
294
  display="inline-block"
295
295
  margin="general.spaceMd"
296
- padding="small"
296
+ padding="general.spaceMd"
297
297
  background="primary"
298
298
  borderWidth="large"
299
299
  borderColor="accentRed"
@@ -304,7 +304,7 @@ type: example
304
304
  as="span"
305
305
  display="inline-block"
306
306
  margin="general.spaceMd"
307
- padding="small"
307
+ padding="general.spaceMd"
308
308
  background="primary"
309
309
  borderWidth="large"
310
310
  borderColor="accentHoney"
@@ -315,7 +315,7 @@ type: example
315
315
  as="span"
316
316
  display="inline-block"
317
317
  margin="general.spaceMd"
318
- padding="small"
318
+ padding="general.spaceMd"
319
319
  background="primary"
320
320
  borderWidth="large"
321
321
  borderColor="accentGreen"
@@ -326,7 +326,7 @@ type: example
326
326
  as="span"
327
327
  display="inline-block"
328
328
  margin="general.spaceMd"
329
- padding="small"
329
+ padding="general.spaceMd"
330
330
  background="primary"
331
331
  borderWidth="large"
332
332
  borderColor="accentAurora"
@@ -336,8 +336,8 @@ type: example
336
336
  <View
337
337
  as="span"
338
338
  display="inline-block"
339
- margin="small"
340
- padding="small"
339
+ margin="general.spaceMd"
340
+ padding="general.spaceMd"
341
341
  background="primary"
342
342
  borderWidth="large"
343
343
  borderColor="strongColor"
@@ -347,8 +347,8 @@ type: example
347
347
  <View
348
348
  as="span"
349
349
  display="inline-block"
350
- margin="small"
351
- padding="small"
350
+ margin="general.spaceMd"
351
+ padding="general.spaceMd"
352
352
  background="primary"
353
353
  borderWidth="large"
354
354
  borderColor="visualSeparator"
@@ -358,8 +358,8 @@ type: example
358
358
  <View
359
359
  as="span"
360
360
  display="inline-block"
361
- margin="small"
362
- padding="small"
361
+ margin="general.spaceMd"
362
+ padding="general.spaceMd"
363
363
  background="primary"
364
364
  borderWidth="large"
365
365
  borderColor="accentViolet"
@@ -391,7 +391,7 @@ type: example
391
391
  display="inline-block"
392
392
  maxWidth="10rem"
393
393
  margin="general.spaceMd"
394
- padding="medium"
394
+ padding="general.spaceXl"
395
395
  background="primary-inverse"
396
396
  borderRadius="md"
397
397
  textAlign="center"
@@ -403,7 +403,7 @@ type: example
403
403
  display="inline-block"
404
404
  maxWidth="10rem"
405
405
  margin="general.spaceMd"
406
- padding="medium"
406
+ padding="general.spaceXl"
407
407
  background="primary-inverse"
408
408
  borderRadius="lg"
409
409
  textAlign="center"
@@ -414,8 +414,8 @@ type: example
414
414
  as="span"
415
415
  display="inline-block"
416
416
  maxWidth="10rem"
417
- margin="small"
418
- padding="medium"
417
+ margin="general.spaceMd"
418
+ padding="general.spaceXl"
419
419
  background="primary-inverse"
420
420
  borderRadius="card.md"
421
421
  textAlign="center"
@@ -426,8 +426,8 @@ type: example
426
426
  as="span"
427
427
  display="inline-block"
428
428
  maxWidth="10rem"
429
- margin="small"
430
- padding="medium"
429
+ margin="general.spaceMd"
430
+ padding="general.spaceXl"
431
431
  background="primary-inverse"
432
432
  borderRadius="lg lg none none"
433
433
  textAlign="center"
@@ -439,7 +439,7 @@ type: example
439
439
  display="inline-block"
440
440
  maxWidth="10rem"
441
441
  margin="general.spaceMd"
442
- padding="medium"
442
+ padding="general.spaceXl"
443
443
  background="primary-inverse"
444
444
  borderRadius="none none lg lg"
445
445
  textAlign="center"
@@ -451,7 +451,7 @@ type: example
451
451
  width="6rem"
452
452
  height="6rem"
453
453
  margin="general.spaceMd"
454
- padding="medium"
454
+ padding="general.spaceXl"
455
455
  background="primary-inverse"
456
456
  borderRadius="full"
457
457
  textAlign="center"
@@ -462,7 +462,7 @@ type: example
462
462
  display="inline-block"
463
463
  width="10rem"
464
464
  margin="general.spaceMd"
465
- padding="medium"
465
+ padding="general.spaceXl"
466
466
  background="primary-inverse"
467
467
  borderRadius="full"
468
468
  textAlign="center"
@@ -508,7 +508,7 @@ By default, if a `View` is rendered as a focusable element, a focus outline will
508
508
  ---
509
509
  type: example
510
510
  ---
511
- <Flex gap="medium" direction="column">
511
+ <Flex gap="general.spaceXl" direction="column">
512
512
  <View tabIndex="0" role="button" cursor="pointer">
513
513
  <Text>
514
514
  Tab here to see the focus outline
@@ -549,7 +549,7 @@ const FocusedExample = () => {
549
549
  <View
550
550
  as="div"
551
551
  background="primary"
552
- padding="small"
552
+ padding="general.spaceMd"
553
553
  margin="0 0 general.spaceMd"
554
554
  borderWidth="small"
555
555
  >
@@ -561,8 +561,8 @@ const FocusedExample = () => {
561
561
  </ScreenReaderContent>
562
562
  }
563
563
  >
564
- <Flex gap="small" direction="row">
565
- <Flex gap="small" direction="column" width="15rem">
564
+ <Flex gap="general.spaceMd" direction="row">
565
+ <Flex gap="general.spaceMd" direction="column" width="15rem">
566
566
  <Checkbox
567
567
  label="withFocusOutline"
568
568
  checked={isFocused}
@@ -594,7 +594,7 @@ const FocusedExample = () => {
594
594
  <View
595
595
  display="inline-block"
596
596
  margin="general.spaceMd"
597
- padding="small"
597
+ padding="general.spaceMd"
598
598
  background="primary"
599
599
  borderRadius="sm"
600
600
  borderWidth="small"
@@ -608,7 +608,7 @@ const FocusedExample = () => {
608
608
  <View
609
609
  display="inline-block"
610
610
  margin="general.spaceMd"
611
- padding="small"
611
+ padding="general.spaceMd"
612
612
  background="primary"
613
613
  borderRadius="md"
614
614
  borderWidth="small"
@@ -622,7 +622,7 @@ const FocusedExample = () => {
622
622
  <View
623
623
  display="inline-block"
624
624
  margin="general.spaceMd"
625
- padding="small"
625
+ padding="general.spaceMd"
626
626
  background="primary"
627
627
  borderRadius="lg"
628
628
  borderWidth="small"
@@ -658,12 +658,12 @@ const FocusedExample = () => {
658
658
  <View
659
659
  background="primary-inverse"
660
660
  display="inline-block"
661
- padding="small"
661
+ padding="general.spaceMd"
662
662
  >
663
663
  <View
664
664
  display="block"
665
665
  margin="general.spaceMd"
666
- padding="small"
666
+ padding="general.spaceMd"
667
667
  background="primary-inverse"
668
668
  borderRadius="lg"
669
669
  borderWidth="small"
@@ -679,7 +679,7 @@ const FocusedExample = () => {
679
679
  <View
680
680
  display="inline-block"
681
681
  margin="general.spaceMd"
682
- padding="small"
682
+ padding="general.spaceMd"
683
683
  background="primary"
684
684
  borderRadius="full"
685
685
  borderWidth="small"
@@ -696,7 +696,7 @@ const FocusedExample = () => {
696
696
  <View
697
697
  display="inline-block"
698
698
  margin="general.spaceMd"
699
- padding="small"
699
+ padding="general.spaceMd"
700
700
  background="primary"
701
701
  borderWidth="small"
702
702
  borderRadius="none lg"
@@ -803,7 +803,7 @@ type: example
803
803
  <div>
804
804
  <View
805
805
  as="div"
806
- padding="large"
806
+ padding="general.space2xl"
807
807
  withVisualDebug
808
808
  >
809
809
  <Text>{lorem.sentence()}</Text>
@@ -816,7 +816,7 @@ type: example
816
816
  <View
817
817
  as="div"
818
818
  margin="general.spaceMd"
819
- padding="small"
819
+ padding="general.spaceMd"
820
820
  withVisualDebug
821
821
  >
822
822
  <Text>{lorem.sentence()}</Text>
@@ -824,7 +824,7 @@ type: example
824
824
  <View
825
825
  as="div"
826
826
  margin="general.spaceMd"
827
- padding="small"
827
+ padding="general.spaceMd"
828
828
  withVisualDebug
829
829
  >
830
830
  <Text>{lorem.sentence()}</Text>
@@ -846,7 +846,7 @@ type: example
846
846
  ---
847
847
  <View
848
848
  as="section"
849
- padding="small"
849
+ padding="general.spaceMd"
850
850
  withVisualDebug
851
851
  >
852
852
  <View
@@ -872,14 +872,14 @@ the View to display inline-block with other inline elements.
872
872
  ---
873
873
  type: example
874
874
  ---
875
- <View as="div" textAlign="center" padding="x-small" withVisualDebug>
875
+ <View as="div" textAlign="center" padding="general.spaceSm" withVisualDebug>
876
876
  <View
877
877
  as="div"
878
878
  display="inline-block"
879
879
  withVisualDebug
880
880
  textAlign="end"
881
881
  margin="general.space2xl auto"
882
- padding="0 small 0 0"
882
+ padding="0 general.spaceMd 0 0"
883
883
  >
884
884
  <Text>
885
885
  {lorem.sentence()}