@instructure/ui-toggle-details 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.
Files changed (4) hide show
  1. package/CHANGELOG.md +1 -1
  2. package/package.json +16 -16
  3. package/src/ToggleDetails/README.md +34 -67
  4. 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-0](https://github.com/instructure/instructure-ui/compare/v11.0.0...v11.0.1-snapshot-0) (2025-10-07)
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-toggle-details
9
9
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-toggle-details",
3
- "version": "11.0.1-snapshot-0",
3
+ "version": "11.0.1-snapshot-2",
4
4
  "description": "A styled toggleable, accordion-like component.",
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.1-snapshot-0",
27
- "@instructure/ui-babel-preset": "11.0.1-snapshot-0",
28
- "@instructure/ui-themes": "11.0.1-snapshot-0",
26
+ "@instructure/ui-axe-check": "11.0.1-snapshot-2",
27
+ "@instructure/ui-babel-preset": "11.0.1-snapshot-2",
28
+ "@instructure/ui-themes": "11.0.1-snapshot-2",
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,18 +33,18 @@
33
33
  },
34
34
  "dependencies": {
35
35
  "@babel/runtime": "^7.27.6",
36
- "@instructure/emotion": "11.0.1-snapshot-0",
37
- "@instructure/shared-types": "11.0.1-snapshot-0",
38
- "@instructure/ui-buttons": "11.0.1-snapshot-0",
39
- "@instructure/ui-dom-utils": "11.0.1-snapshot-0",
40
- "@instructure/ui-expandable": "11.0.1-snapshot-0",
41
- "@instructure/ui-flex": "11.0.1-snapshot-0",
42
- "@instructure/ui-icons": "11.0.1-snapshot-0",
43
- "@instructure/ui-motion": "11.0.1-snapshot-0",
44
- "@instructure/ui-react-utils": "11.0.1-snapshot-0",
45
- "@instructure/ui-utils": "11.0.1-snapshot-0",
46
- "@instructure/ui-view": "11.0.1-snapshot-0",
47
- "@instructure/uid": "11.0.1-snapshot-0"
36
+ "@instructure/emotion": "11.0.1-snapshot-2",
37
+ "@instructure/shared-types": "11.0.1-snapshot-2",
38
+ "@instructure/ui-buttons": "11.0.1-snapshot-2",
39
+ "@instructure/ui-dom-utils": "11.0.1-snapshot-2",
40
+ "@instructure/ui-expandable": "11.0.1-snapshot-2",
41
+ "@instructure/ui-flex": "11.0.1-snapshot-2",
42
+ "@instructure/ui-icons": "11.0.1-snapshot-2",
43
+ "@instructure/ui-motion": "11.0.1-snapshot-2",
44
+ "@instructure/ui-react-utils": "11.0.1-snapshot-2",
45
+ "@instructure/ui-utils": "11.0.1-snapshot-2",
46
+ "@instructure/ui-view": "11.0.1-snapshot-2",
47
+ "@instructure/uid": "11.0.1-snapshot-2"
48
48
  },
49
49
  "peerDependencies": {
50
50
  "react": ">=18 <=19"
package/src/ToggleDetails/README.md CHANGED
@@ -20,77 +20,44 @@ type: example
20
20
 
21
21
  ToggleDetails can be controlled:
22
22
 
23
- - ```js
24
- class Example extends React.Component {
25
- state = {
26
- expanded: true
27
- }
28
-
29
- handleChange = (event, expanded) => this.setState({ expanded })
30
-
31
- handleToggle = () => this.setState({ expanded: !this.state.expanded })
32
-
33
- render() {
34
- return (
35
- <div>
36
- <Button onClick={this.handleToggle}>
37
- <div aria-live="polite">
38
- This Button {this.state.expanded ? 'Collapses' : 'Expands'}
39
- </div>
40
- </Button>
41
- <br />
42
- <br />
43
- <ToggleDetails
44
- summary="Click to hide me!"
45
- expanded={this.state.expanded}
46
- onToggle={this.handleChange}
47
- >
48
- <Text weight="bold">I am controlled and expanded!</Text>{' '}
49
- {lorem.paragraph()}
50
- </ToggleDetails>
51
- </div>
52
- )
53
- }
54
- }
55
-
56
- render(<Example />)
57
- ```
58
-
59
- - ```js
60
- const Example = () => {
61
- const [expanded, setExpanded] = useState(true)
62
-
63
- const handleChange = (event, expanded) => {
64
- setExpanded(expanded)
65
- }
23
+ ```js
24
+ ---
25
+ type: example
26
+ ---
27
+ const Example = () => {
28
+ const [expanded, setExpanded] = useState(true)
66
29
 
67
- const handleToggle = () => {
68
- setExpanded((prevExpanded) => !prevExpanded)
69
- }
30
+ const handleChange = (event, expanded) => {
31
+ setExpanded(expanded)
32
+ }
70
33
 
71
- return (
72
- <div>
73
- <Button onClick={handleToggle}>
74
- <div aria-live="polite">
75
- This Button {expanded ? 'Collapses' : 'Expands'}
76
- </div>
77
- </Button>
78
- <br />
79
- <br />
80
- <ToggleDetails
81
- summary="Click to hide me!"
82
- expanded={expanded}
83
- onToggle={handleChange}
84
- >
85
- <Text weight="bold">I am controlled and expanded!</Text>
86
- {lorem.paragraph()}
87
- </ToggleDetails>
88
- </div>
89
- )
34
+ const handleToggle = () => {
35
+ setExpanded((prevExpanded) => !prevExpanded)
90
36
  }
91
37
 
92
- render(<Example />)
93
- ```
38
+ return (
39
+ <div>
40
+ <Button onClick={handleToggle}>
41
+ <div aria-live="polite">
42
+ This Button {expanded ? 'Collapses' : 'Expands'}
43
+ </div>
44
+ </Button>
45
+ <br />
46
+ <br />
47
+ <ToggleDetails
48
+ summary="Click to hide me!"
49
+ expanded={expanded}
50
+ onToggle={handleChange}
51
+ >
52
+ <Text weight="bold">I am controlled and expanded!</Text>
53
+ {lorem.paragraph()}
54
+ </ToggleDetails>
55
+ </div>
56
+ )
57
+ }
58
+
59
+ render(<Example />)
60
+ ```
94
61
 
95
62
  Setting ToggleDetails to `filled` will make the toggle use a full-width [Button](#Button) component.
96
63