@instructure/ui-checkbox 8.50.1-snapshot-2 → 8.50.1-snapshot-14

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 (5) hide show
  1. package/CHANGELOG.md +1 -1
  2. package/package.json +19 -19
  3. package/src/Checkbox/README.md +131 -46
  4. package/src/CheckboxGroup/README.md +6 -5
  5. 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
- ## [8.50.1-snapshot-2](https://github.com/instructure/instructure-ui/compare/v8.50.0...v8.50.1-snapshot-2) (2023-12-06)
6
+ ## [8.50.1-snapshot-14](https://github.com/instructure/instructure-ui/compare/v8.50.0...v8.50.1-snapshot-14) (2023-12-08)
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": "8.50.1-snapshot-2",
3
+ "version": "8.50.1-snapshot-14",
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,28 +24,28 @@
24
24
  "license": "MIT",
25
25
  "dependencies": {
26
26
  "@babel/runtime": "^7.23.2",
27
- "@instructure/console": "8.50.1-snapshot-2",
28
- "@instructure/emotion": "8.50.1-snapshot-2",
29
- "@instructure/shared-types": "8.50.1-snapshot-2",
30
- "@instructure/ui-dom-utils": "8.50.1-snapshot-2",
31
- "@instructure/ui-form-field": "8.50.1-snapshot-2",
32
- "@instructure/ui-icons": "8.50.1-snapshot-2",
33
- "@instructure/ui-prop-types": "8.50.1-snapshot-2",
34
- "@instructure/ui-react-utils": "8.50.1-snapshot-2",
35
- "@instructure/ui-svg-images": "8.50.1-snapshot-2",
36
- "@instructure/ui-testable": "8.50.1-snapshot-2",
37
- "@instructure/ui-utils": "8.50.1-snapshot-2",
38
- "@instructure/ui-view": "8.50.1-snapshot-2",
39
- "@instructure/uid": "8.50.1-snapshot-2",
27
+ "@instructure/console": "8.50.1-snapshot-14",
28
+ "@instructure/emotion": "8.50.1-snapshot-14",
29
+ "@instructure/shared-types": "8.50.1-snapshot-14",
30
+ "@instructure/ui-dom-utils": "8.50.1-snapshot-14",
31
+ "@instructure/ui-form-field": "8.50.1-snapshot-14",
32
+ "@instructure/ui-icons": "8.50.1-snapshot-14",
33
+ "@instructure/ui-prop-types": "8.50.1-snapshot-14",
34
+ "@instructure/ui-react-utils": "8.50.1-snapshot-14",
35
+ "@instructure/ui-svg-images": "8.50.1-snapshot-14",
36
+ "@instructure/ui-testable": "8.50.1-snapshot-14",
37
+ "@instructure/ui-utils": "8.50.1-snapshot-14",
38
+ "@instructure/ui-view": "8.50.1-snapshot-14",
39
+ "@instructure/uid": "8.50.1-snapshot-14",
40
40
  "keycode": "^2.2.1",
41
41
  "prop-types": "^15.8.1"
42
42
  },
43
43
  "devDependencies": {
44
- "@instructure/ui-axe-check": "8.50.1-snapshot-2",
45
- "@instructure/ui-babel-preset": "8.50.1-snapshot-2",
46
- "@instructure/ui-color-utils": "8.50.1-snapshot-2",
47
- "@instructure/ui-test-utils": "8.50.1-snapshot-2",
48
- "@instructure/ui-themes": "8.50.1-snapshot-2",
44
+ "@instructure/ui-axe-check": "8.50.1-snapshot-14",
45
+ "@instructure/ui-babel-preset": "8.50.1-snapshot-14",
46
+ "@instructure/ui-color-utils": "8.50.1-snapshot-14",
47
+ "@instructure/ui-test-utils": "8.50.1-snapshot-14",
48
+ "@instructure/ui-themes": "8.50.1-snapshot-14",
49
49
  "@testing-library/jest-dom": "^6.1.4",
50
50
  "@testing-library/react": "^14.0.0",
51
51
  "@testing-library/user-event": "^14.5.1"
package/src/Checkbox/README.md CHANGED
@@ -10,7 +10,7 @@ Adjust the size of the checkbox and label text via the `size` prop. The default
10
10
 
11
11
  ```js
12
12
  ---
13
- example: true
13
+ type: example
14
14
  ---
15
15
  <Checkbox label={lorem.sentence()} value="medium" defaultChecked />
16
16
  ```
@@ -19,7 +19,7 @@ The default Checkbox in its disabled state:
19
19
 
20
20
  ```js
21
21
  ---
22
- example: true
22
+ type: example
23
23
  ---
24
24
  <CheckboxGroup
25
25
  defaultValue={['medium']}
@@ -36,36 +36,119 @@ situations where "child" Checkboxes are neither all checked nor all
36
36
  unchecked. Note the use of `aria-labelledby` to make the relationship
37
37
  between the parent and child Checkboxes clear to screenreader users.
38
38
 
39
- *Note: the `toggle` variant does not support the `indeterminate`
40
- property.*
39
+ _Note: the `toggle` variant does not support the `indeterminate`
40
+ property._
41
41
 
42
- ```js
43
- ---
44
- render: false
45
- example: true
46
- ---
47
- class Example extends React.Component {
48
- constructor (props) {
49
- super(props)
42
+ - ```js
43
+ class Example extends React.Component {
44
+ constructor(props) {
45
+ super(props)
50
46
 
51
- this.state = {
52
- value: ['his111', 'eng203']
47
+ this.state = {
48
+ value: ['his111', 'eng203']
49
+ }
53
50
  }
54
- }
55
51
 
56
- updateValue (value) {
57
- const index = this.state.value.indexOf(value)
52
+ updateValue(value) {
53
+ const index = this.state.value.indexOf(value)
58
54
 
59
- if (index === -1) {
60
- this.setState({ value: [...this.state.value, value] })
61
- } else {
62
- this.setState((prevState) => ({
63
- value: [...prevState.value.slice(0, index), ...prevState.value.slice(index + 1)]
64
- }))
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
+ )
65
132
  }
66
133
  }
67
134
 
68
- render () {
135
+ render(<Example />)
136
+ ```
137
+
138
+ - ```js
139
+ const Example = () => {
140
+ const [value, setValue] = useState(['his111', 'eng203'])
141
+
142
+ const updateValue = (valueToUpdate) => {
143
+ const index = value.indexOf(valueToUpdate)
144
+ console.log(index)
145
+ if (index === -1) {
146
+ setValue([...value, valueToUpdate])
147
+ } else {
148
+ setValue([...value.slice(0, index), ...value.slice(index + 1)])
149
+ }
150
+ }
151
+
69
152
  return (
70
153
  <FormFieldGroup
71
154
  description={
@@ -79,11 +162,11 @@ class Example extends React.Component {
79
162
  aria-labelledby="groupLabel selectAllLabel"
80
163
  label={<span id="selectAllLabel">Select all courses</span>}
81
164
  value="all"
82
- onChange={() => this.setState({
83
- value: this.state.value.length === 3 ? [] : ['eng203', 'sci101', 'his111']
84
- })}
85
- checked={this.state.value.length === 3}
86
- indeterminate={this.state.value.length > 0 && this.state.value.length < 3}
165
+ onChange={() =>
166
+ setValue(value.length === 3 ? [] : ['eng203', 'sci101', 'his111'])
167
+ }
168
+ checked={value.length === 3}
169
+ indeterminate={value.length > 0 && value.length < 3}
87
170
  />
88
171
  <View as="div" padding="0 0 0 medium">
89
172
  <Checkbox
@@ -91,8 +174,10 @@ class Example extends React.Component {
91
174
  label={<span id="eng203Label">English 203</span>}
92
175
  value="eng203"
93
176
  name="courses"
94
- onChange={(event) => { this.updateValue(event.target.value) }}
95
- checked={this.state.value.indexOf('eng203') !== -1}
177
+ onChange={(event) => {
178
+ updateValue(event.target.value)
179
+ }}
180
+ checked={value.indexOf('eng203') !== -1}
96
181
  />
97
182
  </View>
98
183
  <View as="div" padding="0 0 0 medium">
@@ -102,9 +187,9 @@ class Example extends React.Component {
102
187
  value="sci101"
103
188
  name="courses"
104
189
  onChange={(event) => {
105
- this.updateValue(event.target.value)
190
+ updateValue(event.target.value)
106
191
  }}
107
- checked={this.state.value.indexOf('sci101') !== -1}
192
+ checked={value.indexOf('sci101') !== -1}
108
193
  />
109
194
  </View>
110
195
  <View as="div" padding="0 0 0 medium">
@@ -114,24 +199,23 @@ class Example extends React.Component {
114
199
  value="his111"
115
200
  name="courses"
116
201
  onChange={(event) => {
117
- this.updateValue(event.target.value)
202
+ updateValue(event.target.value)
118
203
  }}
119
- checked={this.state.value.indexOf('his111') !== -1}
204
+ checked={value.indexOf('his111') !== -1}
120
205
  />
121
206
  </View>
122
207
  </FormFieldGroup>
123
208
  )
124
209
  }
125
- }
126
210
 
127
- render(<Example />)
128
- ```
211
+ render(<Example />)
212
+ ```
129
213
 
130
- 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.
214
+ 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.
131
215
 
132
216
  ```js
133
217
  ---
134
- example: true
218
+ type: example
135
219
  ---
136
220
  <FormFieldGroup description={<ScreenReaderContent>Checkbox examples</ScreenReaderContent>}>
137
221
  <Checkbox label="Small size" value="small" variant="toggle" size="small" defaultChecked />
@@ -140,15 +224,15 @@ example: true
140
224
  </FormFieldGroup>
141
225
  ```
142
226
 
143
- To change the label placement for the toggle variety, use the labelPlacement prop. The default
227
+ To change the label placement for the toggle variety, use the labelPlacement prop. The default
144
228
  placement is 'end'.
145
229
 
146
- *Note: the `simple` variant does not support the `labelPlacement`
147
- property.*
230
+ _Note: the `simple` variant does not support the `labelPlacement`
231
+ property._
148
232
 
149
233
  ```js
150
234
  ---
151
- example: true
235
+ type: example
152
236
  ---
153
237
  <FormFieldGroup description={<ScreenReaderContent>Toggle label examples</ScreenReaderContent>}>
154
238
  <Checkbox label="Top" variant="toggle" labelPlacement="top" defaultChecked />
@@ -162,7 +246,7 @@ the text in the [ScreenReaderContent](#ScreenReaderContent) component.
162
246
 
163
247
  ```js
164
248
  ---
165
- example: true
249
+ type: example
166
250
  ---
167
251
  <Checkbox
168
252
  label={<ScreenReaderContent>Screenreader-accessible label</ScreenReaderContent>}
@@ -170,11 +254,12 @@ example: true
170
254
  variant="toggle"
171
255
  />
172
256
  ```
257
+
173
258
  ### Guidelines
174
259
 
175
260
  ```js
176
261
  ---
177
- guidelines: true
262
+ type: embed
178
263
  ---
179
264
  <Guidelines>
180
265
  <Figure recommendation="yes" title="Do">
package/src/CheckboxGroup/README.md CHANGED
@@ -8,7 +8,7 @@ The Checkbox components can be rendered vertically or horizontally using the `la
8
8
 
9
9
  ```js
10
10
  ---
11
- example: true
11
+ type: example
12
12
  ---
13
13
  <FormFieldGroup description={<ScreenReaderContent>CheckboxGroup examples</ScreenReaderContent>}>
14
14
  <CheckboxGroup name="sports"
@@ -39,7 +39,7 @@ The `toggle` variant with `layout` prop set to `inline` and an error message:
39
39
 
40
40
  ```js
41
41
  ---
42
- example: true
42
+ type: example
43
43
  ---
44
44
  <CheckboxGroup
45
45
  name="sports2"
@@ -64,7 +64,7 @@ A `disabled` CheckboxGroup:
64
64
 
65
65
  ```js
66
66
  ---
67
- example: true
67
+ type: example
68
68
  ---
69
69
  <CheckboxGroup
70
70
  name="sports4"
@@ -79,11 +79,12 @@ example: true
79
79
  <Checkbox label="Soccer" value="soccer" variant="toggle" />
80
80
  </CheckboxGroup>
81
81
  ```
82
+
82
83
  ### Guidelines
83
84
 
84
85
  ```js
85
86
  ---
86
- guidelines: true
87
+ type: embed
87
88
  ---
88
89
  <Guidelines>
89
90
  <Figure recommendation="yes" title="Do">
@@ -100,7 +101,7 @@ guidelines: true
100
101
 
101
102
  ```js
102
103
  ---
103
- guidelines: true
104
+ type: embed
104
105
  ---
105
106
  <Guidelines>
106
107
  <Figure recommendation="a11y" title="Accessibility">