@instructure/ui-tray 10.0.1-snapshot-11 → 10.0.1-snapshot-13

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 (3) hide show
  1. package/CHANGELOG.md +1 -1
  2. package/package.json +18 -18
  3. package/src/Tray/README.md +85 -33
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
- ## [10.0.1-snapshot-11](https://github.com/instructure/instructure-ui/compare/v10.0.0...v10.0.1-snapshot-11) (2024-08-14)
6
+ ## [10.0.1-snapshot-13](https://github.com/instructure/instructure-ui/compare/v10.0.0...v10.0.1-snapshot-13) (2024-08-21)
7
7
 
8
8
  **Note:** Version bump only for package @instructure/ui-tray
9
9
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-tray",
3
- "version": "10.0.1-snapshot-11",
3
+ "version": "10.0.1-snapshot-13",
4
4
  "description": "Tray component for secondary/menu content",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "module": "./es/index.js",
@@ -24,26 +24,26 @@
24
24
  "license": "MIT",
25
25
  "dependencies": {
26
26
  "@babel/runtime": "^7.24.5",
27
- "@instructure/console": "10.0.1-snapshot-11",
28
- "@instructure/emotion": "10.0.1-snapshot-11",
29
- "@instructure/shared-types": "10.0.1-snapshot-11",
30
- "@instructure/ui-dialog": "10.0.1-snapshot-11",
31
- "@instructure/ui-i18n": "10.0.1-snapshot-11",
32
- "@instructure/ui-motion": "10.0.1-snapshot-11",
33
- "@instructure/ui-overlays": "10.0.1-snapshot-11",
34
- "@instructure/ui-portal": "10.0.1-snapshot-11",
35
- "@instructure/ui-position": "10.0.1-snapshot-11",
36
- "@instructure/ui-prop-types": "10.0.1-snapshot-11",
37
- "@instructure/ui-react-utils": "10.0.1-snapshot-11",
38
- "@instructure/ui-testable": "10.0.1-snapshot-11",
39
- "@instructure/ui-utils": "10.0.1-snapshot-11",
27
+ "@instructure/console": "10.0.1-snapshot-13",
28
+ "@instructure/emotion": "10.0.1-snapshot-13",
29
+ "@instructure/shared-types": "10.0.1-snapshot-13",
30
+ "@instructure/ui-dialog": "10.0.1-snapshot-13",
31
+ "@instructure/ui-i18n": "10.0.1-snapshot-13",
32
+ "@instructure/ui-motion": "10.0.1-snapshot-13",
33
+ "@instructure/ui-overlays": "10.0.1-snapshot-13",
34
+ "@instructure/ui-portal": "10.0.1-snapshot-13",
35
+ "@instructure/ui-position": "10.0.1-snapshot-13",
36
+ "@instructure/ui-prop-types": "10.0.1-snapshot-13",
37
+ "@instructure/ui-react-utils": "10.0.1-snapshot-13",
38
+ "@instructure/ui-testable": "10.0.1-snapshot-13",
39
+ "@instructure/ui-utils": "10.0.1-snapshot-13",
40
40
  "prop-types": "^15.8.1"
41
41
  },
42
42
  "devDependencies": {
43
- "@instructure/ui-babel-preset": "10.0.1-snapshot-11",
44
- "@instructure/ui-test-locator": "10.0.1-snapshot-11",
45
- "@instructure/ui-test-utils": "10.0.1-snapshot-11",
46
- "@instructure/ui-themes": "10.0.1-snapshot-11"
43
+ "@instructure/ui-babel-preset": "10.0.1-snapshot-13",
44
+ "@instructure/ui-test-locator": "10.0.1-snapshot-13",
45
+ "@instructure/ui-test-utils": "10.0.1-snapshot-13",
46
+ "@instructure/ui-themes": "10.0.1-snapshot-13"
47
47
  },
48
48
  "peerDependencies": {
49
49
  "react": ">=16.8 <=18"
package/src/Tray/README.md CHANGED
@@ -6,27 +6,85 @@ The Tray is an actionable container that is triggered by click and does not need
6
6
 
7
7
  > Note that the `size` property only applies when the Tray is positioned at `start` or `end` and defines the width of the Tray.
8
8
 
9
- ```js
10
- ---
11
- type: example
12
- ---
13
- const FPO = lorem.paragraph()
14
- class Example extends React.Component {
15
- constructor (props) {
16
- super(props)
17
- this.state = {
18
- open: false
9
+ - ```js
10
+ const FPO = lorem.paragraph()
11
+ class Example extends React.Component {
12
+ constructor(props) {
13
+ super(props)
14
+ this.state = {
15
+ open: false
16
+ }
19
17
  }
20
- }
21
18
 
22
- hideTray = () => {
23
- this.setState({
24
- open: false
25
- })
19
+ hideTray = () => {
20
+ this.setState({
21
+ open: false
22
+ })
23
+ }
24
+
25
+ renderCloseButton() {
26
+ return (
27
+ <Flex>
28
+ <Flex.Item shouldGrow shouldShrink>
29
+ <Heading>Hello</Heading>
30
+ </Flex.Item>
31
+ <Flex.Item>
32
+ <CloseButton
33
+ placement="end"
34
+ offset="small"
35
+ screenReaderLabel="Close"
36
+ onClick={this.hideTray}
37
+ />
38
+ </Flex.Item>
39
+ </Flex>
40
+ )
41
+ }
42
+
43
+ render() {
44
+ return (
45
+ <div style={{ padding: '0 0 16rem 0', margin: '0 auto' }}>
46
+ <Button
47
+ onClick={() => {
48
+ this.setState({ open: true })
49
+ }}
50
+ >
51
+ Show the Tray
52
+ </Button>
53
+ <Tray
54
+ label="Tray Example"
55
+ open={this.state.open}
56
+ onDismiss={() => {
57
+ this.setState({ open: false })
58
+ }}
59
+ size="small"
60
+ placement="start"
61
+ >
62
+ <View as="div" padding="medium">
63
+ {this.renderCloseButton()}
64
+ <Text as="p" lineHeight="double">
65
+ {FPO}
66
+ </Text>
67
+ </View>
68
+ </Tray>
69
+ </div>
70
+ )
71
+ }
26
72
  }
27
73
 
28
- renderCloseButton () {
29
- return (
74
+ render(<Example />)
75
+ ```
76
+
77
+ - ```js
78
+ const FPO = lorem.paragraph()
79
+
80
+ const Example = () => {
81
+ const [open, setOpen] = useState(false)
82
+
83
+ const hideTray = () => {
84
+ setOpen(false)
85
+ }
86
+
87
+ const renderCloseButton = () => (
30
88
  <Flex>
31
89
  <Flex.Item shouldGrow shouldShrink>
32
90
  <Heading>Hello</Heading>
@@ -36,41 +94,35 @@ class Example extends React.Component {
36
94
  placement="end"
37
95
  offset="small"
38
96
  screenReaderLabel="Close"
39
- onClick={this.hideTray}
97
+ onClick={hideTray}
40
98
  />
41
99
  </Flex.Item>
42
100
  </Flex>
43
101
  )
44
- }
45
102
 
46
- render () {
47
103
  return (
48
104
  <div style={{ padding: '0 0 16rem 0', margin: '0 auto' }}>
49
- <Button
50
- onClick={() => { this.setState({ open: true }) }}
51
- ref={(c) => this._showButton = c}
52
- >
53
- Show the Tray
54
- </Button>
105
+ <Button onClick={() => setOpen(true)}>Show the Tray</Button>
55
106
  <Tray
56
107
  label="Tray Example"
57
- open={this.state.open}
58
- onDismiss={() => { this.setState({ open: false }) }}
108
+ open={open}
109
+ onDismiss={() => setOpen(false)}
59
110
  size="small"
60
111
  placement="start"
61
112
  >
62
113
  <View as="div" padding="medium">
63
- {this.renderCloseButton()}
64
- <Text as="p" lineHeight="double">{FPO}</Text>
114
+ {renderCloseButton()}
115
+ <Text as="p" lineHeight="double">
116
+ {FPO}
117
+ </Text>
65
118
  </View>
66
119
  </Tray>
67
120
  </div>
68
121
  )
69
122
  }
70
- }
71
123
 
72
- render(<Example />)
73
- ```
124
+ render(<Example />)
125
+ ```
74
126
 
75
127
  ### Guidelines
76
128