@instructure/ui-drawer-layout 10.2.1 → 10.2.2-pr-snapshot-1725623316857

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 +8 -0
  2. package/package.json +21 -21
  3. package/src/DrawerLayout/README.md +273 -61
package/CHANGELOG.md CHANGED
@@ -3,6 +3,14 @@
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.2.2-pr-snapshot-1725623316857](https://github.com/instructure/instructure-ui/compare/v10.2.1...v10.2.2-pr-snapshot-1725623316857) (2024-09-06)
7
+
8
+ **Note:** Version bump only for package @instructure/ui-drawer-layout
9
+
10
+
11
+
12
+
13
+
6
14
  ## [10.2.1](https://github.com/instructure/instructure-ui/compare/v10.2.0...v10.2.1) (2024-08-30)
7
15
 
8
16
  **Note:** Version bump only for package @instructure/ui-drawer-layout
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-drawer-layout",
3
- "version": "10.2.1",
3
+ "version": "10.2.2-pr-snapshot-1725623316857",
4
4
  "description": "A main-content-plus-tray layout component",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "module": "./es/index.js",
@@ -24,29 +24,29 @@
24
24
  "license": "MIT",
25
25
  "dependencies": {
26
26
  "@babel/runtime": "^7.24.5",
27
- "@instructure/console": "10.2.1",
28
- "@instructure/debounce": "10.2.1",
29
- "@instructure/emotion": "10.2.1",
30
- "@instructure/shared-types": "10.2.1",
31
- "@instructure/ui-dialog": "10.2.1",
32
- "@instructure/ui-dom-utils": "10.2.1",
33
- "@instructure/ui-i18n": "10.2.1",
34
- "@instructure/ui-motion": "10.2.1",
35
- "@instructure/ui-portal": "10.2.1",
36
- "@instructure/ui-position": "10.2.1",
37
- "@instructure/ui-prop-types": "10.2.1",
38
- "@instructure/ui-react-utils": "10.2.1",
39
- "@instructure/ui-test-utils": "10.2.1",
40
- "@instructure/ui-testable": "10.2.1",
41
- "@instructure/ui-utils": "10.2.1",
42
- "@instructure/ui-view": "10.2.1",
43
- "@instructure/uid": "10.2.1",
27
+ "@instructure/console": "10.2.2-pr-snapshot-1725623316857",
28
+ "@instructure/debounce": "10.2.2-pr-snapshot-1725623316857",
29
+ "@instructure/emotion": "10.2.2-pr-snapshot-1725623316857",
30
+ "@instructure/shared-types": "10.2.2-pr-snapshot-1725623316857",
31
+ "@instructure/ui-dialog": "10.2.2-pr-snapshot-1725623316857",
32
+ "@instructure/ui-dom-utils": "10.2.2-pr-snapshot-1725623316857",
33
+ "@instructure/ui-i18n": "10.2.2-pr-snapshot-1725623316857",
34
+ "@instructure/ui-motion": "10.2.2-pr-snapshot-1725623316857",
35
+ "@instructure/ui-portal": "10.2.2-pr-snapshot-1725623316857",
36
+ "@instructure/ui-position": "10.2.2-pr-snapshot-1725623316857",
37
+ "@instructure/ui-prop-types": "10.2.2-pr-snapshot-1725623316857",
38
+ "@instructure/ui-react-utils": "10.2.2-pr-snapshot-1725623316857",
39
+ "@instructure/ui-test-utils": "10.2.2-pr-snapshot-1725623316857",
40
+ "@instructure/ui-testable": "10.2.2-pr-snapshot-1725623316857",
41
+ "@instructure/ui-utils": "10.2.2-pr-snapshot-1725623316857",
42
+ "@instructure/ui-view": "10.2.2-pr-snapshot-1725623316857",
43
+ "@instructure/uid": "10.2.2-pr-snapshot-1725623316857",
44
44
  "prop-types": "^15.8.1"
45
45
  },
46
46
  "devDependencies": {
47
- "@instructure/ui-babel-preset": "10.2.1",
48
- "@instructure/ui-test-locator": "10.2.1",
49
- "@instructure/ui-themes": "10.2.1"
47
+ "@instructure/ui-babel-preset": "10.2.2-pr-snapshot-1725623316857",
48
+ "@instructure/ui-test-locator": "10.2.2-pr-snapshot-1725623316857",
49
+ "@instructure/ui-themes": "10.2.2-pr-snapshot-1725623316857"
50
50
  },
51
51
  "peerDependencies": {
52
52
  "react": ">=16.8 <=18"
package/src/DrawerLayout/README.md CHANGED
@@ -10,37 +10,116 @@ be configured to overlay the `<DrawerLayout.Content />`
10
10
  The `minWidth` prop specifies a breakpoint. When the `<DrawerLayout.Content />` resizes such that the width is
11
11
  less than the designated `minWidth`, the tray overlays the content
12
12
 
13
- ```js
14
- ---
15
- type: example
16
- ---
17
- class Example extends React.Component {
18
- state = {
19
- open: false,
20
- trayIsOverlayed: false
21
- };
22
- handleOverlayTrayChange = (trayIsOverlayed) => {
23
- this.setState({ trayIsOverlayed })
24
- };
25
- handleTrayDismiss = () => {
26
- this.setState({ open: false })
27
- };
28
- render () {
13
+ - ```js
14
+ class Example extends React.Component {
15
+ state = {
16
+ open: false,
17
+ trayIsOverlayed: false
18
+ }
19
+ handleOverlayTrayChange = (trayIsOverlayed) => {
20
+ this.setState({ trayIsOverlayed })
21
+ }
22
+ handleTrayDismiss = () => {
23
+ this.setState({ open: false })
24
+ }
25
+ render() {
26
+ return (
27
+ <View height="25rem" as="div" background="primary" position="relative">
28
+ {this.state.trayIsOverlayed && this.state.open && (
29
+ <Mask onClick={this.handleTrayDismiss} />
30
+ )}
31
+ <DrawerLayout onOverlayTrayChange={this.handleOverlayTrayChange}>
32
+ <DrawerLayout.Tray
33
+ id="DrawerLayoutTrayExample1"
34
+ open={this.state.open}
35
+ placement="start"
36
+ label="Drawer Tray Start Example"
37
+ onDismiss={this.handleTrayDismiss}
38
+ >
39
+ <View
40
+ as="div"
41
+ maxWidth="16rem"
42
+ textAlign="center"
43
+ margin="large auto"
44
+ padding="small"
45
+ >
46
+ <CloseButton
47
+ placement="end"
48
+ offset="small"
49
+ onClick={this.handleTrayDismiss}
50
+ screenReaderLabel="Close"
51
+ />
52
+ <Avatar name="foo bar" margin="0 0 small 0" />
53
+ <Text as="div" size="x-small">
54
+ Hello from start tray with a small amount of placeholder
55
+ content
56
+ </Text>
57
+ </View>
58
+ </DrawerLayout.Tray>
59
+ <DrawerLayout.Content label="Drawer content example">
60
+ <div style={{ background: 'white', height: '100%' }}>
61
+ <View as="div" padding="x-large">
62
+ <Heading border="bottom">A simple drawer layout</Heading>
63
+ <Grid startAt="medium" vAlign="middle" colSpacing="none">
64
+ <Grid.Row>
65
+ <Grid.Col>
66
+ <Button
67
+ margin="small 0"
68
+ size="small"
69
+ onClick={() => {
70
+ this.setState({ open: true })
71
+ }}
72
+ aria-haspopup={
73
+ this.state.trayIsOverlayed ? 'dialog' : 'region'
74
+ }
75
+ aria-controls="DrawerLayoutTrayExample1"
76
+ >
77
+ Expand tray
78
+ </Button>
79
+ </Grid.Col>
80
+ </Grid.Row>
81
+ </Grid>
82
+ <Text size="x-small">
83
+ <p>{lorem.paragraph()}</p>
84
+ </Text>
85
+ <Text size="x-small">
86
+ <p>{lorem.paragraph()}</p>
87
+ </Text>
88
+ </View>
89
+ </div>
90
+ </DrawerLayout.Content>
91
+ </DrawerLayout>
92
+ </View>
93
+ )
94
+ }
95
+ }
96
+
97
+ render(<Example />)
98
+ ```
99
+
100
+ - ```js
101
+ const Example = () => {
102
+ const [open, setOpen] = useState(false)
103
+ const [trayIsOverlayed, setTrayIsOverlayed] = useState(false)
104
+
105
+ const handleOverlayTrayChange = (trayIsOverlayed) => {
106
+ setTrayIsOverlayed(trayIsOverlayed)
107
+ }
108
+
109
+ const handleTrayDismiss = () => {
110
+ setOpen(false)
111
+ }
112
+
29
113
  return (
30
- <View
31
- height="25rem"
32
- as="div"
33
- background="primary"
34
- position="relative"
35
- >
36
- { this.state.trayIsOverlayed && this.state.open && <Mask onClick={this.handleTrayDismiss} /> }
37
- <DrawerLayout onOverlayTrayChange={this.handleOverlayTrayChange}>
114
+ <View height="25rem" as="div" background="primary" position="relative">
115
+ {trayIsOverlayed && open && <Mask onClick={handleTrayDismiss} />}
116
+ <DrawerLayout onOverlayTrayChange={handleOverlayTrayChange}>
38
117
  <DrawerLayout.Tray
39
118
  id="DrawerLayoutTrayExample1"
40
- open={this.state.open}
119
+ open={open}
41
120
  placement="start"
42
121
  label="Drawer Tray Start Example"
43
- onDismiss={this.handleTrayDismiss}
122
+ onDismiss={handleTrayDismiss}
44
123
  >
45
124
  <View
46
125
  as="div"
@@ -52,7 +131,7 @@ class Example extends React.Component {
52
131
  <CloseButton
53
132
  placement="end"
54
133
  offset="small"
55
- onClick={this.handleTrayDismiss}
134
+ onClick={handleTrayDismiss}
56
135
  screenReaderLabel="Close"
57
136
  />
58
137
  <Avatar name="foo bar" margin="0 0 small 0" />
@@ -62,7 +141,7 @@ class Example extends React.Component {
62
141
  </View>
63
142
  </DrawerLayout.Tray>
64
143
  <DrawerLayout.Content label="Drawer content example">
65
- <div style={{background: 'white', height: '100%'}}>
144
+ <div style={{ background: 'white', height: '100%' }}>
66
145
  <View as="div" padding="x-large">
67
146
  <Heading border="bottom">A simple drawer layout</Heading>
68
147
  <Grid startAt="medium" vAlign="middle" colSpacing="none">
@@ -71,8 +150,10 @@ class Example extends React.Component {
71
150
  <Button
72
151
  margin="small 0"
73
152
  size="small"
74
- onClick={() => { this.setState({ open: true }) }}
75
- aria-haspopup={this.state.trayIsOverlayed ? 'dialog' : 'region'}
153
+ onClick={() => {
154
+ setOpen(true)
155
+ }}
156
+ aria-haspopup={trayIsOverlayed ? 'dialog' : 'region'}
76
157
  aria-controls="DrawerLayoutTrayExample1"
77
158
  >
78
159
  Expand tray
@@ -93,35 +174,160 @@ class Example extends React.Component {
93
174
  </View>
94
175
  )
95
176
  }
96
- }
97
177
 
98
- render(<Example />)
99
- ```
178
+ render(<Example />)
179
+ ```
100
180
 
101
181
  Multiple `<DrawerLayout />` components can be nested in order to place trays on both sides
102
182
 
103
- ```js
104
- ---
105
- type: example
106
- ---
107
- class Example extends React.Component {
108
- state = {
109
- endOpen: false,
110
- startOpen: false
111
- };
112
- render () {
183
+ - ```js
184
+ class Example extends React.Component {
185
+ state = {
186
+ endOpen: false,
187
+ startOpen: false
188
+ }
189
+ render() {
190
+ return (
191
+ <View height="40rem" display="block" background="primary">
192
+ <DrawerLayout>
193
+ <DrawerLayout.Tray
194
+ open={this.state.endOpen}
195
+ placement="end"
196
+ label="Drawer Tray End Example"
197
+ onDismiss={() => {
198
+ this.setState({ endOpen: false })
199
+ }}
200
+ >
201
+ <View
202
+ as="div"
203
+ maxWidth="48rem"
204
+ textAlign="center"
205
+ margin="large auto"
206
+ padding="large"
207
+ >
208
+ <CloseButton
209
+ placement="end"
210
+ offset="small"
211
+ onClick={() => {
212
+ this.setState({ endOpen: false })
213
+ }}
214
+ screenReaderLabel="Close"
215
+ />
216
+ <Text as="div" size="x-small">
217
+ Hello from end tray with a good amount of content as well
218
+ </Text>
219
+ </View>
220
+ </DrawerLayout.Tray>
221
+ <DrawerLayout.Content label="Drawer content example containing another layout">
222
+ <DrawerLayout>
223
+ <DrawerLayout.Tray
224
+ label="Layout Tray Start Example"
225
+ open={this.state.startOpen}
226
+ placement="start"
227
+ onDismiss={() => {
228
+ this.setState({ startOpen: false })
229
+ }}
230
+ >
231
+ <View
232
+ as="div"
233
+ maxWidth="16rem"
234
+ textAlign="center"
235
+ margin="large auto"
236
+ padding="small"
237
+ >
238
+ <CloseButton
239
+ placement="end"
240
+ offset="small"
241
+ onClick={() => {
242
+ this.setState({ startOpen: false })
243
+ }}
244
+ screenReaderLabel="Close"
245
+ />
246
+ <Avatar name="foo bar" margin="0 0 small 0" />
247
+ <Text as="div" size="x-small">
248
+ Hello from start tray with a small amount of placeholder
249
+ content
250
+ </Text>
251
+ </View>
252
+ </DrawerLayout.Tray>
253
+ <DrawerLayout.Content label="Drawer content example containing a responsive ">
254
+ <div style={{ background: 'white', height: '100%' }}>
255
+ <View as="div" padding="x-large">
256
+ <Heading border="bottom">A nested drawer layout</Heading>
257
+ <Grid startAt="medium" vAlign="middle" colSpacing="none">
258
+ <Grid.Row>
259
+ <Grid.Col>
260
+ <Button
261
+ margin="small 0"
262
+ size="small"
263
+ onClick={() => {
264
+ this.setState({ startOpen: true })
265
+ }}
266
+ aria-haspopup="dialog"
267
+ >
268
+ Expand start tray
269
+ </Button>
270
+ </Grid.Col>
271
+ <Grid.Col width="auto">
272
+ <Button
273
+ margin="small 0"
274
+ size="small"
275
+ onClick={() => {
276
+ this.setState({ endOpen: true })
277
+ }}
278
+ aria-haspopup="dialog"
279
+ >
280
+ Expand end tray
281
+ </Button>
282
+ </Grid.Col>
283
+ </Grid.Row>
284
+ <Grid.Row colSpacing="medium">
285
+ <Grid.Col>
286
+ <Img role="img" src={placeholderImage(250, 250)} />
287
+ </Grid.Col>
288
+ <Grid.Col>
289
+ <Img role="img" src={placeholderImage(250, 250)} />
290
+ </Grid.Col>
291
+ <Grid.Col>
292
+ <Img role="img" src={placeholderImage(250, 250)} />
293
+ </Grid.Col>
294
+ </Grid.Row>
295
+ </Grid>
296
+ <Text size="x-small">
297
+ <p>{lorem.paragraph()}</p>
298
+ </Text>
299
+ <Text size="x-small">
300
+ <p>{lorem.paragraph()}</p>
301
+ </Text>
302
+ </View>
303
+ </div>
304
+ </DrawerLayout.Content>
305
+ </DrawerLayout>
306
+ </DrawerLayout.Content>
307
+ </DrawerLayout>
308
+ </View>
309
+ )
310
+ }
311
+ }
312
+
313
+ render(<Example />)
314
+ ```
315
+
316
+ - ```js
317
+ const Example = () => {
318
+ const [endOpen, setEndOpen] = useState(false)
319
+ const [startOpen, setStartOpen] = useState(false)
320
+
113
321
  return (
114
- <View
115
- height="40rem"
116
- display="block"
117
- background="primary"
118
- >
322
+ <View height="40rem" display="block" background="primary">
119
323
  <DrawerLayout>
120
324
  <DrawerLayout.Tray
121
- open={this.state.endOpen}
325
+ open={endOpen}
122
326
  placement="end"
123
327
  label="Drawer Tray End Example"
124
- onDismiss={() => {this.setState({ endOpen: false })}}
328
+ onDismiss={() => {
329
+ setEndOpen(false)
330
+ }}
125
331
  >
126
332
  <View
127
333
  as="div"
@@ -134,7 +340,7 @@ class Example extends React.Component {
134
340
  placement="end"
135
341
  offset="small"
136
342
  onClick={() => {
137
- this.setState({ endOpen: false })
343
+ setEndOpen(false)
138
344
  }}
139
345
  screenReaderLabel="Close"
140
346
  />
@@ -147,9 +353,11 @@ class Example extends React.Component {
147
353
  <DrawerLayout>
148
354
  <DrawerLayout.Tray
149
355
  label="Layout Tray Start Example"
150
- open={this.state.startOpen}
356
+ open={startOpen}
151
357
  placement="start"
152
- onDismiss={() => {this.setState({ startOpen: false })}}
358
+ onDismiss={() => {
359
+ setStartOpen(false)
360
+ }}
153
361
  >
154
362
  <View
155
363
  as="div"
@@ -162,18 +370,19 @@ class Example extends React.Component {
162
370
  placement="end"
163
371
  offset="small"
164
372
  onClick={() => {
165
- this.setState({ startOpen: false })
373
+ setStartOpen(false)
166
374
  }}
167
375
  screenReaderLabel="Close"
168
376
  />
169
377
  <Avatar name="foo bar" margin="0 0 small 0" />
170
378
  <Text as="div" size="x-small">
171
- Hello from start tray with a small amount of placeholder content
379
+ Hello from start tray with a small amount of placeholder
380
+ content
172
381
  </Text>
173
382
  </View>
174
383
  </DrawerLayout.Tray>
175
384
  <DrawerLayout.Content label="Drawer content example containing a responsive ">
176
- <div style={{background: 'white', height: '100%'}}>
385
+ <div style={{ background: 'white', height: '100%' }}>
177
386
  <View as="div" padding="x-large">
178
387
  <Heading border="bottom">A nested drawer layout</Heading>
179
388
  <Grid startAt="medium" vAlign="middle" colSpacing="none">
@@ -182,7 +391,9 @@ class Example extends React.Component {
182
391
  <Button
183
392
  margin="small 0"
184
393
  size="small"
185
- onClick={() => { this.setState({ startOpen: true }) }}
394
+ onClick={() => {
395
+ setStartOpen(true)
396
+ }}
186
397
  aria-haspopup="dialog"
187
398
  >
188
399
  Expand start tray
@@ -192,7 +403,9 @@ class Example extends React.Component {
192
403
  <Button
193
404
  margin="small 0"
194
405
  size="small"
195
- onClick={() => { this.setState({ endOpen: true }) }}
406
+ onClick={() => {
407
+ setEndOpen(true)
408
+ }}
196
409
  aria-haspopup="dialog"
197
410
  >
198
411
  Expand end tray
@@ -226,7 +439,6 @@ class Example extends React.Component {
226
439
  </View>
227
440
  )
228
441
  }
229
- }
230
442
 
231
- render(<Example />)
232
- ```
443
+ render(<Example />)
444
+ ```