@instructure/ui-buttons 11.7.4-snapshot-102 → 11.7.4-snapshot-105

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 (19) hide show
  1. package/CHANGELOG.md +7 -1
  2. package/package.json +17 -17
  3. package/src/BaseButton/v2/README.md +1 -1
  4. package/src/BaseButton/v2/props.ts +3 -3
  5. package/src/Button/v2/README.md +24 -24
  6. package/src/Button/v2/props.ts +3 -3
  7. package/src/CloseButton/v2/README.md +1 -1
  8. package/src/CloseButton/v2/props.ts +3 -3
  9. package/src/CondensedButton/v1/README.md +1 -1
  10. package/src/CondensedButton/v2/README.md +1 -1
  11. package/src/CondensedButton/v2/props.ts +3 -3
  12. package/src/IconButton/v2/README.md +8 -8
  13. package/src/IconButton/v2/props.ts +3 -3
  14. package/tsconfig.build.tsbuildinfo +1 -1
  15. package/types/BaseButton/v2/props.d.ts +3 -3
  16. package/types/Button/v2/props.d.ts +3 -3
  17. package/types/CloseButton/v2/props.d.ts +3 -3
  18. package/types/CondensedButton/v2/props.d.ts +3 -3
  19. package/types/IconButton/v2/props.d.ts +3 -3
package/CHANGELOG.md CHANGED
@@ -3,12 +3,18 @@
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-102](https://github.com/instructure/instructure-ui/compare/v11.7.3...v11.7.4-snapshot-102) (2026-07-14)
6
+ ## [11.7.4-snapshot-105](https://github.com/instructure/instructure-ui/compare/v11.7.3...v11.7.4-snapshot-105) (2026-07-15)
7
7
 
8
8
 
9
9
  ### Bug Fixes
10
10
 
11
11
  * **ui-buttons:** fix buttons disabled style and color ([2f2f7b0](https://github.com/instructure/instructure-ui/commit/2f2f7b04c7d666aef0e76054c9f722dab9f679e7))
12
+ * **ui-table:** fix caption for table to be responsive to sorting ([aac2b17](https://github.com/instructure/instructure-ui/commit/aac2b1790f970a1e8e2d959723eb0e4248105dd2))
13
+
14
+
15
+ ### Features
16
+
17
+ * **many:** support current spacing tokens in the margin prop for v2 components ([1b47c5f](https://github.com/instructure/instructure-ui/commit/1b47c5f23eaa60b532cdfd53c39bd71f0cf51aaa))
12
18
 
13
19
 
14
20
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-buttons",
3
- "version": "11.7.4-snapshot-102",
3
+ "version": "11.7.4-snapshot-105",
4
4
  "description": "Accessible button components",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "module": "./es/index.js",
@@ -16,28 +16,28 @@
16
16
  "dependencies": {
17
17
  "@babel/runtime": "^7.29.7",
18
18
  "keycode": "^2",
19
- "@instructure/console": "11.7.4-snapshot-102",
20
- "@instructure/shared-types": "11.7.4-snapshot-102",
21
- "@instructure/ui-a11y-utils": "11.7.4-snapshot-102",
22
- "@instructure/emotion": "11.7.4-snapshot-102",
23
- "@instructure/ui-a11y-content": "11.7.4-snapshot-102",
24
- "@instructure/ui-dom-utils": "11.7.4-snapshot-102",
25
- "@instructure/ui-color-utils": "11.7.4-snapshot-102",
26
- "@instructure/ui-icons": "11.7.4-snapshot-102",
27
- "@instructure/ui-position": "11.7.4-snapshot-102",
28
- "@instructure/ui-themes": "11.7.4-snapshot-102",
29
- "@instructure/ui-view": "11.7.4-snapshot-102",
30
- "@instructure/ui-react-utils": "11.7.4-snapshot-102",
31
- "@instructure/ui-utils": "11.7.4-snapshot-102",
32
- "@instructure/ui-tooltip": "11.7.4-snapshot-102"
19
+ "@instructure/console": "11.7.4-snapshot-105",
20
+ "@instructure/emotion": "11.7.4-snapshot-105",
21
+ "@instructure/shared-types": "11.7.4-snapshot-105",
22
+ "@instructure/ui-a11y-content": "11.7.4-snapshot-105",
23
+ "@instructure/ui-a11y-utils": "11.7.4-snapshot-105",
24
+ "@instructure/ui-color-utils": "11.7.4-snapshot-105",
25
+ "@instructure/ui-dom-utils": "11.7.4-snapshot-105",
26
+ "@instructure/ui-icons": "11.7.4-snapshot-105",
27
+ "@instructure/ui-position": "11.7.4-snapshot-105",
28
+ "@instructure/ui-react-utils": "11.7.4-snapshot-105",
29
+ "@instructure/ui-themes": "11.7.4-snapshot-105",
30
+ "@instructure/ui-tooltip": "11.7.4-snapshot-105",
31
+ "@instructure/ui-utils": "11.7.4-snapshot-105",
32
+ "@instructure/ui-view": "11.7.4-snapshot-105"
33
33
  },
34
34
  "devDependencies": {
35
35
  "@testing-library/jest-dom": "^6.9.1",
36
36
  "@testing-library/react": "16.3.2",
37
37
  "@testing-library/user-event": "^14.6.1",
38
38
  "vitest": "^4.1.9",
39
- "@instructure/ui-babel-preset": "11.7.4-snapshot-102",
40
- "@instructure/ui-axe-check": "11.7.4-snapshot-102"
39
+ "@instructure/ui-axe-check": "11.7.4-snapshot-105",
40
+ "@instructure/ui-babel-preset": "11.7.4-snapshot-105"
41
41
  },
42
42
  "peerDependencies": {
43
43
  "react": ">=18 <=19"
package/src/BaseButton/v2/README.md CHANGED
@@ -9,7 +9,7 @@ Use [Button](Button), [CloseButton](CloseButton), [IconButton](IconButton), or [
9
9
  ---
10
10
  type: example
11
11
  ---
12
- <View display="block" margin="medium">
12
+ <View display="block" margin="general.spaceXl">
13
13
  <BaseButton>Click me</BaseButton>
14
14
  </View>
15
15
  ```
package/src/BaseButton/v2/props.ts CHANGED
@@ -120,9 +120,9 @@ type BaseButtonOwnProps = {
120
120
  isCondensed?: boolean
121
121
 
122
122
  /**
123
- * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
124
- * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
125
- * familiar CSS-like shorthand. For example: `margin="small auto large"`.
123
+ * Valid values are `0`, `none`, `auto`, and Spacing token values,
124
+ * see https://instructure.design/layout-spacing. Apply these values via
125
+ * familiar CSS-like shorthand. For example, `margin="general.spaceMd auto"`.
126
126
  */
127
127
  margin?: Spacing
128
128
 
package/src/Button/v2/README.md CHANGED
@@ -20,12 +20,12 @@ The `color` prop will change the Button's color scheme.
20
20
  type: example
21
21
  ---
22
22
  <View display="block">
23
- <Button color="primary" margin="small">Primary</Button>
24
- <Button color="secondary" margin="small">Secondary</Button>
25
- <Button color="success" margin="small">Success</Button>
26
- <Button color="danger" margin="small">Danger</Button>
27
- <Button color="ai-primary" margin="small">AI Primary</Button>
28
- <Button color="ai-secondary" margin="small">AI Secondary</Button>
23
+ <Button color="primary" margin="general.spaceMd">Primary</Button>
24
+ <Button color="secondary" margin="general.spaceMd">Secondary</Button>
25
+ <Button color="success" margin="general.spaceMd">Success</Button>
26
+ <Button color="danger" margin="general.spaceMd">Danger</Button>
27
+ <Button color="ai-primary" margin="general.spaceMd">AI Primary</Button>
28
+ <Button color="ai-secondary" margin="general.spaceMd">AI Secondary</Button>
29
29
  </View>
30
30
  ```
31
31
 
@@ -38,7 +38,7 @@ The `primary-inverse` color is designed for use on colored backgrounds. It provi
38
38
  type: example
39
39
  ---
40
40
  <View display="block" background="info" padding="small">
41
- <Button color="primary-inverse" margin="small">Primary Inverse</Button>
41
+ <Button color="primary-inverse" margin="general.spaceMd">Primary Inverse</Button>
42
42
  </View>
43
43
  ```
44
44
 
@@ -51,12 +51,12 @@ There is a specific need for `AI buttons`, which has an icon and gradient colors
51
51
  type: example
52
52
  ---
53
53
  <View display="block">
54
- <Button color="ai-primary" renderIcon={IgniteaiLogoInstUIIcon} margin="small">AI Primary</Button>
55
- <Button color="ai-secondary" renderIcon={IgniteaiLogoInstUIIcon} margin="small">AI Secondary</Button>
56
- <IconButton color="ai-primary" screenReaderLabel="AI button" margin="small"><IgniteaiLogoInstUIIcon/></IconButton>
57
- <IconButton shape='circle' color="ai-secondary" screenReaderLabel="AI button" margin="small"><IgniteaiLogoInstUIIcon/></IconButton>
58
- <IconButton shape='circle' color="ai-primary" screenReaderLabel="AI button" margin="small"><IgniteaiLogoInstUIIcon/></IconButton>
59
- <IconButton color="ai-secondary" screenReaderLabel="AI button" margin="small"><IgniteaiLogoInstUIIcon/></IconButton>
54
+ <Button color="ai-primary" renderIcon={IgniteaiLogoInstUIIcon} margin="general.spaceMd">AI Primary</Button>
55
+ <Button color="ai-secondary" renderIcon={IgniteaiLogoInstUIIcon} margin="general.spaceMd">AI Secondary</Button>
56
+ <IconButton color="ai-primary" screenReaderLabel="AI button" margin="general.spaceMd"><IgniteaiLogoInstUIIcon/></IconButton>
57
+ <IconButton shape='circle' color="ai-secondary" screenReaderLabel="AI button" margin="general.spaceMd"><IgniteaiLogoInstUIIcon/></IconButton>
58
+ <IconButton shape='circle' color="ai-primary" screenReaderLabel="AI button" margin="general.spaceMd"><IgniteaiLogoInstUIIcon/></IconButton>
59
+ <IconButton color="ai-secondary" screenReaderLabel="AI button" margin="general.spaceMd"><IgniteaiLogoInstUIIcon/></IconButton>
60
60
  </View>
61
61
  ```
62
62
 
@@ -69,9 +69,9 @@ To specify the Button `size`, set the size prop to `small`, `medium` (default) o
69
69
  type: example
70
70
  ---
71
71
  <View display="block">
72
- <Button size="small" margin="small">Small</Button>
73
- <Button margin="small">Medium</Button>
74
- <Button size="large" margin="small">Large</Button>
72
+ <Button size="small" margin="general.spaceMd">Small</Button>
73
+ <Button margin="general.spaceMd">Medium</Button>
74
+ <Button size="large" margin="general.spaceMd">Large</Button>
75
75
  </View>
76
76
  ```
77
77
 
@@ -82,8 +82,8 @@ There are also two condensed size variants for compact layouts: `condensedSmall`
82
82
  type: example
83
83
  ---
84
84
  <View display="block">
85
- <Button size="condensedSmall" margin="small">Condensed Small</Button>
86
- <Button size="condensedMedium" margin="small">Condensed Medium</Button>
85
+ <Button size="condensedSmall" margin="general.spaceMd">Condensed Small</Button>
86
+ <Button size="condensedMedium" margin="general.spaceMd">Condensed Medium</Button>
87
87
  </View>
88
88
  ```
89
89
 
@@ -109,7 +109,7 @@ type: example
109
109
  <View
110
110
  display="block"
111
111
  width="10rem"
112
- margin="small"
112
+ margin="general.spaceMd"
113
113
  padding="small none"
114
114
  withVisualDebug
115
115
  >
@@ -146,7 +146,7 @@ type: example
146
146
  <View
147
147
  display="block"
148
148
  width="10rem"
149
- margin="small"
149
+ margin="general.spaceMd"
150
150
  padding="small none"
151
151
  withVisualDebug
152
152
  >
@@ -178,7 +178,7 @@ type: example
178
178
  <View
179
179
  display="block"
180
180
  width="30rem"
181
- margin="small"
181
+ margin="general.spaceMd"
182
182
  padding="small none"
183
183
  withVisualDebug
184
184
  >
@@ -202,7 +202,7 @@ Use backgroundless buttons when there is a need to deemphasize the button. Be su
202
202
  type: example
203
203
  ---
204
204
  <View display="block">
205
- <Button renderIcon={PlusInstUIIcon} withBackground={false} color="primary" margin="small">Click here</Button>
205
+ <Button renderIcon={PlusInstUIIcon} withBackground={false} color="primary" margin="general.spaceMd">Click here</Button>
206
206
  </View>
207
207
  ```
208
208
 
@@ -261,7 +261,7 @@ type: example
261
261
  onChange={this.toggleWithBackground}
262
262
  />
263
263
  </FormFieldGroup>
264
- <View display="block" margin="small none">
264
+ <View display="block" margin="general.spaceMd none">
265
265
  <RadioInputGroup
266
266
  name="color"
267
267
  defaultValue="secondary"
@@ -273,7 +273,7 @@ type: example
273
273
  <RadioInput label="secondary" value="secondary" />
274
274
  </RadioInputGroup>
275
275
  </View>
276
- <Flex margin="none none medium" gap="medium">
276
+ <Flex margin="none none general.spaceXl" gap="medium">
277
277
  <Flex.Item>
278
278
  <Button withBackground={this.state.withBackground}
279
279
  color={this.state.color}
package/src/Button/v2/props.ts CHANGED
@@ -98,9 +98,9 @@ type ButtonOwnProps = {
98
98
  withBackground?: boolean
99
99
 
100
100
  /**
101
- * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
102
- * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
103
- * familiar CSS-like shorthand. For example: `margin="small auto large"`.
101
+ * Valid values are `0`, `none`, `auto`, and Spacing token values,
102
+ * see https://instructure.design/layout-spacing. Apply these values via
103
+ * familiar CSS-like shorthand. For example, `margin="general.spaceMd auto"`.
104
104
  */
105
105
  margin?: Spacing
106
106
 
package/src/CloseButton/v2/README.md CHANGED
@@ -48,7 +48,7 @@ type: example
48
48
  size="small"
49
49
  withBackground={false}
50
50
  withBorder={false}
51
- margin="small"
51
+ margin="general.spaceMd"
52
52
  />
53
53
  </Flex.Item>
54
54
  </Flex>
package/src/CloseButton/v2/props.ts CHANGED
@@ -71,9 +71,9 @@ type CloseButtonOwnProps = {
71
71
  ) => void
72
72
 
73
73
  /**
74
- * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
75
- * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
76
- * familiar CSS-like shorthand. For example: `margin="small auto large"`.
74
+ * Valid values are `0`, `none`, `auto`, and Spacing token values,
75
+ * see https://instructure.design/layout-spacing. Apply these values via
76
+ * familiar CSS-like shorthand. For example, `margin="general.spaceMd auto"`.
77
77
  */
78
78
  margin?: Spacing
79
79
 
package/src/CondensedButton/v1/README.md CHANGED
@@ -19,7 +19,7 @@ In the following example, CondensedButton is used so that the button content can
19
19
  ---
20
20
  type: example
21
21
  ---
22
- <Table caption='Tallest Roller Coasters'>
22
+ <Table caption={() => 'Tallest Roller Coasters'}>
23
23
  <Table.Head>
24
24
  <Table.Row>
25
25
  <Table.ColHeader id="Roller Coaster">
package/src/CondensedButton/v2/README.md CHANGED
@@ -19,7 +19,7 @@ In the following example, CondensedButton is used so that the button content can
19
19
  ---
20
20
  type: example
21
21
  ---
22
- <Table caption='Tallest Roller Coasters'>
22
+ <Table caption={() => 'Tallest Roller Coasters'}>
23
23
  <Table.Head>
24
24
  <Table.Row>
25
25
  <Table.ColHeader id="Roller Coaster">
package/src/CondensedButton/v2/props.ts CHANGED
@@ -70,9 +70,9 @@ type CondensedButtonOwnProps = {
70
70
  color?: 'primary' | 'primary-inverse' | 'secondary'
71
71
 
72
72
  /**
73
- * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
74
- * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
75
- * familiar CSS-like shorthand. For example: `margin="small auto large"`.
73
+ * Valid values are `0`, `none`, `auto`, and Spacing token values,
74
+ * see https://instructure.design/layout-spacing. Apply these values via
75
+ * familiar CSS-like shorthand. For example, `margin="general.spaceMd auto"`.
76
76
  */
77
77
  margin?: Spacing
78
78
 
package/src/IconButton/v2/README.md CHANGED
@@ -19,9 +19,9 @@ type: example
19
19
  type: example
20
20
  ---
21
21
  <View display="block">
22
- <IconButton size="small" screenReaderLabel="Add" margin="small"><PlusInstUIIcon /></IconButton>
23
- <IconButton size="medium" screenReaderLabel="Add" margin="small"><PlusInstUIIcon /></IconButton>
24
- <IconButton size="large" screenReaderLabel="Add" margin="small"><PlusInstUIIcon /></IconButton>
22
+ <IconButton size="small" screenReaderLabel="Add" margin="general.spaceMd"><PlusInstUIIcon /></IconButton>
23
+ <IconButton size="medium" screenReaderLabel="Add" margin="general.spaceMd"><PlusInstUIIcon /></IconButton>
24
+ <IconButton size="large" screenReaderLabel="Add" margin="general.spaceMd"><PlusInstUIIcon /></IconButton>
25
25
  </View>
26
26
  ```
27
27
 
@@ -91,8 +91,8 @@ type: example
91
91
  type: example
92
92
  ---
93
93
  <View display="block">
94
- <IconButton color="ai-primary" screenReaderLabel="AI button" margin="small"><IgniteaiLogoInstUIIcon/></IconButton>
95
- <IconButton color="ai-secondary" screenReaderLabel="AI button" margin="small"><IgniteaiLogoInstUIIcon/></IconButton>
94
+ <IconButton color="ai-primary" screenReaderLabel="AI button" margin="general.spaceMd"><IgniteaiLogoInstUIIcon/></IconButton>
95
+ <IconButton color="ai-secondary" screenReaderLabel="AI button" margin="general.spaceMd"><IgniteaiLogoInstUIIcon/></IconButton>
96
96
  </View>
97
97
  ```
98
98
 
@@ -105,8 +105,8 @@ The `shape` prop specifies if the IconButton will render as a `rectangle` or `ci
105
105
  type: example
106
106
  ---
107
107
  <View display="block">
108
- <IconButton shape="rectangle" screenReaderLabel="Delete tag" margin="small"><XInstUIIcon /></IconButton>
109
- <IconButton shape="circle" screenReaderLabel="Delete tag" margin="small"><XInstUIIcon /></IconButton>
108
+ <IconButton shape="rectangle" screenReaderLabel="Delete tag" margin="general.spaceMd"><XInstUIIcon /></IconButton>
109
+ <IconButton shape="circle" screenReaderLabel="Delete tag" margin="general.spaceMd"><XInstUIIcon /></IconButton>
110
110
  </View>
111
111
  ```
112
112
 
@@ -120,7 +120,7 @@ type: example
120
120
  ---
121
121
  <View display="block">
122
122
  <View display="inline-block" background="primary">
123
- <IconButton withBackground={false} withBorder={false} screenReaderLabel="Delete tag" margin="large">
123
+ <IconButton withBackground={false} withBorder={false} screenReaderLabel="Delete tag" margin="general.space2xl">
124
124
  <XInstUIIcon />
125
125
  </IconButton>
126
126
  </View>
package/src/IconButton/v2/props.ts CHANGED
@@ -109,9 +109,9 @@ type IconButtonOwnProps = {
109
109
  withBorder?: boolean
110
110
 
111
111
  /**
112
- * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
113
- * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
114
- * familiar CSS-like shorthand. For example: `margin="small auto large"`.
112
+ * Valid values are `0`, `none`, `auto`, and Spacing token values,
113
+ * see https://instructure.design/layout-spacing. Apply these values via
114
+ * familiar CSS-like shorthand. For example, `margin="general.spaceMd auto"`.
115
115
  */
116
116
  margin?: Spacing
117
117