@instructure/ui-flex 11.7.2-snapshot-51 → 11.7.2-snapshot-52

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 (3) hide show
  1. package/CHANGELOG.md +5 -2
  2. package/package.json +9 -9
  3. package/src/Flex/v2/README.md +79 -79
package/CHANGELOG.md CHANGED
@@ -3,9 +3,12 @@
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.2-snapshot-51](https://github.com/instructure/instructure-ui/compare/v11.7.1...v11.7.2-snapshot-51) (2026-04-21)
6
+ ## [11.7.2-snapshot-52](https://github.com/instructure/instructure-ui/compare/v11.7.1...v11.7.2-snapshot-52) (2026-04-22)
7
7
 
8
- **Note:** Version bump only for package @instructure/ui-flex
8
+
9
+ ### Bug Fixes
10
+
11
+ * **many:** fix doc component previews, update dark theme text and code block styles, and replace old icons ([d4e48d3](https://github.com/instructure/instructure-ui/commit/d4e48d3f739decb13b76c863c8f01685f0788dd6))
9
12
 
10
13
 
11
14
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-flex",
3
- "version": "11.7.2-snapshot-51",
3
+ "version": "11.7.2-snapshot-52",
4
4
  "description": "A component that makes it easy to align content using flexbox CSS",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "module": "./es/index.js",
@@ -15,19 +15,19 @@
15
15
  "license": "MIT",
16
16
  "dependencies": {
17
17
  "@babel/runtime": "^7.27.6",
18
- "@instructure/emotion": "11.7.2-snapshot-51",
19
- "@instructure/shared-types": "11.7.2-snapshot-51",
20
- "@instructure/ui-react-utils": "11.7.2-snapshot-51",
21
- "@instructure/console": "11.7.2-snapshot-51",
22
- "@instructure/ui-view": "11.7.2-snapshot-51"
18
+ "@instructure/console": "11.7.2-snapshot-52",
19
+ "@instructure/emotion": "11.7.2-snapshot-52",
20
+ "@instructure/shared-types": "11.7.2-snapshot-52",
21
+ "@instructure/ui-react-utils": "11.7.2-snapshot-52",
22
+ "@instructure/ui-view": "11.7.2-snapshot-52"
23
23
  },
24
24
  "devDependencies": {
25
25
  "@testing-library/jest-dom": "^6.6.3",
26
26
  "@testing-library/react": "15.0.7",
27
27
  "vitest": "^3.2.2",
28
- "@instructure/ui-babel-preset": "11.7.2-snapshot-51",
29
- "@instructure/ui-axe-check": "11.7.2-snapshot-51",
30
- "@instructure/ui-themes": "11.7.2-snapshot-51"
28
+ "@instructure/ui-axe-check": "11.7.2-snapshot-52",
29
+ "@instructure/ui-themes": "11.7.2-snapshot-52",
30
+ "@instructure/ui-babel-preset": "11.7.2-snapshot-52"
31
31
  },
32
32
  "peerDependencies": {
33
33
  "react": ">=18 <=19"
package/src/Flex/v2/README.md CHANGED
@@ -20,28 +20,28 @@ type: example
20
20
  ---
21
21
  <div>
22
22
  <Flex withVisualDebug margin="none none large">
23
- <Flex.Item>One</Flex.Item>
24
- <Flex.Item>Two</Flex.Item>
25
- <Flex.Item>Three</Flex.Item>
26
- <Flex.Item>Four</Flex.Item>
23
+ <Flex.Item><Text>One</Text></Flex.Item>
24
+ <Flex.Item><Text>Two</Text></Flex.Item>
25
+ <Flex.Item><Text>Three</Text></Flex.Item>
26
+ <Flex.Item><Text>Four</Text></Flex.Item>
27
27
  </Flex>
28
28
  <Flex withVisualDebug direction="column" margin="none none large">
29
- <Flex.Item>One</Flex.Item>
30
- <Flex.Item>Two</Flex.Item>
31
- <Flex.Item>Three</Flex.Item>
32
- <Flex.Item>Four</Flex.Item>
29
+ <Flex.Item><Text>One</Text></Flex.Item>
30
+ <Flex.Item><Text>Two</Text></Flex.Item>
31
+ <Flex.Item><Text>Three</Text></Flex.Item>
32
+ <Flex.Item><Text>Four</Text></Flex.Item>
33
33
  </Flex>
34
34
  <Flex withVisualDebug direction="row-reverse" margin="none none large">
35
- <Flex.Item>One</Flex.Item>
36
- <Flex.Item>Two</Flex.Item>
37
- <Flex.Item>Three</Flex.Item>
38
- <Flex.Item>Four</Flex.Item>
35
+ <Flex.Item><Text>One</Text></Flex.Item>
36
+ <Flex.Item><Text>Two</Text></Flex.Item>
37
+ <Flex.Item><Text>Three</Text></Flex.Item>
38
+ <Flex.Item><Text>Four</Text></Flex.Item>
39
39
  </Flex>
40
40
  <Flex withVisualDebug direction="column-reverse">
41
- <Flex.Item>One</Flex.Item>
42
- <Flex.Item>Two</Flex.Item>
43
- <Flex.Item>Three</Flex.Item>
44
- <Flex.Item>Four</Flex.Item>
41
+ <Flex.Item><Text>One</Text></Flex.Item>
42
+ <Flex.Item><Text>Two</Text></Flex.Item>
43
+ <Flex.Item><Text>Three</Text></Flex.Item>
44
+ <Flex.Item><Text>Four</Text></Flex.Item>
45
45
  </Flex>
46
46
  </div>
47
47
  ```
@@ -56,28 +56,28 @@ type: example
56
56
  ---
57
57
  <div>
58
58
  <Flex withVisualDebug margin="none none large" gap="small">
59
- <Flex.Item>One</Flex.Item>
60
- <Flex.Item>Two</Flex.Item>
61
- <Flex.Item>Three</Flex.Item>
62
- <Flex.Item>Four</Flex.Item>
59
+ <Flex.Item><Text>One</Text></Flex.Item>
60
+ <Flex.Item><Text>Two</Text></Flex.Item>
61
+ <Flex.Item><Text>Three</Text></Flex.Item>
62
+ <Flex.Item><Text>Four</Text></Flex.Item>
63
63
  </Flex>
64
64
  <Flex withVisualDebug direction="column" margin="none none large" gap="medium">
65
- <Flex.Item>One</Flex.Item>
66
- <Flex.Item>Two</Flex.Item>
67
- <Flex.Item>Three</Flex.Item>
68
- <Flex.Item>Four</Flex.Item>
65
+ <Flex.Item><Text>One</Text></Flex.Item>
66
+ <Flex.Item><Text>Two</Text></Flex.Item>
67
+ <Flex.Item><Text>Three</Text></Flex.Item>
68
+ <Flex.Item><Text>Four</Text></Flex.Item>
69
69
  </Flex>
70
70
  <Flex withVisualDebug direction="row-reverse" margin="none none large" gap="medium">
71
- <Flex.Item>One</Flex.Item>
72
- <Flex.Item>Two</Flex.Item>
73
- <Flex.Item>Three</Flex.Item>
74
- <Flex.Item>Four</Flex.Item>
71
+ <Flex.Item><Text>One</Text></Flex.Item>
72
+ <Flex.Item><Text>Two</Text></Flex.Item>
73
+ <Flex.Item><Text>Three</Text></Flex.Item>
74
+ <Flex.Item><Text>Four</Text></Flex.Item>
75
75
  </Flex>
76
76
  <Flex withVisualDebug direction="column-reverse" gap="small">
77
- <Flex.Item>One</Flex.Item>
78
- <Flex.Item>Two</Flex.Item>
79
- <Flex.Item>Three</Flex.Item>
80
- <Flex.Item>Four</Flex.Item>
77
+ <Flex.Item><Text>One</Text></Flex.Item>
78
+ <Flex.Item><Text>Two</Text></Flex.Item>
79
+ <Flex.Item><Text>Three</Text></Flex.Item>
80
+ <Flex.Item><Text>Four</Text></Flex.Item>
81
81
  </Flex>
82
82
  </div>
83
83
  ```
@@ -90,28 +90,28 @@ type: example
90
90
  ---
91
91
  <div>
92
92
  <Flex withVisualDebug margin="none none large" gap="small" wrap="wrap">
93
- <Flex.Item size='25rem'>One</Flex.Item>
94
- <Flex.Item size='25rem'>Two</Flex.Item>
95
- <Flex.Item size='25rem'>Three</Flex.Item>
96
- <Flex.Item size='25rem'>Four</Flex.Item>
93
+ <Flex.Item size='25rem'><Text>One</Text></Flex.Item>
94
+ <Flex.Item size='25rem'><Text>Two</Text></Flex.Item>
95
+ <Flex.Item size='25rem'><Text>Three</Text></Flex.Item>
96
+ <Flex.Item size='25rem'><Text>Four</Text></Flex.Item>
97
97
  </Flex>
98
98
  <Flex withVisualDebug margin="none none large" gap="small large" wrap="wrap">
99
- <Flex.Item size='25rem'>One</Flex.Item>
100
- <Flex.Item size='25rem'>Two</Flex.Item>
101
- <Flex.Item size='25rem'>Three</Flex.Item>
102
- <Flex.Item size='25rem'>Four</Flex.Item>
99
+ <Flex.Item size='25rem'><Text>One</Text></Flex.Item>
100
+ <Flex.Item size='25rem'><Text>Two</Text></Flex.Item>
101
+ <Flex.Item size='25rem'><Text>Three</Text></Flex.Item>
102
+ <Flex.Item size='25rem'><Text>Four</Text></Flex.Item>
103
103
  </Flex>
104
104
  <Flex withVisualDebug margin="none none large" gap="small" wrap="wrap-reverse">
105
- <Flex.Item size='25rem'>One</Flex.Item>
106
- <Flex.Item size='25rem'>Two</Flex.Item>
107
- <Flex.Item size='25rem'>Three</Flex.Item>
108
- <Flex.Item size='25rem'>Four</Flex.Item>
105
+ <Flex.Item size='25rem'><Text>One</Text></Flex.Item>
106
+ <Flex.Item size='25rem'><Text>Two</Text></Flex.Item>
107
+ <Flex.Item size='25rem'><Text>Three</Text></Flex.Item>
108
+ <Flex.Item size='25rem'><Text>Four</Text></Flex.Item>
109
109
  </Flex>
110
110
  <Flex withVisualDebug margin="none none large" gap="small large" wrap="wrap-reverse">
111
- <Flex.Item size='25rem'>One</Flex.Item>
112
- <Flex.Item size='25rem'>Two</Flex.Item>
113
- <Flex.Item size='25rem'>Three</Flex.Item>
114
- <Flex.Item size='25rem'>Four</Flex.Item>
111
+ <Flex.Item size='25rem'><Text>One</Text></Flex.Item>
112
+ <Flex.Item size='25rem'><Text>Two</Text></Flex.Item>
113
+ <Flex.Item size='25rem'><Text>Three</Text></Flex.Item>
114
+ <Flex.Item size='25rem'><Text>Four</Text></Flex.Item>
115
115
  </Flex>
116
116
  </div>
117
117
  ```
@@ -127,16 +127,16 @@ type: example
127
127
  ---
128
128
  <Flex withVisualDebug>
129
129
  <Flex.Item padding="x-small">
130
- Villum dolore eu fugiat nulla pariatur.
130
+ <Text>Villum dolore eu fugiat nulla pariatur.</Text>
131
131
  </Flex.Item>
132
132
  <Flex.Item padding="x-small">
133
- Lorem ipsum dolor sit amet, consectetur adipisicing elit.
133
+ <Text>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</Text>
134
134
  </Flex.Item>
135
135
  <Flex.Item padding="x-small">
136
- Duis aute irure.
136
+ <Text>Duis aute irure.</Text>
137
137
  </Flex.Item>
138
138
  <Flex.Item padding="x-small">
139
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
139
+ <Text>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</Text>
140
140
  </Flex.Item>
141
141
  </Flex>
142
142
  ```
@@ -150,16 +150,16 @@ type: example
150
150
  ---
151
151
  <Flex withVisualDebug>
152
152
  <Flex.Item padding="x-small" shouldShrink>
153
- Villum dolore eu fugiat nulla pariatur.
153
+ <Text>Villum dolore eu fugiat nulla pariatur.</Text>
154
154
  </Flex.Item>
155
155
  <Flex.Item padding="x-small" shouldShrink>
156
- Lorem ipsum dolor sit amet, consectetur adipisicing elit.
156
+ <Text>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</Text>
157
157
  </Flex.Item>
158
158
  <Flex.Item padding="x-small" shouldShrink>
159
- Duis aute irure.
159
+ <Text>Duis aute irure.</Text>
160
160
  </Flex.Item>
161
161
  <Flex.Item padding="x-small" shouldShrink>
162
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
162
+ <Text>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</Text>
163
163
  </Flex.Item>
164
164
  </Flex>
165
165
  ```
@@ -172,10 +172,10 @@ type: example
172
172
  ---
173
173
  <Flex withVisualDebug>
174
174
  <Flex.Item padding="x-small" shouldShrink shouldGrow>
175
- I am growing and shrinking!
175
+ <Text>I am growing and shrinking!</Text>
176
176
  </Flex.Item>
177
177
  <Flex.Item>
178
- I am not shrinking or growing.
178
+ <Text>I am not shrinking or growing.</Text>
179
179
  </Flex.Item>
180
180
  </Flex>
181
181
  ```
@@ -191,13 +191,13 @@ type: example
191
191
  ---
192
192
  <Flex withVisualDebug>
193
193
  <Flex.Item padding="x-small" size="200px">
194
- I am always 200px.
194
+ <Text>I am always 200px.</Text>
195
195
  </Flex.Item>
196
196
  <Flex.Item padding="x-small" shouldShrink shouldGrow size="200px">
197
- I can grow, and shrink down to 200px.
197
+ <Text>I can grow, and shrink down to 200px.</Text>
198
198
  </Flex.Item>
199
199
  <Flex.Item padding="x-small" size="25%">
200
- I am always 25%.
200
+ <Text>I am always 25%.</Text>
201
201
  </Flex.Item>
202
202
  </Flex>
203
203
  ```
@@ -218,13 +218,13 @@ type: example
218
218
  <Avatar name="Sarah Robinson" size="large" src={avatarSquare} />
219
219
  </Flex.Item>
220
220
  <Flex.Item shouldGrow shouldShrink>
221
- I should be aligned to the bottom of the Avatar.
221
+ <Text>I should be aligned to the bottom of the Avatar.</Text>
222
222
  </Flex.Item>
223
223
  <Flex.Item>
224
- Me, too.
224
+ <Text>Me, too.</Text>
225
225
  </Flex.Item>
226
226
  <Flex.Item align="start">
227
- I am aligning myself to the top.
227
+ <Text>I am aligning myself to the top.</Text>
228
228
  </Flex.Item>
229
229
  </Flex>
230
230
  ```
@@ -243,10 +243,10 @@ type: example
243
243
  <Avatar name="Sarah Robinson" size="large" src={avatarSquare} />
244
244
  </Flex.Item>
245
245
  <Flex.Item>
246
- We are all centered!
246
+ <Text>We are all centered!</Text>
247
247
  </Flex.Item>
248
248
  <Flex.Item>
249
- Yeah!
249
+ <Text>Yeah!</Text>
250
250
  </Flex.Item>
251
251
  </Flex>
252
252
 
@@ -255,10 +255,10 @@ type: example
255
255
  <Avatar name="Sarah Robinson" size="large" src={avatarSquare} />
256
256
  </Flex.Item>
257
257
  <Flex.Item>
258
- Ah, a little more space.
258
+ <Text>Ah, a little more space.</Text>
259
259
  </Flex.Item>
260
260
  <Flex.Item>
261
- Totally.
261
+ <Text>Totally.</Text>
262
262
  </Flex.Item>
263
263
  </Flex>
264
264
 
@@ -267,10 +267,10 @@ type: example
267
267
  <Avatar name="Sarah Robinson" size="large" src={avatarSquare} />
268
268
  </Flex.Item>
269
269
  <Flex.Item>
270
- Smooshed again.
270
+ <Text>Smooshed again.</Text>
271
271
  </Flex.Item>
272
272
  <Flex.Item>
273
- Ugh.
273
+ <Text>Ugh.</Text>
274
274
  </Flex.Item>
275
275
  </Flex>
276
276
  </div>
@@ -319,7 +319,7 @@ type: example
319
319
  <Button margin="none x-small none none">
320
320
  Cancel
321
321
  </Button>
322
- <Button color="success" renderIcon={IconUserSolid}>
322
+ <Button color="success" renderIcon={UserInstUIIcon}>
323
323
  Add user
324
324
  </Button>
325
325
  </Flex.Item>
@@ -339,15 +339,15 @@ type: example
339
339
 
340
340
  <Flex withVisualDebug wrap="wrap" justifyItems="space-around" margin="0 0 medium">
341
341
  <Flex.Item padding="small">
342
- <SVGIcon src={iconExample} size="medium" title="Icon Example" />
342
+ <HeartInstUIIcon size="medium" title="Icon Example" color="primary" />
343
343
  <Text weight="bold" size="large" as="div">We love you!</Text>
344
344
  </Flex.Item>
345
345
  <Flex.Item padding="small">
346
- <SVGIcon src={iconExample} size="medium" title="Icon Example" />
346
+ <HeartInstUIIcon size="medium" title="Icon Example" color="primary" />
347
347
  <Text weight="bold" size="large" as="div">We love you!</Text>
348
348
  </Flex.Item>
349
349
  <Flex.Item padding="small">
350
- <SVGIcon src={iconExample} size="medium" title="Icon Example" />
350
+ <HeartInstUIIcon size="medium" title="Icon Example" color="primary" />
351
351
  <Text weight="bold" size="large" as="div">We love you!</Text>
352
352
  </Flex.Item>
353
353
  </Flex>
@@ -374,7 +374,7 @@ type: example
374
374
  </Flex.Item>
375
375
 
376
376
  <Flex.Item shouldGrow shouldShrink padding="small" as="main">
377
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
377
+ <Text>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</Text>
378
378
  </Flex.Item>
379
379
 
380
380
  <Flex.Item padding="small" as="footer">
@@ -382,7 +382,7 @@ type: example
382
382
  <Flex withVisualDebug justifyItems="space-between">
383
383
  <Flex.Item>
384
384
  <IconButton
385
- renderIcon={IconEmailLine}
385
+ renderIcon={MailInstUIIcon}
386
386
  withBackground={false}
387
387
  withBorder={false}
388
388
  screenReaderLabel="Some app function"
@@ -390,7 +390,7 @@ type: example
390
390
  </Flex.Item>
391
391
  <Flex.Item>
392
392
  <IconButton
393
- renderIcon={IconPrinterLine}
393
+ renderIcon={PrinterInstUIIcon}
394
394
  withBackground={false}
395
395
  withBorder={false}
396
396
  screenReaderLabel="Some app function"
@@ -398,7 +398,7 @@ type: example
398
398
  </Flex.Item>
399
399
  <Flex.Item>
400
400
  <IconButton
401
- renderIcon={IconCalendarDayLine}
401
+ renderIcon={Calendar1InstUIIcon}
402
402
  withBackground={false}
403
403
  withBorder={false}
404
404
  screenReaderLabel="Some app function"
@@ -406,7 +406,7 @@ type: example
406
406
  </Flex.Item>
407
407
  <Flex.Item>
408
408
  <IconButton
409
- renderIcon={IconSettingsLine}
409
+ renderIcon={SettingsInstUIIcon}
410
410
  withBackground={false}
411
411
  withBorder={false}
412
412
  screenReaderLabel="Some app function"