@instructure/ui-flex 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 (3) hide show
  1. package/CHANGELOG.md +1 -1
  2. package/package.json +9 -9
  3. package/src/Flex/v2/README.md +33 -33
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
  ### Bug Fixes
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-flex",
3
- "version": "11.7.4-snapshot-130",
3
+ "version": "11.7.4-snapshot-134",
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.29.7",
18
- "@instructure/emotion": "11.7.4-snapshot-130",
19
- "@instructure/console": "11.7.4-snapshot-130",
20
- "@instructure/ui-react-utils": "11.7.4-snapshot-130",
21
- "@instructure/ui-themes": "11.7.4-snapshot-130",
22
- "@instructure/shared-types": "11.7.4-snapshot-130",
23
- "@instructure/ui-view": "11.7.4-snapshot-130"
18
+ "@instructure/ui-react-utils": "11.7.4-snapshot-134",
19
+ "@instructure/console": "11.7.4-snapshot-134",
20
+ "@instructure/ui-themes": "11.7.4-snapshot-134",
21
+ "@instructure/shared-types": "11.7.4-snapshot-134",
22
+ "@instructure/emotion": "11.7.4-snapshot-134",
23
+ "@instructure/ui-view": "11.7.4-snapshot-134"
24
24
  },
25
25
  "devDependencies": {
26
26
  "@testing-library/jest-dom": "^6.9.1",
27
27
  "@testing-library/react": "16.3.2",
28
28
  "vitest": "^4.1.9",
29
- "@instructure/ui-axe-check": "11.7.4-snapshot-130",
30
- "@instructure/ui-babel-preset": "11.7.4-snapshot-130"
29
+ "@instructure/ui-axe-check": "11.7.4-snapshot-134",
30
+ "@instructure/ui-babel-preset": "11.7.4-snapshot-134"
31
31
  },
32
32
  "peerDependencies": {
33
33
  "react": ">=18 <=19"
package/src/Flex/v2/README.md CHANGED
@@ -55,25 +55,25 @@ Flex items will have no gap by default. You can set the gap between Flex.Items b
55
55
  type: example
56
56
  ---
57
57
  <div>
58
- <Flex withVisualDebug margin="none none general.space2xl" gap="small">
58
+ <Flex withVisualDebug margin="none none general.space2xl" gap="general.spaceMd">
59
59
  <Flex.Item><Text>One</Text></Flex.Item>
60
60
  <Flex.Item><Text>Two</Text></Flex.Item>
61
61
  <Flex.Item><Text>Three</Text></Flex.Item>
62
62
  <Flex.Item><Text>Four</Text></Flex.Item>
63
63
  </Flex>
64
- <Flex withVisualDebug direction="column" margin="none none general.space2xl" gap="medium">
64
+ <Flex withVisualDebug direction="column" margin="none none general.space2xl" gap="general.spaceXl">
65
65
  <Flex.Item><Text>One</Text></Flex.Item>
66
66
  <Flex.Item><Text>Two</Text></Flex.Item>
67
67
  <Flex.Item><Text>Three</Text></Flex.Item>
68
68
  <Flex.Item><Text>Four</Text></Flex.Item>
69
69
  </Flex>
70
- <Flex withVisualDebug direction="row-reverse" margin="none none general.space2xl" gap="medium">
70
+ <Flex withVisualDebug direction="row-reverse" margin="none none general.space2xl" gap="general.spaceXl">
71
71
  <Flex.Item><Text>One</Text></Flex.Item>
72
72
  <Flex.Item><Text>Two</Text></Flex.Item>
73
73
  <Flex.Item><Text>Three</Text></Flex.Item>
74
74
  <Flex.Item><Text>Four</Text></Flex.Item>
75
75
  </Flex>
76
- <Flex withVisualDebug direction="column-reverse" gap="small">
76
+ <Flex withVisualDebug direction="column-reverse" gap="general.spaceMd">
77
77
  <Flex.Item><Text>One</Text></Flex.Item>
78
78
  <Flex.Item><Text>Two</Text></Flex.Item>
79
79
  <Flex.Item><Text>Three</Text></Flex.Item>
@@ -89,25 +89,25 @@ You can also set the gap between rows and columns by using the `gap` property. M
89
89
  type: example
90
90
  ---
91
91
  <div>
92
- <Flex withVisualDebug margin="none none general.space2xl" gap="small" wrap="wrap">
92
+ <Flex withVisualDebug margin="none none general.space2xl" gap="general.spaceMd" wrap="wrap">
93
93
  <Flex.Item size='25rem'><Text>One</Text></Flex.Item>
94
94
  <Flex.Item size='25rem'><Text>Two</Text></Flex.Item>
95
95
  <Flex.Item size='25rem'><Text>Three</Text></Flex.Item>
96
96
  <Flex.Item size='25rem'><Text>Four</Text></Flex.Item>
97
97
  </Flex>
98
- <Flex withVisualDebug margin="none none general.space2xl" gap="small large" wrap="wrap">
98
+ <Flex withVisualDebug margin="none none general.space2xl" gap="general.spaceMd general.space2xl" wrap="wrap">
99
99
  <Flex.Item size='25rem'><Text>One</Text></Flex.Item>
100
100
  <Flex.Item size='25rem'><Text>Two</Text></Flex.Item>
101
101
  <Flex.Item size='25rem'><Text>Three</Text></Flex.Item>
102
102
  <Flex.Item size='25rem'><Text>Four</Text></Flex.Item>
103
103
  </Flex>
104
- <Flex withVisualDebug margin="none none general.space2xl" gap="small" wrap="wrap-reverse">
104
+ <Flex withVisualDebug margin="none none general.space2xl" gap="general.spaceMd" wrap="wrap-reverse">
105
105
  <Flex.Item size='25rem'><Text>One</Text></Flex.Item>
106
106
  <Flex.Item size='25rem'><Text>Two</Text></Flex.Item>
107
107
  <Flex.Item size='25rem'><Text>Three</Text></Flex.Item>
108
108
  <Flex.Item size='25rem'><Text>Four</Text></Flex.Item>
109
109
  </Flex>
110
- <Flex withVisualDebug margin="none none general.space2xl" gap="small large" wrap="wrap-reverse">
110
+ <Flex withVisualDebug margin="none none general.space2xl" gap="general.spaceMd general.space2xl" wrap="wrap-reverse">
111
111
  <Flex.Item size='25rem'><Text>One</Text></Flex.Item>
112
112
  <Flex.Item size='25rem'><Text>Two</Text></Flex.Item>
113
113
  <Flex.Item size='25rem'><Text>Three</Text></Flex.Item>
@@ -126,16 +126,16 @@ their container.
126
126
  type: example
127
127
  ---
128
128
  <Flex withVisualDebug>
129
- <Flex.Item padding="x-small">
129
+ <Flex.Item padding="general.spaceSm">
130
130
  <Text>Villum dolore eu fugiat nulla pariatur.</Text>
131
131
  </Flex.Item>
132
- <Flex.Item padding="x-small">
132
+ <Flex.Item padding="general.spaceSm">
133
133
  <Text>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</Text>
134
134
  </Flex.Item>
135
- <Flex.Item padding="x-small">
135
+ <Flex.Item padding="general.spaceSm">
136
136
  <Text>Duis aute irure.</Text>
137
137
  </Flex.Item>
138
- <Flex.Item padding="x-small">
138
+ <Flex.Item padding="general.spaceSm">
139
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>
@@ -149,16 +149,16 @@ container.
149
149
  type: example
150
150
  ---
151
151
  <Flex withVisualDebug>
152
- <Flex.Item padding="x-small" shouldShrink>
152
+ <Flex.Item padding="general.spaceSm" shouldShrink>
153
153
  <Text>Villum dolore eu fugiat nulla pariatur.</Text>
154
154
  </Flex.Item>
155
- <Flex.Item padding="x-small" shouldShrink>
155
+ <Flex.Item padding="general.spaceSm" shouldShrink>
156
156
  <Text>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</Text>
157
157
  </Flex.Item>
158
- <Flex.Item padding="x-small" shouldShrink>
158
+ <Flex.Item padding="general.spaceSm" shouldShrink>
159
159
  <Text>Duis aute irure.</Text>
160
160
  </Flex.Item>
161
- <Flex.Item padding="x-small" shouldShrink>
161
+ <Flex.Item padding="general.spaceSm" shouldShrink>
162
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>
@@ -171,7 +171,7 @@ The `shouldGrow` property forces the Flex.Item to expand to fill in any availabl
171
171
  type: example
172
172
  ---
173
173
  <Flex withVisualDebug>
174
- <Flex.Item padding="x-small" shouldShrink shouldGrow>
174
+ <Flex.Item padding="general.spaceSm" shouldShrink shouldGrow>
175
175
  <Text>I am growing and shrinking!</Text>
176
176
  </Flex.Item>
177
177
  <Flex.Item>
@@ -190,13 +190,13 @@ shrink to less than their `size`.
190
190
  type: example
191
191
  ---
192
192
  <Flex withVisualDebug>
193
- <Flex.Item padding="x-small" size="200px">
193
+ <Flex.Item padding="general.spaceSm" size="200px">
194
194
  <Text>I am always 200px.</Text>
195
195
  </Flex.Item>
196
- <Flex.Item padding="x-small" shouldShrink shouldGrow size="200px">
196
+ <Flex.Item padding="general.spaceSm" shouldShrink shouldGrow size="200px">
197
197
  <Text>I can grow, and shrink down to 200px.</Text>
198
198
  </Flex.Item>
199
- <Flex.Item padding="x-small" size="25%">
199
+ <Flex.Item padding="general.spaceSm" size="25%">
200
200
  <Text>I am always 25%.</Text>
201
201
  </Flex.Item>
202
202
  </Flex>
@@ -291,13 +291,13 @@ type: example
291
291
  withVisualDebug
292
292
  direction="column"
293
293
  >
294
- <Flex.Item padding="small">
294
+ <Flex.Item padding="general.spaceMd">
295
295
  <Heading>Pandas are cute, right?</Heading>
296
296
  </Flex.Item>
297
297
  <Flex.Item>
298
298
  <TextInput name="name" renderLabel="If you dont add padding, the focus ring will be cut off!" />
299
299
  </Flex.Item>
300
- <Flex.Item size="150px" padding="small">
300
+ <Flex.Item size="150px" padding="general.spaceMd">
301
301
  <Img src={avatarSquare} />
302
302
  </Flex.Item>
303
303
  </Flex>
@@ -312,7 +312,7 @@ type: example
312
312
  type: example
313
313
  ---
314
314
  <Flex>
315
- <Flex.Item shouldGrow shouldShrink padding="none medium none none">
315
+ <Flex.Item shouldGrow shouldShrink padding="none general.spaceXl none none">
316
316
  <Heading>Lorem ipsum dolor sit amet consectetur dolor sit</Heading>
317
317
  </Flex.Item>
318
318
  <Flex.Item>
@@ -332,22 +332,22 @@ type: example
332
332
  ---
333
333
  type: example
334
334
  ---
335
- <Flex height="32rem" justifyItems="center" padding="large" withVisualDebug>
335
+ <Flex height="32rem" justifyItems="center" padding="general.space2xl" withVisualDebug>
336
336
  <Flex.Item shouldShrink shouldGrow textAlign="center">
337
337
 
338
338
  <Heading level="h1" margin="0 0 general.spaceXl">An amazing thing!</Heading>
339
339
 
340
340
  <Flex withVisualDebug wrap="wrap" justifyItems="space-around" margin="0 0 general.spaceXl">
341
- <Flex.Item padding="small">
342
- <HeartInstUIIcon size="medium" title="Icon Example" color="primary" />
341
+ <Flex.Item padding="general.spaceMd">
342
+ <HeartInstUIIcon size="md" title="Icon Example" color="primary" />
343
343
  <Text weight="bold" size="large" as="div">We love you!</Text>
344
344
  </Flex.Item>
345
- <Flex.Item padding="small">
346
- <HeartInstUIIcon size="medium" title="Icon Example" color="primary" />
345
+ <Flex.Item padding="general.spaceMd">
346
+ <HeartInstUIIcon size="md" title="Icon Example" color="primary" />
347
347
  <Text weight="bold" size="large" as="div">We love you!</Text>
348
348
  </Flex.Item>
349
- <Flex.Item padding="small">
350
- <HeartInstUIIcon size="medium" title="Icon Example" color="primary" />
349
+ <Flex.Item padding="general.spaceMd">
350
+ <HeartInstUIIcon size="md" 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>
@@ -369,15 +369,15 @@ type: example
369
369
 
370
370
  <Flex height="400px" width="300px" as="div" direction="column" withVisualDebug>
371
371
 
372
- <Flex.Item padding="small" as="header" textAlign="center">
372
+ <Flex.Item padding="general.spaceMd" as="header" textAlign="center">
373
373
  <Heading level="h3">App</Heading>
374
374
  </Flex.Item>
375
375
 
376
- <Flex.Item shouldGrow shouldShrink padding="small" as="main">
376
+ <Flex.Item shouldGrow shouldShrink padding="general.spaceMd" as="main">
377
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
- <Flex.Item padding="small" as="footer">
380
+ <Flex.Item padding="general.spaceMd" as="footer">
381
381
 
382
382
  <Flex withVisualDebug justifyItems="space-between">
383
383
  <Flex.Item>