@instructure/ui-checkbox 11.0.1-snapshot-0 → 11.0.1-snapshot-2
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/package.json +16 -16
- package/src/Checkbox/README.md +5 -98
- 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.1-snapshot-
|
|
6
|
+
## [11.0.1-snapshot-2](https://github.com/instructure/instructure-ui/compare/v11.0.0...v11.0.1-snapshot-2) (2025-10-10)
|
|
7
7
|
|
|
8
8
|
**Note:** Version bump only for package @instructure/ui-checkbox
|
|
9
9
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@instructure/ui-checkbox",
|
|
3
|
-
"version": "11.0.1-snapshot-
|
|
3
|
+
"version": "11.0.1-snapshot-2",
|
|
4
4
|
"description": " styled HTML input type='checkbox' component.",
|
|
5
5
|
"author": "Instructure, Inc. Engineering and Product Design",
|
|
6
6
|
"module": "./es/index.js",
|
|
@@ -24,24 +24,24 @@
|
|
|
24
24
|
"license": "MIT",
|
|
25
25
|
"dependencies": {
|
|
26
26
|
"@babel/runtime": "^7.27.6",
|
|
27
|
-
"@instructure/console": "11.0.1-snapshot-
|
|
28
|
-
"@instructure/emotion": "11.0.1-snapshot-
|
|
29
|
-
"@instructure/shared-types": "11.0.1-snapshot-
|
|
30
|
-
"@instructure/ui-dom-utils": "11.0.1-snapshot-
|
|
31
|
-
"@instructure/ui-form-field": "11.0.1-snapshot-
|
|
32
|
-
"@instructure/ui-icons": "11.0.1-snapshot-
|
|
33
|
-
"@instructure/ui-react-utils": "11.0.1-snapshot-
|
|
34
|
-
"@instructure/ui-svg-images": "11.0.1-snapshot-
|
|
35
|
-
"@instructure/ui-utils": "11.0.1-snapshot-
|
|
36
|
-
"@instructure/ui-view": "11.0.1-snapshot-
|
|
37
|
-
"@instructure/uid": "11.0.1-snapshot-
|
|
27
|
+
"@instructure/console": "11.0.1-snapshot-2",
|
|
28
|
+
"@instructure/emotion": "11.0.1-snapshot-2",
|
|
29
|
+
"@instructure/shared-types": "11.0.1-snapshot-2",
|
|
30
|
+
"@instructure/ui-dom-utils": "11.0.1-snapshot-2",
|
|
31
|
+
"@instructure/ui-form-field": "11.0.1-snapshot-2",
|
|
32
|
+
"@instructure/ui-icons": "11.0.1-snapshot-2",
|
|
33
|
+
"@instructure/ui-react-utils": "11.0.1-snapshot-2",
|
|
34
|
+
"@instructure/ui-svg-images": "11.0.1-snapshot-2",
|
|
35
|
+
"@instructure/ui-utils": "11.0.1-snapshot-2",
|
|
36
|
+
"@instructure/ui-view": "11.0.1-snapshot-2",
|
|
37
|
+
"@instructure/uid": "11.0.1-snapshot-2",
|
|
38
38
|
"keycode": "^2"
|
|
39
39
|
},
|
|
40
40
|
"devDependencies": {
|
|
41
|
-
"@instructure/ui-axe-check": "11.0.1-snapshot-
|
|
42
|
-
"@instructure/ui-babel-preset": "11.0.1-snapshot-
|
|
43
|
-
"@instructure/ui-color-utils": "11.0.1-snapshot-
|
|
44
|
-
"@instructure/ui-themes": "11.0.1-snapshot-
|
|
41
|
+
"@instructure/ui-axe-check": "11.0.1-snapshot-2",
|
|
42
|
+
"@instructure/ui-babel-preset": "11.0.1-snapshot-2",
|
|
43
|
+
"@instructure/ui-color-utils": "11.0.1-snapshot-2",
|
|
44
|
+
"@instructure/ui-themes": "11.0.1-snapshot-2",
|
|
45
45
|
"@testing-library/jest-dom": "^6.6.3",
|
|
46
46
|
"@testing-library/react": "15.0.7",
|
|
47
47
|
"@testing-library/user-event": "^14.6.1",
|
package/src/Checkbox/README.md
CHANGED
|
@@ -39,103 +39,10 @@ between the parent and child Checkboxes clear to screenreader users.
|
|
|
39
39
|
_Note: the `toggle` variant does not support the `indeterminate`
|
|
40
40
|
property._
|
|
41
41
|
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
this.state = {
|
|
48
|
-
value: ['his111', 'eng203']
|
|
49
|
-
}
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
updateValue(value) {
|
|
53
|
-
const index = this.state.value.indexOf(value)
|
|
54
|
-
|
|
55
|
-
if (index === -1) {
|
|
56
|
-
this.setState({ value: [...this.state.value, value] })
|
|
57
|
-
} else {
|
|
58
|
-
this.setState((prevState) => ({
|
|
59
|
-
value: [
|
|
60
|
-
...prevState.value.slice(0, index),
|
|
61
|
-
...prevState.value.slice(index + 1)
|
|
62
|
-
]
|
|
63
|
-
}))
|
|
64
|
-
}
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
render() {
|
|
68
|
-
return (
|
|
69
|
-
<FormFieldGroup
|
|
70
|
-
description={
|
|
71
|
-
<ScreenReaderContent>
|
|
72
|
-
<span id="groupLabel">Courses to edit</span>
|
|
73
|
-
</ScreenReaderContent>
|
|
74
|
-
}
|
|
75
|
-
rowSpacing="small"
|
|
76
|
-
>
|
|
77
|
-
<Checkbox
|
|
78
|
-
aria-labelledby="groupLabel selectAllLabel"
|
|
79
|
-
label={<span id="selectAllLabel">Select all courses</span>}
|
|
80
|
-
value="all"
|
|
81
|
-
onChange={() =>
|
|
82
|
-
this.setState({
|
|
83
|
-
value:
|
|
84
|
-
this.state.value.length === 3
|
|
85
|
-
? []
|
|
86
|
-
: ['eng203', 'sci101', 'his111']
|
|
87
|
-
})
|
|
88
|
-
}
|
|
89
|
-
checked={this.state.value.length === 3}
|
|
90
|
-
indeterminate={
|
|
91
|
-
this.state.value.length > 0 && this.state.value.length < 3
|
|
92
|
-
}
|
|
93
|
-
/>
|
|
94
|
-
<View as="div" padding="0 0 0 medium">
|
|
95
|
-
<Checkbox
|
|
96
|
-
aria-labelledby="groupLabel eng203Label"
|
|
97
|
-
label={<span id="eng203Label">English 203</span>}
|
|
98
|
-
value="eng203"
|
|
99
|
-
name="courses"
|
|
100
|
-
onChange={(event) => {
|
|
101
|
-
this.updateValue(event.target.value)
|
|
102
|
-
}}
|
|
103
|
-
checked={this.state.value.indexOf('eng203') !== -1}
|
|
104
|
-
/>
|
|
105
|
-
</View>
|
|
106
|
-
<View as="div" padding="0 0 0 medium">
|
|
107
|
-
<Checkbox
|
|
108
|
-
aria-labelledby="groupLabel sci101Label"
|
|
109
|
-
label={<span id="sci101Label">Science 101</span>}
|
|
110
|
-
value="sci101"
|
|
111
|
-
name="courses"
|
|
112
|
-
onChange={(event) => {
|
|
113
|
-
this.updateValue(event.target.value)
|
|
114
|
-
}}
|
|
115
|
-
checked={this.state.value.indexOf('sci101') !== -1}
|
|
116
|
-
/>
|
|
117
|
-
</View>
|
|
118
|
-
<View as="div" padding="0 0 0 medium">
|
|
119
|
-
<Checkbox
|
|
120
|
-
aria-labelledby="groupLabel hist101Label"
|
|
121
|
-
label={<span id="hist101Label">History 111</span>}
|
|
122
|
-
value="his111"
|
|
123
|
-
name="courses"
|
|
124
|
-
onChange={(event) => {
|
|
125
|
-
this.updateValue(event.target.value)
|
|
126
|
-
}}
|
|
127
|
-
checked={this.state.value.indexOf('his111') !== -1}
|
|
128
|
-
/>
|
|
129
|
-
</View>
|
|
130
|
-
</FormFieldGroup>
|
|
131
|
-
)
|
|
132
|
-
}
|
|
133
|
-
}
|
|
134
|
-
|
|
135
|
-
render(<Example />)
|
|
136
|
-
```
|
|
137
|
-
|
|
138
|
-
- ```js
|
|
42
|
+
```js
|
|
43
|
+
---
|
|
44
|
+
type: example
|
|
45
|
+
---
|
|
139
46
|
const Example = () => {
|
|
140
47
|
const [value, setValue] = useState(['his111', 'eng203'])
|
|
141
48
|
|
|
@@ -209,7 +116,7 @@ property._
|
|
|
209
116
|
}
|
|
210
117
|
|
|
211
118
|
render(<Example />)
|
|
212
|
-
|
|
119
|
+
```
|
|
213
120
|
|
|
214
121
|
Setting the `variant` prop to `toggle` turns the checkbox into a toggle switch. For **toggle only** the size prop affects the size of the label and not the actual size of the switch.
|
|
215
122
|
|