@instructure/ui-buttons 11.0.2-snapshot-1 → 11.0.2-snapshot-3
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.
- package/CHANGELOG.md +1 -1
- package/README.md +5 -5
- package/package.json +17 -17
- package/src/BaseButton/README.md +1 -1
- package/src/Button/README.md +4 -4
- package/src/CloseButton/README.md +3 -3
- package/src/IconButton/README.md +2 -2
- package/tsconfig.build.tsbuildinfo +1 -1
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.0.2-snapshot-
|
|
6
|
+
## [11.0.2-snapshot-3](https://github.com/instructure/instructure-ui/compare/v11.0.1...v11.0.2-snapshot-3) (2025-10-21)
|
|
7
7
|
|
|
8
8
|
**Note:** Version bump only for package @instructure/ui-buttons
|
|
9
9
|
|
package/README.md
CHANGED
|
@@ -10,11 +10,11 @@ Accessible button components.
|
|
|
10
10
|
|
|
11
11
|
The `ui-buttons` package contains the following:
|
|
12
12
|
|
|
13
|
-
- [Button](
|
|
14
|
-
- [CloseButton](
|
|
15
|
-
- [CondensedButton](
|
|
16
|
-
- [IconButton](
|
|
17
|
-
- [ToggleButton](
|
|
13
|
+
- [Button](Button)
|
|
14
|
+
- [CloseButton](CloseButton)
|
|
15
|
+
- [CondensedButton](CondensedButton)
|
|
16
|
+
- [IconButton](IconButton)
|
|
17
|
+
- [ToggleButton](ToggleButton)
|
|
18
18
|
|
|
19
19
|
### Installation
|
|
20
20
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@instructure/ui-buttons",
|
|
3
|
-
"version": "11.0.2-snapshot-
|
|
3
|
+
"version": "11.0.2-snapshot-3",
|
|
4
4
|
"description": "Accessible button components",
|
|
5
5
|
"author": "Instructure, Inc. Engineering and Product Design",
|
|
6
6
|
"module": "./es/index.js",
|
|
@@ -23,9 +23,9 @@
|
|
|
23
23
|
},
|
|
24
24
|
"license": "MIT",
|
|
25
25
|
"devDependencies": {
|
|
26
|
-
"@instructure/ui-axe-check": "11.0.2-snapshot-
|
|
27
|
-
"@instructure/ui-babel-preset": "11.0.2-snapshot-
|
|
28
|
-
"@instructure/ui-themes": "11.0.2-snapshot-
|
|
26
|
+
"@instructure/ui-axe-check": "11.0.2-snapshot-3",
|
|
27
|
+
"@instructure/ui-babel-preset": "11.0.2-snapshot-3",
|
|
28
|
+
"@instructure/ui-themes": "11.0.2-snapshot-3",
|
|
29
29
|
"@testing-library/jest-dom": "^6.6.3",
|
|
30
30
|
"@testing-library/react": "15.0.7",
|
|
31
31
|
"@testing-library/user-event": "^14.6.1",
|
|
@@ -33,19 +33,19 @@
|
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
35
|
"@babel/runtime": "^7.27.6",
|
|
36
|
-
"@instructure/console": "11.0.2-snapshot-
|
|
37
|
-
"@instructure/emotion": "11.0.2-snapshot-
|
|
38
|
-
"@instructure/shared-types": "11.0.2-snapshot-
|
|
39
|
-
"@instructure/ui-a11y-content": "11.0.2-snapshot-
|
|
40
|
-
"@instructure/ui-a11y-utils": "11.0.2-snapshot-
|
|
41
|
-
"@instructure/ui-color-utils": "11.0.2-snapshot-
|
|
42
|
-
"@instructure/ui-dom-utils": "11.0.2-snapshot-
|
|
43
|
-
"@instructure/ui-icons": "11.0.2-snapshot-
|
|
44
|
-
"@instructure/ui-position": "11.0.2-snapshot-
|
|
45
|
-
"@instructure/ui-react-utils": "11.0.2-snapshot-
|
|
46
|
-
"@instructure/ui-tooltip": "11.0.2-snapshot-
|
|
47
|
-
"@instructure/ui-utils": "11.0.2-snapshot-
|
|
48
|
-
"@instructure/ui-view": "11.0.2-snapshot-
|
|
36
|
+
"@instructure/console": "11.0.2-snapshot-3",
|
|
37
|
+
"@instructure/emotion": "11.0.2-snapshot-3",
|
|
38
|
+
"@instructure/shared-types": "11.0.2-snapshot-3",
|
|
39
|
+
"@instructure/ui-a11y-content": "11.0.2-snapshot-3",
|
|
40
|
+
"@instructure/ui-a11y-utils": "11.0.2-snapshot-3",
|
|
41
|
+
"@instructure/ui-color-utils": "11.0.2-snapshot-3",
|
|
42
|
+
"@instructure/ui-dom-utils": "11.0.2-snapshot-3",
|
|
43
|
+
"@instructure/ui-icons": "11.0.2-snapshot-3",
|
|
44
|
+
"@instructure/ui-position": "11.0.2-snapshot-3",
|
|
45
|
+
"@instructure/ui-react-utils": "11.0.2-snapshot-3",
|
|
46
|
+
"@instructure/ui-tooltip": "11.0.2-snapshot-3",
|
|
47
|
+
"@instructure/ui-utils": "11.0.2-snapshot-3",
|
|
48
|
+
"@instructure/ui-view": "11.0.2-snapshot-3",
|
|
49
49
|
"keycode": "^2"
|
|
50
50
|
},
|
|
51
51
|
"peerDependencies": {
|
package/src/BaseButton/README.md
CHANGED
|
@@ -3,7 +3,7 @@ describes: BaseButton
|
|
|
3
3
|
---
|
|
4
4
|
|
|
5
5
|
`BaseButton` is a low level utility component used to compose Instructure UI buttons. In most cases, it should not be used directly.
|
|
6
|
-
Use [Button](
|
|
6
|
+
Use [Button](Button), [CloseButton](CloseButton), [IconButton](IconButton), or [CondensedButton](CondensedButton) instead.
|
|
7
7
|
|
|
8
8
|
```js
|
|
9
9
|
---
|
package/src/Button/README.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
describes: Button
|
|
3
3
|
---
|
|
4
4
|
|
|
5
|
-
Button allows users to perform actions or trigger changes. If selecting the Button causes the user to navigate to a different location, consider using the [Link](
|
|
5
|
+
Button allows users to perform actions or trigger changes. If selecting the Button causes the user to navigate to a different location, consider using the [Link](Link) component instead.
|
|
6
6
|
|
|
7
7
|
```js
|
|
8
8
|
---
|
|
@@ -65,7 +65,7 @@ type: example
|
|
|
65
65
|
|
|
66
66
|
### Rendering icons in Buttons
|
|
67
67
|
|
|
68
|
-
An icon can be rendered alongside the Button content using the `renderIcon` prop. Use [IconButton](
|
|
68
|
+
An icon can be rendered alongside the Button content using the `renderIcon` prop. Use [IconButton](IconButton) instead if your Button only displays an Icon with no other visual content.
|
|
69
69
|
|
|
70
70
|
```js
|
|
71
71
|
---
|
|
@@ -95,7 +95,7 @@ type: example
|
|
|
95
95
|
</View>
|
|
96
96
|
```
|
|
97
97
|
|
|
98
|
-
If you need to prevent text wrapping, you can use the [TruncateText](
|
|
98
|
+
If you need to prevent text wrapping, you can use the [TruncateText](TruncateText) util. You can also conditionally render a [Tooltip](Tooltip) with the full text when truncation occurs.
|
|
99
99
|
|
|
100
100
|
```js
|
|
101
101
|
---
|
|
@@ -189,7 +189,7 @@ type: example
|
|
|
189
189
|
|
|
190
190
|
### Styling buttons
|
|
191
191
|
|
|
192
|
-
[Button](
|
|
192
|
+
[Button](Button) and [IconButton](IconButton) share the same styling mechanics (they are `BaseButton`s underneath). You need to set the theme based on their `color` and `withBackground` prop:
|
|
193
193
|
|
|
194
194
|
```js
|
|
195
195
|
---
|
|
@@ -4,7 +4,7 @@ describes: CloseButton
|
|
|
4
4
|
|
|
5
5
|
Some design patterns require a `CloseButton` to be placed in the start or end position. This is a helper component that gives you the close icon out of the box and facilitates placement.
|
|
6
6
|
|
|
7
|
-
The `placement` prop designates the `CloseButton` placement within the parent container. Note that in order to apply an `offset`, `placement` should be set to `start` or `end`. Also make sure that the container has a `position` css style applied other than `static`. In the following example we use [View](
|
|
7
|
+
The `placement` prop designates the `CloseButton` placement within the parent container. Note that in order to apply an `offset`, `placement` should be set to `start` or `end`. Also make sure that the container has a `position` css style applied other than `static`. In the following example we use [View](View) as the container and set the `position` to `relative`.
|
|
8
8
|
|
|
9
9
|
```js
|
|
10
10
|
---
|
|
@@ -15,7 +15,7 @@ type: example
|
|
|
15
15
|
</View>
|
|
16
16
|
```
|
|
17
17
|
|
|
18
|
-
If you need the `CloseButton` to work in a layout with other elements vs. absolutely positioning it, you can omit the `placement` prop or set it to `static`. You can then use another tool such as [Flex](
|
|
18
|
+
If you need the `CloseButton` to work in a layout with other elements vs. absolutely positioning it, you can omit the `placement` prop or set it to `static`. You can then use another tool such as [Flex](Flex) to handle the layout.
|
|
19
19
|
|
|
20
20
|
```js
|
|
21
21
|
---
|
|
@@ -33,7 +33,7 @@ type: example
|
|
|
33
33
|
</View>
|
|
34
34
|
```
|
|
35
35
|
|
|
36
|
-
If you need even more customization, note that you can always compose this component using the [IconButton](
|
|
36
|
+
If you need even more customization, note that you can always compose this component using the [IconButton](IconButton) directly. Supply the `renderIcon` prop with [IconXSolid](icons) and set the `withBorder` and `withBackground` props to `false`.
|
|
37
37
|
|
|
38
38
|
```js
|
|
39
39
|
---
|
package/src/IconButton/README.md
CHANGED
|
@@ -23,7 +23,7 @@ type: example
|
|
|
23
23
|
<IconButton color="primary" screenReaderLabel="Add blog post"><IconAddLine /></IconButton>
|
|
24
24
|
```
|
|
25
25
|
|
|
26
|
-
Using [Tooltip](
|
|
26
|
+
Using [Tooltip](Tooltip) in conjunction with IconButton can also provide necessary context when the IconButton alone would be insufficient.
|
|
27
27
|
|
|
28
28
|
```js
|
|
29
29
|
---
|
|
@@ -88,4 +88,4 @@ type: example
|
|
|
88
88
|
|
|
89
89
|
### Styling
|
|
90
90
|
|
|
91
|
-
For an example see [Button](
|
|
91
|
+
For an example see [Button](Button/#Styling%20buttons)
|